@import url('./tailwind.css');
@import url('./twoslash-shiki.css');
@import url('./hljs-github-dark.css');
@import url('./markdown.css');

@layer base {
  @font-face {
    font-family: 'Virgil';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('/fonts/virgil.woff2') format('woff2');
  }

  .scroll-padding {
    scroll-padding-top: 150px;
  }

  body {
    @apply h-full bg-white text-slate-500 antialiased dark:bg-gray-950 dark:text-slate-400;
  }

  svg {
    @apply max-w-full;
  }

  .svg-h-full svg {
    @apply h-full;
  }

  svg path {
    fill: currentColor;
  }

  code {
    @apply rounded bg-gray-200 py-0.5 px-1 text-sm dark:bg-gray-800;
  }

  .prose code.hljs {
    @apply bg-transparent;
  }

  .prose a code {
    @apply dark:text-violet-400 !important;
  }

  .prose pre {
    @apply rounded-lg border border-transparent dark:border-gray-900 dark:bg-black;
  }

  @media (min-width: 1024px) {
    .docs.prose pre {
      max-width: calc(100vw - 520px);
    }
    .blog.prose pre {
      max-width: calc(100vw - 352px);
    }
  }

  @media (min-width: 1280px) {
    .blog.prose pre {
      max-width: calc(100vw - 672px);
    }
  }

  @media (min-width: 1440px) {
    .docs.prose pre {
      max-width: calc(100vw - 840px);
    }
  }

  @media (min-width: 1536px) {
    .docs.prose pre {
      max-width: 707px;
    }
    .blog.prose pre {
      max-width: 832px;
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-560px * 4));
    }
  }

  .animate-scroll {
    animation: scroll 50s linear infinite;
  }

  .animate-scroll:hover {
    animation-play-state: paused;
  }

  reach-portal {
    position: absolute;
    z-index: 100;
  }

  .options-table .option-title h2,
  .options-table .option-title h3,
  .options-table .option-title h4 {
    @apply text-slate-900 dark:text-white;
  }

  .options-table .option-title p {
    @apply text-sm text-slate-500 dark:text-slate-400;
  }

  .hyphens {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  html.dark {
    color-scheme: dark;
  }
}
