//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions://
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.//
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "@material/typography/mixins";
@import "@material/rtl/mixins";
@import "./keyframes";
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define slider

.mdc-slider {
  @include mdc-slider-color-accessible(secondary);

  &--disabled {
    $disabled-color: #9a9a9a;

    @include mdc-slider-highlight-color_($disabled-color);
    @include mdc-slider-rail-color_($disabled-color);
    @include mdc-slider-rail-tick-mark-color_($disabled-color);
    @include mdc-slider-thumb-color_($disabled-color);
    @include mdc-slider-thumb-stroke-cutout_(white);

    cursor: auto;
  }

  position: relative;
  width: 100%;
  height: 48px;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-tap-highlight-color: rgba(black, 0);

  &:focus {
    outline: none;
  }

  &__track-container {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    overflow: hidden;
  }

  &__track {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left top;
    will-change: transform;

    @include mdc-rtl(".mdc-slider") {
      transform-origin: right top;
    }
  }

  &__track-marker-container {
    display: flex;
    margin-right: 0;
    margin-left: -1px;
    visibility: hidden;

    @include mdc-rtl(".mdc-slider") {
      margin-right: -1px;
      margin-left: 0;
    }

    // Last marker at the very end of the slider (right-most in LTR, left-most in RTL)
    &::after {
      display: block;
      width: 2px;
      height: 2px;
      content: "";
    }
  }

  &__track-marker {
    flex: 1;

    &::after {
      display: block;
      width: 2px;
      height: 2px;
      content: "";
    }

    &:first-child::after {
      width: 3px;
    }
  }

  &__thumb-container {
    position: absolute;
    top: 15px;
    left: 0;
    width: 21px;
    // Ensure that touching anywhere within the Y-coordinate space of thumb
    // is considered "clicking on the thumb".
    height: 100%;
    user-select: none;
    will-change: transform;
  }

  &__thumb {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(.571);
    transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
    stroke-width: 3.5;
  }

  &__focus-ring {
    width: 21px;
    height: 21px;
    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
    border-radius: 50%;
    opacity: 0;
  }

  &__pin {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -2px;
    margin-left: -2px;
    transform: rotate(-45deg) scale(0) translate(0, 0);
    transition: transform 100ms ease-out;
    border-radius: 50% 50% 50% 0%;

    // Ensuring that the pin is higher than the thumb in the stacking order
    // removes some rendering jank observed in Chrome.
    z-index: 1;
  }

  &__pin-value-marker {
    @include mdc-typography(body2);

    transform: rotate(45deg);
  }
}

.mdc-slider--active {
  .mdc-slider__thumb {
    transform: scale3d(1, 1, 1);
  }
}

.mdc-slider--focus {
  .mdc-slider__thumb {
    animation: mdc-slider-emphasize 266.67ms linear;
  }

  .mdc-slider__focus-ring {
    transform: scale3d(1.55, 1.55, 1.55);
    opacity: .25;
  }
}

.mdc-slider--in-transit {
  .mdc-slider__thumb {
    transition-delay: 140ms;
  }
}

// NOTE(traviskaufman): There are multiple cases where we want the slider to
// transition seamlessly even though we're jumping to a spot. The selectors
// below highlight these cases. The selectors are supplemented by a comment
// denoting their semantic meaning within the slider.

// When a user clicks somewhere on the track that is not directly the slider
// thumb container, we transition to the place where the user clicked.
.mdc-slider--in-transit,
// When a user is using the arrow keys to modify the value of the slider rather
// than dragging with a pointer, we transition from one value to another.
.mdc-slider:focus:not(.mdc-slider--active) {
  .mdc-slider__thumb-container,
  .mdc-slider__track {
    transition: transform 80ms ease;
  }
}

.mdc-slider--discrete {
  // stylelint-disable plugin/selector-bem-pattern
  &.mdc-slider--active {
    .mdc-slider__thumb {
      transform: scale(calc(12 / 21));
    }

    .mdc-slider__pin {
      transform: rotate(-45deg) scale(1) translate(19px, -20px);
    }
  }

  &.mdc-slider--focus {
    .mdc-slider__thumb {
      animation: none;
    }
  }

  &.mdc-slider--display-markers {
    .mdc-slider__track-marker-container {
      visibility: visible;
    }
  }
  // stylelint-enable plugin/selector-bem-pattern
}

// postcss-bem-linter: end