/* loading.css — спиннер + универсальный .is-loading overlay.
 *
 * Использование:
 *   <span class="ds-spinner"></span>                    — standalone спиннер
 *   <span class="ds-spinner ds-spinner--small"></span>  — мини
 *   <span class="ds-spinner ds-spinner--large"></span>  — крупный
 *
 *   <div class="my-panel is-loading">...</div>          — overlay на любой блок
 *     (контент полупрозрачный, поверх крутится spinner)
 *
 * Tera-component: {{ <spinner /> }} или {{ <spinner size="small" /> }}.
 *
 * Никаких внешних зависимостей — чистый CSS border-spinner. SVG-аналог
 * у нас тоже есть через {{ <icon name="spinner" /> }} (statichный SVG
 * с CSS animation).
 */

/* ────────────────────────────────────────────────────────────── */
/* Standalone spinner                                              */
/* ────────────────────────────────────────────────────────────── */

.ds-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--ds-info) 25%, transparent);
    border-top-color: var(--ds-info);
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
    vertical-align: middle;
}
.ds-spinner--small { width: 12px; height: 12px; border-width: 1.5px; }
.ds-spinner--large { width: 24px; height: 24px; border-width: 3px; }

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

/* ────────────────────────────────────────────────────────────── */
/* .is-loading overlay — на любой блок                             */
/* ────────────────────────────────────────────────────────────── */
/* Класс ставится JS'ом (или сервером через class=) на контейнер.
 * Контент остаётся в DOM, но визуально притухает + сверху overlay
 * со spinner'ом. Снимается через classList.remove('is-loading').
 *
 * Требование: контейнер должен быть position: relative или sticky/
 * absolute/fixed. Псевдоэлементы absolute позиционируются от него.
 * Если контейнер static — добавь position:relative в своих стилях.
 */

.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading > * {
    opacity: 0.4;
    transition: opacity 0.12s;
}

.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border-radius: inherit;
    z-index: 5;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin: -half_width/-half_height = центрирование БЕЗ transform.
       Иначе animation rotate перезаписывает translate и spinner уезжает
       по диагонали. */
    margin: -11px 0 0 -11px;
    width: 22px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--ds-info) 25%, transparent);
    border-top-color: var(--ds-info);
    border-radius: 50%;
    animation: ds-spin 0.7s linear infinite;
    z-index: 6;
    pointer-events: none;
}