.regions-map {
    background-color: var(--page-background-color-light);
    isolation: isolate;
    border: none;
    padding: var(--padding-xs);
    scroll-margin: var(--padding-s);
}




.regions-map:not(:modal) {
    position: relative;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 2;
    min-height: 50vh;
}

.regions-map:modal {
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-width: unset;
    max-height: unset;
}

.regions-map[open] {
    display: flex;
    align-items: end;
    justify-content: center;
}




.regions-map:modal .regions-map__maximize,
.regions-map:not(:modal) .regions-map__close {
    display: none;
}

.regions-map:has(.modal[open]) {
    overflow: hidden;
}

.regions-map__map {
    inset: 0;
}


.regions-map__map,
.regions-map__controls,
.regions-map__fullscreen-buttons {
    position: absolute;
}


.regions-map__map {
    z-index: -1;
}

.regions-map__fullscreen-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);

    right: var(--padding-xs);
    top: var(--padding-xs);
}

.regions-map__controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
    right: var(--padding-xs);
    top: 50%;
    transform: translateY(-50%);
}

/* .regions-map__legend-wrapper {
    max-width: max-content;
    margin: auto;
    padding-inline: var(--padding-xs);
} */

.regions-map__legend {
    padding: var(--padding-s);
    background-color: var(--page-background-color-light);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    box-shadow: var(--shadow-m);
    max-width: fit-content;
    position: relative;
}

.regions-map__legend-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    text-wrap: balance;
}

.regions-map__legend-title {
    font-size: var(--typo-title-xs-font-size);
    line-height: var(--typo-title-xs-line-height);
    font-weight: var(--font-weight-title);
    color: var(--text-bright-color);
}

.regions-map__legend-desc {
    font-size: var(--typo-text-s-font-size);
    line-height: var(--typo-text-s-line-height);
    font-weight: var(--font-weight-text);
    color: var(--text-bright-color);
}

.regions-map:not([data-region-selected]) .regions-map__legend {
    display: none;
}

.regions-map__legend-buttons {
    display: flex;
    gap: var(--gap-xs);
    
}
.regions-map__legend-buttons > * {
    flex-grow: 1;
}

.regions-map:not(.regions-map_legend-button) .regions-map__legend-select-button {
    display: none;
}








.regions-map [data-feature-id] {
    /* stroke: none; */
    /* --_transparency: 65%; */
    /* fill: color-mix(in hsl, transparent var(--_transparency), var(--_color)); */
    opacity: 0.5;
    cursor: pointer;
    filter: saturate(.75);
    stroke-width: 2;
}

.regions-map [data-feature-id]:hover {
    /* --_transparency: 55%; */
    opacity: 0.65;
}

/* .regions-map [data-feature-id="moscowRegion"] {
    --_color: var(--red-label-color);
    }
    
    .regions-map [data-feature-id="zelenogradRegion"] {
        --_color: var(--green-label-color);
        }
        
        .regions-map [data-feature-id="tinaoRegion"] {
            --_color: var(--blue-label-color);
            } */

.regions-map [data-feature-id][data-selected] {
    /* --_transparency: 45%; */
    opacity: 1;
    filter: saturate(1);
}