// node modules
import { createUseStyles } from "react-jss";

// local files
import { Theme } from '../../theme';
import { alignment } from "../../theme/alignment";
import {
    labelClassName,
    labelWrapperRoot,
    inputSelectCommonStylesProps,
    activeLabelClassName,
    disabled,
    errorClass
} from "../../theme/common";
import SFProText from '../../assets/fonts/SF-Pro-Text-Regular.otf';


export const useStyles = createUseStyles({
    '@font-face': {
        fontFamily: "SF Pro Text",
        src: `url('${SFProText}') format("opentype")`
    },
    root: {
        ...labelWrapperRoot,
        height: 45,
    },
    labelClass: {
        ...labelClassName
    },
    selectClass: {
        ...inputSelectCommonStylesProps,
        color: 'transparent',
        transition: 'color .5s ease-out .2s',
        paddingRight: 30,
        fontFamily: "SF Pro Text"
    },
    active: {
        ...activeLabelClassName
    },
    activeSelect: {
        color: ({ theme: { palette } } :Theme) => palette.black
    },
    arrowWrapper: {
        ...alignment.center,
        position: 'absolute',
        right: 4,
        height: 23,
        width: 30,
        top: '50%',
        transform: 'translate(0, -50%)',
        zIndex: -1
    },
    disabledClass: {
        ...disabled
    },
    errorClass: {
        ...errorClass
    },
    hideFirstOption: {
        display: "none"
    }

})
