@use "variables" as *;

$slider-core-transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;

.p-slider {
    background: $color-palette-gray-300;
    border: 0 none;
    border-radius: 6px;
}
.p-slider.p-slider-horizontal {
    height: 0.286rem;
}
.p-slider.p-slider-horizontal .p-slider-handle {
    margin-top: -0.5715rem;
    margin-left: -0.5715rem;
}
.p-slider.p-slider-vertical {
    width: 0.286rem;
}
.p-slider.p-slider-vertical .p-slider-handle {
    margin-left: -0.5715rem;
    margin-bottom: -0.5715rem;
}
.p-slider .p-slider-handle {
    height: 1.143rem;
    width: 1.143rem;
    background: $white;
    border: 2px solid $color-palette-primary;
    border-radius: 50%;
    transition: $slider-core-transition;
}
.p-slider .p-slider-handle:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem $color-palette-primary-400;
}
.p-slider .p-slider-range {
    background: $color-palette-primary;
}

.p-slider:not(.p-disabled) .p-slider-handle:hover {
    background: $color-palette-primary;
    border-color: $color-palette-primary;
}
.p-slider.p-slider-animate.p-slider-horizontal .p-slider-handle {
    transition:
        $slider-core-transition,
        left 0.2s;
}
.p-slider.p-slider-animate.p-slider-horizontal .p-slider-range {
    transition: width 0.2s;
}
.p-slider.p-slider-animate.p-slider-vertical .p-slider-handle {
    transition:
        $slider-core-transition,
        bottom 0.2s;
}
.p-slider.p-slider-animate.p-slider-vertical .p-slider-range {
    transition: height 0.2s;
}
