/* HTMX */
.htmx-indicator {
  @apply invisible opacity-0 transition-discrete transition-all;
}
.htmx-indicator:not(.htmx-request) {
  @apply hidden;
}
.htmx-request,
.htmx-request.htmx-indicator {
  @apply visible opacity-100;
}

.content {
  > h2 {
    @apply mt-12 lg:mt-20 mb-6 scroll-m-22 text-2xl font-semibold tracking-tight first:mt-0;
  }
  > h3 {
    @apply mt-8 mb-6 scroll-m-22 text-xl font-semibold tracking-tight;
  }
  > h4 {
    @apply my-6 scroll-m-22 font-semibold tracking-tight;
  }
  .prose {
    @apply my-6;

    a {
      @apply font-medium underline underline-offset-4;
    }
    code:not(pre > code) {
      @apply relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
    }
    blockquote {
      @apply border-l-4 border-border pl-4;
    }
    ol {
      @apply list-decimal ml-6;
    }
    ul {
      @apply list-disc ml-6;
    }
    ol,
    ul {
      li {
        @apply mt-2;
      }
    }
    dl {
      @apply border-b pb-3 my-6;
      dt {
        @apply border-t pt-3 mt-3 first:mt-0;
      }
      dd {
        @apply mt-2;
      }
      dl {
        @apply mt-4 border-b-0 pb-0 pl-8 my-0;
      }
    }
    b,
    strong {
      @apply font-semibold;
    }
    > p,
    > blockquote,
    > ul,
    > ol,
    > dl,
    > table,
    > pre,
    > p {
      @apply my-6;
    }
    > *:first-child {
      @apply !mt-0;
    }
    > *:last-child {
      @apply !mb-0;
    }
  }
  .step {
    counter-increment: step;

    &:before {
      @apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
      @apply md:ml-[-50px] md:mt-[-4px];
      content: counter(step);
    }
    > h3 {
      @apply max-md:ml-10 min-h-8 flex items-center;
    }
  }
}