/* =============================================================
   COMPONENT / PRELOADER
   
   Оверлей со спиннером на время загрузки.
   ============================================================= */

.preload {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-default);
    background: rgba(0, 0, 0, .3);
}

.preload:not(.hide) {
    opacity: 1;
    pointer-events: auto;
}

.preload::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid transparent;
    border-top-color: var(--brand);
    border-radius: var(--radius-full);
    animation: spin .8s var(--ease-linear) infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}