@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;
        }
    }
}
