.#{$DRAFTAIL}Editor {
    background-color: $color-white;
    border: 1px solid $draftail-editor-chrome;
    border-radius: $draftail-editor-radius;
    color: $color-grey;

    &--hide-placeholder .public-DraftEditorPlaceholder-root {
        display: none;
    }

    &--readonly .DraftEditor-editorContainer {
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: $draftail-overlay-z-index;
            background-color: rgba(255, 255, 255, 0.8);
        }
    }
}

// Fix editor scrolling in the wrong position when breaking a big block.
// See https://github.com/facebook/draft-js/issues/304#issuecomment-327606596.
.DraftEditor-root {
    overflow: auto;
}

.public-DraftEditor-content,
.public-DraftEditorPlaceholder-root {
    padding: $editor-spacing;
    font-size: 1rem;
    line-height: 1.5;
    font-family: sans-serif;
    // Ligatures can make cursor behavior harder to understand.
    font-variant-ligatures: none;
}

// Remove default margins on atomic blocks because of the figure element.
.public-DraftEditor-content > * > figure {
    margin: 0;
}

.#{$DRAFTAIL}Editor {
    background-color: $color-white;
    border: 1px solid $draftail-editor-chrome;
    border-radius: $draftail-editor-radius;
    color: $color-grey;

    &--hide-placeholder .public-DraftEditorPlaceholder-root {
        display: none;
    }

    &--readonly .DraftEditor-editorContainer {
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: $draftail-overlay-z-index;
            background-color: rgba(255, 255, 255, 0.8);
        }
    }
}

.DraftEditor-root {
    // Fix editor scrolling in the wrong position when breaking a big block.
    // See https://github.com/facebook/draft-js/issues/304#issuecomment-327606596.
    font-size: 1rem;
    line-height: 1.5;
    font-family: sans-serif;
    overflow: auto;
    // Ligatures can make cursor behavior harder to understand.
    font-variant-ligatures: none;
}

.public-DraftEditor-content,
.public-DraftEditorPlaceholder-root {
    padding: $editor-spacing;
}

// Remove default margins on atomic blocks because of the figure element.
.public-DraftEditor-content > * > figure {
    margin: 0;
}

Move editor typographic styles to .DraftEditor-root
Move editor typographic styles to .DraftEditor-root
