/* =====================================
   SLIDER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Slider Labels ============= */
    /* Slider Value Labels */
    .super, .range-slider-value{
        font-size: var(--font-size-base);
        font-family: var(--font-family-sans);
        font-weight: 600;
        color: var(--foreground-primary);
        margin-bottom: 0px;
    }

    /* ============= Toggle Switch ============= */
    /* Toggle Switch Container */
    .slide-toggle-container{
        height: 24px;
        width: 48px;
        border-radius: 100%;
        margin: 0 12px;
    }

    /* Toggle Switch Base */
    .slide-toggle-container .slide-toggle{
        background: var(--input-slider-color);
        padding: 2px;
        height: 24px;
    }

    /* Toggle Switch Thumb */
    .slide-toggle-container .slide-toggle::before{
        content: "";
        display: block;
        height: 20px;
        width: 20px;
        background: var(--input-slider-thumb);
        border-radius: 100%;
        transition: transform 0.2s ease-in-out;
        margin: 0px;
        top: 0px;
        left: 0px;
    }

    /* Toggle Switch Checked State */
    .slide-toggle-container .toggle-control:checked+.slide-toggle::before{
        transform: translateX(24px);
    }

    /* ============= Range Slider ============= */
    /* Range Slider Base */
    input.range-slider{
        background: var(--input-slider-color);
        height: 24px;
        padding: 2px !important;
        max-height: 24px !important;
    }

    /* ============= Range Slider Webkit Styles ============= */
    /* Range Slider Thumb */
    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--input-slider-thumb);
        cursor: pointer;
        -webkit-transition: .15s ease-in-out;
        transition: .15s ease-in-out;
    }

    /* Range Slider Thumb Hover State */
    .range-slider::-webkit-slider-thumb:hover {
        background: var(--input-slider-thumb);
    }

    /* Range Slider Thumb Active State */
    .range-slider:active::-webkit-slider-thumb {
        background: var(--input-slider-thumb);
    }
}