@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/slider";

// adduse

$generic-slider-radius: 2px;

.dx-slider {
  .dx-tooltip-wrapper {
    .dx-overlay-content {
      box-shadow: none;
    }
  }

  .dx-state-active {
    &.dx-slider-handle {
      border: 1px solid $slider-handle-border-color;
      background: $slider-handle-active-bg;
    }
  }

  .dx-state-focused {
    &.dx-slider-handle:not(.dx-state-active) {
      border: 1px solid $slider-handle-border-color;
      background: $slider-handle-focused-bg;
    }
  }

  .dx-state-hover {
    &.dx-slider-handle:not(.dx-state-active) {
      border: 1px solid $slider-handle-border-color;
      background: $slider-handle-hover-bg;
    }
  }
}

.dx-slider-wrapper {
  height: $generic-slider-height;
}

.dx-slider-bar {
  margin: math.div($generic-slider-height, 2) math.div($generic-slider-width, 2);
  height: $generic-slider-track-height;
  background: $slider-bar-bg;
  border-radius: $generic-slider-radius;
}

.dx-slider-range {
  border: 1px solid transparent;
  height: $generic-slider-track-height - 2px;
  box-sizing: content-box;

  &.dx-slider-range-visible {
    border: 1px solid $slider-range-border-color;
    background: $slider-range-bg;
    border-radius: $generic-slider-radius;
  }
}

.dx-slider-label-position-bottom {
  .dx-slider-label {
    bottom: -17px;
  }
}

.dx-slider-label-position-top {
  .dx-slider-label {
    top: -14px;
  }
}


.dx-slider-handle {
  margin-top: math.div(-$generic-slider-height, 2);
  margin-inline-end: math.div(-$generic-slider-width, 2);
  width: $generic-slider-width;
  height: $generic-slider-height;
  border: 1px solid $slider-handle-border-color;
  background-color: $slider-handle-bg;
  border-radius: $slider-handle-border-radius;
  box-sizing: content-box;
}

.dx-state-disabled .dx-slider,
.dx-state-disabled.dx-slider {
  opacity: 1;

  .dx-slider-bar {
    opacity: 0.5;
  }
}

.dx-invalid {
  .dx-slider-handle {
    background-color: $base-invalid-color;
  }

  .dx-slider-range-visible {
    background-color: $base-invalid-color;
    border-color: $base-invalid-color;
  }

  .dx-slider-bar {
    background-color: color.change($base-invalid-color, $alpha: 0.4);
  }

  .dx-state-hover,
  .dx-state-focused {
    &.dx-slider-handle:not(.dx-state-active) {
      background: $slider-invalid-handle-accent-bg;
    }
  }
}