@use '~@moda/om';

.RadioButton {
  $radio-button-size: om.space(4);
  $radio-button-check-offset: om.space(1);

  @include om.stack(2, $direction: horizontal);

  position: relative;
  align-items: center;
  user-select: none;
  cursor: pointer;
  color: om.color(ink);

  &__indicator {
    position: relative;
    width: $radio-button-size;
    height: $radio-button-size;
    flex-shrink: 0;
    border: 1px solid;
    border-radius: 50%;
    background-color: om.color('snow');

    &--checked {
      background-color: om.color(ink);

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: $radio-button-check-offset;
        right: $radio-button-check-offset;
        bottom: $radio-button-check-offset;
        left: $radio-button-check-offset;
        border-radius: 50%;
        background-color: om.color('snow');
      }
    }

    &--disabled {
      color: om.color(elephant);
      pointer-events: none;
      background-color: om.color('snow');
      &::after {
        background-color: om.color(elephant);
      }
    }
  }

  &__input {
    @include om.visually-hidden();
  }

  &:has(.RadioButton__input:focus-visible) .RadioButton__indicator {
    outline: 2px solid om.color(ink);
    outline-offset: 2px;
  }

  &__label {
    @include om.text(body1);

    color: om.color(ink);
  }
}