/* h1 should not be used at all since semantically that's a note title */
.note-detail-readonly-text h1 { font-size: 1.8em; }
.note-detail-readonly-text h2 { font-size: 1.6em; }
.note-detail-readonly-text h3 { font-size: 1.4em; }
.note-detail-readonly-text h4 { font-size: 1.2em; }
.note-detail-readonly-text h5 { font-size: 1.1em; }
.note-detail-readonly-text h6 { font-size: 1.0em; }

body.heading-style-markdown .note-detail-readonly-text h1::before { content: "#\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\2004"; color: var(--muted-text-color); }

body.heading-style-underline .note-detail-readonly-text h1 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-readonly-text h2 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-readonly-text h3 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-readonly-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-readonly-text h5 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-readonly-text h6 { border-bottom: 1px solid var(--main-border-color); }

.note-detail-readonly-text {
    padding-inline-start: 24px;
    padding-top: 10px;
    font-family: var(--detail-font-family);
    min-height: 50px;
    position: relative;
}

body.mobile .note-detail-readonly-text {
    padding-inline-start: 10px;
}

.note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {
    margin-top: 0;
}

.note-detail-readonly-text img {
    max-width: 100%;
    cursor: pointer;
}

.edit-text-note-button {
    position: absolute;
    top: 5px;
    inset-inline-end: 10px;
    font-size: 150%;
    padding: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--button-border-radius);
    color: var(--button-text-color);
}

.edit-text-note-button:hover {
    border-color: var(--button-border-color);
}