/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-loading.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * FRAMEWORK FOUNDATION
 *
 * Purpose
 * -------
 * Universal Loading Engine.
 *
 * Used By
 * -------
 * Search
 * Home
 * Continue Journey
 * Rails
 * Stories
 * Universes
 * Galaxies
 * My List
 * Player
 * Admin
 *
 * ============================================================================
 */


/* ==========================================================================
   Loading Container
   ========================================================================== */

.gs-loading{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:120px;

}


/* ==========================================================================
   Loading Inline
   ========================================================================== */

.gs-loading-inline{

    display:inline-flex;

    align-items:center;

    gap:var(--gs-space-3);

}


/* ==========================================================================
   Spinner
   ========================================================================== */

.gs-spinner{

    width:42px;

    height:42px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.10);

    border-top-color:var(--gs-color-primary);

    animation:

        gsSpinner

        .8s linear infinite;

}

@keyframes gsSpinner{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================================
   Small Spinner
   ========================================================================== */

.gs-spinner-sm{

    width:22px;

    height:22px;

    border-width:3px;

}


/* ==========================================================================
   Large Spinner
   ========================================================================== */

.gs-spinner-lg{

    width:60px;

    height:60px;

    border-width:5px;

}


/* ==========================================================================
   Loading Text
   ========================================================================== */

.gs-loading-text{

    color:var(--gs-color-text-muted);

    font-size:var(--gs-font-size-sm);

    font-weight:var(--gs-font-weight-medium);

}


/* ==========================================================================
   Dots Loader
   ========================================================================== */

.gs-loading-dots{

    display:flex;

    gap:8px;

}

.gs-loading-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--gs-color-primary);

    animation:

        gsLoadingDots

        .8s infinite alternate;

}

.gs-loading-dots span:nth-child(2){

    animation-delay:.15s;

}

.gs-loading-dots span:nth-child(3){

    animation-delay:.30s;

}

@keyframes gsLoadingDots{

    from{

        opacity:.35;

        transform:translateY(0);

    }

    to{

        opacity:1;

        transform:translateY(-8px);

    }

}


/* ==========================================================================
   Linear Progress
   ========================================================================== */

.gs-progress{

    width:100%;

    height:4px;

    background:rgba(255,255,255,.08);

    overflow:hidden;

    border-radius:999px;

}

.gs-progress-bar{

    width:35%;

    height:100%;

    background:var(--gs-color-primary);

    animation:

        gsProgress

        1.2s infinite;

}

@keyframes gsProgress{

    from{

        margin-left:-35%;

    }

    to{

        margin-left:100%;

    }

}


/* ==========================================================================
   Overlay Loading
   ========================================================================== */

.gs-loading-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

}


/* ==========================================================================
   Fullscreen Loading
   ========================================================================== */

.gs-loading-screen{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:var(--gs-space-4);

    background:var(--gs-color-background);

    z-index:var(--gs-z-modal);

}


/* ==========================================================================
   Loading Hidden
   ========================================================================== */

.gs-loading-hidden{

    display:none !important;

}


/* ==========================================================================
   Disabled State
   ========================================================================== */

.gs-loading-active{

    pointer-events:none;

    user-select:none;

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

    .gs-spinner,

    .gs-loading-dots span,

    .gs-progress-bar{

        animation:none;

    }

}