@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../icon-sprite/icon-sprite.scss";
@use "../../assets/form-field/form-field.scss" as *;

$ds-radio-btn__icon-size: 24px;

.ds-radio-btn-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  .ds-radio-btn__inner {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: $ds-color-text-primary;
    position: relative;
    padding: ds-spacing($ds-s-025);

    &::before {
      content: "";
      position: absolute;
      border-radius: ds-border-radius(012);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    @include min-click-surface();

    &:hover {
      .ds-radio-btn__text {
        text-decoration: underline;
      }
    }

    .ds-radio-btn__text {
      margin: ds-spacing(0 0 0 $ds-s-050, rem);
      @include ds-typography($ds-typography-functional-body-md);
      @at-root .ds-force-px#{&} {
        margin: ds-spacing(0 0 0 $ds-s-050);
        @include ds-typography($ds-typography-functional-body-md, true);
      }
    }

    .ds-radio-btn__icon {
      line-height: 0;
      display: block;
      position: relative;
      height: ds-px-to-rem($ds-radio-btn__icon-size);
      width: ds-px-to-rem($ds-radio-btn__icon-size);
      color: $ds-color-text-primary;
      @at-root .ds-force-px#{&} {
        height: $ds-radio-btn__icon-size;
        width: $ds-radio-btn__icon-size;
      }
    }
    .ds-icon {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      svg {
        fill: currentColor;
      }
      &.ds-icon--radio_button_checked {
        display: none;
      }
    }
  }

  input {
    opacity: 0;
    position: absolute;

    &:checked + .ds-radio-btn__inner {
      .ds-icon--radio_button_checked {
        display: block;
      }
      .ds-icon--radio_button_unchecked {
        display: none;
      }
    }

    &:focus-visible + .ds-radio-btn__inner {
      border-radius: ds-border-radius(012);
      outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
      outline-offset: 2px;
    }
  }

  &.ds-form-field__error,
  .invalid {
    .ds-radio-btn__inner .ds-radio-btn__icon {
      color: $ds-color-text-critical;
    }

    .ds-form-field__error-message {
      margin-top: ds-spacing($ds-s-025);
      padding: ds-spacing(0 $ds-s-025 $ds-s-025);

      .ds-icon {
        margin: ds-spacing(0 $ds-s-050 0 $ds-s-200, rem);
        @at-root .ds-force-px#{&} {
          margin: ds-spacing(0 $ds-s-050 0 $ds-s-200);
        }
      }
    }
  }
}

.ds-radio-btn-group input:disabled + .ds-radio-btn__inner {
  cursor: not-allowed;
  .ds-radio-btn__icon {
    color: $ds-color-text-primary-disabled;
  }
  .ds-radio-btn__text {
    color: $ds-color-text-primary-disabled;
  }

  &:hover {
    .ds-radio-btn__text {
      text-decoration: none;
    }
  }
}