.composer-field {
    &:hover .composer-field-input {
        border-radius: var(--c--components--forms-select--border-radius--hover);
        box-shadow: var(--c--components--forms-select--border-color--hover) 0 0 0 1px;
        border-color: var(--c--components--forms-select--border-color--hover);
    }

    &:focus-within .composer-field-input,
    &--focus .composer-field-input {
        border-radius: var(--c--components--forms-select--border-radius--focus);
        box-shadow: var(--c--components--forms-select--border-color--focus) 0 0 0 1px;
        border-color: var(--c--components--forms-select--border-color--focus);
    }
    &:not([class*="--disabled"]):not(:focus-within) {
        &.c__field--error .composer-field-input {
            border-color: var(--c--contextuals--border--semantic--error--secondary);
        }
        &.c__field--error:hover .composer-field-input {
            border-color: var(--c--contextuals--border--semantic--error--primary);
            box-shadow: var(--c--contextuals--border--semantic--error--primary) 0 0 0 1px;
        }
        &.c__field--success .composer-field-input {
            border-color: var(--c--contextuals--border--semantic--success--secondary);
        }
        &.c__field--success:hover .composer-field-input {
            border-color: var(--c--contextuals--border--semantic--success--primary);
            box-shadow: var(--c--contextuals--border--semantic--success--primary) 0 0 0 1px;
        }
    }

    &--disabled {
        &:hover .composer-field-input{
            cursor: not-allowed;
            border-radius: var(--c--components--forms-input--border-radius);
            border-color: var(--c--components--forms-input--border-color);
            box-shadow: none;
        }
        .composer-field-input {
            padding-top: var(--c--globals--spacings--base);
        }

        & .bn-toolbar.bn-formatting-toolbar {
            display: none;
        }

        & .bn-editor {
            color: var(--c--components--forms-input--value-color--disabled);
        }
    }
}
.composer-field-input {
    --min-height: 20rem;
    --toolbar-height: 43px;
    border-radius: var(--c--components--forms-input--border-radius);
    border-width: var(--c--components--forms-input--border-width);
    border-color: var(--c--components--forms-input--border-color);
    border-style: var(--c--components--forms-input--border-style);
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--c--globals--spacings--2xs);
    background-color: var(--bn-colors-editor-background);
    position: relative;
    min-height: var(--min-height);
    transition:
          border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out),
          border-radius var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);

    & .bn-toolbar.bn-formatting-toolbar {
        background: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        border-top-left-radius: var(--c--components--forms-input--border-radius);
        border-top-right-radius: var(--c--components--forms-input--border-radius);
        width: 100%;
        border-bottom: 1px solid var(--c--components--forms-input--border-color);
        padding-block: var(--c--globals--spacings--2xs);
        flex-wrap: wrap;
        flex-shrink: 0;
        min-height: var(--toolbar-height);

        // Override the max-height set by the Floating UI `size` middleware
        // on toolbar select dropdowns. Without portal rendering, the dropdown
        // is constrained to the available space inside the toolbar container,
        // which becomes too small when the toolbar wraps onto multiple lines.
        .mantine-Menu-dropdown {
            max-height: none !important;
        }

        .bn-toolbar-separator {
            width: 1px;
            align-self: stretch;
            margin-block: var(--c--globals--spacings--3xs);
            background-color: var(--c--components--forms-input--border-color);

            // Hide separators without a visible neighbor:
            // - at the start of the toolbar (no element before)
            // - at the end of the toolbar (no element after)
            // - consecutive (all elements between them are absent from the DOM)
            &:first-child,
            &:last-child,
            & + .bn-toolbar-separator {
                display: none;
            }
        }
    }

    & .bn-editor {
        --max-block-width: 70ch;
        // Even in dark mode, the editor stays light so we used global tokens color
        color: var(--c--globals--colors--gray-850);
        border-radius: var(--c--components--forms-input--border-radius);
        min-height: calc(100% - var(--toolbar-height));
        padding-inline: var(--c--globals--spacings--base);
        // Extra left padding to make room for the side menu drag handle
        padding-left: calc(var(--c--globals--spacings--base) + 8px);
        flex: 1;
        overflow: visible;

        // Overide blocknote default styles to fix some contrast issues
        blockquote {
            color: var(--c--globals--colors--gray-550);
            border-color: var(--c--globals--colors--gray-550);
        }
    }

    .tiptap > .bn-block-group {
        min-height: calc(var(--min-height) - var(--toolbar-height));
        max-width: var(--max-block-width);
    }
}
