@import url('./fonts/lora/lora.css');
@import url('./fonts/roboto/roboto.css');
:root {
	/** Font Families **/
	--code-font: "Droid Sans Mono", "Ubuntu Mono", "Consolas", monospace;
	--serif-font: "Lora", monospace;
	--sans-font: "Roboto", -ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	/** Font Usage **/
	--font-ui: -ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-ui-monospace: var(--code-font);
	--font-editor: var(--sans-font);
	--font-size: 1.2rem;
	--line-height: 1.1em;
	--line-height-list: var(--line-height);

	/** ABSTRACT COLORS (used for both UI and Editor) **/
	--color-primary-bg-1: #ffffff;
	--color-primary-bg-2: #f3f3f3;
	--color-primary-bg-3: #dddddd;
	--color-primary-bg-4: #d0d0d0;
	--color-primary-bg-5: #bbbbbb;

	--font-color-ui-default: rgb(55,55,55);
	--font-color-ui-faint: #999;

	/** UI Colors **/
	--color-bg: var(--color-primary-bg-1);
	--color-bg-1: var(--color-primary-bg-2);
	/* e.g. sidebar */
	--color-bg-2: var(--color-primary-bg-3);
	/* e.g. code_blocks */
	--color-bg-3: var(--color-primary-bg-4);
	/* tabs */
	--ui-tab-active-bg: var(--color-primary-bg-2);
	--ui-tab-inactive-bg: var(--color-primary-bg-3);
	--ui-tab-inactive-hover-bg: var(--color-primary-bg-5);
	/* e.g. folder */
	--color-bg-textinput: #ccc;
	--color-textinput: var(--color-text);
	--color-bg-hover: #d0d0d0;
	/* e.g. used to indicate that an item can be clicked/selected */
	--color-bg-selected: white;
	/* e.g. used to indicate than an item is currently selected   */
	--color-bg-highlight: #a4c2f9;
	/* e.g. active file */
	--color-text: #101010;
	--color-text-faint: #666;
	--color-text-fainter: #aaa;
	--color-text-fuzzy-match: purple;
	--color-outline-emphasis: rgb(88, 172, 179);
	/** Semantic Colors: Background **/
	--color-bg-good: hsl(120, 100%, 89%);
	--color-bg-bad: hsl(0, 100%, 89%);
	--color-bg-error: hsl(0, 100%, 89%);
	--color-bg-warning: hsl(43 100%, 89%);
	--color-bg-neutral: hsl(207, 100%, 89%);
	--color-bg-question: hsl(300, 100%, 89%);
	/** Semantic Colors **/
	--color-good: green;
	--color-bad: darkred;
	--color-warning: goldenrod;
	--color-neutral: steelblue;
	--color-question: purple;
	--color-todo: purple;
	/** Editor Colors **/
	--color-link: steelblue;
	--color-wikilink: steelblue;
	--color-citation: seagreen;
	--color-definition: blue;
	--color-inline-delims: #d0d0d0;
	--color-heading-level: #e0e0e0;
	--color-math-src: purple;

	--editor-codeblock-bg: var(--color-primary-bg-2);
	--editor-codeblock-langLabel: var(--font-color-ui-faint);
}

.window-title {
	font-weight: bold;
}

body {
	font-family: var(--font-ui);
	height: 100vh;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* -- Scrollbar ----------------------------------------- */

div::-webkit-scrollbar {
	width: 6px;
	background-color: var(--color-bg);
}

div::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0);
}

div:hover::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
}

/* == USER INTERFACE ==================================== */

#main {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

#app {
	display: grid;
	grid-template-areas: "sidebar content" "sidebar panel" "sidebar footer";
	grid-template-rows: 2fr 1fr 1.5em;
	grid-template-columns: 200px 1fr;
	width: 100%;
	height: 100%;
}

/* (Ben @ 2023/04/01) this is a hack to allow the bottom panel to collapse, can we do better? */
/* probably need to make the panel a child of the "content" grid region */
#app.collapsePanel {
	grid-template-areas: "sidebar content" "sidebar panel" "sidebar footer";
	grid-template-rows: 1fr 1.5em 1.5em;
	grid-template-columns: 200px 1fr;
}

#footer {
	grid-area: footer;
	background-color: #e0e0e0;
	vertical-align: middle;
	overflow: hidden;
	line-height: 1.5em;
}

#title {
	display: inline-block;
	font-family: var(--code-font);
	padding-left: 0.5em;
	user-select: none;
	color: #606060;
	text-overflow: ellipsis;
	text-align: right;
	overflow: hidden;
}

#header {
	grid-area: header;
	background-color: rgb(175, 85, 85);
}

#content {
	position: relative;
	grid-area: content;
	padding: 0.5em 1.0em 0.5em 0.5em;
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: var(--color-bg);
	font-family: var(--font-editor);
}

#sidebar {
	grid-area: sidebar;
	background-color: var(--color-bg-1);
	overflow-x: hidden;
}

#app {
	color: var(--color-text);
}

/* ===== LOWER PANEL ==================================== */

#lower-panel {
  grid-area: "panel";
  position: relative;
  height: 100%;
  overflow-y: hidden;
  border-top: 3px solid var(--color-bg-3);
}

#lower-panel .tabs {
  display: flex;
  width: 100%;
  height: 1.5em;
  justify-content: space-between;
  user-select: none;
}

#lower-panel .tabs .tab {
  flex-grow: 1;
  text-align: center;
  line-height: 1.5em;
  background-color: var(--ui-tab-inactive-bg);
  color: var(--color-text-faint);
}

