/* Lista de sugerencias de playas y municipios bajo un buscador (static/js/oceanaria/sugerencias.js):
   la del buscador de la cabecera y la del mapa de la portada. El contenedor del buscador va con position: relative. */

@layer componentes {
  .sugerencias {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 30;
    min-width: 280px;
    /* Una caja bajo el buscador, no una lista que tape la pantalla: unas cinco sugerencias y el resto deslizando. */
    max-height: min(320px, 50vh);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-1);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    background: var(--color-fondo);
    box-shadow: var(--sombra-levantada);
    color: var(--color-texto);
    font-size: var(--paso-0);
    text-align: left;
    list-style: none;
  }

  .sugerencias[hidden] {
    display: none;
  }

  .sugerencias li {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: 8px;
    cursor: pointer;
  }

  .sugerencias li[aria-selected="true"],
  .sugerencias li:hover {
    background: var(--color-seleccion-suave);
  }

  .sugerencias b {
    display: block;
    font-weight: 600;
  }

  .sugerencias small,
  .sugerencias .sugerencias__vacia {
    color: var(--color-texto-suave);
  }

  .sugerencias .sugerencias__vacia {
    cursor: default;
  }
}