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

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

.flexy-slider {
  display: flex;

  position: relative;
  height: _token('thumb-height');
  min-height: _token('track-height');
  width: 240px;
  max-width: 100%;

  * {
    user-select: none;
  }

  & > *:not(&__input) {
    pointer-events: none;
  }

  &__input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    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);

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: _token('thumb-width');
      height: _token('thumb-height');
    }

    &::-moz-range-thumb {
      -moz-appearance: none;
      appearance: none;
      width: _token('thumb-width');
      height: _token('thumb-height');
    }
  }

  &__track,
  &__ticks {
    display: block;
    border-radius: _token('track-shape');
    overflow: hidden;
    @include utils.absolute-center();
    width: calc(100% - _token('thumb-width'));
    height: _token('track-height');
  }

  &__inactive-track,
  &__active-track {
    display: block;
    @include utils.absolute-fill();
    overflow: hidden;
    transition: transform _token('animation-jumping-duration')
      _token('animation-jumping-easing');
  }

  &__inactive-track {
    background-color: _token('track-inactive-color');
    background-image: _token('track-inactive-gradient');
    opacity: _token('track-inactive-opacity');
  }

  &__active-track {
    background-color: _token('track-active-color');
    background-image: _token('track-active-gradient');
    transform: scaleX(0.5);
    transform-origin: left center;
  }

  &__inactive-ticks,
  &__active-ticks {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 0px calc(_token('ticks-size') / 2);
    transition: clip-path _token('animation-jumping-duration')
      _token('animation-jumping-easing');
    @include utils.absolute-fill();

    & > span {
      border-radius: 50%;
      @include utils.size(_token('ticks-size'));
    }
  }

  &__inactive-ticks {
    clip-path: inset(0% 1% 0% 1%);

    & > span {
      background-color: _token('ticks-inactive-color');
    }
  }

  &__active-ticks {
    clip-path: inset(0% 50% 0% 1%);

    & > span {
      background-color: _token('ticks-active-color');
    }
  }

  &__thumb-rail {
    display: block;
    @include utils.absolute-center();
    width: calc(100% - _token('thumb-width'));
    height: 100%;
  }

  &__thumb {
    display: block;
    @include utils.absolute-fill();
    transform: translateX(-50%);
    transition: transform _token('animation-jumping-duration')
      _token('animation-jumping-easing');
  }

  &__thumb-knob {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: _token('thumb-color');
    border: _token('thumb-outline-width') solid _token('thumb-outline-color');
    border-radius: _token('thumb-shape');
    box-shadow: _token('thumb-shadow');
    box-sizing: border-box;
    color: _token('thumb-icon-color');
    position: absolute;
    left: calc(100% - _token('thumb-width') / 2);
    top: 0;
    width: _token('thumb-width');
    height: _token('thumb-height');
  }

  &__value-indicator,
  &__value-indicator-m3 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: _token('value-indicator-text-color');
    font-size: _token('value-indicator-text-size');
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, 0%) scale(0);
    transform-origin: center bottom;
    transition: transform 150ms ease-out;
  }

  &__value-indicator {
    $_arrow-size: _token('value-indicator-arrow-size');

    border-radius: _token('value-indicator-shape');
    background-color: _token('value-indicator-fill-color');
    width: _token('value-indicator-width');
    height: _token('value-indicator-height');

    &::before {
      content: '';
      clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
      background-color: inherit;
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translate(-50%, -1px);
      width: calc($_arrow-size * 2 + 1px);
      height: calc($_arrow-size * 2 + 1px);
    }
  }

  &__value-indicator-m3 {
    width: _token('value-indicator-m3-size');
    height: _token('value-indicator-m3-size');

    &::before {
      content: '';
      background-color: _token('value-indicator-fill-color');
      border-radius: 50% 50% 0% 50%;
      transform: rotateZ(45deg);
      z-index: -1;
      @include utils.absolute-fill();
    }
  }

  &__thumb-ripple {
    display: block;
    color: _token('ripple-color');
    @include utils.absolute-center();
    @include utils.size(_token('ripple-size'));
  }

  &--sliding &__value-indicator,
  &__input:hover ~ &__thumb-rail &__value-indicator,
  &__input:focus ~ &__thumb-rail &__value-indicator {
    transform: translate(
        -50%,
        calc(
          -1 *
            _token('value-indicator-arrow-size') - _token(
              'value-indicator-bottom-spacing'
            )
        )
      )
      scale(1);
  }

  &--sliding &__value-indicator-m3,
  &__input:hover ~ &__thumb-rail &__value-indicator-m3,
  &__input:focus ~ &__thumb-rail &__value-indicator-m3 {
    transform: translate(
        -50%,
        calc(-20.70833333333333% - _token('value-indicator-bottom-spacing'))
      )
      scale(1);
  }

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

  &--sliding &__active-track,
  &--sliding &__inactive-track,
  &--sliding &__active-ticks,
  &--sliding &__inactive-ticks,
  &--sliding &__thumb {
    transition: transform _token('animation-sliding-duration')
      _token('animation-sliding-easing');
  }

  &--noanimation &__active-track,
  &--noanimation &__inactive-track,
  &--noanimation &__active-ticks,
  &--noanimation &__inactive-ticks,
  &--noanimation &__thumb {
    transition-duration: 0ms;
  }

  /* For right-to-left locales, flip the slider in horizontal axis */
  [dir='rtl'] &__track,
  [dir='rtl'] &__ticks,
  [dir='rtl'] &__thumb-rail {
    transform: translate(-50%, -50%) scaleX(-1);
  }

  [dir='rtl'] &__thumb-knob {
    transform: scaleX(-1);
  }
}