/***
* This files contains the css for the both sides of anki cards.
*/

body {
    background-color: white;
    @import "/node_modules/highlight.js/scss/atom-one-light.scss";
}

.text {
    font-family: arial;
    font-size: 16px;
    color: black;
}

.anki-cloze-from-another-note, .cloze-inactive {
    background-color: rgb(59 130 246 / 0.1);
 }

.hidden {
    display: none;
}

code {
    font-family: monospace;
    background: #e9ecef;
    border-radius: 2px;
    padding: 2px;
}

.typeGood {
    background: #afa;
    color: #000
}

.typeBad {
    color: #000;
    background: #faa
}

.typeMissed {
    color: #000;
    background: #ccc
}

p {
    margin: 0px;
    padding: 0px;
}

.MathJax[display="true"] {
    font-size: 18px;
}

.cloze {
    font-weight: bold;
    color: blue;
}

.cloze-inactive-hidden {
    font-weight: bold;
    /* coloring for this element is handled in _logseq_anki_sync_front.js */
}

.extra {
    background-color: antiquewhite;
    border-radius: 4px;
    padding: 3px;
    font-size: small;
}

.extra:empty {
    display: none;
}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

th,
td {
    padding: 20px 30px;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0 auto;
    display: block;
}

/* --- multiline card css --- */
.children-list {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
    list-style: none;
    padding-left: 1.4rem;
    counter-reset: number;
}

.children {
    padding-top: 3px;
    padding-bottom: 3px;
    position: relative;
    min-height: 1em;
}

.children::before {
    content: "\2022";
    color: #d0cfcd;
    cursor: pointer;
    position: absolute;
    left: -1.8rem;
    top: -1px;
    font-size: 1.8rem;
}

.children.numbered::before {
    content: counter(number) ".";
    counter-increment: number;
    font-size: 1rem;
    top: 2px;
}

.children:hover::before {
    color: #b7b6b4;
    transform: scale(1.3);
    text-shadow:
        -1px -1px 4px #dedede,
        0 -1px 4px #dedede,
        1px -1px 4px #dedede,
        1px 0 4px #dedede,
        1px 1px 4px #dedede,
        0 1px 4px #dedede,
        -1px 1px 4px #dedede,
        -1px 0 4px #dedede;
    transition: all 0.1s;
}

.children-list :not(.embed-page):not(.embed-block) > .children-list > .children::after {
    content: " ";
    left: -3rem;
    background-color: #e9ecef;
    height: 100%;
    width: 2px;
    position: absolute;
    top: 0px;
}

.children p {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

/* --- logseq elements --- */
.center {
    display: block;
    text-align: center;
}

a.tag:before {
    content: "#";
}

a.tag {
    font-size: 14px;
    cursor: pointer;
    color: #106ba3;
    opacity: 0.8;
}

a.tag:hover {
    opacity: 1;
    transition: 0.3s;
    color: #004174;
}

/* Page, Block Refs and Embeds */
a.page-reference {
    color: #106ba3;
}

a.page-reference:before {
    color: rgb(115, 115, 115);
    content: "[[";
    opacity: 0.3;
}

a.page-reference:after {
    color: rgb(115, 115, 115);
    content: "]]";
    opacity: 0.3;
}

a.page-reference:hover {
    background-color: #c8e6fa;
}

.block-ref {
    border-bottom: 0.5px solid;
    border-bottom-color: #d8e1e8;
    text-decoration: none;
    color: inherit;
    cursor: alias;
    display: inline-block;
}

.block-ref :is(h1, h2, h3, h4, h5, h6) {
    border-bottom: none;
    display: inline-block;
    font-size: 1em;
}

.block-ref:hover {
    background-color: #c8e6fa;
}

.failed-block-ref {
    color: inherit;
    background-color: #f56565;
    border-radius: 4px;
    cursor: not-allowed;
}

.failed-block-ref:before {
    color: rgb(115, 115, 115);
    content: "((";
    opacity: 0.3;
}

.failed-block-ref:after {
    color: rgb(115, 115, 115);
    content: "))";
    opacity: 0.3;
}

.embed-page,
.embed-block {
    max-width: 100%;
    padding: 0.75em 0.5em;
    border: 2px solid #000;
    border-radius: 8px;
    margin: 0.2em 0 0.5em;
    box-shadow: 0 0 0 2px #e9ecef;
    background: #f8f9fa;
}

a.embed-header {
    margin-left: 6px;
    font-weight: 600;
    color: #106ba3;
}

a.embed-header:hover {
    color: #004174;
}

/* Admonition */
div.important,
div.caution,
div.pinned,
div.tip,
div.note,
div.warning {
    display: flex;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
    align-items: stretch;
    min-height: 32px;
    color: inherit;
}

div.important::before,
div.caution::before,
div.pinned::before,
div.tip::before,
div.note::before,
div.warning::before {
    content: "";
    min-width: 32px;
    border-style: solid;
    padding-right: 16px;
    margin-right: 12px;
    border-width: 0 1px 0 0;
    border-color: rgb(190, 190, 190);
}

div.important::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='currentColor' color='%23bf0000' class='h-8 w-8 svg-shadow important'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

div.caution::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='currentColor' color='%23bf3400' class='h-8 w-8 svg-shadow caution'%3E%3Cpath d='M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

div.pinned::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='currentColor' class='h-8 w-8 pinned'%3E%3Cpath d='M322.397,252.352l75.068-75.067c19.346,5.06,40.078,3.441,58.536-4.873L339.589,56c-8.313,18.458-9.933,39.189-4.873,58.536 l-75.066,75.067c-35.168-16.745-76.173-17.14-111.618-1.176l65.009,65.01L55.999,456l202.563-157.041l65.01,65.01 C339.535,328.526,339.142,287.519,322.397,252.352z M201.513,216.553c0,0-16.568-16.568-21.323-21.035 c37.027-10.806,61.375,4.323,61.375,4.323C218.946,192.781,201.513,216.553,201.513,216.553z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

div.tip::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512' fill='currentColor' class='h-8 w-8 tip' color='%230069b6'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

div.note::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='currentColor' class='h-8 w-8 svg-shadow note'%3E%3Cpath d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

div.warning::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='currentColor' color='%23bf6900' class='h-8 w-8 svg-shadow warning'%3E%3Cpath d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
    background-size: 32px 32px;
}

