@import "tailwindcss";
@import "tw-animate-css";
@import "./tokens.css";
@source "../";

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* tw-animate-css defines these keyframes against Radix-style height variables
   (--radix-accordion-content-height etc.). Base UI exposes the panel height as
   --accordion-panel-height instead, so the originals resolve to `auto` and the
   open/close animation jumps. Redefining them inside @theme replaces the
   originals in Tailwind's emitted output (a plain top-level @keyframes rule
   would lose: Tailwind emits theme keyframes at the end of the stylesheet). */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--accordion-panel-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--accordion-panel-height);
    }
    to {
      height: 0;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
    border-color: var(--border);
    outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
  }

  html,
  body {
    font-family: var(--font-sans);
    font-weight: var(--font-body-weight, 400);
    color: var(--foreground);
    background-color: var(--background);
    scrollbar-gutter: stable;
    -webkit-font-smoothing: antialiased;
  }

  img,
  video,
  svg {
    max-width: 100%;
    display: block;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  a,
  a:active,
  a:hover {
    color: inherit;
    text-decoration: none;
  }

  code,
  pre {
    font-family: var(--font-mono);
  }
}

/* Markdown content */

@layer components {
  /* Body copy is muted; headings, bold text, links, and inline code stay at
     full foreground brightness so they stand out against the running text. */
  .docs-markdown {
    margin-bottom: 2.5rem;
    font-size: 16px;
    line-height: 1.75;
    color: color-mix(in srgb, var(--foreground) 40%, var(--muted-foreground));
  }

  [data-theme="dark"] .docs-markdown {
    color: color-mix(in srgb, var(--foreground) 25%, var(--muted-foreground));
  }

  .docs-markdown > * + *:not(:where(.not-prose, .not-prose *)) {
    margin-top: 1rem;
  }

  .docs-markdown :where(h1, h2, h3, h4, h5, h6):not(:where(.not-prose, .not-prose *)) {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight, 600);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--foreground);
    scroll-margin-top: 1rem;
  }

  /* Permalink appended to every heading by rehype-autolink-headings.
   Hidden until the heading is hovered, or the link itself is focused. */
  .docs-markdown .heading-anchor {
    margin-left: 0.4rem;
    font-weight: 400;
    color: var(--muted-foreground);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  .docs-markdown :where(h1, h2, h3, h4, h5, h6):hover .heading-anchor,
  .docs-markdown .heading-anchor:focus-visible {
    opacity: 1;
  }

  .docs-markdown h2:not(:where(.not-prose, .not-prose *)) {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }

  .docs-markdown h3:not(:where(.not-prose, .not-prose *)) {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
  }

  .docs-markdown p:not(:where(.not-prose, .not-prose *)) {
    margin: 0.75rem 0;
  }

  .docs-markdown ul:not(:where(.not-prose, .not-prose *)),
  .docs-markdown ol:not(:where(.not-prose, .not-prose *)) {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
  }

  .docs-markdown ul:not(:where(.not-prose, .not-prose *)) {
    list-style: disc;
  }

  .docs-markdown ol:not(:where(.not-prose, .not-prose *)) {
    list-style: decimal;
  }

  .docs-markdown li:not(:where(.not-prose, .not-prose *)) {
    margin: 0.35rem 0;
  }

  .docs-markdown :where(strong, b):not(:where(.not-prose, .not-prose *)) {
    color: var(--foreground);
    font-weight: 600;
  }

  .docs-markdown a:not(:where(.not-prose, .not-prose *)) {
    color: var(--foreground);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: 0.2em;
  }

  .docs-markdown a:hover:not(:where(.not-prose, .not-prose *)) {
    text-decoration-color: currentColor;
  }

  .docs-markdown code:not(pre code):not(:where(.not-prose, .not-prose *)) {
    color: var(--foreground);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 4%, transparent);
    padding: 0.1rem 0.3rem;
    font-size: 0.875rem;
  }

  /* Shared by GFM tables and the PropertiesTable component: rounded outer border,
     horizontal row separators only, and a card-colored header fill. */
  .docs-markdown table:not(:where(.not-prose, .not-prose *)) {
    width: 100%;
    margin: 1rem 0;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
    color: var(--foreground);
  }

  .docs-markdown th:not(:where(.not-prose, .not-prose *)),
  .docs-markdown td:not(:where(.not-prose, .not-prose *)) {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
  }

  .docs-markdown th:first-child:not(:where(.not-prose, .not-prose *)),
  .docs-markdown td:first-child:not(:where(.not-prose, .not-prose *)) {
    padding-left: 1.5rem;
  }

  .docs-markdown th:last-child:not(:where(.not-prose, .not-prose *)),
  .docs-markdown td:last-child:not(:where(.not-prose, .not-prose *)) {
    padding-right: 1.5rem;
  }

  .docs-markdown th:not(:where(.not-prose, .not-prose *)) {
    background: var(--card);
    font-weight: 600;
  }

  /* The header fill must follow the table's rounded top corners. */
  .docs-markdown th:first-child:not(:where(.not-prose, .not-prose *)) {
    border-top-left-radius: calc(var(--radius-lg) - 1px);
  }

  .docs-markdown th:last-child:not(:where(.not-prose, .not-prose *)) {
    border-top-right-radius: calc(var(--radius-lg) - 1px);
  }

  .docs-markdown tbody tr:last-child td:not(:where(.not-prose, .not-prose *)) {
    border-bottom: none;
  }

  .docs-markdown table code:not(pre code):not(:where(.not-prose, .not-prose *)) {
    font-size: 0.75rem;
  }

  .docs-markdown blockquote:not(:where(.not-prose, .not-prose *)) {
    border-left: 3px solid var(--input);
    padding-left: 1rem;
    color: var(--muted-foreground);
  }

  .docs-markdown hr:not(:where(.not-prose, .not-prose *)) {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
  }
}

