:root {
    --magazine-html-editor-borders: 1px solid #ccc;
}
.magazine-html-editor {
    display: inline-flex;
    min-width: 20rem;
    flex-direction: column;
    border: var(--magazine-html-editor-borders);
}
.magazine-html-editor__buttons {
    display: flex;
    background-color: #eee;
    border-bottom: var(--magazine-html-editor-borders);
}
.magazine-html-editor__button {
    border: none;
    background-color: unset;
    cursor: pointer;
    padding: 8px;
}
.magazine-html-editor__button:hover,
.magazine-html-editor__button:focus,
.magazine-html-editor__button:active {
    background-color: black;
    color: white;
}
.magazine-html-editor__button--bold {
    font-weight: bold;
}
.magazine-html-editor__button--italic {
    font-style: italic;
}
.magazine-html-editor__editor {
    background-color: white;
    padding: 8px;
    min-height: 73px; /* Includes the padding. Exactly 3 lines of text. */
}
.magazine-html-editor__editor:focus-visible {
    outline: none;
}