import {} from "react-select";
import {} from "./types";
export const reactSelectCustomStyles = (error, size, multiSelect) => {
    return {
        container: (base) => (Object.assign(Object.assign({}, base), { display: "flex", flexDirection: "column", gap: "0.5rem" })),
        control: (base, state) => (Object.assign(Object.assign({}, base), { display: "flex", alignItems: "center", gap: "0.5rem", borderRadius: "0.5rem", padding: size === "md" ? "0.2rem 0.75rem" : "0.2rem 1rem", "&:hover": {
                borderColor: "inherit"
            }, boxShadow: state.isFocused
                ? error
                    ? "0px 0px 2px 2px #F1AE9D"
                    : "0px 0px 2px 2px #99CBFA"
                : base.boxShadow, borderColor: error
                ? "rgb(var(--error-500))"
                : state.isFocused
                    ? "rgb(var(--primary-500))"
                    : "rgb(var(--gray-200))", backgroundColor: state.isDisabled
                ? "rgb(var(--gray-50))"
                : base.backgroundColor, "&:disabled": {
                color: "rgb(var(--secondary-200))"
            }, 
            // Dark mode styles
            ".dark &": {
                backgroundColor: state.isDisabled
                    ? "rgb(var(--secondary-800))"
                    : "rgb(var(--iridium))",
                boxShadow: state.isFocused
                    ? error
                        ? "0px 0px 2px 2px #F38176"
                        : "0px 0px 2px 2px #99CBFA"
                    : base.boxShadow,
                borderColor: error
                    ? "rgb(var(--error-400))"
                    : "rgb(var(--secondary-500))",
                "&:disabled": {
                    color: "rgb(var(--secondary-300))"
                },
                color: "rgb(var(--secondary-400))"
            } })),
        menu: (base) => (Object.assign(Object.assign({}, base), { boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)", borderRadius: "0.5rem", overflow: "hidden", border: "1px solid rgb(var(--secondary-50))", 
            // Dark mode styles
            ".dark &": {
                borderColor: "rgb(var(--secondary-500))"
            } })),
        menuList: (base) => (Object.assign(Object.assign({}, base), { padding: 0 })),
        menuPortal: (base) => (Object.assign(Object.assign({}, base), { zIndex: 2020 })),
        option: (base, state) => (Object.assign(Object.assign(Object.assign({}, base), (multiSelect ? { display: "flex", alignItems: "center" } : {})), { color: "rgb(var(--secondary-500))", fontWeight: "normal", padding: "0.625rem 1rem", transition: "200ms ease-in-out", position: "relative", backgroundColor: state.isSelected || state.isFocused
                ? "rgb(var(--secondary-50))"
                : base.backgroundColor, "&:active": {
                backgroundColor: "rgb(var(--secondary-50))"
            }, "&:after": state.isSelected && !multiSelect
                ? {
                    content: "\"\"",
                    position: "absolute",
                    height: "8px",
                    width: "16px",
                    transform: "rotate(-45deg)",
                    border: "2px solid rgb(var(--secondary-500))",
                    right: "1rem",
                    top: "35%",
                    borderTop: 0,
                    borderRight: 0
                }
                : {}, 
            // Dark mode styles
            ".dark &": {
                color: "rgb(var(--secondary-200))",
                backgroundColor: state.isSelected || state.isFocused
                    ? "rgb(var(--secondary-800))"
                    : "rgb(var(--iridium))",
                "&:after": state.isSelected && !multiSelect
                    ? {
                        content: "\"\"",
                        position: "absolute",
                        height: "8px",
                        width: "16px",
                        transform: "rotate(-45deg)",
                        border: "2px solid rgb(var(--gray-800))",
                        right: "1rem",
                        top: "35%",
                        borderTop: 0,
                        borderRight: 0
                    }
                    : {}
            } })),
        valueContainer: (base) => (Object.assign(Object.assign({}, base), { padding: 0 })),
        multiValue: (base, state) => (Object.assign(Object.assign({}, base), { margin: "0 0.5rem 0 0", backgroundColor: state.isDisabled
                ? "rgb(var(--gray-100))"
                : "rgb(var(--gray-50))", color: state.isDisabled
                ? "rgb(var(--secondary-300))"
                : "rgb(var(--secondary-500))", ".dark &": {
                backgroundColor: "rgb(var(--secondary-600))",
                color: state.isDisabled
                    ? "rgb(var(--secondary-400))"
                    : "rgb(var(--secondary-200))"
            } })),
        multiValueLabel: (base, state) => (Object.assign(Object.assign({}, base), { padding: "0.25rem", fontSize: size === "md" ? "0.875rem" : "1rem", color: state.isDisabled
                ? "rgb(var(--secondary-300))"
                : "rgb(var(--secondary-500))", ".dark &": {
                color: state.isDisabled
                    ? "rgb(var(--secondary-400))"
                    : "rgb(var(--secondary-200))"
            } })),
        multiValueRemove: (base, state) => (Object.assign(Object.assign({}, base), { padding: "0.25rem", paddingLeft: 0, display: state.data.isFixed ? "none" : "flex", alignItems: "center", justifyContent: "center", marginStart: "-0.5rem", "&:hover": {
                backgroundColor: "transparent",
                color: "inherit"
            } })),
        input: (base) => (Object.assign(Object.assign({}, base), { margin: 0, padding: 0, fontSize: size === "md" ? "0.875rem" : "1rem", color: "rgb(var(--secondary-500))", ".dark &": { color: "rgb(var(--secondary-200))" } })),
        singleValue: (base, state) => (Object.assign(Object.assign({}, base), { margin: 0, fontSize: size === "md" ? "0.875rem" : "1rem", color: state.isDisabled
                ? "rgb(var(--secondary-300))"
                : "rgb(var(--secondary-500))", ".dark &": {
                color: state.isDisabled
                    ? "rgb(var(--secondary-400))"
                    : "rgb(var(--secondary-200))"
            } })),
        placeholder: (base) => (Object.assign(Object.assign({}, base), { fontSize: size === "md" ? "0.875rem" : "1rem", color: "rgb(var(--secondary-200))", ".dark &": { color: "rgb(var(--secondary-400))" } }))
    };
};
//# sourceMappingURL=utils.js.map