/* ┏┓ ┏━╸╺┳╸╺┳╸┏━╸┏━┓   ┏┳┓┏━┓┏━┓┏━╸╻┏┓╻┏━┓ */
/* ┣┻┓┣╸  ┃  ┃ ┣╸ ┣┳┛   ┃┃┃┣━┫┣┳┛┃╺┓┃┃┗┫┗━┓ */
/* ┗━┛┗━╸ ╹  ╹ ┗━╸╹┗╸   ╹ ╹╹ ╹╹┗╸┗━┛╹╹ ╹┗━┛ */
.callout {
    /* padding: 5px; */
    --callout-padding: var(--size-4-1) var(--size-4-3) var(--size-4-1) var(--size-4-1);

}
.callout-content > p,
.callout-content > ul{
    margin-top: 0px;
    margin-bottom: 0px;
}


/* ┏━╸╻ ╻╻┏━┓╺┳╸╻┏┓╻┏━╸   ┏━╸┏━┓╻  ╻  ┏━┓╻ ╻╺┳╸┏━┓ */
/* ┣╸ ┏╋┛┃┗━┓ ┃ ┃┃┗┫┃╺┓   ┃  ┣━┫┃  ┃  ┃ ┃┃ ┃ ┃ ┗━┓ */
/* ┗━╸╹ ╹╹┗━┛ ╹ ╹╹ ╹┗━┛   ┗━╸╹ ╹┗━╸┗━╸┗━┛┗━┛ ╹ ┗━┛ */

.callout {
    /* font-size: 80%; */
}


/* Also create the small vertion of the todo (smalltodo) */
.callout[data-callout="todo"], .callout[data-callout="smalltodo"]{
    /* orange is my color for todo
     * (especially since tags are orange, and tasks have the #task tag) */
    --callout-color: 255, 160, 30;
    --callout-icon: luc_clipboard_check;
}
.callout[data-callout="smalltodo"] {
    font-size: 80%;
    --table-font-size: 80%;
    --font-code: 80%;
}

.callout[data-callout="info"] {
    --callout-color: 30, 180, 30;
}

.callout[data-callout="cite"] {
    --callout-title-size: 90%;
}
.callout[data-callout="cite"] {
    /* padding: 0pt; */
    --callout-padding: var(--size-2-3)
}
.callout[data-callout="cite"] > .callout-title > .callout-title-inner {
    /* overflow: scroll; */
}



/* ┏┓╻┏━╸╻ ╻   ┏━╸┏━┓╻  ╻  ┏━┓╻ ╻╺┳╸┏━┓ */
/* ┃┗┫┣╸ ┃╻┃   ┃  ┣━┫┃  ┃  ┃ ┃┃ ┃ ┃ ┗━┓ */
/* ╹ ╹┗━╸┗┻┛   ┗━╸╹ ╹┗━╸┗━╸┗━┛┗━┛ ╹ ┗━┛ */


.callout[data-callout="query"], .callout[data-callout="smallquery"]{
    /* small and green, for queries (dataview...) */
    /* change this -------.  to adjust brightness */
    /*                    |                       */
    /*                    V                       */
    /* --callout-color: 68, 140, 80; */
    --callout-color: 64, 208, 64;
    --callout-icon: database;
    /* --callout-icon: '<svg>...custom svg...</svg>'; */
    /* font-size: 18px; /1* smaller font size, to see more results at se same time *1/ */
}
.callout[data-callout="smallquery"] {
    font-size: 80%; /* smaller font size, to see more results at se same time */
    /* also change the size of any table contained in the callout */
    --table-font-size: 80%;
    --font-code: 80%;
}



.callout[data-callout="idea"] {
    /* ideas for future things (improvements...) */
    --callout-color: 252, 213, 0;
    --callout-icon: lightbulb;
}


.callout[data-callout="definition"], .callout[data-callout="définition"]{
    /* definitions (expecially in maths) */
    --callout-color: 77, 149, 247;
    --callout-icon: feather;
}


.callout[data-callout="date"] {
    --callout-color: 240, 90, 80;
    --callout-icon: calendar;
    /* --callout-icon: '<svg>...custom svg...</svg>'; */
}


.callout[data-callout="zotero"] {
    --callout-icon: align-left;
    --callout-color: 38, 38, 38;
    background-color: transparent;
    border: 1pt solid;
    /* border-color: var(--background-modifier-border); */
    border-color: rgb(80, 80, 80);
}
.callout[data-callout="zotero"] > .callout-title {
    border-bottom: 1pt solid rgb(80, 80, 80);
    filter: brightness(0.9) saturate(2);
    color: var(--text-normal);
}
.callout[data-callout="zotero"] > .callout-title > .callout-icon > .svg-icon {
    /* display: none; /1* hide icon in favor of the colored one *1/ */
    /* color: rgb(90, 90, 90); */
    color: var(--text-normal);
    stroke-width: 3;
}