/**
 * Scroll Indicator Component
 * Horizontal progress bar showing page scroll position
 */

.scroll-indicator {
    position: fixed;
    top: 38px; /* Bottom pixel of header (38px) */
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 10001;
    pointer-events: none;
    background-color: transparent;
}

.scroll-indicator__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-border-a8);
}

.scroll-indicator__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--color-subaccent);
    transition: width 0.1s linear;
    will-change: width;
    overflow: visible;
}

.scroll-indicator__glow {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: var(--color-solid-light);
    pointer-events: none;
}

.scroll-indicator__glow--1 {
    width: 4px;
    filter: blur(4px);
}

.scroll-indicator__glow--2 {
    width: 8px;
    filter: blur(6px);
}

.scroll-indicator__glow--3 {
    width: 16px;
    filter: blur(10px);
}

.scroll-indicator__glow--4 {
    width: 32px;
    filter: blur(16px);
}