/* ============================================
   RSL Scroll Progress Component
   Version: 1.0.0
   Description: A visual indicator showing page scroll
   position as a progress bar at the top of the viewport.
   ============================================ */

/* ──────────────────────────────────────────────
   Progress Bar
   ────────────────────────────────────────────── */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    z-index: 10200;
    width: 0;
}

/* ──────────────────────────────────────────────
   Size Variants
   ────────────────────────────────────────────── */

.scroll-progress-thin {
    height: 3px;
}

.scroll-progress-thick {
    height: 8px;
}

/* ──────────────────────────────────────────────
   Color Variants
   ────────────────────────────────────────────── */

.scroll-progress-primary {
    background: #6E7BFF;
}

.scroll-progress-success {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}

.scroll-progress-danger {
    background: linear-gradient(90deg, #ed213a 0%, #93291e 100%);
}

.scroll-progress-warning {
    background: linear-gradient(90deg, #f2994a 0%, #f2c94c 100%);
}

/* ──────────────────────────────────────────────
   Dark Mode Support
   ────────────────────────────────────────────── */

[data-theme="dark"] .scroll-progress {
    background: linear-gradient(90deg, #7c88ff 0%, #9b6dff 50%, #f0a0ff 100%);
}

/* ──────────────────────────────────────────────
   Reduced Motion Support
   ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        transition: none;
    }
}