/**
 * settings-card.css
 * 
 * Refactored: Extracted from settings_card_floating.html template
 * Styles for the floating settings card component.
 */

/* ========== Range Slider Thumb ========== */
.slider-thumb::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: hsl(var(--primary));
    border: 2px solid hsl(var(--background));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-thumb::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.slider-thumb::-webkit-slider-thumb:active {
    transform: scale(1.05);
}

.slider-thumb::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: hsl(var(--primary));
    border: 2px solid hsl(var(--background));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-thumb::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* ========== Slider Track ========== */
.slider-thumb::-webkit-slider-runnable-track {
    background: linear-gradient(to right, 
        hsl(var(--primary)) 0%, 
        hsl(var(--primary)) var(--slider-progress, 75%), 
        hsl(var(--muted)) var(--slider-progress, 75%), 
        hsl(var(--muted)) 100%);
    border-radius: 4px;
}

.slider-thumb::-moz-range-track {
    background: hsl(var(--muted));
    border-radius: 4px;
}

.slider-thumb::-moz-range-progress {
    background: hsl(var(--primary));
    border-radius: 4px;
}

/* ========== Card Collapsed State ========== */
#floating-settings-card.collapsed #settings-card-body {
    display: none;
}

#floating-settings-card.collapsed {
    width: auto;
}

#floating-settings-card.collapsed #collapse-icon {
    transform: rotate(180deg);
}

/* ========== Advanced Settings Toggle ========== */
.rotate-90 {
    transform: rotate(90deg);
}

#advanced-chevron {
    transition: transform 0.2s ease;
}