import {css} from '@emotion/react';

const sm = css`
    width: 32px;
    height: 32px;
    font-size: 1.875rem;
`;

const md = css`
    width: 48px;
    height: 48px;
    font-size: 2.25rem;
`;

const lg = css`
    width: 80px;
    height: 80px;
    font-size: 3rem;
`;

const wrapperSM = css`
    gap: 8px;
`;

const wrapperMD = css`
    gap: 8px;
`;

const wrapperLG = css`
    gap: 12px;
`;

export const EnterCodeWrapperSizeStyle = {
    sm: wrapperSM,
    md: wrapperMD,
    lg: wrapperLG,
};

export const EnterCodeSizeStyle = {
    sm,
    md,
    lg,
};