/*
    Quill overrides so the editor reads as part of Affixify rather than a bolted-on widget.
    The editor surface deliberately inherits the site font and theme colours, which is what
    lets an admin see roughly what the published article will look like while writing it.
*/

.affixify-editor-shell {
    background-color: #FFFFFF;
    overflow: hidden;
}

/* Quill injects its toolbar as a sibling above the surface. */
.affixify-editor-shell .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--affixify-border-color);
    background-color: var(--affixify-bg-color);
}

.affixify-editor-shell .ql-container.ql-snow {
    border: none;
}

.affixify-editor-surface {
    min-height: 420px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.affixify-editor-surface .ql-editor h1 {
    font-family: 'Libre Baskerville', serif;
}

.affixify-editor-surface .ql-editor h2,
.affixify-editor-surface .ql-editor h3,
.affixify-editor-surface .ql-editor h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.affixify-editor-surface .ql-editor blockquote {
    border-left: 3px solid var(--affixify-green);
    padding-left: 1rem;
    color: var(--affixify-gray-two);
}

.affixify-editor-surface .ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* The custom Affixify style picker needs room for its labels. */
.ql-snow .ql-picker.ql-affixifyStyle {
    width: 150px;
}

.ql-snow .ql-picker.ql-affixifyStyle .ql-picker-label::before {
    content: 'Styles';
}