@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;
@use '../utils/cursors.scss' as cursors;

@import '@viasat/beam-tokens/components/Slider';

$sliderCursor: '--#{constants.$prefix}slider-cursor';
$sliderTrackCursor: '--#{constants.$prefix}slider-track-cursor';
$sliderThumbCursor: '--#{constants.$prefix}slider-thumb-cursor';

$sliderMinPercentage: '--#{constants.$prefix}comp-slider-min-percentage';
$sliderMaxPercentage: '--#{constants.$prefix}comp-slider-max-percentage';

$sliderThumbPercentage: '--#{constants.$prefix}comp-slider-thumb-percentage';
$sliderThumbScale: '--#{constants.$prefix}comp-slider-thumb-scale';

$sliderBaseClass: '#{constants.$prefix}slider';

$sliderTransitionTimingFunction: cubic-bezier(0, 0.33, 0, 0.76);
$sliderTransitionDuration: 0.05s;

.#{$sliderBaseClass} {
  width: 100%;
  @include cursors.applyTextCursors();

  #{$sliderCursor}: pointer;
  #{$sliderTrackCursor}: pointer;
  #{$sliderThumbCursor}: pointer;

  #{$sliderMinPercentage}: 0cqw;
  #{$sliderMaxPercentage}: 0cqw;

  font: tokens.$bm-comp-input-typo-md;

  &--disabled {
    #{$sliderCursor}: not-allowed;
    #{$sliderTrackCursor}: not-allowed;
    #{$sliderThumbCursor}: not-allowed;

    .#{$sliderBaseClass}__thumb {
      background-color: tokens.$bm-comp-input-color-icon;
      border: unset;
    }

    .#{$sliderBaseClass}__track::before {
      background-color: tokens.$bm-comp-input-color-border-disabled;
    }

    .#{$sliderBaseClass}__fill {
      background-color: tokens.$bm-comp-input-color-icon;
    }

    .#{$sliderBaseClass}__value-axis-label {
      cursor: not-allowed;
      pointer-events: none;
      color: tokens.$bm-comp-input-color-icon;
    }
  }

  &--readonly {
    #{$sliderCursor}: default;
    #{$sliderTrackCursor}: not-allowed;
    #{$sliderThumbCursor}: default;

    .#{$sliderBaseClass}__thumb {
      background-color: tokens.$bm-comp-input-color-icon;
      border: unset;
    }

    .#{$sliderBaseClass}__track::before {
      background-color: tokens.$bm-comp-input-color-border-disabled;
    }

    .#{$sliderBaseClass}__fill {
      background-color: tokens.$bm-comp-input-color-border-disabled;
    }

    .#{$sliderBaseClass}__value-axis-label {
      cursor: not-allowed;
      pointer-events: none;
      color: tokens.$bm-comp-input-color-icon;
    }
  }

  &--with-value-axis {
    .#{$sliderBaseClass}__content-container {
      align-items: flex-start;
    }
  }

  &__track {
    position: relative;
    height: tokens.$bm-comp-slider-size-handle;
    display: flex;
    align-items: center;
    cursor: var(#{$sliderTrackCursor}, pointer);
    container: slider-track / size;

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: tokens.$bm-comp-slider-size-track;
      background-color: tokens.$bm-comp-slider-color-track-bg;
      border-radius: tokens.$bm-comp-slider-radius-track;
    }
  }

  &__fill {
    position: absolute;
    height: tokens.$bm-comp-slider-size-track;
    background-color: tokens.$bm-comp-slider-color-track-bg-filled;
    border-radius: tokens.$bm-comp-slider-radius-track;
    transition: transform $sliderTransitionTimingFunction;
    left: 0;
    width: 100%;
    transform-origin: 0% 50%;
    transform: translateX(var(#{$sliderMinPercentage}, 0cqw))
      scaleX(
        calc(
          (var(#{$sliderMaxPercentage}, 0cqw) - var(#{$sliderMinPercentage}, 0cqw)) /
            100cqw
        )
      );
    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;

    [dir='rtl'] & {
      transform: translateX(calc(100cqw - var(#{$sliderMaxPercentage}, 0cqw)))
        scaleX(
          calc(
            (var(#{$sliderMaxPercentage}, 0cqw) - var(#{$sliderMinPercentage}, 0cqw)) /
              100cqw
          )
        );
    }
  }

  &__thumb-container {
    #{$sliderThumbPercentage}: 0cqw;
    #{$sliderThumbScale}: 1;

    position: absolute;
    left: calc(0 - tokens.$bm-comp-slider-size-handle / 2);
    width: tokens.$bm-comp-slider-size-handle;
    height: tokens.$bm-comp-slider-size-handle;
    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;
    transform-origin: 50% 50%;
    transform: translateX(calc(var(#{$sliderThumbPercentage}, 0cqw) - 50%));

    [dir='rtl'] & {
      transform: translateX(calc(50% - var(#{$sliderThumbPercentage}, 0cqw)));
    }
  }

  &__thumb {
    width: 100%;
    height: 100%;
    background-color: tokens.$bm-comp-slider-color-handle-bg;
    border-radius: tokens.$bm-comp-slider-radius-handle;
    border: tokens.$bm-comp-slider-border-width-handle solid
      tokens.$bm-comp-slider-color-handle-border;
    cursor: var(#{$sliderThumbCursor}, grab);

    transform: scale(var(#{$sliderThumbScale}, 1));
    transition: transform $sliderTransitionDuration $sliderTransitionTimingFunction;
  }

  &__thumb:focus-visible {
    outline-color: tokens.$bm-alias-color-ramp-accent-base;
    box-shadow: 0 0 0 tokens.$bm-sem-border-width-focus
        tokens.$bm-sem-color-surface-01,
      0 0 0
        calc(tokens.$bm-sem-border-width-focus + tokens.$bm-sem-border-width-focus)
        tokens.$bm-sem-color-border-focus;
  }

  &__thumb-container:active {
    #{$sliderThumbScale}: calc(
      tokens.$bm-comp-slider-size-handle-active / tokens.$bm-comp-slider-size-handle
    );
  }

  &__tick {
    position: absolute;
    top: 50%;
    width: tokens.$bm-comp-slider-size-step-x;
    height: tokens.$bm-comp-slider-size-track;
    background: tokens.$bm-comp-slider-color-step;
    transform: translateY(-50%);
    pointer-events: none;
  }

  &__value-axis-label {
    font: tokens.$bm-comp-slider-typo-values;
    color: tokens.$bm-comp-slider-color-values;
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    z-index: 1;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    font-weight: inherit;
  }

  &__value-axis-helper {
    visibility: hidden;
    position: relative;
  }

  &__value-axis {
    position: relative;
    width: 100%;
    margin-top: tokens.$bm-comp-slider-space-gap-y;
  }

  &__content-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: tokens.$bm-comp-slider-space-gap-outside-x;
  }

  &__textfield {
    width: 100%;

    /* Chromium-based */
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    [type='number'] {
      -moz-appearance: textfield;
      appearance: textfield;
    }
  }

  &__content-before,
  &__content-after {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}