@import './theme.css';
@import './utilities.css';

.react-aria-RadioGroup {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--text-color);
  gap: var(--spacing-1);

  .radio-items {
    display: flex;
    gap: var(--spacing-3);
  }

  &[data-orientation='vertical'] .radio-items {
    flex-direction: column;
  }

  &[data-orientation='horizontal'] .radio-items {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.react-aria-RadioField {
  display: flex;
  flex-direction: column;

  [slot='description'] {
    margin-left: calc(var(--spacing) * 6.5);
  }

  &[data-disabled] [slot='description'] {
    color: var(--text-color-disabled);
  }
}

.react-aria-RadioButton {
  display: flex;
  /* This is needed so the HiddenInput is positioned correctly */
  position: relative;
  align-items: center;
  gap: var(--spacing-2);
  font: var(--font-size) system-ui;
  color: var(--text-color);
  forced-color-adjust: none;
  -webkit-tap-highlight-color: transparent;
  --dot-color: white;
  @media (forced-colors: active) {
    --dot-color: HighlightText;
  }

  .indicator {
    position: relative;
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    transition: all 200ms;

    &::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: transparent;
      transition: scale 200ms;
      scale: 0;
    }
  }

  &[data-selected] {
    .indicator::after {
      background: var(--dot-color);
      scale: 0.37;
    }
  }

  &[data-disabled] {
    color: var(--text-color-disabled);
    --dot-color: var(--text-color-disabled);
  }
}
