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

$_transition-duration: 200ms;
$_transition: $_transition-duration ease-out;

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

.flexy-switch {
  display: inline-flex;
  position: relative;
  height: _token('track-height');
  width: _token('track-width');

  &__input {
    display: block;
    border: none;
    cursor: pointer;
    margin: 0px;
    opacity: 0;
    padding: 0px;
    @include utils.absolute-center();
    @include utils.size(100%);
    @include utils.min-size(tokens.$flexy-sys-ref-touch-size);
    -webkit-tap-highlight-color: transparent;
  }

  &__track {
    display: block;
    background-color: _token('unselected-track-color');
    border-radius: _token('track-shape');
    overflow: hidden;
    pointer-events: none;
    @include utils.absolute-fill();
    transition: background-color $_transition;

    &::before {
      content: '';
      background-color: _token('selected-track-color');
      border-radius: inherit;
      opacity: 0;
      @include utils.absolute-fill();
      transition: opacity $_transition;
    }
  }

  &__indicator {
    pointer-events: none;

    &::before,
    &::after {
      content: '';
      mask-size: _token('indicator-size');
      mask-repeat: no-repeat;
      mask-position: center;
      position: absolute;
      top: 0;
      @include utils.size(_token('track-height'));
    }

    &::before {
      background-color: _token('selected-indicator-color');
      mask-image: _token('selected-indicator-icon');
      left: 0;
    }

    &::after {
      background-color: _token('unselected-indicator-color');
      mask-image: _token('unselected-indicator-icon');
      right: 0;
    }
  }

  &__thumb {
    display: block;
    pointer-events: none;
    position: absolute;
    left: 0px;
    top: 0px;
    @include utils.size(_token('track-height'));
    transition: transform $_transition;

    &::before {
      content: '';
      display: block;
      background-color: _token('unselected-thumb-color');
      border-radius: _token('thumb-shape');
      box-shadow: _token('thumb-shadow');
      @include utils.absolute-center();
      @include utils.size(_token('thumb-width'), _token('thumb-height'));
      transition:
        background-color $_transition,
        transform $_transition;
    }
  }

  &__icon,
  &__unselected-icon,
  &__selected-icon {
    font-size: _token('icon-size');
    @include utils.absolute-center();
  }

  &__icon,
  &__unselected-icon {
    color: _token('unselected-icon-color');
    opacity: 1;
  }

  &__selected-icon {
    color: _token('selected-icon-color');
    opacity: 0;
  }

  &__input:active ~ &__thumb::before {
    transform: translate(-50%, -50%) scale(_token('pressed-thumb-scaling'));
    transition-delay: 0ms;
    transition-duration: $_transition-duration, 80ms;
  }

  &__input:focus-visible ~ &__track {
    outline: 2px solid _token('focus-ring-color');
    outline-offset: 2px;
  }

  &__input:checked ~ &__track::before {
    opacity: 1;
  }

  &__input:checked ~ &__thumb {
    transform: translateX(calc(_token('track-width') - _token('track-height')));

    &::before {
      background-color: _token('selected-thumb-color');
    }
  }

  &__input:checked ~ &__thumb &__icon {
    color: _token('selected-icon-color');
  }

  &__input:checked ~ &__thumb &__unselected-icon {
    opacity: 0;
  }

  &__input:checked ~ &__thumb &__selected-icon {
    opacity: 1;
  }

  &__input:disabled {
    pointer-events: none;
  }

  &__input:disabled ~ &__indicator::before {
    background-color: _token('disabled-selected-indicator-color');
  }

  &__input:disabled ~ &__indicator::after {
    background-color: _token('disabled-unselected-indicator-color');
  }

  &__input:disabled ~ &__track {
    background-color: _token('disabled-unselected-track-color');

    &::before {
      background-color: _token('disabled-selected-track-color');
    }
  }

  &__input:disabled ~ &__thumb {
    &::before {
      background-color: _token('disabled-unselected-thumb-color');
      box-shadow: none;
    }
  }

  &__input:disabled ~ &__thumb &__icon,
  &__input:disabled ~ &__thumb &__unselected-icon {
    color: _token('disabled-unselected-icon-color');
  }

  &__input:checked:disabled ~ &__thumb {
    &::before {
      background-color: _token('disabled-selected-thumb-color');
      box-shadow: none;
    }
  }

  &__input:checked:disabled ~ &__thumb &__icon,
  &__input:checked:disabled ~ &__thumb &__selected-icon {
    color: _token('disabled-selected-icon-color');
  }
}