@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@layer base {
  /**
   * Shiki Code-Blocks
   */
  pre.shiki {
    &.has-diff .line span:first-child::before {
      @apply mr-3 inline-flex w-2 content-[""];
    }

    .highlighted-word {
      @apply rounded-sm bg-white/10 px-0.5 py-px;
    }

    code {
      @apply block w-fit min-w-full;
    }

    &.show-line-numbers {
      counter-reset: step;
      counter-increment: step var(--starting-line-number, 0);

      .line::before {
        counter-increment: step;
        @apply mr-4 inline-flex w-4 shrink-0 justify-end text-white/30 content-[counter(step)];
      }
    }

    .line {
      @apply -ml-4 inline-block min-w-[calc(100%_+_--spacing(8))] border-l-2 border-transparent pl-3.5;

      &.add {
        @apply border-green-500 bg-green-500/10 before:text-green-500;

        span {
          filter: sepia(1) hue-rotate(70deg) saturate(2);
        }

        span:first-child::before {
          @apply text-green-500 content-["+"];
        }
      }

      &.remove {
        @apply border-red-500 bg-red-500/10 before:text-red-500/50;

        span {
          filter: sepia(1) hue-rotate(-45deg) saturate(2) opacity(0.5);
        }

        span:first-child::before {
          @apply text-red-500/50 content-["-"];
        }
      }

      &.highlighted {
        @apply border-neutral-400 bg-neutral-800;
      }
    }
  }

  span.shiki {
    @apply bg-transparent!;
  }

  .prose :is(h1, h2, h3, h4, h5, h6) a:is(:hover, :focus, :active)::before,
  .prose :is(h1, h2, h3, h4, h5, h6):is(:target, :focus) a::before {
    content: '#';
    transform: translate(-1em);
    @apply absolute opacity-70 max-lg:hidden;
  }
}
