// Globe
.globe {
    position: relative;
    z-index: 2;
    width: 1315px;
    height: clamp(700px, 100vw, 1315px);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    cursor: grab;
    user-select: none;

    // @include bp (sm) {
    //     height: 130vw;
    // }
    // @include bp (md) {
    //     height: 112vw;
    // }
    // @include bp (xl) {
    //     height: 100vw;
    // }

    // DEBUG //
    // background: rgba(red, 0.2);
    // &:after {
    //     content: "";
    //     display: block;
    //     position: absolute;
    //     top: 50%;
    //     left: 0;
    //     background: blue;
    //     width: 100%;
    //     height: 2px;
    //     margin-top: -1px;
    // }
    // END DEBUG //


    /*
    ** States and Variants
    */
    // When dragging
    &:global(.is-grabbing) {
        cursor: grabbing;
    }

    // Cropped globe
    &-cropped {
        overflow: hidden;
        height: clamp(300px, 30vw, 500px);
    }
}

// Canvas
:global(.globe-canvas) {
    transition: opacity 0.2s var(--ease-quart);

    // Hidden state
    &:global(.is-hidden) {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
}

/*
** Markers
*/
:global(.globe-markers) {
    z-index: 2;

    // Marker
    :global(.marker) {
        position: absolute;
        z-index: 2;
        cursor: pointer;
        display: block;
        top: -4px;
        left: -4px;
        padding: 4px;
        opacity: 1;
        will-change: transform;

        // Dot
        &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            background: $color-secondary;
            border-radius: 100%;
        }
    }

    // Hover glow effect
    :global(.hover) {
        &:before {
            animation: markerPulse 1s;
        }
    }

    // Label
    :global(.marker__label) {
        position: absolute;
        bottom: 16px;
        left: 0px;
        color: transparent;
        pointer-events: none;
        transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-quart), transform 0.3s var(--ease-quart);
    }
    // Location city
    :global(.marker__city) {
        font-family: $font-serif;
        font-size: rem(18px);
        line-height: 1;

        @include bp (sm) {
            font-size: rem(24px);
        }
    }
    // Location country
    :global(.marker__country) {
        display: block;
        opacity: 0.8;
        font-family: $font-sans;
        font-size: rem(8px);
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 1px;

        @include bp (sm) {
            font-size: rem(10px);
        }
    }

    // Active
    :global(.is-active) {
        opacity: 1;

        :global(span) {
            opacity: 1;
        }
        :global(.marker__city) {
            color: $color-secondary;
        }
        :global(.marker__country) {
            color: $color-text;
        }
    }

    // Is light
    :global(.is-light) {
        :global(.is-active) {
            :global(.marker__city) {
                color: #fff;
            }
            :global(.marker__country) {
                color: #d2b7e4;
            }
        }
    }

    // Left positioned
    :global(.is-left) {
        :global(.marker__city) {
            left: auto;
            right: 32px;
        }
        :global(.marker__country) {
            text-align: right;
        }
    }

    // Marker is close to another one
    // Show the marker infos only on hover
    :global(.is-close) {
        // Dot
        &:before {
            width: 7px;
            height: 7px;
        }
        // Label
        :global(.marker__label) {
            opacity: 0;
            transform: translate3d(0, 4px, 0);
        }

        // Show labels on hover
        &:hover {
            :global(.marker__label) {
                opacity: 1;
                transform: translate3d(0,0,0);
            }
        }
    }
}


// Pulse animation
@keyframes markerPulse {
    0% {
        box-shadow: 0 0 0 0 rgba($color-secondary, 1);
    }
    100% {
        box-shadow: 0 0 0 32px rgba(#fff, 0);
    }
}