/* ==========================================================================
   GLOBAL PAGE LOADER
   ========================================================================== */

.global-page-loader {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 20px;

    background:
        rgba(17, 17, 17, .94);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


/* ==========================================================================
   ACTIVE
   ========================================================================== */

.global-page-loader.is-active {
    opacity: 1;

    visibility: visible;

    pointer-events: all;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.global-page-loader__content {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 130px;

    text-align: center;
}


/* ==========================================================================
   SPINNER
   ========================================================================== */

.global-page-loader__spinner {
    width: 30px;
    height: 30px;

    border: 2px solid rgba(255, 255, 255, .25);

    border-top-color: #fff;

    border-radius: 50%;

    animation:
        globalPageLoaderSpin
        .7s linear infinite;
}


@keyframes globalPageLoaderSpin {

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================================
   TEXT
   ========================================================================== */

.global-page-loader__text {
    color: #fff;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/* ==========================================================================
   LOCK PAGE WHILE LOADING
   ========================================================================== */

html.global-loader-active,
body.global-loader-active {
    overflow: hidden;
}


/* ==========================================================================
   REDUCE MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .global-page-loader {
        transition: none;
    }

    .global-page-loader__spinner {
        animation-duration: 1.5s;
    }

}