@use "components/form/input/mixins";
@use "system/colors";
@use "system/typography";
@use "system/spacing";
@use "system/breakpoints";

.ods-radio {
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @extend %ods-text--weight-light;

  color: colors.$blue-dark;

  &__label {
    @include mixins.form-label;
  }

  &__required {
    @extend %ods-margin-top-1;
    @extend %ods-padding-0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
  }

  &__text {
    @extend %ods-margin-left-2;
    @extend %ods-text--weight-light;

    hyphens: auto;
    transition: 180ms all ease-in-out;
    opacity: 0.8;
  }

  & input[aria-required="true"] ~ &__text::after {
    content: " *";
  }

  &--text-align-top {
    align-items: flex-start;

    .ods-radio__text {
      margin-top: -(0.313rem);
    }

    .ods-radio__control {
      align-self: baseline;
    }
  }

  &__input {
    align-items: center;
    display: inline-flex;

    & input {
      opacity: 0;
      width: 0;
      height: 0;

      &:focus + &.ods-radio__control {
        box-shadow: 0 0 0 0.05rem #fff, 0 0 0.15rem 0.125rem currentColor;
      }
    }

    & input:checked + .ods-radio__control {
      background-color: colors.$blue-state;
      border-color: colors.$blue-state;
    }
  }

  & input + &__control::before {
    content: "";
    background-color: colors.$white;
    border-radius: 50%;
    height: 0.375rem;
    inset: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    transition: 180ms opacity ease-in-out;
    width: 0.375rem;
  }

  &__control {
    align-items: center;
    background-color: colors.$white;
    border: 0.125rem solid currentcolor;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 1rem;
    justify-content: center;
    position: relative;
    top: -0.0625rem;
    width: 1rem;
  }

  & input:checked + &__control::before {
    opacity: 1;
  }

  & input:checked + &__control {
    background-color: colors.$blue-state;
  }

  & input:checked ~ &__text {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;

    color: colors.$blue-state;
  }

  &--hover,
  &:hover,
  &--focus,
  &:focus {
    & input:checked + .ods-radio__control {
      background-color: colors.$blue-state;
    }

    .ods-radio__control {
      border-color: colors.$blue-state;
    }

    .ods-radio__text {
      color: colors.$blue-state;
    }
  }

  &--hover,
  &:hover {
    .ods-radio__text {
      text-decoration: underline;
    }
  }

  & input:focus-visible ~ .ods-radio__control {
    outline: 0.25rem solid colors.$purple-light;
  }

  &--focus,
  &:focus {
    .ods-radio__text {
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    }

    .ods-radio__control {
      border-color: colors.$blue-state;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &--disabled,
  &--disabled:hover {
    & input:disabled:checked + .ods-radio__control {
      background-color: colors.$grayscale-40;
    }

    .ods-radio__control {
      border-color: colors.$grayscale-40;
    }

    .ods-radio__text {
      color: colors.$grayscale-40;
      text-decoration: none;
    }
  }

  &--error {
    @extend %ods-margin-bottom-1;

    .ods-radio__control {
      color: colors.$red;
    }

    & input:focus-visible ~ .ods-radio__control {
      color: colors.$blue-state;
    }
  }

  &__error-message {
    @include mixins.error-message;

    background-color: colors.$red-30;
    border-left: 0.25rem solid colors.$red;
    display: flex;
    align-items: center;
  }

  &__icon {
    @extend %ods-text--size-juliett, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-padding-right-2;

    line-height: 1.5rem;

    @include breakpoints.large {
      line-height: 1.75rem;
    }
  }
}