/*
 * Paper
 * A simple, clean, flexible Hugo theme
 * https://github.com/nanxiaobei/hugo-paper
 * Designed by 南小北 https://lee.so/
 */

@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --w: calc(680px + 32px * 2);
}

@utility dark-bg {
  @apply dark:before:fixed dark:before:inset-0 dark:before:z-[-1] dark:before:bg-black/85;
}

body {
  @apply dark-bg;
}

h1,
h2,
h3 {
  @apply font-semibold;
}

pre {
  direction: ltr;
}

article {
  @apply text-lg leading-[1.8] text-black dark:text-white;

  code {
    @apply inline-block text-sm! leading-6!;
  }

  .highlight {
    @apply my-8;

    pre {
      @apply my-0;
    }

    > div {
      @apply rounded-md bg-(--tw-prose-pre-bg);

      table {
        @apply my-0 table-fixed;

        tr {
          @apply flex;

          td {
            @apply p-0;

            pre {
              @apply bg-transparent!;
            }
          }

          &:first-of-type pre {
            @apply pr-[4px];

            code span {
              @apply mr-0! block min-w-[18px] p-0! text-right text-white/40;
            }
          }

          &:last-of-type {
            @apply overflow-auto;
          }
        }
      }
    }
  }
}

.btn {
  @apply rounded-xl bg-black px-5 py-3 text-[0.95em] text-white no-underline duration-100 active:scale-95 dark:bg-white dark:text-black;
}

.link {
  @apply duration-200 hover:text-black dark:hover:text-white;
}

.not-ready * {
  @apply transition-none!;
}

.prose {
  @apply break-words;

  kbd:has(kbd) {
    @apply shadow-none;
  }
}

.btn-menu {
  &::before,
  &::after {
    @apply block h-[2px] w-5 bg-black duration-200 content-[''];
  }

  @apply dark:before:invert dark:after:invert;

  &:where(.open *) {
    &::before {
      @apply w-6 translate-y-[6px] rotate-45;
    }

    &::after {
      @apply w-6 -translate-y-[6px] -rotate-45;
    }
  }
}

.nav-wrapper {
  @apply dark-bg lg:before:hidden dark:before:absolute;

  &:where(.open *) {
    @apply top-0;
  }
}

.open {
  @apply overflow-hidden;
}
