styles.css

@tailwind utilities;

.docs-search > span {
  width: 100%;
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header span {
  display: inline-block;
}
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
  min-width: 300px;
  max-width: calc(100vw - 50px);
}

[data-reach-skip-link] {
  @apply sr-only;
}

[data-reach-skip-link]:focus {
  @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none focus:ring z-50;
}

code {
  @apply text-sm;
}

.prism-code.language-diff .inserted.prefix,
.prism-code.language-diff .deleted.prefix {
  user-select: none;
  @apply opacity-30;
}

.prism-code.language-diff .inserted.line {
  @apply text-green-600;
}
.prism-code.language-diff .deleted.line {
  @apply text-red-600;
}

/* Hack to make the TOC links look better by adjusting kerning */
article > main + div a.font-semibold {
  font-weight: 500;
  letter-spacing: -0.01rem;
}

.dark .invert-on-dark {
  filter: invert(1) brightness(1.8);
}

.dark .docs-container select {
  background: rgba(17, 17, 17, 1);
}