@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(radio-wrapper) {
  @include set-component-var('radio', $radio);

  @include flex(flex-start, center);
  position: relative;
  gap: 6px;

  @include when(active) {
    .#{$namespace}-radio__effect--icon {
      opacity: 0;
      transition: getCssVar(transition-ease);
      transform: scale(1.3);
    }
    .#{$namespace}-radio__effect {
      &:after {
        border: 7px solid getColor('color', 1);
        box-shadow: 0px 3px 12px 0px getColor('color', 0.3);
      }
    }
  }
  &:not(.is-active) {
    .#{$namespace}-radio {
      input:hover {
        ~ .#{$namespace}-radio__effect {
          .#{$namespace}-radio__effect--icon {
            opacity: 0.7;
          }
        }
      }
    }
  }
  @include when(loading) {
    pointer-events: none;
    user-select: none;

    .#{$namespace}-radio__effect {
      &:after {
        opacity: 0.1;
      }
    }
  }
  @include when(label-before) {
    label {
      order: -1;
    }
  }
  label {
    cursor: pointer;
    user-select: none;
  }
  @include when(disabled) {
    opacity: 0.5;
    pointer-events: none;

    .#{$namespace}-radio__effect {
      background: getColor('gray-3');
    }

    label {
      pointer-events: none;
    }
  }
}

@include b(radio) {
  width: getCssVar(radio, 'width');
  height: getCssVar(radio, 'height');
  min-width: getCssVar(radio, 'min-width');
  min-height: getCssVar(radio, 'min-height');
  margin: 0px;
  padding: 0px;
  border-radius: 50%;
  position: relative;
  z-index: 10;

  @include e(effect) {
    @include flex(center, center);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    left: 0px;
    top: 0px;
    transition: getCssVar(transition-ease);
    box-sizing: border-box;
    z-index: 10;

    @include m(icon) {
      transition: getCssVar(transition-ease);
      i {
        font-size: 0.75rem;
      }
    }

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      border: 2px solid getColor('text', 0.35);
      box-sizing: border-box;
      transition: getCssVar(transition-ease);
      display: block;
      box-shadow: 0px 0px 0px 0px getColor('color', 0.4);
    }
  }
  input {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    opacity: 0;
    cursor: pointer;

    &:active {
      ~ .#{$namespace}-radio__effect {
        &:after {
          transform: scale(0.9);
        }
      }
    }

    &:not(:checked) ~ .#{$namespace}-radio__effect {
      .#{$namespace}-radio__effect--loading {
        .#{$namespace}-icon-loading {
          color: getColor('divider');
        }
      }
    }

    &:checked {
      ~ .#{$namespace}-radio__effect {
        &:after {
          border: 7px solid getColor('color', 1);
          animation-name: radio;
          animation-duration: 4s;
          animation-play-state: paused;
          animation-iteration-count: infinite;
          box-shadow: 0px 3px 10px 0px getColor('color', 0.4);
        }
      }
    }
  }
}