#lower-panel .tabs .active {
  background-color: var(--ui-tab-active-bg);
}

#lower-panel .tabs .tab:not(.active):hover {
  background-color: var(--ui-tab-inactive-hover-bg);
}

/* ==== SIDEBAR ========================================= */

/* -- Sidebar Tabs -------------------------------------- */

#sidebar {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	overflow-y: hidden;
}

#sidebar .content {
	flex-grow: 1;
	min-height: 0;
	max-height: 100%;
}

#sidebar .tabs {
	display: flex;
	width: 100%;
	height: 1.5em;
	justify-content: space-between;
	user-select: none;
}

#sidebar .tabs a {
	flex-grow: 1;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.2);
	color: var(--color-text-faint);
}

#sidebar .tabs .codicon {
	vertical-align: middle;
	line-height: 1.5em;
}

#sidebar .tabs .active {
	background: none;
}

#sidebar .tabs a:not(.active):hover {
	background-color: rgba(0, 0, 0, 0.1);
}

#sidebar .tab-contents {
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: overlay;
}

#sidebar .list-item {
	color: var(--color-text-faint);
	padding: 0.2em 0.7em;
	user-select: none;
	overflow-x: hidden;
	text-overflow: ellipsis;
	font-size: 0.9em;
	cursor: pointer;
}

#sidebar .list-item[data-depth="1"] { padding-left: 0.5em; font-weight: bold; }
#sidebar .list-item[data-depth="2"] { padding-left: 1.0em; }
#sidebar .list-item[data-depth="3"] { padding-left: 1.5em; font-style: italic; }
#sidebar .list-item[data-depth="4"] { padding-left: 2.0em; }
#sidebar .list-item[data-depth="5"] { padding-left: 2.5em; }
#sidebar .list-item[data-depth="6"] { padding-left: 3.0em; }
#sidebar .list-item[data-depth="7"] { padding-left: 3.5em; }

#sidebar .list-item:hover {
	background-color: var(--color-bg-hover);
	text-decoration: underline;
}

/* -- File Explorer ------------------------------------- */

.folder[data-collapsed=true]+.folder-contents {
	display: none;
}

.folder {
	color: var(--color-text-faint);
	background-color: var(--color-bg-3);
	padding: 0.1em 0.5em;
	user-select: none;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	font-size: 0.9em;
}

.folder .codicon, .file .codicon {
	margin-right: 0.2em;
}

.folder span, .file span {
	vertical-align: middle;
}

/* Files */

#sidebar .file {
	white-space: nowrap;
}

#sidebar .file:hover {
	text-decoration: none;
}

#sidebar .file.active, #sidebar .file.active:hover {
	color: var(--color-text);
	background-color: var(--color-bg-highlight);
}

/* -- TAB: Tag Search ----------------------------------- */

#tab_tags input {
	line-height: 2em;
	outline: none;
	border: none;
	border-bottom: 3px solid #999;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-bg-textinput);
	color: var(--color-textinput);
}

.search-result b {
	color: var(--color-text-fuzzy-match);
}

/* -- TAB: Calendar ------------------------------------- */

.calendar {
	padding: 0.2rem;
	background-color: #ccc;
	user-select: none;
	text-align: center;
	font-size: 0.8em;
}

.calendar .header {
	display: flex;
}

.calendar .prev::before {
	content: "<<";
	padding: 0 1em;
}

.calendar .next::before {
	content: ">>";
	padding: 0 1em;
}

.calendar .title {
	flex-grow: 1;
	font-weight: bold;
}

.calendar table {
	width: 100%;
}

.calendar td:hover {
	background-color: #aaa;
	border-radius: 0.2em;
}

.calendar td.g {
	color: #999;
}

/* == PROSEMIRROR ======================================= */

.ProseMirror {
	outline: none;
}

/* == PANELS ============================================ */

/* ------------------------------------------------------ */

.panel {
	overflow-x: hidden;
	user-select: none;
}

.panel-header {
	background-color: var(--color-bg-1);
	padding: 0.5em;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	direction: rtl;
	text-overflow: ellipsis;
}

.panel-content {
	overflow-y: scroll;
	overflow-x: hidden;
}

/* -------- */

.panel .file-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.panel .file {
	padding: 0.2em;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	cursor: pointer;
}

.panel .file:hover {
	background-color: var(--color-bg-1);
}

.panel .file-path {
	color: #ccc;
	font-family: var(--code-font);
	text-overflow: ellipsis;
}

/* == PROMPT ============================================ */

.ProseMirror-prompt {
	background: white;
	padding: 5px 10px 5px 15px;
	border: 1px solid silver;
	position: fixed;
	border-radius: 3px;
	z-index: 11;
	box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
}

.ProseMirror-prompt h5 {
	margin: 0;
	font-weight: normal;
	font-size: 100%;
	color: #444;
}

.ProseMirror-prompt input[type="text"], .ProseMirror-prompt textarea {
	background: #eee;
	border: none;
	outline: none;
}

.ProseMirror-prompt input[type="text"] {
	padding: 0 4px;
}

.ProseMirror-prompt-close {
	position: absolute;
	left: 2px;
	top: 1px;
	color: #666;
	border: none;
	background: transparent;
	padding: 0;
}

.ProseMirror-prompt-close:after {
	content: "✕";
	font-size: 12px;
}

.ProseMirror-invalid {
	background: #ffc;
	border: 1px solid #cc7;
	border-radius: 4px;
	padding: 5px 10px;
	position: absolute;
	min-width: 10em;
}

.ProseMirror-prompt-buttons {
	margin-top: 5px;
	display: none;
}
