/* Accessible one-input Nominatim control */
.leaflet-control-addresssearch {
    min-width: 20rem;
    max-width: 20rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 0.0625rem 0.3125rem rgba(0, 0, 0, 0.35);
    font: 0.8125rem/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* Triggers when browser zoom or monitor scaling is 400% or higher */
@media screen and (-webkit-min-device-pixel-ratio: 4),
    screen and (min-resolution: 4dppx) {
        .leaflet-control-addresssearch {
            min-width: 15rem;
            max-width: 15rem;
        }
}

@media screen and (max-width: 390px) {
    .leaflet-control-addresssearch {
        min-width: 18rem;
        max-width: 18rem;
        margin-left: -0.8rem;
    }
}

@media screen and (max-width: 390px) {
    .leaflet-control-addresssearch {
        min-width: 14rem;
        max-width: 14rem;
        margin-left: -0.8rem;
    }
}

.leaflet-control-addresssearch-form {
    margin: 0;
}

.leaflet-control-addresssearch-inputwrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.leaflet-control-addresssearch-input {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    height: 2.125rem;
    min-height: 2.125rem;
    padding: 0.4375rem 0.5625rem;
    border: 0.0625rem solid #000;
    border-radius: 0;
    font-size: 0.875rem;
    color: #1f1f1f;
    background: #fff;
}

.leaflet-control-addresssearch-clear {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    border: 0.0625rem solid #000;
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    color: #2a2a2a;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1;
}

.leaflet-control-addresssearch-clear:focus {
    border-color: #000;
    outline: 0.125rem solid #000;
    outline-offset: 0.0625rem;
}

.leaflet-control-addresssearch-results {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    max-height: 10.625rem;
    overflow-y: auto;
    border: 0.0625rem solid #666;
    border-radius: 0;
    background: #fff;
}

.leaflet-control-addresssearch-resultitem + .leaflet-control-addresssearch-resultitem {
    border-top: 0.0625rem solid #777;
}

.leaflet-control-addresssearch-resultbutton {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    padding: 0.5rem 0.5625rem;
    cursor: pointer;
    color: #333;
    font-size: 0.75rem;
    line-height: 1.35;
}

/* this should provide the same styles whether I hover, tab or click */
.leaflet-control-addresssearch-resultitem.is-active .leaflet-control-addresssearch-resultbutton,
.leaflet-control-addresssearch-resultbutton:focus,
.leaflet-control-addresssearch-resultbutton:focus-visible,
.leaflet-control-addresssearch-resultbutton:active,
.leaflet-control-addresssearch-resultbutton:hover {
    border: 0 !important;
    outline: 2px solid #333 !important;
    outline-offset: -1px !important;
    background: #ebebeb;
}

.leaflet-control-addresssearch-input:focus {
    border-color: #000;
    outline: 0.125rem solid #000;
    /* outline-offset: 0.0625rem; */
}

.leaflet-control-addresssearch-status {
    margin-top: 0.375rem;
    color: #444;
    font-size: 0.75rem;
    min-height: 1rem;
}

.leaflet-control-addresssearch-sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}