/*==========================================================
LicitaAI.club

Arquivo:
loader.css

Versão:
1.0.0

Última atualização:
16/07/2026

Descrição:
Biblioteca oficial de Loaders e Skeletons.

==========================================================*/


/*==========================================================
LOADER CONTAINER
==========================================================*/

.loader{

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.loader-spinner{

    width:42px;

    height:42px;

    border:4px solid var(--color-gray-200);

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

    border-radius:50%;

    animation:loader-spin .8s linear infinite;

}


/*==========================================================
SIZES
==========================================================*/

.loader-sm .loader-spinner{

    width:24px;

    height:24px;

    border-width:3px;

}

.loader-lg .loader-spinner{

    width:64px;

    height:64px;

    border-width:5px;

}


/*==========================================================
FULL SCREEN
==========================================================*/

.loader-fullscreen{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(3px);

    z-index:9999;

}


/*==========================================================
INLINE
==========================================================*/

.loader-inline{

    display:inline-flex;

    align-items:center;

    gap:12px;

}

.loader-text{

    font-size:.875rem;

    color:var(--text-secondary);

}


/*==========================================================
SKELETON
==========================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:var(--color-gray-200);

    border-radius:12px;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    animation:skeleton-loading 1.4s infinite;

}


/*==========================================================
SKELETON VARIAÇÕES
==========================================================*/

.skeleton-title{

    width:60%;

    height:24px;

}

.skeleton-text{

    width:100%;

    height:14px;

}

.skeleton-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

}

.skeleton-button{

    width:140px;

    height:44px;

}


/*==========================================================
ANIMAÇÕES
==========================================================*/

@keyframes loader-spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes skeleton-loading{

    100%{

        transform:translateX(100%);

    }

}


/*==========================================================
RESPONSIVO
==========================================================*/

@media(max-width:768px){

.loader-fullscreen{

    padding:24px;

}

}