@c8y/style/styles/components/data-input/_c8y-range.less

Styles for Cumulocity IoT applications

@import "../../mixins/_shadows-helper.less";
@import "../../mixins/_tab-focus.less";


/**
 * c8y range - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.track() {
  width: @track-width;
  height: @track-height;
  border-radius: @track-radius;
  box-shadow: inset 0 0 0 1px @form-control-border-color-default;
  cursor: pointer;
}

.thumb() {
  width: @thumb-width;
  height: @thumb-height;
  border: 0;
  border-radius: @thumb-radius;
  background: @component-background-default;
  box-shadow:
    inset 0 0 0 1px @form-control-border-color-default,
    1px 1px 1px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(13, 13, 13, 0.1);
  cursor: pointer;
  .range-wrap.inline & {
    opacity: 0;
  }
}

// Generic input type="range" styling
input[type='range'] {
  margin: 0;
  width: @track-width;
  height: @track-height;
  border-radius: @track-radius;
  box-shadow: inset 0 0 0 1px @form-control-border-color-default;
  -webkit-appearance: none;
  appearance: none;
  align-self: center;
  &::-moz-focus-outer {
    border: 0;
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }

  // webkit
  &::-webkit-slider-runnable-track {
    .track();
    border: 0;
    background: linear-gradient(
      90deg,
      @component-brand-primary var(--track-width, 0),
      @component-background-default var(--track-width, 0)
);
    transition: all 0.2s ease;
  }

  &::-webkit-slider-thumb {
    margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);

    .thumb();
    -webkit-appearance: none;
  }

  &:focus::-webkit-slider-thumb {
    box-shadow: inset 0 0 0 2px @track-focus-color;
  }

  // Mozilla
  &::-moz-range-track {
    .track();
    border: 0;
    background: linear-gradient(
      90deg,
      @component-brand-primary var(--track-width, 0),
      @component-background-default var(--track-width, 0)
);
    transition: all 0.2s ease;
  }

  &::-moz-range-thumb {
    .thumb();
  }

  &:focus::-moz-range-thumb {
    box-shadow: inset 0 0 0 2px @track-focus-color;
  }

  //Internet explorer
  &::-ms-track {
    .track();
    border-width: @thumb-width 0;
    border-color: transparent;
    background: transparent;
    color: transparent;
  }

  &::-ms-fill-lower {
    border: 0;
    border-radius: @track-radius*2;
    background: @component-brand-primary;
    box-shadow: inset 0 1px 2px @component-border-color;
  }

  &::-ms-fill-upper {
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
    background: @track-color;
    box-shadow: inset 0 1px 2px @component-border-color;
  }

  &::-ms-thumb {
    .thumb();
  }
}

// disabled
input[type='range'][disabled] {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.range-wrap {
  position: relative;
  height: @form-control-height-base;
  display: flex;
  align-items: center;
  .form-group-sm & {
    height: @form-control-height-sm;
  }
  &.start,
  &.end {
    display: flex;
    flex-direction: row;
    gap: @size-base;
  }
  &.inline:has(input[type='range']:focus) {
    .range-value > span {
      .c8y-focus-inset();
    }
  }
}

.range-wrap input[type='range'] {
  width: 100%;
}

.range-value {
  position: absolute;
  height: calc(@size-base * 3);
  top: 0;
  transform: translateY(-19px);

  .range-wrap.inline & {
    top: 50%;
    transform: translateY(calc(-50% + -1px));
  }
  .range-wrap:not(.start):not(.end) & {
    > span,
    > div {
      position: absolute;
      left: 50%;
      display: block;
      padding: 0 8px;
      width: auto;
      height: calc(@size-base * 3);
      border: 1px solid @popover-border-color;
      border-radius: 4px;
      background: @component-background-default;
      text-align: center;
      white-space: nowrap;
      font-size: @font-size-small;
      line-height: 23px;
      transform: translate(-50%, 0);
      .boxShadowHelper(sm);
      pointer-events: none;
    }
  }
  .range-wrap.start &,
  .range-wrap.end & {
    position: static;
    flex-shrink: 0;
    height: auto;
    transform: none;
    > span:after,
    > span:before {
      display: none;
    }
  }
  .range-wrap.start & {
    order: 0;
  }
  .range-wrap.end & {
    order: 10;
  }
}

.range-value > span:after,
.range-value > span:before {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -1px;
  width: 0;
  height: 0;
  border-top: 6px solid @component-background-default;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  transform: translateX(-50%);
  .range-wrap.inline & {
    display: none;
  }
}

.range-value > span:before {
  margin-top: 0;
  border-top: 6px solid @popover-border-color;
}