/* Create a custom color scheme. */
[data-md-color-scheme='superhuman'] {
  /* Color pallette */
  --sh-mysteria-100: #f6f5ff;
  --sh-mysteria-200: #e6e4ff;
  --sh-mysteria-300: #d6d3fe;
  --sh-mysteria-400: #b5b0fc;
  --sh-mysteria-500: #857dfa;
  --sh-mysteria-600: #554dcb;
  --sh-mysteria-700: #1f1b5a;
  --sh-mysteria-800: #1f1b5a;

  --sh-heart-100: #fdf5ff;
  --sh-heart-200: #f7dbff;
  --sh-heart-300: #f5bcfd;
  --sh-heart-400: #ed6efa;
  --sh-heart-500: #dd41c3;
  --sh-heart-600: #a23182;
  --sh-heart-700: #68243e;
  --sh-heart-800: #421d24;

  --sh-cloud-100: #fcfaf7;
  --sh-cloud-200: #f7f5f2;
  --sh-cloud-300: #e8e5de;
  --sh-cloud-400: #b1aba0;
  --sh-cloud-500: #7b7668;
  --sh-cloud-600: #5d5850;
  --sh-cloud-700: #38352e;
  --sh-cloud-800: #1c1a16;

  /* Theme overrides. */
  --md-primary-fg-color: var(--sh-heart-800);
  --md-primary-bg-color: var(--sh-cloud-100);

  --md-accent-fg-color: var(--sh-heart-700);
  --md-accent-bg-color: var(--sh-cloud-100);

  --md-typeset-a-color: var(--sh-mysteria-600);

  --md-code-hl-color: var(--sh-mysteria-500);
  --md-code-hl-color--light: var(--sh-mysteria-200);

  --md-default-bg-color: var(--sh-cloud-100);

  --md-typeset-color: #000000;

  /* Button colors */
  --md-button-bg-color: var(--sh-cloud-100);
  --md-button-fg-color: var(--sh-mysteria-500);

  /* Custom variables. */
  --external-link-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M256 64c0-17.67 14.3-32 32-32h127.1c5.2 0 9.4.86 13.1 2.43 2.9 1.55 7.3 3.84 10.4 6.87 0 .05 0 .1.1.14 6.2 6.22 8.4 14.34 9.3 22.46V192c0 17.7-14.3 32-32 32s-32-14.3-32-32v-50.7L214.6 310.6c-12.5 12.5-32.7 12.5-45.2 0s-12.5-32.7 0-45.2L338.7 96H288c-17.7 0-32-14.33-32-32zM0 128c0-35.35 28.65-64 64-64h96c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H64v288h288v-96c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128z"/></svg>');
}

/* === Change Existing Styles == */

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-accent-fg-color);
}

/* Don't use link colors in the announcement banner, for readability. */
.md-announce a {
  color: inherit;
  text-decoration: underline;
}

/* Ensure <button> and <a> buttons have the same height. */
.md-button {
  line-height: 1.6em;
}

.md-banner a {
  color: var(--md-code-hl-color);
}

/* Size in-line image to be the same size as the text. */
img.inline-icon {
  height: 1em;
}

/* Add an icon next to external links in the nav. */
.md-sidebar a[href]:where(
  [href^="https://"],
):after {
  background-color: currentColor;
  mask-image: var(--external-link-image);
  -webkit-mask-image: var(--external-link-image);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  content: '';
}

/*
 * Work around search suggest results being too large.
 * See: https://github.com/squidfunk/mkdocs-material/issues/4278#issuecomment-1562597537
 */
.md-search-result .md-typeset {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 140px;
}

/* === New Classes == */

.screenshot {
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(0, 0, 0, var(--opacity-shadow-normal, 0.15));
}

li.yes,
li.no {
  padding-left: 0.5rem;
}

li.yes {
  list-style-type: '✅';
}

li.no {
  list-style-type: '❌';
}

div.yes pre code {
  background-color: #f1f9f1;
}

div.no pre code {
  background-color: #f9f1f1;
}

.landing-row {
  display: flex;
  gap: 5em;
}

.landing-row-reverse {
  flex-direction: row-reverse;
}

@media (max-width: 800px) {
  .landing-row {
    flex-direction: column-reverse;
    gap: 0;
  }
}

.landing-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tutorial-row {
  display: grid;
}

@media (min-width: 1000px) {
  .tutorial-row {
    gap: 2em;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.tutorial-row > * {
  overflow: auto;
}

.tutorial-row img.screenshot {
  box-shadow: none;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.box-row {
  display: grid;
  gap: 1em;
}

@media (min-width: 800px) {
  .box-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.box-item {
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  padding: 0 2em;
  display: flex;
  flex-direction: column;
}

.box-item p:first-of-type {
  flex: 1;
}

/* Hide the anchor link for headings in boxes. */
.box-item .headerlink {
  display: none;
}

/* Early Access Admonition */

:root {
  --md-admonition-icon--early-access: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0m3 5H3v2h6Z"/></svg>');
}
.md-typeset .admonition.early-access,
.md-typeset details.early-access {
  border-color: rgb(255, 204, 77);
}
.md-typeset .early-access > .admonition-title,
.md-typeset .early-access > summary {
  background-color: rgb(255, 204, 77, 0.1);
}
.md-typeset .early-access > .admonition-title::before,
.md-typeset .early-access > summary::before {
  background-color: rgb(255, 204, 77);
  -webkit-mask-image: var(--md-admonition-icon--early-access);
  mask-image: var(--md-admonition-icon--early-access);
}