/* Custom colors */
/* ------------- */
.theme-light {
  --bg-color: 255, 255, 255;
  --text-color: 10, 10, 10;
  --interactive-accent-rgb: 163, 183, 205;
  --interactive-accent: #a3b7cd;
}
.theme-dark {
  --bg-color: 0, 0, 0;
  --text-color: 240, 240, 240;
  --interactive-accent-rgb: 163, 183, 205;
  --interactive-accent: #a3b7cd;
}
:root {
  --interactive-accent-hover: rgba(var(--interactive-accent-rgb), 0.5);
  --txt-clr: rgb(var(--text-color));
}

/* Fonts and text (thanks to @kepano for this minimal alteration of the defaults */
/* ----------------------------------------------------------------------------- */
:root {
  --default-font: "Libre Franklin", sans-serif;
  --editor-font: 'SF Mono', monospace, sans-serif;
  --font-normal:13px;
  --font-small:11px;
  --font-smaller:10px;

  --normal-weight:400;  /* Switch to 300 if you want thinner default text */
  --bold-weight:500;    /* Switch to 600 or 700 if you want thicker bold text */
}

::selection, .CodeMirror-selected, .CodeMirror-selectedtext {
/*  background: blue, pink, var(--text-normal) !important;*/
/*  color: var(--background-primary) !important;*/
}

h1,h2,h3,h4,h5,strong {font-weight:var(--bold-weight);}
h1,h2,h3,h4 {letter-spacing:-0.02em;} 

/* I don't want a titlebar */
.titlebar { display: none; }
body { padding-top: 0 !important; }

body, input, button, .cm-s-obsidian .cm-formatting-hashtag, .cm-s-obsidian {
/*  letter-spacing:0.02rem;*/
/*  font-family:var(--editor-font);*/
  font-size:var(--font-normal);
  font-weight:var(--normal-weight);
  -webkit-font-smoothing:subpixel-antialiased !important;
}
.cm-s-obsidian .cm-header, .cm-s-obsidian .cm-strong {
  font-weight:var(--bold-weight);
}
.cm-formatting-header {
  color:var(--text-faint) !important;
  font-weight:var(--normal-weight) !important;
}
.file-embed-title,
.markdown-embed-title {
  letter-spacing:-0.02em;
  text-align:left;
  font-size:20px;
  font-weight:var(--bold-weight);
}
.empty-state-title,
.markdown-preview-view h1,
.HyperMD-header-1,
.cm-header-1 {
  letter-spacing:-0.02em;
  font-size:28px !important;
  font-weight:var(--bold-weight) !important;
}
.markdown-preview-view h2,
.HyperMD-header-2,
.cm-header-2 {
  letter-spacing:-0.02em;
  font-size:calc(var(--font-normal)*1.3) !important;
  font-weight:var(--bold-weight) !important;
}
.markdown-preview-view h3,
.HyperMD-header-3,
.cm-header-3 {
  letter-spacing:0.1em;
  font-weight:var(--bold-weight) !important;
  font-size:calc(var(--font-normal)*1.1) !important;
    text-transform: uppercase
}
.markdown-preview-view h4,
.HyperMD-header-4,
.cm-header-4 {
/*
  font-variant:small-caps;
  text-transform:lowercase;
*/
    text-transform: uppercase;
  letter-spacing:0.05em;
  color:var(--text-normal);
  font-weight:var(--normal-weight) !important;
  font-size:calc(var(--font-normal)*1) !important;
}
.markdown-preview-view h5,
.HyperMD-header-5,
.cm-header-5 {
  font-variant:small-caps;
  text-transform:lowercase;
  letter-spacing:0.05em;
  color:var(--text-normal);
  font-weight:300 !important;
  font-size:16px !important;
}
.markdown-preview-view h6,
.HyperMD-header-6,
.cm-header-6 {
  font-variant:small-caps;
  text-transform:lowercase;
  letter-spacing:0.1em;
  color:var(--text-muted);
  font-weight:300 !important;
  font-size:14px !important;
}

/* set editor font */
.cm-s-obsidian {
    font-family: var(--editor-font);
}

/*Change view header weight */
.view-header-title {font-weight: var(--normal-weight)}

/* Yellow highlight for strong? Let's play*/
.cm-strong {
    font-weight: var(--normal-weight) !important;
    background-color: rgba(255,255,0,0.8)
        
} 


/* Checkboxes */ 
.markdown-preview-view .task-list-item-checkbox, input[type=checkbox] {
  -webkit-appearance:none;
  appearance:none;
/*  border-radius:50%;*/
  border:1px solid var(--text-normal);
  padding:0;
    height:.9em;
    width: .9em;
    top: 0.3em;
}

input[type=checkbox]:focus,input[type=checkbox]:hover {
  outline:0;
  border-color:var(--text-faint);
}

input[type=checkbox]:checked {
  background-color:var(--background-modifier-accent);
  border:1px solid var(--text-normal);
  background-position:center;
  background-size:70%;
  background-repeat:no-repeat;
/*  background-image:url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');*/
}

input[type=checkbox]:checked:after {
	content: '\2713';
	font-size: var(--font-normal);
	position: absolute;
	top: -4px;
	left: 0px;
	color: var(--text-normal);
}

