@import  "base/src/base";

/***** TABLE OF CONTENTS *****/
/* 1. Font
/* 2. Colors
/* 3. General UI
/*     3.1. Title Bar
/*         3.1.2. Fix tab header padding
/*     3.2. Status Bar
/*         3.2.1. Fix status bar border
/*         3.2.2. Fix status bar padding
/*     3.3. Sidebar
/*         3.3.1. Fix sidebar padding
/*     3.4. Suggestions
/*         3.4.1. Fix selected suggestion item background
/* 4. Markdown (editor / preview)
/*     4.1. Title
/*     4.2. Headings
/*         4.2.1. Fix heading weights
/*         4.2.2. Fix heading space
/*     4.3. Task Lists
/*         4.3.1. Fix checkbox style
/*         4.3.2. Fix checkbox tick style
/*     4.4. Blockquotes
/*         4.4.1. Fix blockquote margin
/*         4.4.2. Fix blockquote border
/*         4.4.3. Fix formatting quote >
/*     4.5. Horizontal rules
/*         4.5.1. Fix horizontal rule margin
/*         4.5.2. Fix horizontal rule thickness
/*     4.6. Tables
/*         4.6.1. Fix table element padding
/*     4.7. Code blocks
/*         4.7.1. Fix code block font size
/*         4.7.2. Fix code block alignment and background
/*     4.8. Lists
/*         4.8.1. Fix list bullet radius
/***** *****/

/** 1. Font */
body {
    --font-monospace: "Courier New", monospace;
    --font-text: "Inter", sans-serif;
    -webkit-font-smoothing: auto;
}

/** 2. Colors */
.theme-dark {
    --mono-rgb-0: @color_ee_base_00_rgb;
    --mono-rgb-100: @color_ee_base_100_rgb;
    --color-red_rgb: @color_red_3_rgb;
    --color-red: @color_red_3;
    --color-orange_rgb: @color_orange_3_rgb;
    --color-orange: @color_orange_3;
    --color-yellow-rgb: @color_yellow_3_rgb;
    --color-yellow: @color_yellow_3;
    --color-green-rgb: @color_green_0_rgb;
    --color-green: @color_green_0;
    --color-teal-rgb: @color_teal_0_rgb;
    --color-teal: @color_teal_0;
    --color-cyan: var(--color-teal);
    --color-cyan-rgb: var(--color-teal-rgb);
    --color-blue_rgb: @color_blue_1_rgb;
    --color-blue: @color_blue_1;
    --color-purple-rgb: @color_purple_2_rgb;
    --color-purple: @color_purple_2;
    --color-pink-rgb: @color_pink_0_rgb;
    --color-pink: @color_pink_0;
    --color-base-00: @color_ee_base_00;
    --color-base-05: @color_ee_base_05;
    --color-base-10: @color_ee_base_10;
    --color-base-20: @color_ee_base_20;
    --color-base-25: @color_ee_base_25;
    --color-base-30: @color_ee_base_30;
    --color-base-35: @color_ee_base_35;
    --color-base-40: @color_ee_base_40;
    --color-base-50: @color_ee_base_50;
    --color-base-60: @color_ee_base_60;
    --color-base-70: @color_ee_base_70;
    --color-base-100: @color_ee_base_100;
    --background-secondary-alt: var(--color-base-20);
    --checkbox-border-color-unchecked: var(--color-base-50);
    --checkbox-border-color-hover: var(--checkbox-color);
}

.theme-light {
    --mono-rgb-0: @color_ee_base_100_rgb;
    --mono-rgb-100: @color_ee_base_00_rgb;
    --color-red_rgb: @color_red_4_rgb;
    --color-red: @color_red_4;
    --color-orange_rgb: @color_orange_4_rgb;
    --color-orange: @color_orange_4;
    --color-yellow-rgb: @color_yellow_4_rgb;
    --color-yellow: @color_yellow_4;
    --color-green-rgb: @color_green_4_rgb;
    --color-green: @color_green_4;
    --color-teal-rgb: @color_teal_0_rgb;
    --color-teal: @color_teal_0;
    --color-cyan: var(--color-teal);
    --color-cyan-rgb: var(--color-teal-rgb);
    --color-blue_rgb: @color_blue_0_rgb;
    --color-blue: @color_blue_0;
    --color-purple-rgb: @color_purple_4_rgb;
    --color-purple: @color_purple_4;
    --color-pink-rgb: @color_pink_4_rgb;
    --color-pink: @color_pink_4;
    --color-base-00: @color_ee_base_95;
    --color-base-05: @color_ee_base_90;
    --color-base-10: @color_ee_base_85;
    --color-base-20: @color_ee_base_75;
    --color-base-25: @color_ee_base_70;
    --color-base-30: @color_ee_base_65;
    --color-base-35: @color_ee_base_60;
    --color-base-40: @color_ee_base_55;
    --color-base-50: @color_ee_base_45;
    --color-base-60: @color_ee_base_35;
    --color-base-70: @color_ee_base_25;
    --color-base-100: @color_ee_base_00;
    --background-secondary-alt: var(--color-base-20);
    --checkbox-border-color-unchecked: var(--color-base-50);
    --checkbox-border-color-hover: var(--checkbox-color);
}

body {
    --accent-h: @color_teal_0_h;
    --accent-s: @color_teal_0_s;
    --accent-l: @color_teal_0_l;
    --inline-title-color: var(--color-base-50);
    --h1-color: var(--color-red);
    --h2-color: var(--color-orange);
    --h3-color: var(--color-yellow);
    --h4-color: var(--color-green);
    --h5-color: var(--color-blue);
    --h6-color: var(--color-purple);
    --background-primary-alt: var(--color-base-05);
    --background-secondary: var(--color-base-10);
    --background-modifier-hover: rgba(var(--mono-rgb-0), 0.5);
    --text-highlight-bg-rgb: var(--color-yellow-rgb);
    --background-modifier-border: var(--color-base-20);
    --modal-border-color: var(--color-base-30, var(--background-modifier-border-focus))
}

