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


// adduse

$material-slider-radius: 50%;
$material-slider-handle-active-border-width: 2px;
$material-slider-handle-inner-size: 12px;
$material-slider-handle-inner-border-width: 1px;
$material-slider-handle-inner-disabled-size: 2px;

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

.dx-slider-bar,
.dx-slider-range {
  margin-top: math.div($material-slider-wrapper-height - $material-slider-track-height, 2);
  height: $material-slider-track-height;
}

.dx-slider-bar {
  margin-right: math.div($material-slider-handle-size, 2) + $material-slider-handle-active-border-width;
  margin-left: math.div($material-slider-handle-size, 2) + $material-slider-handle-active-border-width;
  background: $material-slider-bar-bg;
}

.dx-slider-range {
  top: math.div($material-slider-track-height, 2) - math.div($material-slider-handle-size, 2);

  &.dx-slider-range-visible {
    background: $material-slider-bg;
  }
}

.dx-slider-handle {
  margin-top: math.div($material-slider-track-height, 2) - math.div($material-slider-handle-size, 2);
  margin-inline-end: math.div(-$material-slider-handle-size, 2);
  width: $material-slider-handle-size;
  height: $material-slider-handle-size;
  border-radius: $material-slider-radius;

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin-top: math.div(-$material-slider-handle-inner-size, 2);
    margin-left: math.div(-$material-slider-handle-inner-size, 2);
    width: $material-slider-handle-inner-size;
    height: $material-slider-handle-inner-size;
    background: $material-slider-bg;
    content: "";
    border-radius: $material-slider-radius;
  }

  .dx-tooltip-wrapper {
    &.dx-popover-wrapper .dx-popover-arrow {
      display: block;

      &::after {
        background: $tooltip-bg;
        border: none;
      }
    }

    .dx-overlay-content {
      border: 1px solid transparent;
      opacity: 0.6;

      .dx-popup-content {
        line-height: normal;
        color: $material-slider-tooltip-color;
        padding: $material-slider-tooltip-popup-content-padding;

        .dx-slider-tooltip-position-top & {
          padding-top: 6px;
        }
      }

      &.dx-state-disabled {
        .dx-popup-content {
          padding-top: math.div($material-slider-tooltip-width, 2);

          .dx-slider-tooltip-position-top & {
            padding-top: 6px;
            padding-bottom: math.div($material-slider-tooltip-width, 2);
          }
        }
      }
    }
  }

  .dx-inkripple-wave {
    background-color: $material-slider-active;
  }
}

.dx-slider-tooltip-position-top {
  padding-top: $material-slider-tooltip-width + 6;
}

.dx-slider-tooltip-position-bottom {
  padding-bottom: $material-slider-tooltip-width + 6;
}

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

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

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

    .dx-slider-handle {
      opacity: 1;
    }
  }

  .dx-slider-bar {
    background: $material-slider-bar-disabled-bg;
  }

  .dx-slider-range.dx-slider-range-visible {
    background: $material-slider-disabled-bg;
  }

  .dx-slider-handle {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    margin-right: -5px;
    border-radius: 50%;
    border: 2px solid $base-bg;

    &::after {
      margin-top: math.div(-$material-slider-handle-inner-disabled-size, 2) - $material-slider-handle-inner-border-width - 2px;
      margin-left: math.div(-$material-slider-handle-inner-disabled-size, 2) - $material-slider-handle-inner-border-width - 2px;
      width: 8px;
      height: 8px;
      background: grey;
    }

    .dx-overlay-content {
      margin-top: -12px;
    }
  }
}

.dx-invalid {
  .dx-slider-handle::after {
    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-rtl {
  &.dx-state-disabled {
    .dx-slider-handle {
      margin-left: -5px;
      margin-right: 0;
    }

    .dx-overlay-content {
      margin-left: -13px;
    }
  }
}