@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'functions/var-negative' as *;
@use 'mixins/shadow' as *;
@use 'variables' as *;

// Sliders
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
.slider {
  appearance: none;
  background: transparent;
  display: block;
  width: 100%;
  // height: $unit-6; // old spectre.css
  height: get-var('unit-6');

  &:focus {
    @include control-shadow();
    outline: none;
  }

  &.tooltip:not([data-tooltip]) {
    &::after {
      content: attr(value);
    }
  }

  // Slider Thumb
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    // background: $primary-color; // old spectre.css
    background: color('primary-color');
    border: 0;
    border-radius: 50%;
    // height: $unit-3; // old spectre.css
    height: get-var('unit-3');
    // margin-top: -($unit-3 - $unit-h) / 2; // old spectre.css
    margin-top: calc(var-negative(get-var('unit-3') - get-var('unit-h')) / 2);
    // transition: transform 0.2s; // old spectre.css
    transition: transform get-var('transition-duration');
    // width: $unit-3; // old spectre.css
    width: get-var('unit-3');
  }
  &::-moz-range-thumb {
    // background: $primary-color; // old spectre.css
    background: color('primary-color');
    border: 0;
    border-radius: 50%;
    // height: $unit-3; // old spectre.css
    height: get-var('unit-3');
    // transition: transform 0.2s; // old spectre.css
    transition: transform get-var('transition-duration');
    // width: $unit-3; // old spectre.css
    width: get-var('unit-3');
  }
  &::-ms-thumb {
    // background: $primary-color; // old spectre.css
    background: color('primary-color');
    border: 0;
    border-radius: 50%;
    // height: $unit-3; // old spectre.css
    height: get-var('unit-3');
    // transition: transform 0.2s; // old spectre.css
    transition: transform get-var('transition-duration');
    // width: $unit-3; // old spectre.css
    width: get-var('unit-3');
  }

  &:active {
    &::-webkit-slider-thumb {
      transform: scale(1.25);
    }
    &::-moz-range-thumb {
      transform: scale(1.25);
    }
    &::-ms-thumb {
      transform: scale(1.25);
    }
  }

  &:disabled,
  &.disabled {
    &::-webkit-slider-thumb {
      // background: $gray-color-light; // old spectre.css
      background: color('gray-color-light');
      transform: scale(1);
    }
    &::-moz-range-thumb {
      // background: $gray-color-light; // old spectre.css
      background: color('gray-color-light');
      transform: scale(1);
    }
    &::-ms-thumb {
      // background: $gray-color-light; // old spectre.css
      background: color('gray-color-light');
      transform: scale(1);
    }
  }

  // Slider Track
  &::-webkit-slider-runnable-track {
    // background: $bg-color-dark; // old spectre.css
    background: color('bg-color-dark');
    // border-radius: $border-radius; // old spectre.css
    border-radius: get-var('border-radius');
    // height: $unit-h; // old spectre.css
    height: get-var('unit-h');
    width: 100%;
  }
  &::-moz-range-track {
    // background: $bg-color-dark; // old spectre.css
    background: color('bg-color-dark');
    // border-radius: $border-radius; // old spectre.css
    border-radius: get-var('border-radius');
    // height: $unit-h; // old spectre.css
    height: get-var('unit-h');
    width: 100%;
  }
  &::-ms-track {
    // background: $bg-color-dark; // old spectre.css
    background: color('bg-color-dark');
    // border-radius: $border-radius; // old spectre.css
    border-radius: get-var('border-radius');
    // height: $unit-h; // old spectre.css
    height: get-var('unit-h');
    width: 100%;
  }
  &::-ms-fill-lower {
    // background: $primary-color; // old spectre.css
    background: color('primary-color');
  }
}