@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../**/*.go";
@source "../**/*.templ";

@keyframes pop {
  50% {
    transform: scale(1.3);
  }
}
[data-copied] svg {
  animation: pop 0.25s;
}

@keyframes bump {
  50% {
    transform: scale(1.03);
  }
}

@plugin "@tailwindcss/typography";

.prose {
  --tw-prose-body: var(--text);
  --tw-prose-headings: var(--primary);
  --tw-prose-links: var(--secondary);
  --tw-prose-bold: var(--text);
  --tw-prose-bullets: var(--alt);
  --tw-prose-counters: var(--alt);
  --tw-prose-hr: var(--alt);
  --tw-prose-quotes: var(--text);
  --tw-prose-quote-borders: var(--alt);
  --tw-prose-captions: var(--alt);
  --tw-prose-code: var(--extra);
  --tw-prose-pre-code: var(--text);
  --tw-prose-pre-bg: rgb(0 0 0 / 0.3);
  --tw-prose-th-borders: var(--alt);
  --tw-prose-td-borders: var(--alt);
}

.js .footnotes {
  display: none;
}

.sidenotes {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
}

.sidenote {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 1ch;
  padding: 0.4rem 0.6rem;
  border: 0.1rem solid var(--alt);
  background: var(--background);
  font-family: var(--font-normal);
  font-size: 14px;
  line-height: 1.4;
  pointer-events: auto;
}

.sidenote-num {
  flex-shrink: 0;
  color: var(--secondary);
}