/* app/static/css/ui/loaders.css */
/* Стили для загрузчиков и спиннеров */

/* Круговой спиннер */
.app-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid color-mix(in srgb, var(--app-color-primary) 20%, transparent);
    border-radius: 50%;
    border-top-color: var(--app-color-primary);
    animation: app-spinner-rotate 0.8s linear infinite;
    vertical-align: middle;
}

.app-spinner-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2.5px;
}

.app-spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.app-spinner-primary {
    border-top-color: var(--app-color-primary);
    border-color: color-mix(in srgb, var(--app-color-primary) 20%, transparent);
}

.app-spinner-success {
    border-top-color: var(--app-color-success);
    border-color: color-mix(in srgb, var(--app-color-success) 20%, transparent);
}

.app-spinner-danger {
    border-top-color: var(--app-color-danger);
    border-color: color-mix(in srgb, var(--app-color-danger) 20%, transparent);
}

@keyframes app-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Скелетон */
.app-skeleton {
    background: linear-gradient(
        90deg,
        var(--app-color-bg-tertiary) 25%,
        var(--app-color-bg-secondary) 50%,
        var(--app-color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: app-skeleton-loading 2.5s ease-in-out infinite;
    border-radius: var(--app-radius-md);
}

.app-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.app-skeleton-text:last-child {
    margin-bottom: 0;
    width: 80%;
}

.app-skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

@keyframes app-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}