/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

.RangeInput {
  $range-input-handle-color: var(--ic-brand-primary);
  $range-input-handle-color-hover: var(--ic-brand-primary-darkened-10);

  $range-input-handle-size: 20px;

  $range-input-slider-color: $ic-color-neutral;
  $range-input-value-bg-color: $ic-color-dark;
  $range-input-value-text-color: $ic-color-light;
  $range-input-label-color: $ic-font-color-dark;

  @mixin range-input-handle-selector() {
    &::-webkit-slider-thumb {
      @content;
    }
    &::-ms-thumb {
      @content;
    }
    &::-moz-range-thumb {
      @content;
    }
  }

  @mixin range-input-track-selector() {
    &::-webkit-slider-runnable-track {
      @content;
    }
    &::-moz-range-track {
      @content;
    }
    &::-ms-track {
      @content;
    }
  }

  * {
    box-sizing: border-box;
  }

  width: 100%;

  // Style range input
  input[type=range] {
    -webkit-appearance: none;
    width: 100%; // for Firefox
    outline: none;
    margin: 0; padding: 0; // for IE

    // Slider Handle/Thumb
    @include range-input-handle-selector {
      -webkit-appearance: none;
      width: $range-input-handle-size;
      height: $range-input-handle-size;
      border-radius: 50%;
      background: $range-input-handle-color;
      cursor: pointer;
      transition: all .15s ease-in-out;

      &:hover {
        background: $range-input-handle-color-hover;
      }
    }

    &::-webkit-slider-thumb {
      margin-top: -$range-input-handle-size/4;
    }

    &:focus,
    &:active {
      outline: none;
      @include range-input-handle-selector {
        box-shadow: 0 0 0 3px $ic-color-light,
                    0 0 0 4px var(--ic-brand-primary);
      }
    }

    // remove outline in FF
    &::-moz-focus-inner,
    &::-moz-focus-outer {
      border: 0;
      outline: none;
    }

    @include range-input-track-selector {
      height: $range-input-handle-size/2;
      border-radius: 5px;
      background: $range-input-slider-color;
      border-color: transparent;
      color: transparent;
      cursor: pointer;
      animate: 0.2s;
    }

    &::-ms-track {
      background: transparent;
      border-width: $range-input-handle-size 0;
    }
    &::-ms-fill-upper,
    &::-ms-fill-lower {
      background: $range-input-slider-color;

      border-radius: $range-input-handle-size/2;
    }

    &::-ms-tooltip {
      display: none;
    }
  }

  // Label text
  .RangeInput__label {
    margin: 0 0 $ic-sp/2;
    display: block;
    line-height: 1.3;
    color: $range-input-label-color;
  }

  // Slider + Tooltip
  .RangeInput__control {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // Slider
  .RangeInput__input {
    flex: auto;
  }

  // Tooltip/Selected Value
  .RangeInput__value {
    display: inline-block;
    position: relative;
    width: 70px;
    color: $range-input-value-text-color;
    @include fontSize($ic-font-size--medium);
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: $range-input-value-bg-color;
    padding: 5px 10px;
    margin-#{direction(left)}: 7px;

    &:after {
      content: "";
      position: absolute;
      top: 8px;
      #{direction(left)}: -6px;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-#{direction(right)}: 7px solid $range-input-value-bg-color;
      border-bottom: 7px solid transparent;
    }
  }
}
