:root {
  --sidebar: 200px;
  --padding: 16px;
  --borders: 3px;
}

html, body, main {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
}

main {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* prevents constant title hovering */
.heading {
  width: fit-content;
}

.view {
  width: calc(100% - var(--padding) * 2);
}

/* --- tree --- */

.tree {
  min-height: 100%;
  overflow-y: scroll;
  list-style-type: none;
  padding: 0 var(--padding);
  margin: 0;
}

.toc.tree {
  border-right: var(--borders) solid #ddd;
  width: var(--sidebar);
}

.toc .subtree {
  padding-inline-start: 1em;
}

.view .subtree {
  padding-inline-start: 0em;
  max-width: 100%;
}

/* for all subtrees within module */
.view .subtree > .subtree > .subtree {
  border-left: var(--borders) solid #ddd;
  margin-left: .85em;
  padding-left: .5em;
}

.view .heading {
  margin-top: 14px !important;
}

.tree li {
  list-style-type: none;
  margin: 8px 0;
  white-space: nowrap;
}

.tree li a {
  text-decoration: none;
  color: black;
}

.tree li.header {
  position: sticky;
  top: 0;
  width: calc(var(--sidebar) + var(--padding) * 2);
  background-color: white;
  margin: 0;
  margin-left: calc(-1 * var(--padding));
}

button#tocToggle {
  display: none;
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 32px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: none;
  background-color: #ddd;
  cursor: pointer;
}

/* --- logo --- */

.tree li.header .brand {
  display: flex;
  padding: var(--padding) 0;
  align-items: center;
  justify-content: center;
}

.tree li.header .brand span {
  font-weight: 500;
  font-size: 18px;
}

.tree li.header .brand img {
  display: block;
  width: 36px;
  height: 36px;
}

.tree li.header input.search {
  display: block;
  padding: 8px;
  border-radius: 10px;
  width: var(--sidebar);
  margin: 0 auto;
}

/* --- markdown --- */

.markdownWrap {
  max-width: 100%;
  border-left: var(--borders) solid #ddd;
  margin-left: .85em;
  padding-left: .85em;
}

.markdownWrap p {
  margin: 0;
}

.signature {
  color: #424242;
}

/* --- jumpTo popup box --- */

.popup {
	position: absolute;
	display: block;
	background-color: white;
	padding: 8px;
	max-width: 300px;
  border: var(--borders) solid #ddd;
  border-radius: 10px;
}

.popup ul {
  padding-left: 12px;
  margin: 0;
}

/* --- responsiveness --- */

@media only screen and (max-width: 600px) {
  :root {
    --sidebar: calc(100% - var(--padding));
  }

  .toc {
    display: none;
  }
  .toc, .toc.tree {
    width: calc(100vw - var(--padding));
  }
  button#tocToggle {
    display: block;
  }
}

@media only screen and (min-width: 600px) {
  /* in the case of growing windows with explicitely hidden toc */
  .toc {
    display: unset !important;
  }
}

/* --- definition token types --- */

.heading::before {
  border-radius: 100%;
  width: 1em;
  height: 1em;
  font-size: .8em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 .5em;
  padding: .2em;
}

.highlight {
  background-color: #e6e6e6;
  cursor: pointer;
}

.view .Module {
  font-size: 2em;
}
.toc .Module[data-prelude=false]::before {
  content: "M";
  color: white;
  background-color: #542e5a;
}
.toc .Module[data-prelude=true]::before {
  content: "P";
  color: white;
  background-color: #356c00;
}
.view .Module::before {
  content: "Module: ";
  border-radius: unset;
  display: unset;
  width: unset;
  font-size: unset;
  margin: 0;
  padding: 0;
  background-color: white;
}

.DataDef::before {
  content: "D";
  color: white;
  background-color: #36bc98;
}
.Constructor::before {
  content: "C";
  color: white;
  background-color: #36bc98;
}

.InterfaceDef::before {
  content: "I";
  color: white;
  background-color: #36bc98;
}
.Operation::before {
  content: "O";
  color: white;
  background-color: #36bc98;
}

.RecordDef::before {
  background-color: #36bc98;
  color: white;
  content: "R";
}

.ValDef::before {
  content: "V";
  color: white;
  background-color: #f77d11;
}

.FunDef::before {
  content: "F";
  color: white;
  background-color: #d73a49;
}

.NamespaceDef::before {
  content: "N";
  color: white;
  background-color: green;
}

.TypeDef::before {
  content: "T";
  color: white;
  background-color: #0087c8;
}

.ExternDef::before {
  content: "E";
  color: white;
  background-color: #394A4B;
}

.ExternType::before {
  content: "E";
  color: white;
  background-color: #394A4B;
}