import {css} from '@mui/material/styles';

const sm = {
    'MuiSwitch-root': css`
        width: 36px;
        height: 20px;
    `,
    'MuiSwitch-thumb': css`
        width: 16px;
        height: 16px;
    `,
    'Mui-checked': css`
        transform: translateX(15px);
    `,
    content: css`
        margin-inline-start: 8px;
    `,
    title: css`
        font-size: 0.875rem;
        line-height: 1.25rem;
    `,
    hint: css`
        font-size: 1rem;
        line-height: 1.25rem;
    `,
};

const md = {
    'MuiSwitch-root': css`
        width: 44px;
        height: 24px;
    `,
    'MuiSwitch-thumb': css`
        width: 20px;
        height: 20px;
    `,
    'Mui-checked': css`
        transform: translateX(19px);
    `,
    content: css`
        margin-inline-start: 12px;
    `,
    title: css`
        font-size: 1rem;
        line-height: 1.25rem;
    `,
    hint: css`
        font-size: 1rem;
        line-height: 1.5rem;
    `,
};

export const SwitchSizeStyle = {
    sm,
    md,
};