@import "../settings/_mixins";
@import "../settings/_variables";

.mapboxgl-popup-content {
    .dnetor-mapbox-inner {
        border: none;
        width: 200px;
    }
    .dnetor-mapbox-content {
        padding: 0;
    }

    .dnetor-mapbox-image {
        margin-bottom: 10px;
    }

    .dnetor-mapbox-title {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .mapboxgl-popup-close-button {
        z-index: 1;
    }
}

.dnetor-map-box-effect {
    --dnetor-map-box-effect-primary: rgba(153, 153, 153, 0.3);
    --dnetor-map-box-effect-secondary: #999;
    .mapboxgl-marker {
        &:before,
        &:after {
            width: 200px;
            height: 200px;
            border: 2px solid #999;
            @include border-radius(50%);
            background-clip: padding-box;
            position: absolute;
            left: 50%;
            top: 50%;
            opacity: 0;
            @include transform(translate(-50%, -50%));
            animation: dnetor-map-animationEmission linear 2s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            display: block;
            content: "";
        }
        &:before {
            @include box-shadow(
                inset 0 0 35px 10px var(--dnetor-map-box-effect-primary)
            );
            border-color: rgba(38, 38, 38, 0.4);
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }
        &:after {
            @include box-shadow(
                inset 0 0 35px 10px var(--dnetor-map-box-effect-secondary)
            );
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
    }
}

@keyframes dnetor-map-animationEmission {
    0% {
        opacity: 0;
        @include transform(translate(-50%, -50%) scale(0.3));
    }
    1% {
        @include transform(translate(-50%, -50%) scale(0.32));
        opacity: 0.1;
    }
    20% {
        opacity: 0.5;
        @include transform(translate(-50%, -50%) scale(0 0.45));
    }
    60% {
        @include transform(translate(-50%, -50%) scale(0.75));
        opacity: 0.35;
    }
}