import { style } from '@vanilla-extract/css';

import { vars } from '../css';
import { item } from './radio-group-item.css';

export const indicator = style({
  border: `1px solid ${vars.colors.secondary}`,
  borderRadius: '100%',
  width: '1em',
  height: '1em',
  flex: '0 0 auto',
  alignItems: 'center',
  justifyContent: 'center',
  display: 'inline-flex',
  verticalAlign: 'middle',

  selectors: {
    [`${item}:not([data-disabled]):hover &`]: {
      backgroundColor: vars.colors.gray400,
    },

    '&[data-state="checked"]::before': {
      width: '62%',
      height: '62%',
      borderRadius: '100%',
      backgroundColor: vars.colors.secondary,
      content: '',
      display: 'block',
    },
  },
});