/*
 * 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);
}

/* 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;
}