@property --selection-stroke-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
}

@property --selection-node-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
}

@property --selection-node-stroke-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
}

:is(.cover-with-selection-card, .cover-with-selection-hover) {
    --selection-color: #087cff;
}

/* Design and project cards are subtle at rest, then use the active blue on hover. */
.cover-with-selection-card:not(:hover) > .selection-cover {
    --selection-color: #aeb7c5;
}

.cover-with-selection-card:hover > .selection-cover {
    --selection-color: #087cff;
}

:is(.cover-with-selection-card, .cover-with-selection-hover) > .selection-cover {
    --selection-stroke-width: 2px;
    --selection-node-size: 10px;
    --selection-node-stroke-width: 2px;
    transition:
        --selection-stroke-width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        --selection-node-size 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        --selection-node-stroke-width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.14s ease;
}

:is(.cover-with-selection-card, .cover-with-selection-hover).selection-cover-positioned {
    position: relative;
}

:is(.cover-with-selection-card, .cover-with-selection-hover) > .selection-cover {
    position: absolute;
    z-index: 100;
    inset: 0;
    border: 0;
    box-shadow: 0 0 0 var(--selection-stroke-width) var(--selection-color);
    box-sizing: border-box;
    pointer-events: none;
}

.cover-with-selection-hover > .selection-cover {
    opacity: 0;
}

.cover-with-selection-hover:hover > .selection-cover {
    opacity: 1;
}

:is(.cover-with-selection-card, .cover-with-selection-hover) > .selection-cover > .selection-node {
    position: absolute;
    width: var(--selection-node-size);
    height: var(--selection-node-size);
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 var(--selection-node-stroke-width) var(--selection-color);
    box-sizing: border-box;
}

.selection-cover.selection-corners-only > .selection-node[data-position="top-center"],
.selection-cover.selection-corners-only > .selection-node[data-position="center-left"],
.selection-cover.selection-corners-only > .selection-node[data-position="center-right"],
.selection-cover.selection-corners-only > .selection-node[data-position="bottom-center"] {
    display: none;
}

.cover-with-selection-hover:disabled > .selection-cover,
.cover-with-selection-hover[aria-disabled="true"] > .selection-cover {
    opacity: 0;
}

.selection-node[data-position="top-left"] { top: calc(0px - var(--selection-stroke-width) / 2); left: calc(0px - var(--selection-stroke-width) / 2); transform: translate(-50%, -50%); }
.selection-node[data-position="top-center"] { top: calc(0px - var(--selection-stroke-width) / 2); left: 50%; transform: translate(-50%, -50%); }
.selection-node[data-position="top-right"] { top: calc(0px - var(--selection-stroke-width) / 2); right: calc(0px - var(--selection-stroke-width) / 2); transform: translate(50%, -50%); }
.selection-node[data-position="center-left"] { top: 50%; left: calc(0px - var(--selection-stroke-width) / 2); transform: translate(-50%, -50%); }
.selection-node[data-position="center-right"] { top: 50%; right: calc(0px - var(--selection-stroke-width) / 2); transform: translate(50%, -50%); }
.selection-node[data-position="bottom-left"] { bottom: calc(0px - var(--selection-stroke-width) / 2); left: calc(0px - var(--selection-stroke-width) / 2); transform: translate(-50%, 50%); }
.selection-node[data-position="bottom-center"] { bottom: calc(0px - var(--selection-stroke-width) / 2); left: 50%; transform: translate(-50%, 50%); }
.selection-node[data-position="bottom-right"] { right: calc(0px - var(--selection-stroke-width) / 2); bottom: calc(0px - var(--selection-stroke-width) / 2); transform: translate(50%, 50%); }