@import "./range";
@import "./range.ios.vars";

// iOS Range
// --------------------------------------------------

:host {
  --knob-border-radius: 50%;
  --knob-background: #{$range-ios-knob-background-color};
  --knob-box-shadow: #{$range-ios-knob-box-shadow};
  --knob-size: 28px;
  --bar-height: #{$range-ios-bar-height};
  --bar-background: #{$range-ios-bar-background-color};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-ios-slider-height};

  @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
}

:host(.ion-color) .range-bar-active,
:host(.ion-color) .range-tick-active {
  background: current-color(base);
}

::slotted([slot="start"]) {
  @include margin(0, 16px, 0, 0);
}

::slotted([slot="end"]) {
  @include margin(0, 0, 0, 16px);
}

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

.range-bar-active {
  bottom: 0;

  width: auto;

  background: var(--bar-background-active);
}

.range-tick {
  @include margin-horizontal(-($range-ios-tick-width / 2), null);
  @include border-radius($range-ios-tick-border-radius);

  position: absolute;
  top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);

  width: $range-ios-tick-width;
  height: $range-ios-tick-height;

  background: $range-ios-tick-background-color;
  pointer-events: none;
}

.range-tick-active {
  background: var(--bar-background-active);
}

.range-pin {
  @include transform(translate3d(0, 28px, 0), scale(.01));
  @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start);

  display: inline-block;
  position: relative;
  top: -20px;

  min-width: 28px;

  transition: transform 120ms ease;

  background: $range-ios-pin-background-color;
  color: $range-ios-pin-color;

  font-size: $range-ios-pin-font-size;

  text-align: center;
}

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

:host(.range-disabled) {
  opacity: .5;
}