@import "../../../themes/ionic.globals.md";

// Material Design Range
// --------------------------------------------------

/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;

/// @prop - Padding start/end of the range
$range-md-padding-horizontal: 8px !default;

/// @prop - Height of the range slider
$range-md-slider-height: 42px !default;

/// @prop - Width of the area that will select the range knob
$range-md-hit-width: 42px !default;

/// @prop - Height of the area that will select the range knob
$range-md-hit-height: $range-md-slider-height !default;

/// @prop - Height of the range bar
$range-md-bar-height: 2px !default;

/// @prop - Background of the range bar
$range-md-bar-background-color: #bdbdbd !default;

/// @prop - Background of the active range bar
$range-md-bar-active-background-color: color($colors-md, primary) !default;

/// @prop - Width of the range knob
$range-md-knob-width: 18px !default;

/// @prop - Height of the range knob
$range-md-knob-height: $range-md-knob-width !default;

/// @prop - Background of the range knob
$range-md-knob-background-color: $range-md-bar-active-background-color !default;

/// @prop - Background of the range knob when the value is the minimum
$range-md-knob-min-background-color: $background-md-color !default;

/// @prop - Border of the range knob when the value is the minimum
$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default;

/// @prop - Width of the range tick
$range-md-tick-width: 2px !default;

/// @prop - Height of the range tick
$range-md-tick-height: $range-md-tick-width !default;

/// @prop - Border radius of the range tick
$range-md-tick-border-radius: 50% !default;

/// @prop - Background of the range tick
$range-md-tick-background-color: #000 !default;

/// @prop - Background of the active range tick
$range-md-tick-active-background-color: $range-md-tick-background-color !default;

/// @prop - Background of the range pin
$range-md-pin-background-color: $range-md-bar-active-background-color !default;

/// @prop - Color of the range pin
$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;

/// @prop - Font size of the range pin
$range-md-pin-font-size: 12px !default;

/// @prop - Padding top/bottom of the range pin
$range-md-pin-padding-vertical: 8px !default;

/// @prop - Padding start/end of the range pin
$range-md-pin-padding-horizontal: 0 !default;

/// @prop - Background of the range pin when the value is the minimum
$range-md-pin-min-background-color: $range-md-bar-background-color !default;

.range-md {
  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
}

.range-md [range-left] {
  @include margin(0, 12px, 0, 0);
}

.range-md [range-right] {
  @include margin(0, 0, 0, 12px);
}

.range-md.range-has-pin {
  @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
}

.range-md .range-slider {
  height: $range-md-slider-height;
}

.range-md .range-bar {
  position: absolute;
  width: 100%;
  height: $range-md-bar-height;
  pointer-events: none;
  background: $range-md-bar-background-color;

  @include position(($range-md-slider-height / 2), null, null, 0);
}

.range-md.range-pressed .range-bar-active {
  will-change: left, right;
}

.range-md.range-pressed .range-knob-handle {
  will-change: left;
}

.range-md .range-bar-active {
  bottom: 0;
  width: auto;
  background: $range-md-bar-active-background-color;
}

.range-md .range-knob-handle {
  position: absolute;
  width: $range-md-hit-width;
  height: $range-md-hit-height;

  @include position(($range-md-slider-height / 2), null, null, 0);
  @include margin(-($range-md-hit-height / 2), null, null, -($range-md-hit-width / 2));
  @include text-align(center);
}

.range-md .range-knob {
  position: absolute;
  z-index: 2;
  width: $range-md-knob-width;
  height: $range-md-knob-height;
  pointer-events: none;
  background: $range-md-knob-background-color;
  transition-timing-function: ease;
  transition-duration: 120ms;
  transition-property: transform, background-color, border;
  transform: scale(0.67);

  @include position(($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2),
  null, null, ($range-md-hit-width / 2) - ($range-md-knob-width / 2));
  @include border-radius(50%);
}

.range-md .range-tick {
  position: absolute;
  top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
  z-index: 1;
  width: $range-md-tick-width;
  height: $range-md-tick-height;
  pointer-events: none;
  background: $range-md-tick-background-color;

  @include margin-horizontal(-($range-md-tick-width / 2), null);
  @include border-radius($range-md-tick-border-radius);
}

.range-md .range-tick-active {
  background: $range-md-tick-active-background-color;
}

.range-md .range-pin {
  position: relative;
  top: -20px;
  display: inline-block;
  min-width: 28px;
  height: 28px;
  font-size: $range-md-pin-font-size;
  color: $range-md-pin-color;
  background: $range-md-pin-background-color;
  transition: transform 120ms ease, background-color 120ms ease;

  @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
  @include text-align(center);
  @include border-radius(50%);
  @include transform(translate3d(0, 28px, 0), scale(0.01));

  &::before {
    position: absolute;
    z-index: -1;
    width: 26px;
    height: 26px;
    content: "";
    background: $range-md-pin-background-color;
    transition: background-color 120ms ease;
    transform: rotate(-45deg);

    @include position(3px, null, null, 50%);
    @include border-radius(50%, 50%, 50%, 0);
    @include margin-horizontal(-13px, null);
  }
}

.range-md .range-knob-pressed .range-pin {
  @include transform(translate3d(0, 0, 0), scale(1));
}

.range-md:not(.range-has-pin) .range-knob-pressed .range-knob {
  transform: scale(1);
}

@mixin md-range-min() {
  .range-md .range-knob-min.range-knob-min {
    .range-knob {
      background: $range-md-knob-min-background-color;
      border: $range-md-knob-min-border;
    }

    .range-pin,
    .range-pin::before {
      color: color-contrast($colors-md, $range-md-pin-min-background-color);
      background: $range-md-pin-min-background-color;
    }
  }
}

@include md-range-min();

.range-md.range-disabled {
  .range-bar-active {
    background-color: $range-md-bar-background-color;
  }

  .range-knob {
    background-color: $range-md-bar-background-color;
    outline: 5px solid #fff;
    transform: scale(0.55);
  }

}

// Generate Material Design Range Colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
  .range-md-#{$color-name} {
    @include md-range-min();

    .range-bar-active,
    .range-knob,
    .range-pin,
    .range-pin::before {
      background: $color-base;
    }
  }

}