/* Map styles */
map-picker {
    background: #eee;
    outline-offset: 1px;
    -webkit-font-smoothing: antialiased;
    display: block;
    width: 100%;
    min-height: 400px;
    margin-block: .75lh;

    .leaflet-control-zoom {
        user-select: none;
    }

    .leaflet-popup-content {
        max-width: min(24ch, calc(100vw - 10lh));
        margin: .5lh 1lh;
    }
	
    .leaflet-bottom {
        /* left: 0px; */
        /* right: auto; */
        color: #666;
        font-size: 75%;
        font-size: 90%;
        a { color: inherit; text-decoration: none; }
        a:hover { text-decoration: underline; }
    }
	
    a:has(> .leaflet-attribution-flag):first-child { 
        display: none;
        & + [aria-hidden="true"] {
            display: none;
        }
    }
}


/* Loading state using aria-busy */
[aria-busy=true] {
    /* https://picocss.com/docs/loading */
    --_loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");

    &:not(input, select, textarea, html, form) {
            white-space: nowrap;
            cursor: wait;
            opacity: 0.7;
            text-align: center;
            align-content: center;
            &:empty { text-align: center; }

            &:not(:empty):before { margin-inline-end: .5lh; }
        &:before {
            display: inline-block;
            width: 1em;
            aspect-ratio: 1;
            background-image: var(--_loading);
            background-size: 100% auto;
            background-repeat: no-repeat;
            content: "";
            vertical-align: -.125em;
        }
    }
}