@use "sass:math";
@use "../../../variables/index" as *;

@use "../../mixins/shadows-helper";
@use "../../mixins/tab-focus";


/**
 * 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
 */
@mixin 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;
}

@mixin 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 {
    @include 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: math.div((-$track-border-width * 2 + $track-height), 2) - math.div($thumb-height, 2);

    @include thumb();
    -webkit-appearance: none;
  }

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

  // Mozilla
  &::-moz-range-track {
    @include 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 {
    @include thumb();
  }

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

  //Internet explorer
  &::-ms-track {
    @include 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 {
    @include 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 {
      @include tab-focus.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);
      @include shadows-helper.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;
}