@layer components {
  /* Shiki output: one inline-block per line so highlight and diff bands span the
     full scroll width. Line numbers and diff markers are pseudo-elements, which
     keeps them out of the copy button, text selection, and the search index. */
  .code-block .line {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    min-width: 100%;
    min-height: 1lh;
    padding-inline: 0.75rem 3rem;
  }

  .code-block .line span {
    color: var(--shiki-light);
    font-style: var(--shiki-light-font-style, inherit);
    font-weight: var(--shiki-light-font-weight, inherit);
    text-decoration: var(--shiki-light-text-decoration, inherit);
  }

  [data-theme="dark"] .code-block .line span {
    color: var(--shiki-dark);
    font-style: var(--shiki-dark-font-style, inherit);
    font-weight: var(--shiki-dark-font-weight, inherit);
    text-decoration: var(--shiki-dark-text-decoration, inherit);
  }

  .code-block .line[data-highlighted] {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: inset 2px 0 var(--primary);
  }

  .code-block .line[data-diff="add"] {
    background: color-mix(in srgb, #3fb950 14%, transparent);
  }

  .code-block .line[data-diff="remove"] {
    background: color-mix(in srgb, #f85149 14%, transparent);
  }

  .code-block[data-diff-markers] .line {
    padding-inline-start: 1.5rem;
  }

  .code-block[data-diff-markers] .line[data-diff]::after {
    position: absolute;
    top: 0;
    left: 0.5rem;
    color: var(--muted-foreground);
    user-select: none;
  }

  .code-block[data-diff-markers] .line[data-diff="add"]::after {
    content: "+";
  }

  .code-block[data-diff-markers] .line[data-diff="remove"]::after {
    content: "-";
  }

  /* `counter-reset` is set inline by CodeBlock so blocks can start at any line. */
  .code-block[data-line-numbers] .line {
    counter-increment: line;
  }

  .code-block[data-line-numbers] .line::before {
    content: counter(line);
    display: inline-block;
    width: var(--code-gutter, 2ch);
    margin-inline-end: 1rem;
    color: var(--muted-foreground);
    text-align: right;
    user-select: none;
  }
}