.node {
    max-width: 20rem;
    background: $color-node-background;
    color: $color-node-foreground;
    border-radius: $border-radius-node;
    position: absolute;
    filter: drop-shadow(0 0 3px #000000cc);
    transition: box-shadow $visual-transition, filter $visual-transition;

    &:hover {
        box-shadow: 0 0 0 0.35px $color-node-selected;
    }

    &.--selected {
        z-index: 5;
        box-shadow: 0 0 0 1px $color-node-selected;
    }

    &.--dragging {
        filter: drop-shadow(0 0 7px #000000cc);

        & > .__title {
            cursor: grabbing;
        }
    }

    & > .__title {
        background: $color-node-title-background;
        color: $color-node-title-foreground;
        padding: 0.4em 0.75em;
        border-radius: $border-radius-node $border-radius-node 0 0;
        cursor: grab;

        & > span {
            pointer-events: none;
        }

    }

    & > .__content {
        padding: 0.75em;

        & > div > div {
            margin: 0.5em 0;
        }

    }

    &.--two-column > .__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: ". ." ". .";

        & > .__inputs {
            grid-row: 1;
            grid-column: 1;
        }

        & > .__outputs {
            grid-row: 1;
            grid-column: 2;
        }

        & > .__options {
            grid-row: 2;
            grid-column: 1 / span 2;
        }

    }

}