src/utils/extension-module-card-classes.ts

/** Shared card chrome for Skills / MCP / Automations tiles (border on hover only). */
export const extensionModuleCardSurfaceClassName =
  "rounded-xl bg-base-secondary";

/** See `.extension-module-card-interactive` in `src/tailwind.css`. */
export const EXTENSION_MODULE_CARD_INTERACTIVE_CLASS =
  "extension-module-card-interactive";

export const extensionModuleCardInteractiveClassName =
  EXTENSION_MODULE_CARD_INTERACTIVE_CLASS;

/** Shared pill chrome for Skills, automation cards, and related modals. */
export const extensionModuleCardPillClassName =
  "inline-flex max-w-full shrink-0 items-center whitespace-nowrap rounded-full bg-[rgba(255,255,255,0.04)] px-2 py-0.5 text-[11px] leading-4 text-tertiary-light";

/** Two-column card grids switch back to one column at or below this width (px). */
export const EXTENSION_MODULE_CARD_GRID_SINGLE_COLUMN_MAX_PX = 599;

/** Establishes the inline-size container queried by {@link extensionModuleCardGridClassName}. */
export const extensionModuleCardGridContainerClassName =
  "@container min-w-0 w-full";

/** Single column in narrow content columns; two columns from 600px container width up. */
export const extensionModuleCardGridClassName =
  "grid min-w-0 grid-cols-1 gap-3 @min-[600px]:grid-cols-2";

/** Bordered empty-state panel used on MCP Installed and Automations list pages. */
export const extensionModuleEmptyStateClassName =
  "rounded-xl border border-[var(--oh-border)] p-8 text-center";