@layer components {

    .reading-progress {
        width: 100%;
        height: var(--reading-progress-height, 3px);
        background: var(--reading-progress-bg, transparent);
        pointer-events: none;
    }

    .reading-progress--below {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: var(--z-dropdown-panel);
    }

    .reading-progress__bar {
        height: 100%;
        width: 0%;
        background: var(--reading-progress-color, var(--color-primary));
        will-change: width;
    }

    .reading-progress__bar[style*="--gradient"] {
        background: linear-gradient(
            90deg,
            var(--reading-progress-color, var(--color-primary)),
            var(--reading-progress-color-end, var(--color-secondary))
        );
    }

    .reading-progress[data-smooth] .reading-progress__bar {
        transition: width 150ms linear;
    }

    @media (prefers-reduced-motion: reduce) {
        .reading-progress[data-smooth] .reading-progress__bar {
            transition: none;
        }
    }

    @media print {
        .reading-progress {
            display: none;
        }
    }
}