html {
    overflow-y: scroll;
}

.post-file-dropzone {
    cursor: pointer;
}

    .post-file-dropzone:hover {
        box-shadow: 0px 0.2rem 1rem black;
        transition: box-shadow 0.2s;
    }

    .post-file-dropzone.dragover {
        box-shadow: 0px 0.2rem 1rem black;
        transition: box-shadow 0.2s;
    }

.board-card.is-dragging, .board-card.is-positioning-post-drag, .board-node.is-dragging, .board-node.is-positioning-post-drag {
    z-index: 2;
}

.board-node.new-connection {
    outline: 5px solid rgba(0,0,0,0.5);
    transition: outline-width 50ms ease-in-out;
}

.packery-drop-placeholder {
    outline: 0.3rem dashed rgba(0,0,0,0.25);
    outline-offset: -0.5rem;
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    border-radius: 0.5rem;
}

.bg-swatch {
    width: 30px;
    height: 30px;
}

.board-bg-icon {
    width: 1rem;
    height: 1rem;
}

.dg-surface-dark {
    background-color: var(--bs-dark-bg-subtle);
}

.dg-surface {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: box-shadow 0.3s ease-in-out;
}

    .dg-surface:hover {
        box-shadow: rgba(0, 0, 0, 0.54) 0px 3px 8px;
    }

.node-connection-disconnect-btn {
    left: -20px;
    top: -20px;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    opacity: 0;
}

    .node-connection-disconnect-btn:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 1);
    }

.node-resizer {
    width: 15px;
    height: 15px;
    right: 0;
    bottom: 0;
    user-select: none;
    cursor: nw-resize;
}

.board-node-shake {
    animation: tilt-n-move-shaking 0.2s ease;
    animation-iteration-count: 1;
}

@keyframes tilt-n-move-shaking {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(5px, 5px) rotate(5deg);
    }

    50% {
        transform: translate(0, 0) rotate(0eg);
    }

    75% {
        transform: translate(-5px, 5px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}