@use "sass:math";

// core
.p-slider {
  position: relative;
}

.p-slider .p-slider-handle {
  cursor: grab;
  touch-action: none;
  display: block;
}

.p-slider-range {
  display: block;
}

.p-slider-horizontal .p-slider-range {
  top: 0;
  left: 0;
  height: 100%;
}

.p-slider-horizontal .p-slider-handle {
  top: 50%;
}

.p-slider-vertical {
  height: 100px;
}

.p-slider-vertical .p-slider-handle {
  left: 50%;
}

.p-slider-vertical .p-slider-range {
  bottom: 0;
  left: 0;
  width: 100%;
}

// theme
.p-slider {
  background: $sliderBg;
  border: $sliderBorder;
  border-radius: $borderRadius;

  &.p-slider-horizontal {
    height: $sliderHorizontalHeight;

    .p-slider-handle {
      margin-top: math.div(-1 * $sliderHandleHeight, 2);
      margin-left: math.div(-1 * $sliderHandleWidth, 2);
    }
  }

  &.p-slider-vertical {
    width: $sliderVerticalWidth;

    .p-slider-handle {
      margin-left: math.div(-1 * $sliderHandleWidth, 2);
      margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
    }
  }

  .p-slider-handle {
    height: $sliderHandleHeight;
    width: $sliderHandleWidth;
    background: $sliderHandleBg;
    border: $sliderHandleBorder;
    border-radius: $sliderHandleBorderRadius;
    transition: $formElementTransition;
    outline-color: transparent;

    &:focus-visible {
      @include focused();
    }
  }

  .p-slider-range {
    background: $sliderRangeBg;
    border-radius: $borderRadius;
  }

  &:not(.p-disabled) {
    .p-slider-handle:hover {
      background: $sliderHandleHoverBg;
      border-color: $sliderHandleHoverBorderColor;
    }
  }
}