@use './utils/text';

.leaflet-container {
    margin: auto;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    background: #98BDD0;

    .leaflet-map-pane {
        .leaflet-popup-pane {
            .leaflet-popup-content-wrapper {
                border-radius: .25rem;

                .leaflet-popup-content {
                    margin: .65rem 1.3rem .65rem .9rem;

                    .title {
                        display: block;
                        font-weight: 600;
                    }

                    strong.title {
                        color: var(--green-500);
                    }

                    a.title {
                        text-underline-offset: 2px;
                        text-decoration: underline;

                        &:hover {
                            text-decoration: none;
                            color: var(--green-500);
                        }
                    }

                    > * + * {
                        margin: 0;
                        margin-top: .4em;
                    }
                }
            }

            .leaflet-popup-tip {
                width: .8rem;
                height: .8rem;
            }
        }
        .leaflet-tooltip-pane {
            .leaflet-tooltip {
                &.capital-name {
                    padding: .2rem .4rem;
                    color: #EEE;
                    font-weight: bold;
                    background: none;
                    border: none;
                    box-shadow: none;
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;

                    &::before {
                        display: none;
                    }

                    @include text.stroke(2, #18181b);
                }
            }
        }
    }
}