/* formatted text editor style */

.formattedTextEditor {
    padding: 3px;
    border: 2px inset #767676;
}

.formattedTextEditor[contenteditable=true].empty:after {
    content: attr(data-placeholder);
    color: grey;
    font-style: italic;
}

.formattedEditorPalette {
    position: relative;
}

.formattedEditorPalette>div {
    position: absolute;
    right: 0;
    bottom: 0px;
    border-top: 2px inset #767676;
    border-left: 2px inset #767676;
    border-right: 2px inset #767676;
}

.formattedEditorPalette button {
    display: inline-block;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
}

.formattedEditorPalette>div,
.formattedEditorPalette button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.formattedEditorPalette button {
    color: #444;
    background: white;
}

.formattedEditorPalette button.active {
    color: white;
    background: #444;
}

.formattedEditorPalette button:hover {
    background: #ddd;
}

.formattedEditorPalette button.active:hover {
    background: #777;
}

.symbolPopover {
    position-area: block-end span-inline-start;
    border: 2px inset #767676;
}

.symbolSelector {
    display: flex;
    width: 192px;
    flex-wrap: wrap;
    user-select: none;
}

.symbolSelector button {
    background: white;
    color: black;
    border: none;
    display: inline-flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 16px;
    margin: 0;
    border-radius: 0;
}

.symbolSelector button:hover {
    background: #444;
    color: white;
}