/*
 * 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; unter der Kopfzeile („865 Unterkünfte gefunden“) 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 (`skeleton-block`, siehe map-search.css), die mit
 * `prefers-reduced-motion: no-preference` sanft glänzen.
 *
 * Schalter: die Klasse `is-loading` an `.accommodation-list` (Seite) bzw. an
 * `.map-search` (Fenster); `aria-busy` sitzt an der Liste selbst. Im Fenster läuft der
 * Balken als `accommodation-map__skeleton` (accommodation-map.css), den die Karte für
 * Liste und Punkte zusammen schaltet; hier wird nur abgeblendet.
 * Eigene Datei, weil skeleton/css/accommodation.css in der Instanz liegt und
 * ein Update dort nichts ändert.
 */

.accommodation-list {
    position: relative;
}

.accommodation-list__toolbar {
    position: relative;
}

.accommodation-list.is-loading .accommodation-list__toolbar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(var(--space-3, 0.75rem) * -1);
    left: 0;
    z-index: 5;
    height: 3px;
    border-radius: 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-search.is-loading .result-card {
    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 .accommodation-list__toolbar::after {
        animation: none;
        transform: scaleX(0.6);
    }
}

/*
 * Platzhalter für das Bild einer Unterkunft.
 *
 * Bis das Bild geladen ist (Lazy Loading) und wenn eine Unterkunft keines hat,
 * steht dort eine ruhige Fläche mit einem Bildsymbol statt einer weißen Lücke.
 * Das Bild liegt später deckend darüber; eine Umschaltung per Skript braucht es
 * nicht. Die Fläche folgt `--color-surface-alt`, das Symbol ist grau und
 * trägt keine Markenfarbe.
 */
.accommodation-row__image,
.accommodation-card__image {
    background-color: var(--color-surface-alt, #eef1f5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M3 17l5-4.5 4 3.5 3-2.5 6 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3rem;
}