@utility prose-rosepine {
  --tw-prose-body: var(--color-text);
  --tw-prose-headings: var(--color-text);
  --tw-prose-lead: var(--color-text);
  --tw-prose-links: var(--color-iris);
  --tw-prose-bold: var(--color-text);
  --tw-prose-counters: var(--color-subtle);
  --tw-prose-bullets: var(--color-subtle);
  --tw-prose-hr: var(--color-overlay);
  --tw-prose-quotes: var(--color-text);
  --tw-prose-quote-borders: var(--color-overlay);
  --tw-prose-kbd: var(--color-text);
  --tw-prose-kbd-shadows: var(--color-text);
  --tw-prose-captions: var(--color-text);
  --tw-prose-code: var(--color-rose);
  --tw-prose-pre-code: var(--color-muted);
  --tw-prose-pre-bg: var(--color-surface);
  --tw-prose-th-borders: var(--color-overlay);
  --tw-prose-td-borders: var(--color-overlay);

  /* invert mode */
  --tw-prose-invert-body: var(--color-text);
  --tw-prose-invert-headings: var(--color-text);
  --tw-prose-invert-lead: var(--color-text);
  --tw-prose-invert-links: var(--color-iris);
  --tw-prose-invert-bold: var(--color-text);
  --tw-prose-invert-counters: var(--color-subtle);
  --tw-prose-invert-bullets: var(--color-subtle);
  --tw-prose-invert-hr: var(--color-overlay);
  --tw-prose-invert-quotes: var(--color-text);
  --tw-prose-invert-quote-borders: var(--color-overlay);
  --tw-prose-invert-kbd: var(--color-text);
  --tw-prose-invert-kbd-shadows: var(--color-text);
  --tw-prose-invert-captions: var(--color-text);
  --tw-prose-invert-code: var(--color-rose);
  --tw-prose-invert-pre-code: var(--color-muted);
  --tw-prose-invert-pre-bg: var(--color-surface);
  --tw-prose-invert-th-borders: var(--color-overlay);
  --tw-prose-invert-td-borders: var(--color-overlay);
}

@utility page {
  @apply w-full flex-1 space-y-12 py-20 max-md:py-12;
}

@utility link {
  @apply relative inline-block w-fit pr-2 underline underline-offset-2 duration-300;

  &::before {
    @apply absolute top-1/2 -right-1 -translate-y-[1.6em] text-xs leading-[inherit] opacity-100 transition-opacity duration-300 content-['┓'];
  }

  &[href^='#'] {
    @apply text-text font-bold no-underline hover:before:opacity-100;
    &::before {
      @apply text-subtle top-auto right-auto -translate-x-5 translate-y-0 opacity-0 content-['#'];
      font-size: inherit;
    }
  }

  &.link-hover {
    @apply decoration-transparent before:opacity-0 hover:decoration-current hover:before:opacity-100;
  }
}

@utility toc {
  & li.visible > a {
    @apply text-text decoration-muted translate-x-1.5;
  }
}

@utility scrollbar-hide {
  scrollbar-width: none;
}

@utility slide-container {
  --enter-start: 0ms;
  --enter-delay: 100ms;
  --enter-stagger: 0;

  .slide-auto > * {
    --enter-stagger: min(sibling-index(), 10);
  }

  [style*='--enter-stagger'],
  .slide-auto > * {
    animation: slide-enter 1s backwards 1;
    animation-delay: calc(
      var(--enter-start) + var(--enter-stagger) * var(--enter-delay)
    );
  }
}

@utility photo-view-mask {
  @apply bg-surface!;
}

@utility photo-gallery {
  @apply grid grid-cols-3 gap-3 max-md:grid-cols-2;

  &[data-total='1'] {
    @apply grid-cols-1;
  }

  &[data-total='2'],
  &[data-total='4'] {
    @apply grid-cols-2;
  }

  figure {
    @apply m-0;
  }
}

@utility player-progress {
  @apply bg-overlay block h-10 w-full cursor-pointer appearance-none outline-hidden;

  &::-webkit-slider-runnable-track {
    @apply h-10;
    background: linear-gradient(
      to right,
      var(--color-muted) 0%,
      var(--color-muted) var(--progress),
      transparent var(--progress),
      transparent 100%
    );
  }

  &::-webkit-slider-thumb {
    @apply bg-muted h-10 w-1 appearance-none;
  }
}

@utility player-button {
  @apply flex h-20 w-20 cursor-pointer items-center justify-center outline-hidden disabled:opacity-60;
}
