.brag-connector-node {
    --brag-node-offset: 0px;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background-color: rgb(68, 71, 59);
    border: 3px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Block editor: larger hit target for easier selection */
.block-editor-iframe__body .brag-connector-node {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

/*
 * Front-end only: absolute positioning for connector nodes.
 * The block editor uses an iframe whose body has .block-editor-iframe__body —
 * we exclude that so nodes stay in normal flow in the editor for easy clicking/editing.
 */
body:not(.block-editor-iframe__body) .relative {
    position: relative;
}

body:not(.block-editor-iframe__body) .brag-connector-node {
    position: absolute;
    margin: 0;
}

body:not(.block-editor-iframe__body) .brag-connector-node--top {
    top: 0;
    left: 50%;
    transform: translate(calc(-50% + var(--brag-node-offset)), -50%);
}

body:not(.block-editor-iframe__body) .brag-connector-node--right {
    right: 0;
    top: 50%;
    transform: translate(50%, calc(-50% + var(--brag-node-offset)));
}

body:not(.block-editor-iframe__body) .brag-connector-node--bottom {
    bottom: 0;
    left: 50%;
    transform: translate(calc(-50% + var(--brag-node-offset)), 50%);
}

body:not(.block-editor-iframe__body) .brag-connector-node--left {
    left: 0;
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--brag-node-offset)));
}

body:not(.block-editor-iframe__body) .brag-connector-node--top-right {
    top: 0;
    right: 0;
    transform: translate(calc(50% + var(--brag-node-offset)), -50%);
}

body:not(.block-editor-iframe__body) .brag-connector-node--bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(calc(50% + var(--brag-node-offset)), 50%);
}

body:not(.block-editor-iframe__body) .brag-connector-node--bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(calc(-50% + var(--brag-node-offset)), 50%);
}

body:not(.block-editor-iframe__body) .brag-connector-node--top-left {
    top: 0;
    left: 0;
    transform: translate(calc(-50% + var(--brag-node-offset)), -50%);
}