@use 'sass:math';

.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;

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

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

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