.editableRichTextWrapper {
    display: flex;

    .title {
        grid-area: title;
    }
    .editableRichText {
        grid-area: editor;
        display: inline-block;
        width: 100%;
    }

    .viewer {
        .editableRichText();
        cursor: pointer;
    }

    .editor {
        .editableRichText();
        cursor: initial;

        :global(.fr-wrapper) {
            cursor: text;
        }
    }
}

.editableRichTextWrapperTitleTop {
    .editableRichTextWrapper();
    display: grid;
    grid-template-areas: 'title' 'editor';
    grid-gap: 12px;
}

.editableRichTextWrapperTitleLeft {
    .editableRichTextWrapper();
    display: grid;
    grid-template-areas: 'title editor';
    grid-template-columns: min-content auto;
    grid-gap: 12px;
}