//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

//-----------------------------
// Slider
//-----------------------------

@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;

@use "../../utilities/focus-outline" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/convert" as *;

@use "../input";
@use "../text-input";

/// Slider styles
/// @access public
/// @group slider
@mixin slider {
  .#{$prefix}--slider-container {
    max-width: calcRem(600px);
    min-width: calcRem(200px);
    order: 3;
    display: flex;
    align-items: center;
    user-select: none;
    &--full-width {
      width: 100%;
      max-width: inherit;
      .wfp--slider__range-wrapper {
        width: 100%;
      }
    }
  }

  .#{$prefix}--slider {
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    border: none;

    &::-webkit-slider-runnable-track {
      width: 250px;
      height: 4px;
      background: $field-background-disabled;
      transition: all 300ms $standard-easing;
      border: none;
      border-radius: 1px;
      cursor: pointer;
    }

    &::-moz-range-track {
      background: $field-background-disabled;
      height: 4px;
      cursor: pointer;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50%;
      background: $action-default-fill-primary-default;
      margin-top: -0.65rem;
      cursor: pointer;
      transition: transform 100ms $standard-easing,
        background 100ms $standard-easing;
    }
    &::-moz-range-thumb {
      -webkit-appearance: none;
      border: none;
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50%;
      background: $action-default-fill-primary-default;
      margin-top: -0.65rem;
      cursor: pointer;
      transition: transform 100ms $standard-easing,
        background 100ms $standard-easing;
    }

    &::-moz-range-progress {
      height: calcRem(4px);
      background: $action-default-fill-primary-default;
    }

    /* IE*/
    &::-ms-fill-lower {
      height: calcRem(4px);
      background: $action-default-fill-primary-default;
    }

    &:hover {
      &::-webkit-slider-thumb {
        transform: scale(1.05);
      }
      &::-moz-range-thumb {
        transform: scale(1.05);
      }
    }
    &:hover:focus {
      &::-webkit-slider-thumb {
        @include focus-outline("blurred");
        transform: scale(1.25);
      }
      &::-moz-range-thumb {
        @include focus-outline("blurred");
        transform: scale(1.25);
      }
    }
    &:focus {
      outline: none;

      &::-webkit-slider-runnable-track {
        background: $field-background-disabled;
      }

      // firefox
      &::-moz-range-track {
        background-color: $field-background-disabled;
        overflow: hidden;
      }
    }
  }
  // prevent double line on firefox
  @-moz-document url-prefix() {
    .#{$prefix}--slider {
      margin-top: 4px;
    }
  }

  .#{$prefix}--slider__range-wrapper--disabled {
    .wfp--slider {
      background: transparent;
    }
    opacity: 0.5;
    background: transparent;
    .#{$prefix}--slider__track {
      cursor: default;
    }
    &:hover {
      &::-webkit-slider-thumb {
        transform: scale(1);
      }
      &::-moz-range-thumb {
        transform: scale(1);
      }
    }
  }

  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
    &:hover {
      transform: translate(-50%, -50%);
    }
    &:focus {
      box-shadow: none;
      outline: none;
    }
    &:active {
      background: $action-default-fill-primary-default;
      transform: translate(-50%, -50%);
    }
  }

  .#{$prefix}--slider__range-wrapper {
    position: relative;
    margin: 0 $spacing-05;
    height: 1.5rem;
    display: flex;
    align-items: center;
  }

  .#{$prefix}--slider__range-label {
    @include type-style("label-02");
    color: $text-body-secondary;

    &:last-of-type {
      margin-right: $spacing-05;
    }
  }

  .#{$prefix}--slider__range-before {
    height: 3px;
    background: $action-default-fill-primary-default;
    position: absolute;
    top: 50%;
    transform: translateY(-1.5px);
    z-index: 1;
    pointer-events: none;
    @supports (-moz-appearance: none) {
      display: none;
    }
  }

  .#{$prefix}--slider__track {
    position: absolute;
    width: 100%;
    height: calcRem(4px);
    background: $field-background-disabled;
    cursor: pointer;
    transform: translate(0%, -50%);
  }

  .#{$prefix}--slider__filled-track {
    position: absolute;
    width: 100%;
    height: calcRem(4px);
    background: $action-default-fill-primary-default;
    transform-origin: left;
    pointer-events: none;
    transform: translate(0%, -50%);
  }

  .#{$prefix}--slider__thumb {
    position: absolute;
    height: calcRem(24px);
    width: calcRem(24px);
    background: $action-default-fill-primary-default;
    border-radius: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    transition: transform 100ms $standard-easing,
      background 100ms $standard-easing;
    cursor: pointer;
    outline: none;

    &--clicked {
      transition: left $transition--base $standard-easing;
    }

    &:hover {
      transform: translate(-50%, -50%) scale(1.05);
    }
    &:focus {
      @include focus-outline("blurred");
    }
    &:active {
      background: $link-visited;
      transform: translate(-50%, -50%) scale(1.25);
    }
  }

  .#{$prefix}--slider__input {
    display: none;
  }

  .#{$prefix}--slider-text-input {
    width: calcRem(60px);
    //height: 2rem;
    padding: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;

    .#{$prefix}--text-input {
      //Repeating style here since the textInput doesn't accept classname
      min-width: 0;
      width: calcRem(60px);
      padding: 0;
      text-align: center;
      font-weight: 600;
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      display: none;
    }
  }
  /* stylelint-enable */
}