/*
   * Hopefully when scrollbar-color lands everywhere,
   * (and not just in FF), we'll be able to keep just this.
   */
  html .no-bg-scrollbar {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  html.dark .no-bg-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
  /*
   * Until then, we have ... this.
   * If you're changing this, make sure you've tested:
   * - Different browsers (Chrome, Safari, FF)
   * - Dark and light modes
   * - System scrollbar settings ("always on" vs "when scrolling")
   * - Switching between modes should never jump width
   * - When you interact with a sidebar, it should always be visible
   * - For each combination, test overflowing and non-overflowing sidebar
   * I've spent hours picking these so I expect no less diligence from you.
   */
  html .no-bg-scrollbar::-webkit-scrollbar,
  html .no-bg-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }
  html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: 4px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
  }
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }
  html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.35) !important;
  }

.code-step * {
  color: inherit !important;
}

.code-step code {
  background: none !important;
  padding: 2px !important;
}
html.dark .code-step * {
  color: inherit !important;
}

.mdx-heading {
  scroll-margin-top: 3.5em;
  /* Space for the anchor */
  padding-right: 1em;
}

@media (min-width: 1024px) {
  .mdx-heading {
    scroll-margin-top: 1em;
  }
}

.mdx-heading:before {
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
  content: '';
}
.mdx-heading .mdx-header-anchor {
  /* Prevent the anchor from
     overflowing to its own line */
  height: 0px;
  width: 0px;
}
.mdx-heading .mdx-header-anchor svg {
  display: inline;
}
.mdx-heading .mdx-header-anchor svg {
  visibility: hidden;
}
.mdx-heading:hover .mdx-header-anchor svg {
  visibility: visible;
}
.mdx-heading .mdx-header-anchor:focus svg {
  visibility: visible;
}

.mdx-blockquote > span > p:first-of-type {
  margin-bottom: 0;
}
.mdx-blockquote > span > p:last-of-type {
  margin-bottom: 1rem;
}
.mdx-illustration-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  gap: 42px;
}
ol.mdx-illustration-block {
  gap: 60px;
}
.mdx-illustration-block li {
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  justify-content: space-around;
  position: relative;
  padding: 1rem;
}
.mdx-illustration-block figure {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

  justify-content: space-between;
  position: relative;
  height: 100%;
}
.mdx-illustration-block li:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 60px;
  height: 49px;
  background: center / contain no-repeat url('/images/g_arrow.png');
}
.mdx-illustration-block li:first-child:after {
  content: ' ';
  display: none;
}
.mdx-illustration-block img {
  max-height: 250px;
  width: 100%;
}
@media (max-width: 680px) {
  .mdx-illustration-block {
    flex-direction: column;
  }
  .mdx-illustration-block img {
    max-height: 200px;
    width: auto;
  }
  .mdx-illustration-block li:after {
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-100%) rotate(90deg);
  }
}
