/**
  Note: font sizes are not specified in this CSS file nor in NoteEditor CSS styles. They are specified by the function setFontSize() in miscUtils.js
 */

@media (prefers-color-scheme: light) {
    :root {
        --MarkdownHighlighter_codeTextColor: #101010;
        --MarkdownHighlighter_codeBackgroundColor: #f7f7f77f; /* Semitransparent to allow background color to be seen under it */
        --MarkdownHighlighter_codeBorderColor: lightgray;
        --MarkdownHighlighter_codeGutterColor: #f0f0f07f; /* Semitransparent to allow background color to be seen under it */
        --MarkdownHighlighter_codeFontFamily: 'Courier New';
        --MarkdownHighlighter_codeFontSize: 20px;
        --markdownHighlighterHeaderColor: #337ab7;
        --MarkdownHighlighter_spoilerBackground: #888888;
        --MarkdownHighlighter_spoilerColor: #888888;
        --MarkdownHighlighter_blockquoteBorderColor: #888888;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --MarkdownHighlighter_codeTextColor: #f0f0f0;
        --MarkdownHighlighter_codeBackgroundColor: #3f41457f; /* Semitransparent to allow background color to be seen under it */
        --MarkdownHighlighter_codeBorderColor: #4f5155;
        --MarkdownHighlighter_codeGutterColor: #47484c7f; /* Semitransparent to allow background color to be seen under it */
        --MarkdownHighlighter_codeFontFamily: 'Courier New';
        --MarkdownHighlighter_codeFontSize: 20px;
        --markdownHighlighterHeaderColor: #ff603f;
        --MarkdownHighlighter_spoilerBackground: #555555;
        --MarkdownHighlighter_spoilerColor: #555555;
        --MarkdownHighlighter_blockquoteBorderColor: #777777;
    }
}

:root {
    --MarkdownHighlighter_linkColor: var(--markdownHighlighterHeaderColor);
}

.MarkdownHighlighter_checkbox {
    color: lightgray;
}

.MarkdownHighlighter_inlineCode {
    color: var(--MarkdownHighlighter_codeTextColor);
    font-family: var(--MarkdownHighlighter_codeFontFamily), serif;
    background: var(--MarkdownHighlighter_codeBackgroundColor) !important;
    outline: var(--MarkdownHighlighter_codeBorderColor) 1px solid;
    border-radius: .25rem;
}

.MarkdownHighlighter_codeBlockWrapper {
    border-radius: .5rem;
    outline: var(--MarkdownHighlighter_codeBorderColor) 1px solid;
    margin-top: 7px;
    margin-bottom: 7px;
    max-height: 500px;
    overflow-y: auto;
}

.MarkdownHighlighter_codeBlockGutter {
    color: var(--MarkdownHighlighter_codeTextColor);
    background: var(--MarkdownHighlighter_codeGutterColor);
    font-family: var(--MarkdownHighlighter_codeFontFamily), serif;
    min-width: 50px;
    padding: 10px 10px;
    text-align: right;
    user-select: none;
    user-focus: none;
}

.MarkdownHighlighter_CodeBlock {
    border-radius: .5rem;
    outline: var(--MarkdownHighlighter_codeBorderColor) 1px solid;
    margin-top: 7px;
    margin-bottom: 7px;
    max-height: 500px;
    overflow-y: auto;
    background: var(--MarkdownHighlighter_codeBackgroundColor) !important;
    color: var(--MarkdownHighlighter_codeTextColor);
    display: inline-block; /* preventing new lines addition when converting from HTML to plain MD text */
    width: 100%; /* lifehack to force block behavior and not add unwanted line breaks */
    font-family: var(--MarkdownHighlighter_codeFontFamily), serif;
    word-break: break-word;
    padding: 5px;
}

.MarkdownHighlighter_title {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H1 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
    text-decoration: underline double;
}

.MarkdownHighlighter_H2 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
    text-decoration: underline;
}

.MarkdownHighlighter_H3 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H4 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H4 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H5 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H6 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_H7 {
    color: var(--markdownHighlighterHeaderColor);
    font-weight: normal;
}

.MarkdownHighlighter_blockquote {
    display: inline-block;
    width: 100%;
    border-left: 4px solid var(--MarkdownHighlighter_blockquoteBorderColor);
    padding-left: 12px;
    margin: 0;
}

.MarkdownHighlighter_link {
    color: var(--MarkdownHighlighter_linkColor);
    font-weight: normal;
}

.MarkdownHighlighter_youtube {
    display: inline-block;
    user-select: none;
    max-width: 100%;
}

.MarkdownHighlighter_spoiler {
    background: var(--MarkdownHighlighter_spoilerBackground);
    color: var(--MarkdownHighlighter_spoilerColor);
    cursor: pointer;
    user-select: none;
    border-radius: .15rem;
    padding: 0 2px; /* Will be overridden by inline styles with random padding */
    transition: all 0.2s ease;
}

.MarkdownHighlighter_spoiler.MarkdownHighlighter_revealed {
    background: transparent;
    color: inherit;
    user-select: text;
    cursor: default;
    padding: 0 2px !important; /* Reset to normal padding when revealed */
    border: 1px dashed gray;
}