/* Slider
   ========================================================================== */

/**
 * jQuery UI Slider.
 *
 * Some classes and HTML elements generally added via JavaScript, more info -
 * https://jqueryui.com/slider/
 *
 * Example HTML:
 *
 * <div class="ui-slider ui-slider-horizontal">
 *     <div class="ui-slider-range" style="left: 17%; width: 50%;"></div>
 *     <a class="ui-slider-handle" style="left: 17%;"></a>
 *     <a class="ui-slider-handle" style="left: 67%;"></a>
 * </div>
 */

.ui-slider {
    position: relative;
    box-sizing: border-box;
    background-color: $color-gradient-to;
    text-align: left;

    &:hover {
        border-color: shade($color-border, 15%);

        .ui-slider-handle {
            border-color: shade($color-border, 15%);
        }
    }

    .ui-slider-handle {
        position: absolute;
        z-index: 2;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: $color-background;

        @if $flat-theme < 1 {
            box-shadow: $standard-shadow;
        }

        cursor: pointer;
        touch-action: manipulation;
    }

    .ui-slider-range {
        display: block;
        position: absolute;
        z-index: 1;
        border: 0;
        background: $color-background-box;
        font-size: 10px;
    }
}

@include dark-mode {
    .ui-slider {
        border-color: $dark-color-border-extra-dark;
        background-color: $dark-color-background-form;

        &:hover {
            border-color: $dark-color-border-extra-light;

            .ui-slider-handle {
                border-color: $dark-color-border-extra-light;
            }
        }

        .ui-slider-handle {
            @include gradient-linear($color-button-gradient-from, $color-button-gradient-to);

            box-shadow: $dark-standard-shadow;

            &:hover {
                @include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));
            }
        }

        .ui-slider-range {
            background: $dark-color-gradient-from;
        }
    }
}

/**
 * Slider - horizontal format.
 *
 * Example HTML:
 *
 * <div class="ui-slider ui-slider-horizontal">
 */

.ui-slider-horizontal {
    height: 12px;
    margin-bottom: 1em;

    .ui-slider-handle {
        top: -5px;
        margin-left: -10px;
    }

    .ui-slider-range {
        top: 0;
        height: 100%;
    }

    .ui-slider-range-min {
        left: 0;
    }

    .ui-slider-range-max {
        right: 0;
    }
}

/**
 * Slider - vertical format.
 *
 * Example HTML:
 *
 * <div class="ui-slider ui-slider-vertical">
 */

.ui-slider-vertical {
    width: 12px;
    height: 100px;

    .ui-slider-handle {
        left: -20px;
        margin-bottom: -10px;
    }

    .ui-slider-range {
        left: 0;
        width: 100%;
    }

    .ui-slider-range-min {
        bottom: 0;
    }

    .ui-slider-range-max {
        top: 0;
    }
}