import {css} from '@emotion/react';
import {Theme} from '@mui/material';
import {DotColorsType as Color} from '../dot.type';

const outline = (theme: Theme, enteredColor: Color) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        border-style: solid;
        border-color: ${color[400]};
        border-width: 2px;
    `;
};

const fill = (theme: Theme, enteredColor: Color) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        background-color: ${color[500]};
        border-width: 0;
    `;
};

const radiate = (theme: Theme, enteredColor: Color) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        box-sizing: content-box !important;
        background-color: ${color[500]};
        border-style: solid;
        border-color: ${color[100]};
    `;
};

export const DotVariantStyle = {
    radiate,
    fill,
    outline,
};