//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@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