/* The terminal recordings (cast.js): the page's code colours, with ANSI colours readable on each. */

.cli-cast {
  margin: 1em 0;
}

.cli-cast__title {
  margin: 0 0 0.4em;
  font-size: 0.7rem;
  font-weight: 700;
}

.cli-cast .cli-cast-description {
  margin: 0 0 0.6em;
}

.cli-cast .ap-wrapper {
  justify-content: flex-start;
}

.cli-cast .ap-player {
  border-radius: 0.1rem;
}

/* A recording made for each colour scheme (cast.js), only the player for the page's scheme shown. */
.cli-cast__screen--dark,
[data-md-color-scheme="slate"] .cli-cast__screen--light {
  display: none;
}

[data-md-color-scheme="slate"] .cli-cast__screen--dark {
  display: block;
}

/* A mouse click in a recording (cast.js), a ring where it lands that fades out, with a label beside it. */
.cli-cast__screen {
  position: relative;
}

.cli-cast__click {
  position: absolute;
  width: 2.4em;
  height: 2.4em;
  margin: -1.2em 0 0 -1.2em;
  border: 0.2em solid var(--md-accent-fg-color);
  border-radius: 50%;
  pointer-events: none;
  animation: cli-cast-click 1.8s ease-out forwards;
}

.cli-cast__click kbd {
  position: absolute;
  left: 2.6em;
  top: 0.2em;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  background: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  font-family: var(--md-code-font-family), monospace;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes cli-cast-click {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  20% {
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Light, from GitHub's light terminal colours. */
.asciinema-player-theme-cli {
  --term-color-foreground: var(--md-code-fg-color);
  --term-color-background: var(--md-code-bg-color);
  --term-color-0: #24292f;
  --term-color-1: #cf222e;
  --term-color-2: #116329;
  --term-color-3: #8a5a00;
  --term-color-4: #0969da;
  --term-color-5: #8250df;
  --term-color-6: #1b7c83;
  --term-color-7: #6e7781;
  --term-color-8: #57606a;
  --term-color-9: #a40e26;
  --term-color-10: #1a7f37;
  --term-color-11: #633c01;
  --term-color-12: #218bff;
  --term-color-13: #a475f9;
  --term-color-14: #3192aa;
  --term-color-15: #8c959f;
}

/* Dark, from GitHub's dark terminal colours. */
[data-md-color-scheme="slate"] .asciinema-player-theme-cli {
  --term-color-0: #484f58;
  --term-color-1: #ff7b72;
  --term-color-2: #3fb950;
  --term-color-3: #d29922;
  --term-color-4: #58a6ff;
  --term-color-5: #bc8cff;
  --term-color-6: #39c5cf;
  --term-color-7: #b1bac4;
  --term-color-8: #6e7681;
  --term-color-9: #ffa198;
  --term-color-10: #56d364;
  --term-color-11: #e3b341;
  --term-color-12: #79c0ff;
  --term-color-13: #d2a8ff;
  --term-color-14: #56d4dd;
  --term-color-15: #ffffff;
}