/*------------------------------------------------------------------------------
                     Daily Note Themes by CyanVoxel v1.0.0

These are a set of 7 main CSS classes that can be used to apply individual color
schemes to daily notes for each day of the week.
To customize the colors for each day, just swamp out the colors values under
the main "day of the week" classes.

NOTE: By default, this snippet relies on the "Bai Jamjuree" or
"JetBrainsMono Nerd Font Mono" fonts. If you don't wish to use these, then just
remove those font-family lines from this snippet.
                
------------------------------------------------------------------------------*/
:root {
    --highlight: #ffffff;
    --primary: #aaaaaa;
    --dark: #333333;
}

.daily {
    --dark: var(--dark);
    color: var(--highlight);
    background-color: var(--dark);
    --text-normal: var(--highlight);
    --text-muted: var(--highlight);
    --text-faint: var(--highlight);
    --checklist-done-color: var(--highlight);
    --metadata-label-text-color: var(--highlight);
    --metadata-input-text-color: var(--highlight);
    --tag-color: var(--dark);
    --tag-background: var(--primary);
    --hr-color: var(--primary);
    --blockquote-border-color: var(--primary);
    --interactive-accent: var(--primary);
    --collapse-icon-color-collapsed: var(--primary);
    --checkbox-color: var(--primary);
    --checkbox-marker-color: var(--dark);
    --checkbox-color-hover: var(--highlight);
    --checkbox-border-color: var(--highlight);
    --list-marker-color: var(--highlight);
    --code-background: black;
    --code-normal: var(--primary);

    --background-modifier-border-focus: var(--primary);
    --background-modifier-border: color-mix(in srgb, var(--highlight) 60%, transparent);
    --background-modifier-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
    --pill-cover-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
}

.sunday {
    --highlight: #f39caa;
    --primary: #f6466f;
    --dark: #2d0916;
}

.monday {
    --highlight: #fcadaa;
    --primary: #f65848;
    --dark: #3c0e0b;
}

.tuesday {
    --highlight: #aedbfa;
    --primary: #3b87f0;
    --dark: #070615;
}

.wednesday {
    --highlight: #fff3c4;
    --primary: #ffd63d;
    --dark: #2c1404;
}

.thursday {
    --highlight: #f7b79b;
    --primary: #ed6022;
    --dark: #210b04;
}

.friday {
    --highlight: #e9f9b7;
    --primary: #92e649;
    --dark: #192108;
}

.saturday {
    --highlight: #f39caa;
    --primary: #e22c3c;
    --dark: #100305;
}

.daily :is(h1, .HyperMD-header.HyperMD-header-1) {
    color: var(--primary);
    text-align: center;
    font-size: 60px;
    font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
    padding: 0 !important;
}

.daily :is(h2, .HyperMD-header.HyperMD-header-2) {
    color: var(--highlight);
    text-align: center;
    font-size: 30px;
    font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
    font-style: italic;
    padding: 0 !important;
}

.daily :is(h3, .HyperMD-header.HyperMD-header-3) {
    color: var(--primary);
    text-align: center;

    font-size: 32px;
    font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
    padding-top: 0;
}

.daily :is(h4, .HyperMD-header.HyperMD-header-4) {
    background-color: var(--primary);
    color: var(--dark);
    /* border-color: var(--primary); */
    /* font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", monospace; */
    font-weight: 900;
    margin-bottom: 0;
    padding-top: 0;
    font-size: 20px;
    width: fit-content;
    padding-left: 6px;
    padding-right: 6px;
    /* border: solid; */
    border-radius: 8px;
    /* border-width: 2px; */
    word-wrap: normal;
}

.daily p {
    margin-top: 4px;
    margin-bottom: 4px;
}

.daily :is(a:link, .cm-hmd-internal-link) {
    color: var(--primary);
}

.daily :is(a:hover, .cm-hmd-internal-link:hover) {
    color: var(--highlight);
}

.daily hr {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.daily img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

:is(.sunday,
    .monday,
    .tuesday,
    .wednesday,
    .thursday,
    .friday,
    .saturday) svg {
    color: color-mix(in srgb, var(--highlight) 60%, transparent);
}