body.dark {
    --blocks-actionbar--background-color: var(--color-zinc--600);
    --blocks-blockbar--background-color: var(--color-zinc--600);
    --blocks-controls--background-color: var(--color-zinc--600);
    --blocks-container--editing--background-color: var(--color-zinc--600);
    --blocks-container--editing--border: 1px solid var(--color-zinc--800);
}

.block-missing {
    background-color: var(--color-red--600);
    color: var(--color-white);
    padding: 1rem;
    font-weight: bold;
}

.blocks-actionbar {
    --_blocks-actionbar--background-color: var(--blocks-actionbar--background-color, var(--color-zinc--100));
    background-color: var(--_blocks-actionbar--background-color);
    padding: 0.5rem;
}

.blocks-container {
    --_blocks-container--editing--background-color: var(--blocks-container--editing--background-color, var(--color-zinc--100));
    --_blocks-container--editing--border-radius: 5px;
    --_blocks-container--editing--border: var(--blocks-container--editing--border, 1px solid var(--color-zinc--300));
    position: relative;
    display: flex;
    flex-direction:column;
    gap: 4rem;
}

    .blocks-container.viewing, .blocks-container.editing {
        border: var(--_blocks-container--editing--border);
        padding: 5px;
        margin: 5px;
        border-radius: 4px;
    }

.blocks-blockbar {
    --_blocks-blockbar--background-color: var(--blocks-blockbar--background-color, var(--color-zinc--100));
    background-color: var(--_blocks-blockbar--background-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.blocks-parent.edit .blocks-container {
    min-height: 45px;
}

.blocks-container.editing .blocks-editor {
    background-color: var(--_blocks-container--editing--background-color);
    border: var(--_blocks-container--editing--border);
    border-bottom-left-radius: var(--_blocks-container--editing--border-radius);
    border-bottom-right-radius: var(--_blocks-container--editing--border-radius);
    padding: 1rem;
}

.blocks-dialog-block {
    border: 1px solid var(--color-neutral--300);
    padding: 1rem;
    margin-bottom: 1rem;
}

.blocks-dialog-name {
    font-weight: bold;
    font-size: 100%;
}

.blocks-dialog-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    overflow-y:auto;
    gap: 1rem;
}

.blocks-controls {
    --_blocks-controls--background-color: var(--blocks-controls--background-color, var(--color-zinc--100));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--_blocks-controls--background-color);
    gap: 1rem;
}

@container (min-width: 512px) {
    .blocks-dialog-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 1024px) {
    .blocks-dialog-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (min-width: 1536px) {
    .blocks-dialog-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@container (min-width: 2048px) {
    .blocks-dialog-content {
        grid-template-columns: repeat(5, 1fr);
    }
}