/**
 * VSCode theme variable mappings to marimo's CSS variables
 * Maps VSCode's theme colors to the CSS variables used by marimo
 */
:root {
  /** Fonts */
  --monospace-font: var(--vscode-editor-font-family);
  --text-font: var(--vscode-font-family);
  --heading-font: var(--marimo-heading-font, "Lora", var(--vscode-font-family));

  /* Core colors */
  --background: var(--vscode-editor-background);
  --foreground: var(--vscode-editor-foreground);

  /* Muted colors */
  --muted: var(--vscode-input-background);
  --muted-foreground: var(--vscode-disabledForeground);

  /* Borders */
  --border: var(--vscode-editorWidget-border);
  --input: var(--vscode-input-background);

  /* Primary colors (buttons) */
  --primary: var(--vscode-button-background);
  --primary-foreground: var(--vscode-button-foreground);

  /* Secondary colors */
  --secondary: var(--vscode-button-secondaryBackground);
  --secondary-foreground: var(--vscode-button-secondaryForeground);

  /* Accent (selections) */
  --accent: var(--vscode-list-activeSelectionBackground);
  --accent-foreground: var(--vscode-list-activeSelectionForeground);

  /* Focus ring */
  --ring: var(--vscode-focusBorder);

  /* Semantic colors */
  --destructive: var(--vscode-errorForeground);
  --destructive-foreground: var(--vscode-editor-foreground);
  --error: var(--vscode-errorForeground);
  --error-foreground: var(--vscode-editor-foreground);
  --success: var(--vscode-charts-green);
  --success-foreground: var(--vscode-editor-foreground);
  --action: var(--vscode-editorWarning-foreground);
  --action-hover: var(--vscode-list-hoverBackground);
  --action-foreground: var(--vscode-editorWarning-foreground);

  /* Links */
  --link: var(--vscode-textLink-foreground);
  --link-visited: var(--vscode-textLink-activeForeground);
}

/**
 * Ensure the output container is a positioning context for the image toolbar
 */
.marimo-cell-output {
  position: relative;
}

/**
 * Image toolbar: floating copy/save buttons shown on hover over images.
 */
.image-toolbar {
  position: absolute;
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  background: var(--vscode-editor-background, #1e1e1e);
  border: 1px solid var(--vscode-editorWidget-border, #454545);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: image-toolbar-fade-in 0.15s ease-out forwards;
}

@keyframes image-toolbar-fade-in {
  to {
    opacity: 1;
  }
}

.image-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--vscode-editor-foreground, #cccccc);
  cursor: pointer;
}

.image-toolbar button:hover {
  background: var(--vscode-list-hoverBackground, #2a2d2e);
}

/**
 * Set minimum height for cell outputs containing elements with large popovers
 * This prevents popovers from being cut off in VS Code's output rendering
 */
.marimo-cell-output:has(
  marimo-date,
  marimo-date-range,
  marimo-datetime,
  marimo-dropdown[data-searchable="true"],
  marimo-multiselect
) {
  min-height: 350px;
}

[data-vscode-theme-kind="vscode-dark"] .codehilite,
[data-vscode-theme-kind="vscode-high-contrast"] .codehilite {
  color-scheme: dark;
}

[data-vscode-theme-kind="vscode-light"] .codehilite,
[data-vscode-theme-kind="vscode-high-contrast-light"] .codehilite {
  color-scheme: light;
}
