/* Copyright 2022-2023 the Deno authors. All rights reserved. MIT license. */
/* This is just a test comment */
:root {
  --white: #ffffff;
  --black: #0b0d11;
  --offblack: #121417;
  --true-black: #000000;
  --white-veil: #ffffff03;
  --black-veil: #00000003;

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

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

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

  --gray-0: #9ea0a5;
  --gray-1: #868789;
  --gray-2: #56575a;
  --gray-3: #25272b;
  --gray-4: #191b1f;
  --gray-5: #14161a;
  --gray-6: #0d0e12;

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

  /*
		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;
}

[language="bash"] pre .token {
  color: var(--gray-0) !important;
}

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-block;
  max-width: 100%;
  height: auto;
}

.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: var(--gray-5);
}

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

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

.dark {
  background: var(--black);
  color: var(--white);
}

/* Coming to a future version of Tailwind */
.text-balance {
  text-wrap: balance;
}
/* Can remove these once we're on Tailwind proper */
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.aspect-auto {
  aspect-ratio: auto;
}
@media (min-width: 1024px) {
  .lg\:aspect-auto {
    aspect-ratio: auto;
  }
}

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

:where(button:focus, :focus-visible):not(.outline-none) {
  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 (╯°□°）╯︵ ┻━┻ */
}

.animation-delay-100 {
  animation-delay: 0.1s;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-300 {
  animation-delay: 0.3s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
.animation-delay-500 {
  animation-delay: 0.5s;
}
.animation-delay-600 {
  animation-delay: 0.6s;
}
.animation-delay-700 {
  animation-delay: 0.7s;
}
.animation-delay-800 {
  animation-delay: 0.8s;
}
.animation-delay-900 {
  animation-delay: 0.9s;
}
.animation-delay-1000 {
  animation-delay: 1s;
}

[data-component="heading-group"].animate-in > * {
  opacity: 0;
  animation: fadeInSlideUp 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
  animation-play-state: paused;
}

[data-component="heading-group"].animate-in > :nth-child(2) {
  animation-delay: 0.08s;
}
[data-component="heading-group"].animate-in > :nth-child(3) {
  animation-delay: 0.16s;
}
[data-component="heading-group"].animate-in > :nth-child(4) {
  animation-delay: 0.24s;
}

[data-component="heading-group"].animate-in.playing > * {
  animation-play-state: running;
}

@media (prefers-reduced-motion) {
  .override-duration-if-prefers-reduced-motion {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  .pause-animation-if-prefers-reduced-motion {
    animation-play-state: paused !important;
  }
}

/* swap-on-mobile class from SideBySide component */
.swap-on-mobile > :first-child {
  order: 2;
}

.swap-on-mobile > :last-child {
  order: 1;
}

@media screen and (min-width: 768px) {
  .swap-on-mobile > :first-child {
    order: 1;
  }

  .swap-on-mobile > :last-child {
    order: 2;
  }
}