@import "./range.native";
@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: #{$range-ios-knob-width};
  --bar-height: #{$range-ios-bar-height};
  --bar-background: #{$range-ios-bar-background-color};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: #{$range-ios-bar-border-radius};
  --height: #{$range-ios-slider-height};
}

:host(.range-item-start-adjustment) {
  @include padding(null, null, null, $range-ios-item-padding-horizontal);
}

:host(.range-item-end-adjustment) {
  @include padding(null, $range-ios-item-padding-horizontal, null, null);
}

: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:not(.range-label-placement-stacked)) {
  /**
  * The pin should not overlap any elements that are
  * above the range. By adding padding to the top of the
  * range, it provides a buffer for the pin to move into
  * when it is pressed.
  *
  * The padding is not included when the label is stacked
  * because the pin is below the label.
  * It still requires a buffer to prevent the pin from
  * overlapping the range. The buffer is added to the
  * bottom of the range label instead of the host.
  */
  @include padding(calc($range-ios-padding-vertical + $range-ios-pin-font-size), null, null, null);
}

:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
  /**
  * The pin should not overlap the stacked label. By adding
  * margin to the bottom of the label, it provides a buffer
  * for the pin to move into when it is pressed.
  */
  @include margin(null, null, calc($range-ios-padding-vertical + $range-ios-pin-font-size), null);
}

.range-bar-active {
  bottom: 0;

  width: auto;

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

  &.has-ticks {
    @include border-radius(0);
    @include margin(null, calc(-1 * $range-ios-tick-width * 0.5), null, calc(-1 * $range-ios-tick-width * 0.5));
  }
}

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

  position: absolute;
  top: ($range-ios-hit-height * 0.5) - ($range-ios-tick-height * 0.5);

  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, 100%, 0), scale(0.01));
  @include padding(
    $range-ios-pin-padding-top,
    $range-ios-pin-padding-end,
    $range-ios-pin-padding-bottom,
    $range-ios-pin-padding-start
  );

  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;
}

/**
 * The -100% ensures the pin sits on top
 * of the range-knob-handle container.
 * We apply 11px so that the pin
 * text is closer to the knob inside of the container.
 * We also apply the 11px here instead of using "top"
 * otherwise the pin text will translate below the knob
 * when the text is scaled.
 */
.range-knob-pressed .range-pin,
.range-knob-handle.ion-focused .range-pin {
  transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
}

// iOS Range: Disabled
// --------------------------------------------------
// When the range is disabled, the entire range,
// range label, any slotted labels, and any slotted
// icons need to receive the same opacity.

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