housesof/src/style/modules/_globe2.scss

// Globe
.globe {
    position: relative;
    z-index: 10;
    user-select: none;


    // Inner
    &__inner {
        position: relative;
        width: clamp(700px, 100vw, 1315px);
        margin-left: auto;
        margin-right: auto;

        &:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }
    }
    // Canvas
    &__canvas {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        width: 100%;
        height: 100%;
    }
    :global(canvas) {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: grab;
    }

    // Markers
    &__markers {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        pointer-events: none;
        user-select: none;

        li {
            display: block;
            margin: 0;
            padding: 0;
        }
    }

    // Marker
    &__marker {
        position: absolute;
        top: 0;
        left: 0;
        user-select: none;
        transform: translate3d(var(--x), var(--y), 0);

        a {
            position: relative;
            text-decoration: none;
            color: $color-secondary;
            pointer-events: auto;

            dl > * {
                transition: opacity 0.5s;
            }
            dt {
                line-height: 1;
            }
            dd {
                color: $color-gray;
                margin-top: 4px;
                line-height: 1;
                opacity: 0;
            }

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

        /*
        ** States
        */
        // Has name
        &.is-dot-only {
            dt, dd {
                opacity: 0;
            }
        }

        // Has country
        &.has-country {
            dd {
                opacity: 1;
            }
        }
    }

    // Cluster
    &__cluster {
        position: absolute;
        z-index: 10;
        top: 300px;
        left: 300px;
        pointer-events: auto;

        button {
            width: 32px;
            height: 32px;
            padding: 0;
            border: none;
            border-radius: 100%;
            background: rgba($color-secondary, 0.2);
            transition: box-shadow 0.5s var(--ease-quart), background 0.5s var(--ease-quart);
        }

        &:hover {
            button {
                background: rgba($color-secondary, 0.3);
                box-shadow: 0 0 0 8px rgba($color-secondary, 0.1);
            }
        }
    }

    // Popin
    &__popin {
        position: absolute;
        z-index: 10;
        top: 12vw;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        pointer-events: auto;
        width: 546px;
        padding: 24px 32px;
        border-radius: 16px;
        background: #fff;
        --shadow-color: #{rgba(45, 4, 88, 0.05)};
        box-shadow:
            0 6px 6px var(--shadow-color),
            0 12px 12px var(--shadow-color),
            0 24px 24px var(--shadow-color),
            0 40px 40px var(--shadow-color);

        ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px 16px;
        }
        li {
            display: block;
            transform: translateZ(0);
        }
        a {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.3s var(--ease-quart);

            &:hover {
                background: rgba($color-secondary, 0.1);
            }
        }

        // Flag
        :global(.flag) {
            display: block;
            width: 28px;
            height: 28px;
            overflow: hidden;
            border-radius: 100%;
            transform: translateZ(0);

            :global(img) {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        // Details
        dl {
            margin-left: 16px;
        }
        dt {
            margin-bottom: 4px;
            line-height: 1.2;
        }
        dd {
            color: $color-gray;
            line-height: 1;
        }

        // Close buttom
        .close {
            position: absolute;
            z-index: 2;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $color-primary-darker;
            background: rgba($color-secondary, 0.15);
            border-radius: 100%;
            transition: background 0.3s var(--ease-quart);

            svg {
                display: block;
                width: 9px;
                height: 9px;
            }

            &:hover {
                background: rgba($color-secondary, 0.3);
            }
        }
    }


    /*
    ** States and Variants
    */
    // Cropped version
    &.is-cropped {
        overflow: hidden;
        height: clamp(300px, 30vw, 500px);
    }

    // When dragging
    :global(.is-grabbing) {
        cursor: grabbing;
    }

    // Tweakpane
    :global(.tp-rotv) {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 300px;
    }
}