// Overrides for the default theme (vendor/nouislider)

/* stylelint-disable selector-class-pattern */

.noUi-handle {
    background: config('colors.white');
    border: 1px solid config('grey-lighter');
    border-radius: 100%;
    box-shadow: none;
}

// hide the default 'handle stripes'
.noUi-handle::before,
.noUi-handle::after {
    display: none;
}

// set default slider 'thickness'
.noUi-vertical {
    width: 10px;
}

.noUi-horizontal {
    height: 10px;
}

// set handle size

/* Slider property height is defined by .noUi-horizontal {.
 * top = (height- 2px) / 2.
 * This moves the handle down into the horizontal middle of the slider.
 */
.noUi-horizontal .noUi-handle,
.noUi-vertical .noUi-handle {
    height: 20px;
    top: 4px;
    transform: translateX(50%) translateY(-50%);
    width: 20px;
    box-shadow: none;
}
/* Property right gives the handle an orientation where it should be displayed.
 * Set to 0 as we don't want to off-center it.
 */
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: 0;
}
/* Property right gives the handle an orientation where it should be displayed.
 * Set to 0 as we don't want to off-center it.
 */
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
    right: 0;
}

// set color of inactive area in slider
.noUi-target {
    border: 0;
    background: config('colors.grey-light');
}

// set color of 'active' area in slider
.noUi-connect {
    background: config('colors.grey-darker');
}
