@use 'sass:map';
@use '../../tokens';
@use '../../utils';

/// get component token
@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-radio, $token);
}

.flexy-radio {
  display: inline-flex;
  position: relative;
  @include utils.size(_token('size'));

  input {
    border: none;
    cursor: pointer;
    margin: 0;
    opacity: 0;
    @include utils.absolute-center();
    @include utils.size(100%);
    @include utils.min-size(tokens.$flexy-sys-ref-touch-size);
    z-index: 1;
  }

  &__circle {
    border-radius: 50%;
    border: _token('unselected-outline-width') solid
      _token('unselected-outline-color');
    box-sizing: border-box;
    pointer-events: none;
    @include utils.absolute-fill();

    &::before {
      content: '';
      background-color: _token('dot-color');
      border-radius: 50%;
      @include utils.absolute-center(
        $transform: translate(-50%, -50%) scale(0)
      );
      transition: transform _token('state-transition-duration')
        _token('state-transition-easing');
      @include utils.size(_token('dot-size'));
    }
  }

  input:hover ~ &__circle {
    border-color: _token('unselected-hovered-outline-color');
  }

  input:focus-visible ~ &__circle {
    outline-offset: 2px;
    outline: 2px solid tokens.$flexy-sys-color-primary;
  }

  input:checked ~ &__circle {
    border: _token('selected-outline-width') solid
      _token('selected-outline-color');

    &::before {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  input:disabled {
    cursor: none;
    pointer-events: none;
  }

  input:disabled ~ &__circle {
    filter: grayscale(1) opacity(0.32);
  }
}