/* stylelint-disable unit-disallowed-list */
@use '../../foundations/borders/mixins.scss' as border;
@use '../../foundations/spacing/tokens.scss' as spacing;
@use '../../foundations/typography/mixins.scss' as typography;
@use '../../foundations/colors/tokens.scss' as color;
@use '../../foundations/colors/mixins.scss' as colorMixin;
@use '../../foundations/focus/mixins.scss' as focus;

$radio-input-size: calc(1.25rem / var(--fudis-rem-multiplier));
$radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));

.fudis-radio-button {
  @include typography.body-text-md-regular;
  @include colorMixin.text-color('gray-dark');

  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 0;
  width: fit-content;
  min-height: spacing.$spacing-lg;

  &__label {
    margin-bottom: 0;
    padding-right: spacing.$spacing-xs;
    padding-left: spacing.$spacing-xs;
  }

  &__content {
    display: flex;
    align-items: center;
    transform: translateX(calc(-0.1rem / var(--fudis-rem-multiplier)));
    padding-left: 0;
    cursor: pointer;

    &--disabled {
      cursor: default;
    }

    /* Radio button circle */
    &-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: spacing.$spacing-lg;
      min-height: spacing.$spacing-lg;
    }

    &__control {
      @include border.border('1px', 'solid', 'gray-middle');
      @include colorMixin.bg-color('white');

      display: inline-flex;
      top: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      width: $radio-input-size;
      min-width: $radio-input-size;
      height: $radio-input-size;

      &--invalid {
        @include border.border('1px', 'solid', 'red');

        box-shadow: 0 0 0 spacing.$pixel-3 color.$color-red-light;
      }

      &--disabled {
        @include border.border('1px', 'dashed', 'gray-middle');
        @include colorMixin.bg-color('gray-extra-light');
      }

      &__indicator {
        &::after {
          display: block;
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%20width='12'%20height='12'%3E%3Ccircle%20cx='6'%20cy='6'%20r='6'/%3E%3C/svg%3E");
          mask-size: contain;
          mask-position: center;
          mask-repeat: no-repeat;
          /* stylelint-disable property-disallowed-list */
          background-color: currentcolor;
          width: $radio-indicator-size;
          height: $radio-indicator-size;
          content: '';
        }
      }
    }
  }

  &__input {
    position: absolute;
    left: 0;
    opacity: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    /* stylelint-disable-next-line */
    &:focus
    /* stylelint-disable selector-class-pattern */
      + .fudis-radio-button__content
      .fudis-radio-button__content__control {
      @include focus.focus-form-field;
    }
  }

  /* 
  * If RadioButtonGroup is disabled through "disabled" Input, we need to set pointer-event to none for each radio-button. 
  * This is not necessary when disabling comes through formControl.
  */
  &--disabled {
    pointer-events: none;
  }
}