/* formatted text editor style */

.formattedEditor {
    border: 2px inset #888;
    height: fit-content;
}

.formattedEditorPalette {
    position: relative;
}

.formattedEditorPalette>div {
    position: absolute;
    right   : 1px;
    bottom  : -1px;
    outline : 1px solid gray;
    display : flex;
    border  : none;
    width   : fit-content;
}

.formattedEditorPalette>div button {
    display         : flex;
    border          : 1px solid var(--ifm-input-border-color);
    align-items     : center;
    justify-content : center;
    border-radius   : 0;
    color           : var(--ifm-font-color-base);
    background-color: var(--ifm-background-color);
    min-width       : 32px;
    padding         : 0;
    margin          : 0;
}

.formattedEditorPalette>div button.toolbarButton,
.formattedEditorPalette>div button.toolbarButton:focus-visible {
    display        : flex;
    border         : 1px solid var(--ifm-input-border-color);
    align-items    : center;
    justify-content: center;
    border-radius  : 0;
    min-width      : 32px;
    padding        : 0;
    margin         : 0;
    color          : var(--ifm-font-color-base);
    outline        : none;
}

.plotDesignOptions .formattedEditorPalette>div button.toolbarButton {
    min-width: 24px;
}

.formattedEditorPalette>div button.toolbarButton {
    background-color: var(--ifm-background-color);
}

.formattedEditorPalette>div button.toolbarButton:hover,
.formattedEditorPalette>div button.toolbarButton:focus-visible {
    background-color: var(--ifm-color-secondary);
}

[data-theme='dark'] .formattedEditorPalette>div button.toolbarButton:hover,
[data-theme='dark'] .formattedEditorPalette>div button.toolbarButton:focus-visible {
    background-color: var(--ifm-color-secondary-lighter);
}

.formattedEditorPalette>div button.toolbarButton.ql-active {
    color: var(--ifm-hero-text-color);
}

.formattedEditorPalette>div button.toolbarButton.ql-active {
    background-color: var(--ifm-color-secondary-darkest);
}

.formattedEditorPalette>div button.toolbarButton.ql-active:hover,
.formattedEditorPalette>div button.toolbarButton.ql-active:focus-visible {
    background-color: var(--ifm-color-secondary-darker);
}

[data-theme='dark'] .formattedEditorPalette>div button.toolbarButton.ql-active {
    color           : var(--ifm-font-color-base);
    background-color: var(--ifm-color-secondary-lighter);
}

[data-theme='dark'] .formattedEditorPalette>div button.toolbarButton.ql-active:hover,
[data-theme='dark'] .formattedEditorPalette>div button.toolbarButton.ql-active:focus-visible {
    background-color: var(--ifm-color-secondary-lightestp1);
}

.ql-editor {
    padding         : 3px 3px;
    background-color: var(--ifm-input-bg-color);
    border-color    : var(--ifm-input-border-color);
    font-size       : var(--ifm-font-size-base);
    height          : fit-content;
    scrollbar-color : var(--ifm-hero-text-color) var(--ifm-color-primary);
}

.plotDesignOptions .ql-editor {
    max-width : 10.5rem;
    max-height: 4.75rem;
}

.ql-editor.ql-blank::before {
    padding-left: 3px;
    font-family : var(--ifm-font-family-base);
    font-size   : var(--ifm-font-size-base);
    color       : var(--ifm-font-color-base-f2);
    left        : inherit;
    right       : inherit;
}

.ql-container {
    font-family   : var(--ifm-font-family-base);
    font-size     : var(--ifm-font-size-base);
    font-weight   : var(--ifm-font-weight-base);
    letter-spacing: var(--ifm-letter-spacing-base);
}

.symbolSelector {
    position: relative;
}

.symbolSelector>div {
    box-sizing : content-box;
    position   : absolute;
    right      : 0;
    top        : 0;
    border     : 2px solid var(--ifm-input-border-color);
    background : var(--ifm-background-color);
    display    : flex;
    width      : 256px;
    flex-wrap  : wrap;
    user-select: none;
    z-index    : 1;
}

.symbolSelector button.symbolButton,
.symbolSelector button.symbolButton:focus-visible {
    border-radius  : 0;
    box-sizing     : content-box;
    padding        : 0;
    margin         : 0;
    color          : var(--ifm-font-color-base);
    border         : none;
    display        : inline-flex;
    width          : 32px;
    height         : 32px;
    justify-content: center;
    align-items    : center;
    cursor         : pointer;
    outline        : none;
}

.plotDesignOptions .symbolSelector button.symbolButton {
    width: 24px;
}

.symbolSelector button.symbolButton {
    background-color: var(--ifm-background-color);
}

.symbolSelector button.symbolButton:hover,
.symbolSelector button.symbolButton:focus-visible {
    background-color: var(--ifm-color-secondary);
}

[data-theme='dark'] .symbolSelector button.symbolButton:hover,
[data-theme='dark'] .symbolSelector button.symbolButton:focus-visible {
    background-color: var(--ifm-color-secondary-lighter);
}