How to use the csx.important function in csx

export const pointerEvents = (value: PointerEventsProperty = "none") => {
    return {
        pointerEvents: important(value),
    };
};

export const autoFillReset = (fg: ColorValues, bg: ColorValues) => {
    return {
        "&&&:-webkit-autofill, &&&&:-webkit-autofill:hover, &&&&:-webkit-autofill:focus": {
            ["-webkit-text-fill-color"]: important(colorOut(fg) as string),
            ["-webkit-box-shadow"]: important(`0 0 0px 1000px ${colorOut(bg)} inset`),
            ["transition"]: important(`background-color 5000s ease-in-out 0s`),
        },
        "&&&:-webkit-autofill": {
            fontSize: important("inherit"),
        },
    };
};

export function srOnly() {
    return {
        position: important("absolute"),
        display: important("block"),
        width: important(px(1).toString()),
        height: important(px(1).toString()),
        padding: important(px(0).toString()),
        margin: important(px(-1).toString()),
        overflow: important("hidden"),
        clip: important(`rect(0, 0, 0, 0)`),
        border: important(px(0).toString()),
    };
}

export const buttonResetMixin = (): NestedCSSProperties => ({
    ...userSelect(),
    "-webkit-appearance": "none",
    appearance: "none",
    border: 0,
    padding: 0,
    background: "none",
    cursor: "pointer",
    color: "inherit",
    textDecoration: important("none"),
});

export const userSelect = (value: UserSelectProperty = "none", isImportant: boolean = false) => {
    const val = (isImportant ? important(value) : value) as any;
    return {
        "-webkit-user-select": val,
        "-moz-user-select": val,
        "-ms-user-select": val,
        userSelect: val,
    };
};