/* Other variables */
/* --------------- */
:root {
  --transition-length: 200ms;
}


/* Styling of content */
/* ------------------ */
html, body {
  overflow-x: hidden;
}

/* Collapsing sidedocks */
.side-dock-ribbon.mod-left.is-collapsed:not(:hover), .side-dock-ribbon.mod-right.is-collapsed:not(:hover) {
  width: 15px !important;
  opacity: 0;
}
.side-dock-ribbon {
  transition-property: width, opacity;
}

/* Fading header icons (MINIMAL EVERYTHING!!!) */
.view-header:not(:hover) .view-actions, .view-header:not(:hover) .view-header-icon {
  opacity: 0;
  transition: opacity var(--transition-length) ease-in-out;
}

/* No borders on sidebar */
.side-dock-ribbon.mod-right, .side-dock-ribbon.mod-left {
  border: 0px;
}

/* Clean header */
.view-header-title-container:after {
  display: none;
}

/* Cleaner status bar */
.status-bar {
  background-color: var(--background-primary);
  color: var(--text-faint);
}

/* Link styling */
a.external-link, a.internal-link {
  position: relative;
  color: rgb(var(--text-color));
  text-decoration-color: rgba(var(--text-color), 0.5);
  transition: text-decoration-color var(--transition-length);
}
a.external-link:hover, a.internal-link:hover {
  text-decoration-color: rgba(var(--text-color), 0.0);
}

/*my addition to external links: remove the background image*/
a.external-link {
    background-image: none;
}
a.external-link {content:"°"}

.cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link {
  color: rgba(var(--text-color), 0.7);
}

/* Remove border from status bar */
.status-bar {
  border: none !important;
}

/* Fainter icons, bringing focus to the text area */
.view-action, .view-header-icon, .side-dock-ribbon-action,
.nav-action-button, .workspace-tab-header-inner-icon {
  color: var(--text-faint);
  transition: color var(--transition-length) ease-in;
}

/* Same hovering accent color on every icon */
.side-dock-ribbon-action:hover, .workspace-tab-header:hover .workspace-tab-header-inner-icon,
.workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.workspace-ribbon-collapse-btn:hover, .view-header-icon:hover {
  color: var(--text-accent);
}

/* Side-bars do not have margins that restrict the content */
.workspace-split.mod-right-split[style="width: 0px;"],
.workspace-split.mod-left-split[style="width: 0px;"] {
  margin: 0;
}

/* No overflow scrollbar in x-direction */
.nav-files-container {
  overflow-x: hidden;
}

/* Transparent ribbons (works better with the auto-hiding) */
.workspace-ribbon.is-collapsed {
  background: transparent;
}

/* I want things squared */
/*
.prompt, input, .modal, button, .dropdown, .list-item-ending-flair,
.checkbox-container, .checkbox-container::after,
.side-dock-collapsible-section-header, .search-result-file-match,
.workspace-tab-header.is-active {
  border-radius: 0px !important;
}
*/


/* Markdown syntax highlighting */
/* ---------------------------- */
/* Headers */
.cm-formatting-header {
  color: var(--text-faint) !important;
  font-weight: 400 !important;
}
.HyperMD-header-1 {
  font-size: 18pt !important;
}
.HyperMD-header-2 {
  font-size: 16pt !important;
}
.HyperMD-header-3 {
  font-size: 14pt !important;
}
/* Lists */
.cm-formatting-list {
  color: var(--text-faint) !important;
}
/* Quote */
.cm-formatting-quote {
  color: var(--text-faint) !important;
}
/* Tags (pill style, borrowed from kepano/obsidian-minimal) */
.tag {
  background-color:var(--background-modifier-accent);
  border:none;
  color:var(--text-muted);
  padding:1px 7px;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  margin:4px 0px 0px;
  cursor:pointer;
  border-radius:10px;
}
.tag:hover {
  color:var(--text-muted);
  background-color:var(--background-modifier-border);
}
.cm-s-obsidian span.cm-hashtag {
  background-color:var(--background-modifier-accent);
  border:none;
  color:var(--text-muted);
  text-align:center;
  text-decoration:none;
  display:inline-block;
  margin:0;
  vertical-align:middle;
  padding-top:1px;
  padding-bottom:1px;
  cursor:text;
}
.cm-hashtag-begin {
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  padding-left:7px;
}
.cm-hashtag-end {
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  padding-right:7px;
}
span.cm-math {
  font-style: normal;
}
.CodeMirror .cm-inline-code, .CodeMirror .cm-math {
  color: var(--text-muted);
}
.cm-s-obsidian span.cm-formatting-math {
  color: var(--text-muted);
}


/* Markdown preview styling */
/* Blockquotes */
.markdown-preview-view blockquote {
  border-radius: 4px;
  border: solid var(--quote-opening-modifier);
  border-width: 0px 0px 0px 7px;
  background-color: var(--background-modifier-accent);
}


/* Obsidians internal color variables */
.theme-light, .theme-dark {
  --background-primary: rgb(var(--bg-color));
  --text-normal: rgb(var(--text-color));
  --text-muted: rgba(var(--text-color), 0.7);
  --text-faint: rgba(var(--text-color), 0.3);
}