import { styled } from '../../../styles';
import { visuallyHidden } from '../../../styles/utils';
import { IconCircled } from '../../IconCircled';
import { IconText } from '../../IconText';

export const Input = styled.input(visuallyHidden);

export const Icon = styled(IconCircled)(({ theme, checked }) => ({
  border: `2px solid ${
    checked ? theme.colors.brandMain : theme.colors.gray[2]
  }`,
  backgroundColor: 'transparent',
  svg: {
    visibility: checked ? 'visible' : 'hidden',
  },
}));

export const Wrapper = styled(IconText)(({ theme }) => ({
  '& + &': {
    marginLeft: theme.space.gridGap,
  },
}));
