/*
 * MWFewoManager — Frontend
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 *
 * Ladezustand der Trefferliste, auf der Suchseite und im Kartenfenster.
 *
 * Ein ruhiger Zustand statt eines Rasters aus Kacheln: Beim Nachladen bleiben
 * die vorhandenen Karten stehen, werden abgeblendet und lassen sich nicht
 * anklicken; oben läuft ein schmaler Balken in der Markenfarbe, der in zwei
 * Sekunden bis kurz vor das Ende wächst und dort stehen bleibt (keine
 * Dauerschleife). Nur wenn noch keine Karten da sind (erstes Laden im Fenster),
 * stehen Platzhalterkarten da, die sanft pulsieren (siehe
 * accommodation-map.css, `accommodation-card__skeleton`).
 *
 * Schalter: die Klasse `is-loading` an `.accommodation-list` (Seite) bzw. an
 * `.map-modal__col--side` (Fenster); `aria-busy` sitzt an der Liste selbst.
 * Eigene Datei, weil skeleton/css/accommodation.css in der Instanz liegt und
 * ein Update dort nichts ändert.
 */

.accommodation-list,
.map-modal__col--side {
    position: relative;
}

.accommodation-list.is-loading::before,
.map-modal__col--side.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 3px;
    background: var(--color-primary);
    transform-origin: left;
    animation: accommodation-loading-bar 2s ease-out forwards;
}

.accommodation-list.is-loading .accommodation-card:not([aria-busy="true"]),
.accommodation-list.is-loading .accommodation-row,
.map-modal__col--side.is-loading .accommodation-card:not([aria-busy="true"]) {
    opacity: 0.55;
    pointer-events: none;
}

@keyframes accommodation-loading-bar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accommodation-list.is-loading::before,
    .map-modal__col--side.is-loading::before {
        animation: none;
        transform: scaleX(0.6);
    }
}