.baklava-node {
    background: var(--baklava-node-color-background);
    color: var(--baklava-node-color-foreground);
    border: 1px solid transparent;
    border-radius: var(--baklava-node-border-radius);
    position: absolute;
    box-shadow: 0 0 4px #000000cc;
    transition:
        border-color var(--baklava-visual-transition),
        box-shadow var(--baklava-visual-transition);

    width: var(--width);

    &:hover {
        border-color: var(--baklava-node-color-hover);

        & .__resize-handle::after {
            opacity: 1;
        }
    }

    &.--selected {
        z-index: 5;
        border-color: var(--baklava-node-color-selected);
    }

    &.--dragging {
        box-shadow: 0 0 12px #000000cc;

        & > .__title {
            cursor: grabbing;
        }
    }

    & > .__title {
        display: flex;
        background: var(--baklava-node-title-color-background);
        color: var(--baklava-node-title-color-foreground);
        padding: 0.4em 0.75em;
        border-radius: var(--baklava-node-border-radius) var(--baklava-node-border-radius) 0 0;
        cursor: grab;

        & > *:first-child {
            flex-grow: 1;
        }

        & > .__title-label {
            pointer-events: none;
        }

        & > .__menu {
            position: relative;
            cursor: initial;
        }
    }

    &[data-node-type^="__baklava_"] > .__title {
        background: var(--baklava-group-node-title-color-background);
        color: var(--baklava-group-node-title-color-foreground);
    }

    & > .__content {
        padding: 0.75em;

        &.--reverse-y {
            display: flex;
            flex-direction: column-reverse;
        }

        & > 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;
        }
    }

    & .__resize-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1rem;
        height: 1rem;
        transform: translateX(50%);
        cursor: ew-resize;

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -0.5rem;
            width: 1rem;
            height: 1rem;
            opacity: 0;
            border-bottom-right-radius: var(--baklava-node-border-radius);
            transition: opacity var(--baklava-visual-transition);
            background: linear-gradient(
                -45deg,
                transparent 10%,
                var(--baklava-node-color-resize-handle) 10%,
                var(--baklava-node-color-resize-handle) 15%,
                transparent 15%,
                transparent 30%,
                var(--baklava-node-color-resize-handle) 30%,
                var(--baklava-node-color-resize-handle) 35%,
                transparent 35%,
                transparent 50%,
                var(--baklava-node-color-resize-handle) 50%,
                var(--baklava-node-color-resize-handle) 55%,
                transparent 55%
            );
        }
    }
}
