/* Copyright 2022-2023 the Deno authors. All rights reserved. MIT license. */

:root {
  --white: #ffffff;
  --black: #0b0d11;
  --offblack: #121417;

  --runtime: #70ffaf;
  --runtime-dark: #172723;
  --runtime-secondary: #ebff01;
  --runtime-secondary-dark: #232711;

  --deploy: #01c2ff;
  --deploy-dark: #0c212a;

  --subhosting: #ff8a01;
  --subhosting-dark: #251c11;

  --gray-1: #868789;
  --gray-2: #56575a;
  --gray-3: #25272b;
  --gray-4: #191b1f;
  --gray-5: #14161a;

  --code-1: #01c2ff;
  --code-2: #00a341;
  --code-3: #ae01ff;
  --code-4: #ea8e04;
  --code-5: #ffd601;

  /**
		cv05: Adds tail to lowercase l
		cv08: Adds serifs to uppercase I
		cv10: Adds "leg" to uppercase G
		ss01: Alternate numeric style; nicer looking
		ss08: Stylized quotes/apostrophes/commas
	*/
  font-feature-settings: "cv05" on, "cv08" on, "cv10" on, "ss01" on, "ss08" on;
}

@property --border-gradient-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* Manual */

ol.nested {
  counter-reset: item;
}
ol.nested li {
  display: block;
}
ol.nested li a:before {
  font-feature-settings: "kern" 1, "tnum" 1;
  -webkit-font-feature-settings: "kern" 1, "tnum" 1;
  -ms-font-feature-settings: "kern" 1, "tnum" 1;
  -moz-font-feature-settings: "kern" 1, "tnum" 1;
  content: counters(item, ".") ". ";
  counter-increment: item;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

details[open].rotate-svg svg {
  transform: rotate(90deg);
}

/* Add Module */

#modulename:valid ~ span {
  display: none;
}

#subdirectory:invalid + span {
  display: block;
}

/* Module */

#hiddenItemsToggle:not(:checked) ~ table #hiddenItemsButton span:first-child {
  display: none;
}
#hiddenItemsToggle:checked ~ table #hiddenItemsButton span:last-child {
  display: none;
}

#hiddenItemsToggle:not(:checked) ~ table tr[name="hidden"] {
  display: none;
}

#hiddenItemsToggle:checked ~ table #hiddenItemsTr {
  border-bottom-width: 1px;
}

span:target {
  background-color: #fffbdd;
}

span[data-highlight] {
  background-color: #fffbdd;
}

/* Benchmark */

#normalizedToggle:not(:checked) + label > span:first-of-type {
  background-color: rgb(229 231 235);
}
#normalizedToggle:checked + label > span:first-of-type > span {
  transform: translateX(1.25rem);
}

#normalizedToggle:checked ~ div:first-of-type {
  display: none;
}
#normalizedToggle:not(:checked) ~ div:last-of-type {
  display: none;
}

/* removes focus outlines on mouse clicks */
*:focus:not(:focus-visible),
*::before:focus:not(:focus-visible),
*::after:focus:not(:focus-visible) {
  outline: none;
}

/* https://github.com/denoland/dotland/issues/1163 */
.language-toml > code > .token-line > .table {
  display: inline;
}

span.token.plain:empty:before {
  content: "\200b";
}

.prism-code {
  border-radius: 0.25rem;
  tab-size: 2;
  -moz-tab-size: 2;
}
.highlight-line {
  background-color: #fffbdd;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 12px;
}

ul.tree li {
  margin: 0;
  padding: 0 8px;
  line-height: 20px;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -4px;
  height: 12px;
  width: 12px;
  color: white;
  border-bottom: 1px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -4px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

.markdown-body img {
  display: inline;
}

.markdown-body ol {
  list-style: decimal;
}

.markdown-body ul {
  list-style: disc;
}

/* Colors in the arrow on dropdown menus */
header label + div:has(ul li:first-child:where(:hover, :focus-within)) > div {
  background-color: rgba(210, 221, 226, var(--tw-bg-opacity));
}

.dark
  header
  label
  + div:has(ul li:first-child:where(:hover, :focus-within))
  > div {
  background-color: rgba(39, 39, 42, var(--tw-bg-opacity));
}

/* Typography */
body {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl {
  letter-spacing: -0.025em;
}

.dark {
  background: black;
}

/* Coming to a future version of Tailwind */
.text-balance {
  text-wrap: balance;
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus,
:focus-visible {
  outline: 2px solid var(--code-3);
  outline-offset: 2px;
}

/* Missing in Tailwind 2.x */
.bg-inherit {
  background: inherit;
}

header nav a {
  position: relative;
}

[data-component="main-nav"]
  [data-current="true"]:not([data-component="header-logo"]),
[data-component="main-nav"] [data-current="true"] + div [aria-current="page"],
[data-component="subnav"] [aria-current="page"] {
  font-weight: 700;
}

[data-component="subnav"] [aria-current="page"]::after {
  content: "";
  width: 0.8rem;
  height: 0.4rem;
  background-color: var(--header-accent);
  position: absolute;
  left: calc(50% - 0.4rem);
  top: -1rem;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

header nav ul li a {
  --delay-increment: 0.045s;
  opacity: 0;
  animation: fade_in 0.25s linear forwards,
    slide_in_up 0.25s cubic-bezier(0, 0.37, 0.17, 1) forwards; /* Can't do this animation in Tailwind because 2.x has a bug with multiple animations on the same element (╯°□°）╯︵ ┻━┻ */
}