.example-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

// ================ mapbox-gl ================
// 自定义 popup 内容样式
.mapboxgl-popup-content {
    box-shadow: 0 1px 5px #6e6e6e !important;
}

.mapboxgl-popup-content .mapboxgl-custom-popup {
    position: relative;
}

.mapboxgl-custom-popup .popup-title {
    font-weight: bold;
}

.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: 0 0 6px #000 !important;
}

.mapboxgl-ctrl-group button {
    display: flex !important;
    overflow: visible !important;
}

.mapboxgl-ctrl-logo {
    display: none !important;
}

.mapboxgl-ctrl-bottom-left {
    display: flex;
    bottom: 0;
    left: 2px;
}

.mapboxgl-ctrl-lnglat {
    background: rgb(0 0 0 / 40%);
    color: white;
    line-height: 2em;
    padding: 0 10px;
}

// 覆盖全屏控件的图标
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M3.75 3a.75.75 0 0 0-.75.75V5.5a.5.5 0 0 1-1 0V3.75C2 2.784 2.784 2 3.75 2H5.5a.5.5 0 0 1 0 1H3.75ZM10 2.5a.5.5 0 0 1 .5-.5h1.75c.966 0 1.75.784 1.75 1.75V5.5a.5.5 0 0 1-1 0V3.75a.75.75 0 0 0-.75-.75H10.5a.5.5 0 0 1-.5-.5ZM2.5 10a.5.5 0 0 1 .5.5v1.75c0 .414.336.75.75.75H5.5a.5.5 0 0 1 0 1H3.75A1.75 1.75 0 0 1 2 12.25V10.5a.5.5 0 0 1 .5-.5Zm11 0a.5.5 0 0 1 .5.5v1.75A1.75 1.75 0 0 1 12.25 14H10.5a.5.5 0 0 1 0-1h1.75a.75.75 0 0 0 .75-.75V10.5a.5.5 0 0 1 .5-.5Z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M11 4a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H12a2 2 0 0 1-2-2V2.5a.5.5 0 0 1 1 0V4Zm0 8a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H12a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V12Zm-7-1a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 1 0V12a2 2 0 0 0-2-2H2.5a.5.5 0 0 0 0 1H4Zm1-7a1 1 0 0 1-1 1H2.5a.5.5 0 0 0 0 1H4a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-1 0V4Z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-reset-button .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3s-3 1.331-3 3s1.329 3 3 3z"%2F%3E%3Cpath fill="currentColor" d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219a9.053 9.053 0 0 0-2.43-2.43a8.95 8.95 0 0 0-3.219-1.355a9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053a7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725a7.11 7.11 0 0 1-.644 1.188a7.2 7.2 0 0 1-.858 1.039a7.028 7.028 0 0 1-3.536 1.907a7.13 7.13 0 0 1-2.822 0a6.961 6.961 0 0 1-2.503-1.054a7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034a9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183a9.014 9.014 0 0 0 3.218-1.355a8.886 8.886 0 0 0 1.331-1.099a9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"%2F%3E%3C%2Fsvg%3E') !important;
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
.mapboxgl-map:-webkit-full-screen {
    .mapboxgl-ctrl-bottom-left {
        bottom: 0;
    }
}

// 自定义图层控制器样式
.mapboxgl-ctrl button.-active svg {
    color: #4264fb;
}

.mapboxgl-ctrl-layer-button {
    position: relative;

    .mapboxgl-ctrl-layer-wrap {
        display: none;
        justify-items: center;
        align-items: center;
        position: absolute;
        right: 40px;
        padding: 10px;
        border-radius: 3px;
        box-shadow: 0 0 3px #333;
        background-color: #fff;

        .mapboxgl-ctrl-layer {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            border: 2px solid #fff;
            position: relative;

            &.active {
                border-color: #3385ff;
            }

            img {
                width: 100%;
                height: 100%;
            }

            span {
                display: inline-flex;
                justify-content: center;
                background-color: rgb(0 0 0 / 60%);
                color: white;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
        }
    }

    &.-active .mapboxgl-ctrl-layer-wrap {
        display: flex;
    }
}
