@tailwind base;
@layer base {
  /* Disable tap highlight color */
  html {
    -webkit-tap-highlight-color: transparent;
  }

  /* Reset appearance */
  [type='date'] {
    @apply flex appearance-none items-center justify-start;
  }
  [type='search']::-webkit-search-cancel-button {
    @apply hidden;
  }

  /* Disable transitions */
  .disable-transitions,
  .disable-transitions * {
    transition: none !important;
  }

  /* Focus ring */
  .focus-ring {
    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-600/50 focus-visible:ring-4 focus-visible:ring-sky-600/10 focus-visible:ring-offset-[3px] focus-visible:ring-offset-white dark:focus-visible:outline-sky-400/50 dark:focus-visible:ring-sky-400/10 dark:focus-visible:ring-offset-gray-900;
  }

  /* Typography */
  article :is(h1, h2, h3, h4) {
    @apply scroll-mt-24 font-medium leading-normal text-slate-900 dark:text-slate-200 md:scroll-mt-32 md:leading-normal lg:scroll-mt-48 lg:leading-normal;
  }
  article h1 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }
  article h2 {
    @apply border-b-2 border-b-slate-200 pb-4 text-xl dark:border-b-slate-800 md:pb-6 md:text-2xl lg:pb-8 lg:text-3xl;
  }
  article h3 {
    @apply text-lg md:text-xl lg:text-2xl;
  }
  article h4 {
    @apply md:text-lg lg:text-xl;
  }
  article :is(p, blockquote, ul, ol) {
    @apply leading-loose md:text-lg md:leading-loose lg:text-xl lg:leading-loose;
  }

  /* Blockquote */
  article blockquote p {
    @apply border-l-4 border-l-yellow-600 pl-6 dark:border-l-yellow-400 lg:pl-8;
  }

  /* Links */
  article a {
    @apply focus-ring rounded-md text-sky-600 underline decoration-slate-400 decoration-dashed underline-offset-[3px] focus-visible:outline-offset-4 focus-visible:ring-offset-[6px] dark:text-sky-400 dark:decoration-slate-600;
  }

  /* Lists */
  article :is(ul, ol) {
    @apply space-y-2;
  }
  article :is(ul, ol) :is(ul, ol) {
    @apply pl-4 pt-2 lg:pl-5;
  }
  article ul {
    @apply list-disc;
  }
  article ol {
    @apply list-decimal;
  }
  article :is(ul, ol) li {
    @apply pl-2.5;
  }

  /* Code */
  article pre {
    @apply overflow-x-auto rounded-2xl border-2 border-slate-200 p-5 leading-relaxed text-slate-700 dark:border-slate-800 dark:text-slate-300 md:text-lg md:leading-relaxed lg:rounded-3xl lg:border-[3px] lg:p-10 lg:text-xl lg:leading-relaxed;
  }
  article :not(pre) > code {
    @apply rounded-lg bg-slate-100 px-2 py-1 text-slate-700 dark:bg-gray-800 dark:text-slate-300;
  }
  article p > code {
    @apply whitespace-nowrap;
  }

  /* Horizontal spacing */
  :is(article, div.framework) > :is(h1, h2, h3, h4, p, blockquote) {
    @apply mx-8 lg:mx-10;
  }
  :is(article, div.framework) > :is(ul, ol) {
    @apply ml-12 mr-8 lg:ml-14 lg:mr-10;
  }
  :is(article, div.framework) > pre {
    @apply mx-3 lg:mx-10 2xl:mx-0;
  }

  /* Vertical spacing */
  :is(article, div.framework) > :is(h1, h2, h3, h4, p) + p {
    @apply mt-7 md:mt-9 lg:mt-11;
  }
  :is(article, div.framework) > * + * {
    @apply mt-10 md:mt-12 lg:mt-14;
  }
  :is(article, div.framework) > * + h2 {
    @apply mt-12 md:mt-14 lg:mt-16;
  }
}
