$outer-indicator-size: 18px;
$outer-indicator-margin: 1px;
$inner-indicator-size: 8px;

@use 'sass:math';
@use '../../styles/mixins/dimension';
@use '../../styles/mixins/interaction';

@mixin outer-indicator-focus-styles {
  &:where(:not([data-disabled])[data-state='checked'])::before {
    background-color: var(--color-text-accent-green-hovered);
  }
}

@mixin inner-indicator-focus-styles {
  &:where(:not([data-disabled], [data-state='checked']))::after {
    background-color: var(--color-fill-neutral-heavy);
  }
}

.RadioGroupItem {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  outline: none;

  /* stylelint-disable-next-line order/order */
  @include interaction.touchable-hover {
    @include outer-indicator-focus-styles;
    @include inner-indicator-focus-styles;
  }

  /* Outer Indicator */
  &::before {
    @include dimension.square($outer-indicator-size);

    content: '';

    position: relative;

    box-sizing: border-box;
    margin: $outer-indicator-margin;

    background-color: var(--color-fill-grey-light);
    border-radius: 50%;
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-border-neutral-heavy);
  }

  /* Inner Indicator */
  &::after {
    @include dimension.square($inner-indicator-size);

    content: '';

    position: absolute;
    top: 50%;
    left: math.div($outer-indicator-size, 2) + $outer-indicator-margin;
    transform: translate(-50%, -50%);

    border-radius: 50%;
  }

  &:where([data-disabled]) {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);

    &::before {
      background-color: var(--color-fill-neutral-heavy);
      box-shadow: none;
    }
  }

  &:where([data-state='checked']) {
    &::before {
      background-color: var(--color-fill-accent-green-heavier);
      box-shadow: none;
    }

    &::after {
      background-color: var(--color-text-absolute-white);
    }
  }

  &:where(:focus-visible) {
    @include inner-indicator-focus-styles;

    &::before {
      box-shadow: var(--state-input-active);
    }
  }

  &:where(:has(.Label)) {
    height: var(--b-form-field-size);
  }
}

.Label {
  pointer-events: none;
  padding-left: 12px;
}