/*
 * The InlineEditor makes an added host element the editable instead of replacing the textarea (see
 * ckeditor5_controller.js). That host carries the "form-control" class, so colour, background and
 * width come from the form styling; what CKEditor draws over it from its own stylesheet is put back
 * to the looks of a textarea here. The selectors carry the classes CKEditor writes on the editable,
 * because its stylesheet is loaded after bootstrap and a single class does not win from it.
 */
.ck.ck-editor__editable.ck-inline-host {
    /* CKEditor leaves the border of an inline editable transparent */
    border: 1px solid var(--bs-border-color, #bbbbbb);
    /* The size of a form control, a rem being the 13px this app puts on the html element */
    font-size: 1rem;
    /* Pages still on Bootstrap 4 (e.g. check_report) give every .form-control but a textarea a
       fixed single-line height; the host is a div, so it has to be released to grow with its text */
    height: auto;
}

/*
 * The v1 layout (base.html.twig, #content) sets html to 62.5%, so the 1rem above is 10px there
 * while the page text is in em. CKEditor's own content size is the keyword "medium".
 */
#content .ck.ck-editor__editable.ck-inline-host {
    font-size: medium;
}

/*
 * CKEditor squares the corners of an editable and rounds them again to its own 2px through the
 * "ck-rounded-corners" class, both times with ":not(.ck-editor__nested-editable)" in the selector.
 * Its stylesheet is injected by the editor bundle, so it comes after this file and wins anything
 * equally specific: hence the same negation here, once for each of the two rules to beat.
 */
.ck.ck-editor__editable.ck-inline-host:not(.ck-editor__nested-editable),
.ck.ck-editor__editable.ck-rounded-corners.ck-inline-host:not(.ck-editor__nested-editable) {
    border-radius: var(--bs-border-radius, .375rem);
}

/*
 * Symfony marks the textarea with is-invalid, then the editor hides it and draws its own border.
 * The visible field follows that textarea, including while focused: CKEditor's focus ring would
 * otherwise paint over the invalid border because its stylesheet loads after this file.
 * "~" and not "+": a Live re-render keeps the editor element (it was added by JS) but inserts the
 * new error message in front of it, so the editor is no longer the textarea's direct sibling.
 */
textarea.is-invalid ~ .ck.ck-editor__editable.ck-inline-host,
textarea.is-invalid ~ .ck-editor .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    border-color: var(--bs-form-invalid-border-color);
}

textarea.is-invalid ~ .ck.ck-editor__editable.ck-focused.ck-inline-host,
textarea.is-invalid ~ .ck-editor .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

/* The badge hangs in a balloon of its own on body level, so it is not reachable from the editable */
.ck-powered-by-balloon {
    display: none !important;
}