@layer base, typography, components, button, utilities;

@layer components {
  sensible-code {
    --code-surface: var(--secondary, oklch(0.9701 0 0));
    --code-background: var(--background, oklch(1 0 0));
    --code-foreground: var(--foreground, oklch(0.2099 0.0341 263.5));
    --code-muted: var(--muted-foreground, oklch(0.5444 0.035 265.2));
    --code-border: var(--border, oklch(0.8715 0.0123 260));
    --sh-class: oklch(0.498 0.1953 291.5);
    --sh-identifier: oklch(0.3695 0.0381 260.5);
    --sh-sign: oklch(0.5444 0.035 265.2);
    --sh-string: oklch(0.5355 0.0951 180.6);
    --sh-keyword: oklch(0.5003 0.1821 29.5);
    --sh-comment: oklch(0.5444 0.035 265.2);
    --sh-jsxliterals: oklch(0.5301 0.1375 340.4);
    --sh-entity: oklch(0.498 0.1953 291.5);
    --sh-property: oklch(0.5093 0.1954 260.9);
    display: block;
    overflow: hidden;
    border: 1px solid var(--code-border);
    border-radius: var(--radius, 0.625rem);
  }

  .dark sensible-code,
  sensible-code.dark {
    --code-surface: var(--secondary, oklch(0.2732 0.0115 271));
    --code-background: var(--background, oklch(0.1964 0.0082 274.6));
    --code-foreground: var(--foreground, oklch(0.8715 0.0123 260));
    --code-muted: var(--muted-foreground, oklch(0.7098 0.0273 261.2));
    --code-border: var(--border, oklch(0.3882 0.0154 275.8));
    --sh-class: oklch(0.7863 0.1258 298.6);
    --sh-identifier: oklch(0.8715 0.0123 260);
    --sh-sign: oklch(0.7098 0.0273 261.2);
    --sh-string: oklch(0.8222 0.0934 180.9);
    --sh-keyword: oklch(0.8254 0.0973 23.2);
    --sh-comment: oklch(0.7098 0.0273 261.2);
    --sh-jsxliterals: oklch(0.8421 0.0827 337);
    --sh-entity: oklch(0.7863 0.1258 298.6);
    --sh-property: oklch(0.7835 0.1103 258.7);
  }

  sensible-code .sensible-code-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--code-surface);
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 600;
  }

  sensible-code .sensible-code-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
    max-width: 100%;
    margin-inline-start: auto;
  }

  sensible-code > :is(pre, textarea) {
    overflow: auto;
    margin: 0;
    border-radius: 0;
    background: var(--code-surface);
    color: var(--code-foreground);
    padding: 1rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    white-space: pre;
  }

  sensible-code[data-wrap="true"] > :is(pre, textarea) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  sensible-code > textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 4rem;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    resize: none;
    field-sizing: content;
  }

  sensible-code > pre > code {
    font-size: 0.875rem;
    line-height: 1.25rem;
    user-select: text;
  }
}

@layer button {
  /* Standalone code/css fallback; shared button rules take precedence. */
  :where(
    sensible-code
      .sensible-code-toolbar
      button[data-size="sm"]:is(
        [data-variant="outline"],
        [data-variant="primary"]
      )
  ) {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 2rem;
    padding-inline: 0.75rem;
    border: 0 solid var(--code-border);
    border-radius: calc(var(--radius, 0.625rem) - 2px);
    background: var(--code-background);
    color: var(--code-foreground);
    font: 500 0.875rem/1.25rem var(--font-sans, system-ui, sans-serif);
    white-space: nowrap;
    cursor: pointer;
  }

  :where(sensible-code .sensible-code-toolbar button[data-variant="outline"]) {
    border-width: 1px;
  }

  :where(sensible-code .sensible-code-toolbar button[data-variant="primary"]) {
    background: var(--primary, var(--code-foreground));
    color: var(--primary-foreground, var(--code-background));
  }

  :where(
    sensible-code
      .sensible-code-toolbar
      button[data-variant="outline"]:is(
        :hover:not(:disabled),
        [aria-pressed="true"]
      )
  ) {
    background: var(--code-surface);
  }

  :where(
    sensible-code
      .sensible-code-toolbar
      button:is(
        [data-variant="outline"],
        [data-variant="primary"]
      ):focus-visible
  ) {
    outline: none;
    border-color: var(--ring, var(--code-border));
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--ring, var(--code-border)) 50%, transparent);
  }
}