.canvas-node.is-themed .canvas-node-content {
    background-color: rgba(var(--canvas-color), 0);
}

/** 3. Generic UI */
/** 3.1. Title Bar */
/** 3.1.2. Fix tab header padding */
.workspace .mod-root .workspace-tab-header-inner-title {
    padding-top: 0.4rem;
    padding-left: 0.4rem;
}

/* 3.2. Status Bar */
/* 3.2.1. Fix status bar border */
body {
    --status-bar-border-width: 0;
}

/* 3.2.2. Fix status bar padding */
.status-bar {
    padding-top: var(--size-2-3);
}

/* 3.3. Sidebar */
/* 3.3.1. Fix sidebar padding */
.nav-file-title-content, .nav-folder-title-content, .tree-item-inner {
    padding-top: 2px;
}

/* 3.4. Suggestions */
/* 3.4.1. Fix selected suggestion item background */
.suggestion-item.is-selected
{
    background-color: var(--text-selection);
}


/** 4. Markdown (editor / preview) */
/** 4.1. Title */
body {
    --inline-title-style: italic;
    --inline-title-weight: 50;
    --inline-title-size: var(--h3-size);
}

/** 4.2. Headings */
/** 4.2.1. Fix heading weights */
.theme-dark {
    --h1-weight: 300;
    --h2-weight: 300;
    --h3-weight: 300;
    --h4-weight: 300;
    --h5-weight: 300;
    --h6-weight: 300;
}

.theme-light {
    --h1-weight: 500;
    --h2-weight: 400;
    --h3-weight: 400;
    --h4-weight: 400;
    --h5-weight: 400;
    --h6-weight: 400;
}

/** 4.2.2 Fix heading space */
body {
    --heading-spacing: calc(var(--p-spacing) * 1.5)
}

/** 4.2.1. Fix heading margins */
.markdown-rendered h1 {
    margin-block-end: 0;
}

.markdown-rendered h2 {
    margin-block-end: 0;
}

.markdown-rendered h3 {
    margin-block-end: 0;
}

.markdown-rendered h4 {
    margin-block-end: 0;
}

.markdown-rendered h5 {
    margin-block-end: 0;
}

.markdown-rendered h6 {
    margin-block-end: 0;
}

.markdown-rendered p {
    margin-block-start: 0.2rem;
}

/** 4.3. Task Lists */
/** 4.3.1. Fix checkbox style */
body {
    --checkbox-radius: 10px;
}

/** 4.3.2. Fix checkbox tick style */
input[type=checkbox]
{
    border: 1px solid var(--checkbox-border-color-unchecked);
}

input[type=checkbox]:checked
{
    box-shadow: inset 0 0 0 3px var(--background-primary);
}

input[type=checkbox]:checked:after
{
    display: none;
    -webkit-mask-size: 75%;
}

/** 4.4. Blockquotes */
/** 4.4.1. Fix blockquote margin */
blockquote {
    margin-block-start: 0.4em;
    margin-block-end: 0.4em;
}

/** 4.4.2. Fix blockquote border */
body {
    --blockquote-border-thickness: 4px;
}

/** 4.4.3. Fix formatting quote > */
.cm-s-obsidian span.cm-formatting-quote {
    margin-left: 2px;
}

/** 4.5. Horizontal rules /*/
/** 4.5.1. Fix horizontal rule margin */
hr {
    margin: 1.5rem 0;
}

/** 4.5.2. Fix horizontal rule thickness */
body {
    --hr-thickness: 1px;
}

/** 4.6. Tables */
/** 4.6.1. Fix table element padding */
.markdown-rendered td, .markdown-rendered th {
    padding: var(--size-4-2);
}

.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper {
    padding: var(--size-4-2);
}

/** 4.7. Code blocks */
/** 4.7.1. Fix code block font size */
body {
    --code-size: --font-normal;
}

/** 4.7.2. Fix code block alignment and background */
.cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
    padding-top: 0.04em;
    padding-bottom: 0.04em;
    vertical-align: bottom;
}

.cm-s-obsidian .cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting) {
    padding: 0em;
    vertical-align: bottom;
}

.cm-s-obsidian .cm-inline-code:not(.cm-formatting) + .cm-inline-code.cm-formatting {
    padding: 0em;
    vertical-align: bottom;
}

.cm-s-obsidian .cm-inline-code.cm-formatting {
    padding: 0em;
    vertical-align: bottom;
}

.cm-highlight.cm-inline-code:not(.cm-formatting) {
    border-radius: 0px;
}

.cm-s-obsidian .cm-highlight.cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting) {
    vertical-align: bottom;
    padding-top: 0.04em;
    padding-bottom: 0.04em;
}

.cm-s-obsidian .cm-highlight.cm-inline-code:not(.cm-formatting) + .cm-inline-code.cm-formatting {
    vertical-align: bottom;
    border-radius: 0px;
    padding-top: 0.04em;
    padding-bottom: 0.04em;
}

.cm-s-obsidian .cm-highlight.cm-inline-code.cm-formatting {
    vertical-align: bottom;
    padding: 0.04em 0em;
    border-radius: 0px;
}

.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
    border-radius: 0px;
}

.markdown-rendered code {
    vertical-align: bottom;
}

/** 4.8. Lists */
/** 4.8.1. Fix list bullet radius */
body {
    --list-bullet-radius: 40%;
    --list-bullet-size: 0.4em;
    --indentation-guide-width: 2px;
}
