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

const xxs = {
    container: css`
        width: 85px;
        height: 70px;
    `,
    title: css`
        top: 40px;
        font-size: 0.5rem;
        line-height: 0.6875rem;
        text-wrap: nowrap;
        margin-top: 4px;
    `,
    value: css`
        font-size: 0.75rem;
        top: 20px;
        line-height: 1.25rem;
    `,
};

const xs = {
    container: css`
        width: 160px;
        height: 85px;
    `,
    title: css`
        top: 35px;
        font-size: 0.75rem;
        line-height: 1.125rem;
    `,
    value: css`
        font-size: 1.5rem;
        top: 57px;
        line-height: 1.25rem;
    `,
};

const sm = {
    container: css`
        width: 200px;
        height: 105px;
    `,
    title: css`
        top: 50px;
        font-size: 0.75rem;
        line-height: 1.125rem;
    `,
    value: css`
        font-size: 1.875rem;
        top: 75px;
        line-height: 1.25rem;
    `,
};

const md = {
    container: css`
        width: 240px;
        height: 125px;
    `,
    title: css`
        top: 60px;
        font-size: 0.875rem;
        line-height: 1.25rem;
    `,
    value: css`
        font-size: 2.25rem;
        top: 80px;
        line-height: 2.75rem;
    `,
};

const lg = {
    container: css`
        width: 280px;
        height: 150px;
    `,
    title: css`
        top: 62px;
        font-size: 0.875rem;
        line-height: 3rem;
    `,
    value: css`
        font-size: 2.25rem;
        top: 85px;
        line-height: 3.75rem;
    `,
};

export const ProgressCircleSizeStyle = {
    xxs,
    xs,
    sm,
    md,
    lg,
};