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

const xs = css`
    width: 24px;
    height: 24px;
    font-size: 0.5rem;
`;

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

const md = css`
    width: 40px;
    height: 40px;
    font-size: 1rem;
`;

const lg = css`
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
`;

const xl = css`
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
`;

const $2xl = css`
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
`;

export const AvatarSizeStyle = {
    xs,
    sm,
    md,
    lg,
    xl,
    '2xl': $2xl,
};