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

// local files
import { Theme } from "../../../theme";

export const useStyles = createUseStyles({
    root: {
        borderRadius: '.5rem',
        transition: 'background-color .3s, color .3s',
        background: ({ theme: { palette } }: Theme) => palette.light,
        color: ({ theme: { palette } }) => palette.black,
    },
    rootSelected: {
        background: ({ theme: { palette } }) => palette.primary,
        color: () => "#ffffff",

        '&:active': {
            boxShadow: ({ theme: {palette} }) => palette.boxShadow
        }
    }
})