blockquote,
.quote {
    display: block;
    text-indent: 0;
    padding: 8px 20px;
    border-left: 4px solid;
    border-left-color: #799bbc;
    background-color: #fbfaf8;
    margin: 1rem 0;
    color: rgb(40, 40, 40);
}

/* Logseq Content lists */
ul:not(.children-list) {
    list-style: circle;
    margin-left: 0;
    padding-left: 1.4rem;
}

ol:not(.children-list) {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 0rem;
}

li:not(.children) {
    margin: 0;
}

/* Logseq block coloring */
.block-highlight-yellow {
    background-color: #946800;
    border-radius: 4px;
}

.block-highlight-pink {
    background-color: #cd1d8d;
    border-radius: 4px;
}

.block-highlight-blue {
    background-color: #006adc;
    border-radius: 4px;
}

.block-highlight-red {
    background-color: #cd2b31;
    border-radius: 4px;
}

.block-highlight-green {
    background-color: #18794e;
    border-radius: 4px;
}

.block-highlight-purple {
    background-color: #793aaf;
    border-radius: 4px;
}

.block-highlight-gray {
    background-color: #111827;
    border-radius: 4px;
}

/* --- UI css --- */
.bubble {
    font-family: arial;
    font-size: 12px;
    color: rgb(65, 65, 65);
    background-color: rgb(226, 236, 240);
    border-radius: 6px;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 4px;
}

.bubble:empty,
.bubble:has(a.hidden) {
    visibility: hidden;
}

.note-action {
    padding: 4px;
}

.note-action:hover {
    cursor: pointer;
}

/* --- Night Mode colors css --- */
body.nightMode {
    background-color: #2c2c2c;
    color: #fcfcfc;
    @import "/node_modules/highlight.js/scss/atom-one-dark-reasonable.scss";
}

body.nightMode .text {
    color: #bfbfbf;
}

body.nightMode .cloze {
    color: lightblue;
}

body.nightMode .bubble {
    color: #bfbfbf;
    background-color: #4d4d4d;
}

body.nightMode .bubble a {
    color: #bfbfbf;
}

body.nightMode code:not(.hljs) {
    background-color: #474848;
}

body.nightMode a.tag {
    color: #8db6d1;
}

body.nightMode a.tag:hover {
    color: #c8e0f4;
}

body.nightMode .block-ref {
    border-bottom-color: #bfbfbf;
}

body.nightMode .block-ref:hover {
    background-color: #4d4d4d;
}

body.nightMode blockquote,
.quote {
    border-left-color: #bfbfbf;
    background-color: #4d4d4d;
    color: #bfbfbf;
}

body.nightMode ul:not(.children-list) {
    color: #bfbfbf;
}

body.nightMode ol:not(.children-list) {
    color: #bfbfbf;
}

body.nightMode li:not(.children) {
    color: #bfbfbf;
}

body.nightMode .extra {
    background-color: #6f6860;
}

body.nightMode table,
body.nightMode th,
body.nightMode td {
    border-color: #bfbfbf;
}

body.nightMode div.important::before,
body.nightMode div.caution::before,
body.nightMode div.pinned::before,
body.nightMode div.tip::before,
body.nightMode div.note::before,
body.nightMode div.warning::before {
    border-color: #bfbfbf;
}

body.nightMode .embed-page,
body.nightMode .embed-block {
    border: 2px solid #bfbfbf;
    box-shadow: 0 0 0 2px #2c2c2c;
    background: #424242;
}

body.nightMode a.embed-header {
    color: #8db6d1;
}

body.nightMode a.embed-header:hover {
    color: #c8e0f4;
}
