import {DotSizeStyle as sizes} from './dot-size.style';
import {styled} from '@mui/material';
import {IDot} from '../dot.type';
import {DotVariantStyle as variants} from './dot-variant.style';

const Dot = styled('span')<IDot>`
    display: inline-block;
    border-radius: 100%;
    margin: 1px;
    outline: none;
    font-family: inherit;
    ${({size}) => sizes[size || 'md']};
    ${({variant, theme, color}) =>
        variants[variant || 'fill'](theme, color || 'primary')};
`;

export const DotStyle = {Dot};