import {styled} from '@mui/material';
import type {IRadioButtonGroupDescription} from './radio-button-group.type';

const Header = styled('div')`
    display: flex;
    gap: 4px;
`;

const Wrapper = styled('div')`
    display: flex;
    flex-direction: column;
    align-items: flex-start;
`;

const Label = styled('label')`
    color: ${({theme}) => theme.palette.typography[700]};
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    margin-bottom: 6px;
    display: inline-flex;
    cursor: default;
    user-select: none;
`;

const Input = styled('input')`
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
`;

const Description = styled('span')<IRadioButtonGroupDescription>`
    color: ${({theme, error}) =>
        theme.palette[error ? 'error' : 'typography'][500]};
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 6px;
`;

export const RadioButtonGroupStyle = {
    Header,
    Wrapper,
    Input,
    Label,
    Description,
};