/**
 * Copyright 2015 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 "../variables";

// Some CSS magic to target only IE.
_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
  -ms-appearance: none;
  // The thumb can't overflow the track or the rest of the control in IE, so we
  // need to make it tall enough to contain the largest version of the thumb.
  height: 32px;
  margin: 0;
}

// Slider component (styled input[type=range]).
.mdl-slider {
  width: calc(100% - 40px);
  margin: 0 20px;

  &.is-upgraded {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2px;
  background: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: 0;
  padding: 0;
  color: $range-color;
  align-self: center;
  z-index: 1;
  cursor: pointer;


  // Disable default focus on Firefox.
  &::-moz-focus-outer {
    border: 0;
  }

  // Disable tooltip on IE.
  &::-ms-tooltip {
    display: none;
  }


  /**************************** Tracks ****************************/
  &::-webkit-slider-runnable-track {
    background: transparent;
  }

  &::-moz-range-track {
    background: transparent;
    border: none;
  }

  &::-ms-track {
    background: none;
    color: transparent;
    height: 2px;
    width: 100%;
    border: none;
  }

  &::-ms-fill-lower {
    padding: 0;
    // Margin on -ms-track doesn't work right, so we use gradients on the
    // fills.
    background: linear-gradient(to right,
    transparent,
    transparent 16px,
    $range-color 16px,
    $range-color 0);
  }

  &::-ms-fill-upper {
    padding: 0;
    // Margin on -ms-track doesn't work right, so we use gradients on the
    // fills.
    background: linear-gradient(to left,
    transparent,
    transparent 16px,
    $range-bg-color 16px,
    $range-bg-color 0);
  }


  /**************************** Thumbs ****************************/
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: $range-color;
    border: none;
    transition: transform 0.18s $animation-curve-default,
    border 0.18s $animation-curve-default,
    box-shadow 0.18s $animation-curve-default,
    background 0.28s $animation-curve-default;
  }

  &::-moz-range-thumb {
    -moz-appearance: none;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background-image: none;
    background: $range-color;
    border: none;
    // -moz-range-thumb doesn't currently support transitions.
  }

  &:focus:not(:active)::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px $range-faded-color;
  }

  &:focus:not(:active)::-moz-range-thumb {
    box-shadow: 0 0 0 10px $range-faded-color;
  }

  &:active::-webkit-slider-thumb {
    background-image: none;
    background: $range-color;
    transform: scale(1.5);
  }

  &:active::-moz-range-thumb {
    background-image: none;
    background: $range-color;
    transform: scale(1.5);
  }

  &::-ms-thumb {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: $range-color;
    transform: scale(0.375);
    // -ms-thumb doesn't currently support transitions, but leaving this here
    // in case support ever gets added.
    transition: transform 0.18s $animation-curve-default,
    background 0.28s $animation-curve-default;
  }

  &:focus:not(:active)::-ms-thumb {
    background: radial-gradient(circle closest-side,
    $range-color 0%,
    $range-color 37.5%,
    $range-faded-color 37.5%,
    $range-faded-color 100%);
    transform: scale(1);
  }

  &:active::-ms-thumb {
    background: $range-color;
    transform: scale(0.5625);
  }


  /**************************** 0-value ****************************/
  &.is-lowest-value::-webkit-slider-thumb {
    border: 2px solid $range-bg-color;
    background: transparent;
  }

  &.is-lowest-value::-moz-range-thumb {
    border: 2px solid $range-bg-color;
    background: transparent;
  }

  &.is-lowest-value +
    .mdl-slider__background-flex > .mdl-slider__background-upper {
    left: 6px;
  }

  &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px $range-bg-focus-color;
    background: $range-bg-focus-color;
  }

  &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
    box-shadow: 0 0 0 10px $range-bg-focus-color;
    background: $range-bg-focus-color;
  }

  &.is-lowest-value:active::-webkit-slider-thumb {
    border: 1.6px solid $range-bg-color;
    transform: scale(1.5);
  }

  &.is-lowest-value:active +
    .mdl-slider__background-flex > .mdl-slider__background-upper {
    left: 9px;
  }

  &.is-lowest-value:active::-moz-range-thumb {
    border: 1.5px solid $range-bg-color;
    transform: scale(1.5);
  }

  &.is-lowest-value::-ms-thumb {
    background: radial-gradient(circle closest-side,
    transparent 0%,
    transparent 66.67%,
    $range-bg-color 66.67%,
    $range-bg-color 100%);
  }

  &.is-lowest-value:focus:not(:active)::-ms-thumb {
    background: radial-gradient(circle closest-side,
    $range-bg-focus-color 0%,
    $range-bg-focus-color 25%,
    $range-bg-color 25%,
    $range-bg-color 37.5%,
    $range-bg-focus-color 37.5%,
    $range-bg-focus-color 100%);
    transform: scale(1);
  }

  &.is-lowest-value:active::-ms-thumb {
    transform: scale(0.5625);
    background: radial-gradient(circle closest-side,
    transparent 0%,
    transparent 77.78%,
    $range-bg-color 77.78%,
    $range-bg-color 100%);
  }

  &.is-lowest-value::-ms-fill-lower {
    background: transparent;
  }

  &.is-lowest-value::-ms-fill-upper {
    margin-left: 6px;
  }

  &.is-lowest-value:active::-ms-fill-upper {
    margin-left: 9px;
  }

  /**************************** Disabled ****************************/

  &:disabled:focus::-webkit-slider-thumb,
  &:disabled:active::-webkit-slider-thumb,
  &:disabled::-webkit-slider-thumb {
    transform: scale(0.667);
    background: $range-bg-color;
  }

  &:disabled:focus::-moz-range-thumb,
  &:disabled:active::-moz-range-thumb,
  &:disabled::-moz-range-thumb {
    transform: scale(0.667);
    background: $range-bg-color;
  }

  &:disabled +
    .mdl-slider__background-flex > .mdl-slider__background-lower {
    background-color: $range-bg-color;
    left: -6px;
  }

  &:disabled +
    .mdl-slider__background-flex > .mdl-slider__background-upper {
    left: 6px;
  }

  &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
  &.is-lowest-value:disabled:active::-webkit-slider-thumb,
  &.is-lowest-value:disabled::-webkit-slider-thumb {
    border: 3px solid $range-bg-color;
    background: transparent;
    transform: scale(0.667);
  }

  &.is-lowest-value:disabled:focus::-moz-range-thumb,
  &.is-lowest-value:disabled:active::-moz-range-thumb,
  &.is-lowest-value:disabled::-moz-range-thumb {
    border: 3px solid $range-bg-color;
    background: transparent;
    transform: scale(0.667);
  }

  &.is-lowest-value:disabled:active +
    .mdl-slider__background-flex > .mdl-slider__background-upper {
    left: 6px;
  }

  &:disabled:focus::-ms-thumb,
  &:disabled:active::-ms-thumb,
  &:disabled::-ms-thumb {
    transform: scale(0.25);
    background: $range-bg-color;
  }

  &.is-lowest-value:disabled:focus::-ms-thumb,
  &.is-lowest-value:disabled:active::-ms-thumb,
  &.is-lowest-value:disabled::-ms-thumb {
    transform: scale(0.25);
    background: radial-gradient(circle closest-side,
    transparent 0%,
    transparent 50%,
    $range-bg-color 50%,
    $range-bg-color 100%);
  }

  &:disabled::-ms-fill-lower {
    margin-right: 6px;
    background: linear-gradient(to right,
    transparent,
    transparent 25px,
    $range-bg-color 25px,
    $range-bg-color 0);
  }

  &:disabled::-ms-fill-upper {
    margin-left: 6px;
  }

  &.is-lowest-value:disabled:active::-ms-fill-upper {
    margin-left: 6px;
  }
  }
}

  // Since we need to specify a height of 32px in IE, we add a class here for a
  // container that brings it back to a reasonable height.
  .mdl-slider__ie-container {
  height: 18px;
  overflow: visible;
  border: none;
  margin: none;
  padding: none;
  }

  // We use a set of divs behind the track to style it in all non-IE browsers.
  // This one contains both the background and the slider.
  .mdl-slider__container {
  height: 18px;
  position: relative;
  background: none;
  display: flex;
  flex-direction: row;
  }

  // This one sets up a flex box for the styled upper and lower portions of the
  // the slider track.
  .mdl-slider__background-flex {
  background: transparent;
  position: absolute;
  height: 2px;
  width: calc(100% - 52px);
  top: 50%;
  left: 0;
  margin: 0 26px;
  display: flex;
  overflow: hidden;
  border: 0;
  padding: 0;
  transform: translate(0, -1px);
  }

  // This one styles the lower part of the slider track.
  .mdl-slider__background-lower {
  background: $range-color;
  flex: 0;
  position: relative;
  border: 0;
  padding: 0;
  }

  // This one styles the upper part of the slider track.
  .mdl-slider__background-upper {
  background: $range-bg-color;
  flex: 0;
  position: relative;
  border: 0;
  padding: 0;
  transition: left 0.18s $animation-curve-default
  }
