.location-field {
    position: relative;
}

.location-field input {
    width: 100%;
}

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-top: none;
}

.suggestion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    cursor: pointer;
    font-family: var(--body);
    text-transform: none;
    letter-spacing: 0;
}

.suggestion.active,
.suggestion:hover {
    background: var(--ink);
    color: var(--paper);
}

.suggestion-label {
    font-size: 15px;
}

.suggestion-context {
    font-size: 12px;
    color: var(--faded);
}

.suggestion.active .suggestion-context,
.suggestion:hover .suggestion-context {
    color: var(--paper-dark);
}