/**
 * This isn't customizable, so let's hide it
 */
h2#examples {
  display: none;
}

.prose.markdown {
  --tw-prose-headings: var(--text-and-icons);
  --tw-prose-body: var(--text-and-icons);
  --tw-prose-links: var(--text-primary-idle);
  --tw-prose-code: var(--text-body-and-labels);
  --tw-prose-bold: var(--text-body-and-labels);
}

.prose .docfy-demo__example button:where(button:not(:where([class~="reset-styles"]))) {
  @apply focusable interactive-normal duration-150 ease-out inline-flex items-center justify-center px-2 py-1 rounded-sm transition type-md-medium;
}
.prose .docfy-demo__example button:disabled:where(button:not(:where([class~="reset-styles"]))) {
  @apply interactive-disabled;
}

.prose :where(code):not(:where([class~='not-prose'] *)) {
  background-color: var(--basement);
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  border-radius: 0.25rem;
}

.prose :where(code):not(:where([class~='not-prose'] *))::before {
  content: '';
}

.prose :where(code):not(:where([class~='not-prose'] *))::after {
  content: '';
}

.docfy-demo__snippet {
  max-height: 30rem;
  overflow-y: scroll;
  @apply rounded;
}

.theme-dark .markdown pre {
  @apply border;
}

.docfy-demo {
  @apply isolate flex flex-col gap-4 rounded-sm;
}

.docfy-collection .docfy-demo {
  @apply grid-rows-docfy-container grid h-full shadow-none;
}

.docfy-collection .docfy-demo__snippet {
  overflow-x: auto;
}


.docfy-collection .docfy-demo__example {
  @apply grid justify-items-center;
}

.docfy-demo code {
  @apply shadow-inner-lg rounded-sm px-4 py-2;
}

.docfy-demo__description__header {
  @apply text-right;
}

.docfy-demo__snippets {
  @apply overflow-x-auto;
}

.docfy-demo__snippets__tabs {
  @apply pl-2;
}

.docfy-demo__snippets__tabs__button {
  @apply type-md text-body-and-labels ring-offset-focus ring-ground-floor relative
    px-6 py-2 ring-inset ring-offset-2;
}

.docfy-demo__snippets__tabs__button:hover {
  @apply outline-none text-positive;
}

.docfy-demo__snippets__tabs__button:focus-visible {
  @apply ring-2;
}
.docfy-demo__snippets__tabs__button:focus {
  @apply text-blue outline-none;
}

.docfy-demo__snippets__tabs__button--active {
  @apply type-md-medium text-text-and-icons;
}
.docfy-demo__snippets__tabs__button--active::after {
  @apply bg-blue z-1 absolute bottom-0 left-0 right-0 rounded-t-sm;
  content: ' ';
  height: 3px;
}