.annotation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    font-family: var(--mantine-font-family);
}

.annotation-layer *,
.annotation-layer *::before,
.annotation-layer *::after {
    box-sizing: border-box;
}

.annotation-layer[data-inert] *:not(.annotation-layer__capture) {
    pointer-events: none !important;
}

.annotation-layer__region {
    --region-fill: var(--mantine-color-neutral-5);
    --region-fill-alpha: 20%;
    --region-border: var(--mantine-color-neutral-6);

    position: absolute;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    border: calc(2px * var(--surface-pin-scale, 1)) dashed var(--region-border);
    background: color-mix(in srgb, var(--region-fill) var(--region-fill-alpha), transparent);
    transition:
        background-color 0.2s var(--app-ease),
        border-color 0.2s var(--app-ease);
}

.annotation-layer__region[data-tone='danger'] {
    --region-fill: var(--mantine-color-red-2);
    --region-fill-alpha: 45%;
    --region-border: var(--mantine-color-red-6);
}

.annotation-layer__region[data-tone='info'] {
    --region-fill: var(--mantine-color-blue-3);
    --region-fill-alpha: 35%;
    --region-border: var(--mantine-color-blue-6);
}

.annotation-layer__region[data-selected],
.annotation-layer__region[data-hovered] {
    --region-fill: var(--mantine-color-blue-6);
    --region-fill-alpha: 20%;
    --region-border: var(--mantine-color-blue-6);

    border-style: solid;
}

.annotation-layer__region[data-draft] {
    --region-fill: var(--mantine-color-neutral-9);
    --region-fill-alpha: 6%;
    --region-border: var(--mantine-color-neutral-9);

    z-index: 2;
    cursor: default;
    pointer-events: none;
    border-width: calc(1.5px * var(--surface-pin-scale, 1));
}

.annotation-layer__region[data-draft][data-shape='text'] {
    --region-fill: var(--mantine-color-blue-0);
    --region-fill-alpha: 70%;
    --region-border: var(--mantine-color-blue-5);

    border: calc(1px * var(--surface-pin-scale, 1)) solid var(--region-border);
}

.annotation-layer__capture {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    cursor: crosshair;
    pointer-events: auto;
    touch-action: none;
}

.annotation-layer__pin {
    --annotation-pin-zoom: 1;

    position: absolute;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 3px;
    border: 0;
    border-radius: 999px 999px 999px 0;
    background: var(--mantine-color-white);
    box-shadow: var(--app-shadow-pin);
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 0 0;
    transform: scale(var(--surface-pin-scale, 1)) translateY(-100%) translate(50%, 50%)
        scale(var(--annotation-pin-zoom)) translate(-50%, -50%);
    transition:
        transform var(--app-motion-pin-hover) var(--app-ease),
        border-radius var(--app-motion-pin-color) var(--app-ease);
}

.annotation-layer__pin:hover {
    --annotation-pin-zoom: 1.08;
}

.annotation-layer__pin[data-group] {
    box-shadow: var(--app-shadow-pin-stack);
}

.annotation-layer__pin[data-selected],
.annotation-layer__pin[data-hovered] {
    z-index: 3;
}

.annotation-layer__pin[data-draft] {
    z-index: 3;
    cursor: default;
    pointer-events: none;
}

.annotation-layer__dot {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--app-gradient-brand);
    color: var(--mantine-color-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition:
        background var(--app-motion-pin-color) var(--app-ease),
        border-radius var(--app-motion-pin-color) var(--app-ease);
}

.annotation-layer__logo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.annotation-layer__pin[data-face='initials'] .annotation-layer__dot {
    background: var(--mantine-color-neutral-7);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.annotation-layer__pin[data-status='resolved'] .annotation-layer__dot {
    background: var(--mantine-color-neutral-4);
}

.annotation-layer__pin[data-status='resolved'] .annotation-layer__logo {
    opacity: 0.5;
}

.annotation-layer__pin[data-selected] .annotation-layer__dot,
.annotation-layer__pin[data-hovered] .annotation-layer__dot {
    border-radius: 999px 999px 999px 0;
    background: var(--mantine-color-blue-6);
}

.annotation-layer__pin[data-draft] .annotation-layer__dot {
    border-radius: 999px 999px 999px 0;
    background: var(--mantine-color-neutral-9);
}