//
// _noUiRangeSlider.scss
//

.noUi-target {
    box-shadow: none;
    background-color: var(--#{$prefix}light);
    border: none;
}

.noUi-handle {
    background: var(--#{$prefix}secondary-bg);
    box-shadow: var(--#{$prefix}box-shadow-inset);
    border: 1px solid var(--#{$prefix}border-color);
}

.noUi-connect {
    background: var(--#{$prefix}primary);
}

.noUi-horizontal {
    height: 8px;

    .noUi-handle {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        right: -10px !important;
        top: -7px;

        &::before,
        &::after {
            display: none;
        }

        &:focus {
            outline: 0;
        }
    }

    [data-bs-theme="dark"] &{
        .noUi-handle {
            background: var(--#{$prefix}primary);
        }
    }
}

[data-slider-style="line"] {
    &.noUi-horizontal {
        .noUi-handle {
            width: 8px;
            border-radius: 4px;
            right: -8px !important;
            background: var(--#{$prefix}primary);
            box-shadow: none;
        }
    }
}


// Vertical Slider
.noUi-vertical {
    width: 8px;

    .noUi-handle {
        height: 20px;
        width: 20px;
        right: -6px;
        top: -6px;
        left: auto;
        border-radius: 50%;

        &::before,
        &::after {
            display: none;
        }

        &:focus {
            outline: 0;
        }
    }

    .noUi-origin {
        top: 0;
    }

    [data-bs-theme="dark"] &{
        .noUi-handle {
            background: var(--#{$prefix}primary);
        }
    }
}

// tooltip
.noUi-tooltip {
    padding: $tooltip-padding-y $tooltip-padding-x;
    border-color: var(--#{$prefix}border-color);
    border-radius: $tooltip-border-radius;
    font-weight: $font-weight-semibold;
    background-color: $card-bg;
    color: var(--#{$prefix}body-color);
}

// Marker
.noUi-marker {
    background: var(--#{$prefix}light);
}

.noUi-value-horizontal {
    padding-top: 4px;
    color: var(--#{$prefix}secondary-color);
}

// rangeslider sizes
[data-slider-size="sm"] {
    &.noUi-horizontal {
        height: 4px;

        .noUi-handle {
            width: 16px;
            height: 16px;
        }
    }

    &[data-slider-style="line"] {
        &.noUi-horizontal {
            .noUi-handle {
                width: 6px;
                border-radius: 4px;
                top: -6px !important;
                right: -6px !important;
            }
        }
    }
}

[data-slider-size="lg"] {
    &.noUi-horizontal {
        height: 12px;

        .noUi-handle {
            width: 24px;
            height: 24px;
        }
    }

    &[data-slider-style="line"] {
        &.noUi-horizontal {
            .noUi-handle {
                width: 10px;
                border-radius: 4px;
                right: -10px !important;
            }
        }
    }
}

// rangeslider color
@each $color,
$value in $theme-colors {
    [data-slider-color="#{$color}"] {
        .noUi-connect {
            background: $value;
        }

        [data-bs-theme="dark"] &{
            .noUi-handle {
                background: $value;
            }
        }

        &[data-slider-style="line"] {
            &.noUi-horizontal {
                .noUi-handle {
                    background: $value;
                }
            }
        }
    }
}