@scope ([svui]) {
    [sv-ui="map"] {
        position: relative;
        width: 100%;
        min-height: 20rem;
        overflow: hidden;
        background: var(--sv-color-surface, #f3f3f3);
    }

    [sv-ui="map"][sv-state="loading"] {
        cursor: progress;
    }

    [sv-ui="map"][sv-state="unavailable"] {
        background: var(--sv-color-surface-muted, #ececec);
    }

    .svui-map__marker-anchor,
    .svui-map__cluster-anchor {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        transform: translate(-50%, -50%);
        user-select: none;
    }

    .svui-map__marker-anchor {
        width: var(--svui-map-marker-size, 1.875rem);
        height: var(--svui-map-marker-size, 1.875rem);
    }

    .svui-map__cluster-anchor {
        width: var(--svui-map-cluster-size, 2.75rem);
        height: var(--svui-map-cluster-size, 2.75rem);
    }

    .svui-map__marker,
    .svui-map__cluster {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        pointer-events: auto;
    }

    .svui-map__marker {
        border: 0.1875rem solid currentColor;
        background: currentColor;
    }

    .svui-map__cluster {
        border: 0.1875rem solid currentColor;
        background: #fff;
        color: #222;
        font: 600 0.8125rem/1 sans-serif;
    }
}