/*!
 * HelloWeb geonames 1.0.0
 *
 * Iba štruktúra: kde zoznam visí, ako sa označuje aktívna položka a že sa dá
 * odscrollovať. Farby a typografia idú z custom properties, takže web si vzhľad
 * prekreslí bez forku knižnice — presne ako pri gdpr-consent.
 *
 * Každý selektor je prefixovaný `hw-geo`, aby sa nemohol pobiť so štýlmi webu.
 */

.hw-geo {
    --hw-geo-bg: #ffffff;
    --hw-geo-fg: inherit;
    --hw-geo-muted: #5a5a5a;
    --hw-geo-border: #d8d8d8;
    --hw-geo-active: #f1f3f8;
    --hw-geo-radius: 0.5rem;
    --hw-geo-max-height: 17rem;

    position: relative;
    display: block;
}

.hw-geo__list {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 30;
    margin: 0.25rem 0 0;
    padding: 0;
    max-height: var(--hw-geo-max-height);
    overflow-y: auto;
    list-style: none;
    background: var(--hw-geo-bg);
    color: var(--hw-geo-fg);
    border: 1px solid var(--hw-geo-border);
    border-radius: var(--hw-geo-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.hw-geo__list[hidden] {
    display: none;
}

/* 2.75rem ≈ 44 px: dotyková plocha, pod ktorou sa na mobile trafí susedná
   položka. Je to podmienka použiteľnosti, nie estetika. */
.hw-geo__option {
    padding: 0.6rem 0.85rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.35;
}

.hw-geo__option.is-active,
.hw-geo__option:hover {
    background: var(--hw-geo-active);
}

.hw-geo__status {
    margin: 0.35rem 0 0;
    color: var(--hw-geo-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.hw-geo__status[hidden] {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hw-geo__option {
        transition: background-color 120ms ease;
    }
}