@reference "../../styles/index.css";

.overlay {
  @apply fixed
    inset-0
    flex
    justify-center
    bg-white/40
    backdrop-blur-[2px]
    dark:bg-neutral-950/40;

  .content {
    @apply ml:p-6
      relative
      m-4
      inline-flex
      w-full
      max-w-3xl
      flex-col
      gap-2
      overflow-y-auto
      rounded
      border
      border-neutral-200
      bg-white
      p-4
      focus:outline-none
      sm:my-20
      md:p-6
      lg:p-8
      xl:p-12
      dark:border-neutral-800
      dark:bg-neutral-950;
  }

  .close {
    @apply absolute
      top-3
      right-3
      block
      size-7
      cursor-pointer
      rounded-sm
      p-1
      hover:bg-neutral-100
      focus:ring-2
      focus:ring-neutral-200
      focus:outline-none
      dark:hover:bg-neutral-900
      dark:focus:ring-neutral-900;
  }

  .title {
    @apply text-3xl
      font-semibold
      text-neutral-900
      dark:text-white;
  }

  .description {
    @apply font-regular
      mb-2
      text-lg
      text-neutral-800
      dark:text-neutral-200;
  }

  .wrapper {
    @apply flex
      flex-col
      gap-4;

    pre {
      @apply overflow-auto;
    }

    code,
    a {
      @apply break-words;
    }
  }
}
