@mixin node-terminal-style($side) {
    --size: 11px;
    --offset-extra: 4px;

    position: absolute;
    #{$side}: calc(var(--offset-extra) * -1 - 0.65rem);
    display: grid;
    place-items: center;
    width: calc(var(--size) + var(--offset-extra) * 2);
    height: calc(var(--size) + var(--offset-extra) * 2);
    margin-top: 0.25rem;
    transform: translateY(calc(var(--offset-extra) * -1));

    color: $brand-primary;

    &::after {
        position: absolute;
        z-index: -1;
        content: "";
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-color: $white;
    }

    &.mapped-over {
        --size: 20px;
        #{$side}: calc(var(--offset-extra) * -1 - 0.8rem);
        margin-top: 0;
    }

    .terminal-icon {
        position: absolute;
        top: calc(var(--offset-extra) - 1px);
        left: calc(var(--offset-extra) - 1px);
        width: calc(var(--size) + 2px);
        height: calc(var(--size) + 2px);
        pointer-events: none;
    }
}