/* core/shared/static/shared/css/form-range-filled.css */

/**
 * Filled Range Slider
 * 
 * A CSS-only solution for filled range sliders using native <input type="range">.
 * Uses CSS custom property --fill to control the filled portion.
 * 
 * Usage:
 *   <input type="range" class="form-range-filled" min="0" max="100" value="50"
 *          oninput="this.style.setProperty('--fill', this.value + '%')">
 * 
 * Color Variants:
 *   .form-range-filled                        - Primary color (default)
 *   .form-range-filled.form-range-success     - Success/green color
 *   .form-range-filled.form-range-warning     - Warning/yellow color  
 *   .form-range-filled.form-range-danger      - Danger/red color
 *   .form-range-filled.form-range-info        - Info/cyan color
 *   .form-range-filled.form-range-secondary   - Secondary/gray color
 * 
 * Size variants:
 *   .form-range-filled.form-range-sm          - Small thumb (12px)
 *   .form-range-filled.form-range-lg          - Large (8px track, 20px thumb)
 * 
 * Initialize fill on page load:
 *   document.querySelectorAll('.form-range-filled').forEach(function(slider) {
 *       slider.style.setProperty('--fill', slider.value + '%');
 *   });
 */

/* Base filled range slider - uses CSS custom property for color */
.form-range-filled {
    --slider-color: var(--phoenix-primary);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 1.5px;
    outline: none;
    background: linear-gradient(to right, var(--slider-color) var(--fill, 0%), var(--phoenix-secondary-bg) var(--fill, 0%));
}

.form-range-filled::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.form-range-filled::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-color);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Firefox track */
.form-range-filled::-moz-range-track {
    background: transparent;
}

/* Disabled state */
.form-range-filled:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================
   Color Variants - just override --slider-color
   ============================================ */

.form-range-filled.form-range-success {
    --slider-color: var(--phoenix-success);
}

.form-range-filled.form-range-warning {
    --slider-color: var(--phoenix-warning);
}

.form-range-filled.form-range-danger {
    --slider-color: var(--phoenix-danger);
}

.form-range-filled.form-range-info {
    --slider-color: var(--phoenix-info);
}

.form-range-filled.form-range-secondary {
    --slider-color: var(--phoenix-secondary);
}


/* ============================================
   Size Variants
   ============================================ */

/* Small */
.form-range-filled.form-range-sm {
    height: 4px;
}
.form-range-filled.form-range-sm::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
}
.form-range-filled.form-range-sm::-moz-range-thumb {
    width: 12px;
    height: 12px;
}

/* Large */
.form-range-filled.form-range-lg {
    height: 8px;
}
.form-range-filled.form-range-lg::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
}
.form-range-filled.form-range-lg::-moz-range-thumb {
    width: 20px;
    height: 20px;
}