range.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@import "./range.common";

// Ionic Range
// --------------------------------------------------

:host {
  --knob-border-radius: #{globals.$ion-border-radius-full};
  --knob-background: #{globals.$ion-bg-input-default};
  --knob-box-shadow: none;
  --knob-size: #{globals.$ion-scale-600};
  --knob-handle-size: #{globals.$ion-scale-1100};
  --bar-height: #{globals.$ion-scale-200};
  --bar-background: #{globals.$ion-bg-neutral-subtle-default};
  --bar-background-active: #{globals.ion-color(primary, base)};
  --bar-border-radius: #{globals.$ion-border-radius-400};
  --height: #{globals.$ion-scale-1100};

  @include globals.typography(globals.$ion-body-md-regular);

  z-index: globals.$ion-z-index-100;
}

:host(.range-item-start-adjustment) {
  @include padding(null, null, null, globals.$ion-space-600);
}

:host(.range-item-end-adjustment) {
  @include padding(null, globals.$ion-space-600, null, null);
}

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

::slotted(ion-icon[slot]) {
  font-size: globals.$ion-font-size-600;
}

::slotted([slot="start"]) {
  @include margin(0, globals.$ion-space-400, 0, 0);
}

::slotted([slot="end"]) {
  @include margin(0, 0, 0, globals.$ion-space-400);
}

::slotted([slot="label"]) {
  max-width: globals.$ion-scale-5000;
}

: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(globals.$ion-space-100 + globals.$ion-scale-600), 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(globals.$ion-space-200 + globals.$ion-font-size-300), null);
}

.range-bar.range-bar-active {
  bottom: 0;

  width: auto;

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

  &.has-ticks {
    @include border-radius(0);
    @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5));
  }
}

.range-tick {
  @include margin-horizontal(calc(globals.$ion-scale-100 * -0.5), null);
  @include border-radius(globals.$ion-border-radius-0);

  position: absolute;
  top: calc((var(--height) * 0.5) - (globals.$ion-scale-300 * 0.5));

  width: globals.$ion-scale-100;
  height: globals.$ion-scale-300;

  background: globals.$ion-primitives-neutral-100;
  pointer-events: none;
}

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

.range-pin {
  @include padding(null, null, globals.$ion-space-100, null);

  min-width: globals.$ion-scale-700;

  transform: translate3d(0, calc(-100%), 0);

  background: transparent;

  color: globals.$ion-text-default;

  font-size: globals.$ion-font-size-300;

  text-align: center;
}

.range-knob {
  border-width: globals.$ion-border-size-025;
  border-style: globals.$ion-border-style-solid;
  border-color: globals.$ion-border-primary;
  box-sizing: border-box;
}

// Ionic Range: Disabled (based on iOS Range)
// --------------------------------------------------
// 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) {
  --bar-background: #{globals.$ion-bg-neutral-subtle-default};

  .range-knob {
    border-color: globals.$ion-border-input-default;

    background: globals.$ion-bg-input-disabled;
  }
}

// Range Label Placement - Start
// ----------------------------------------------------------------

:host(.range-label-placement-start) .label-text-wrapper {
  /**
   * The margin between the label and
   * the range should be on the end
   * when the label sits at the start.
   */
  @include margin(0, globals.$ion-space-400, 0, 0);
}

// Range Label Placement - End
// ----------------------------------------------------------------

:host(.range-label-placement-end) .label-text-wrapper {
  /**
   * The margin between the label and
   * the range should be on the start
   * when the label sits at the end.
   */
  @include margin(0, 0, 0, globals.$ion-space-400);
}

// Range Label Placement - Fixed
// ----------------------------------------------------------------

:host(.range-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the range should be on the end
   * when the label sits at the start.
   */
  @include margin(0, globals.$ion-space-400, 0, 0);
}

// Range Label Placement - Stacked
// ----------------------------------------------------------------

:host(.range-label-placement-stacked) .label-text-wrapper {
  @include transform(scale(0.75));

  /**
  * The margin between the label and
  * the range should be on the bottom
  * when the label sits on top.
  */
  @include margin(null, 0, globals.$ion-space-400, 0);

  /**
   * Label text should not extend
   * beyond the bounds of the range.
   */
  max-width: calc(100% / 0.75);
}

:host(.in-item.range-label-placement-stacked) .label-text-wrapper {
  @include margin(globals.$ion-space-250, null, globals.$ion-space-400, null);
}

:host(.in-item.range-label-placement-stacked) .native-wrapper {
  @include margin(null, null, globals.$ion-space-0, null);
}

// Range Focus
// ----------------------------------------------------------------

.range-knob-handle.ion-focused .range-knob {
  @include globals.focused-state();
}

// Range Pressed
// ----------------------------------------------------------------
.range-knob-handle.ion-activated .range-knob,
.range-knob-handle.range-knob-pressed .range-knob {
  background: globals.$ion-bg-input-press;
}