/**
 * MetricTile styles
 * @countermeasure/web-components/display/metric-tile
 */

.cmm-metric-tile {
  --cmm-metric-tile-bg: var(--color-surface, hsl(var(--card)));
  --cmm-metric-tile-fg: var(--color-text, hsl(var(--foreground)));
  --cmm-metric-tile-muted: var(--color-text-muted, hsl(var(--muted-foreground)));
  --cmm-metric-tile-border: var(--color-border, hsl(var(--border)));
  --cmm-metric-tile-accent: var(--color-primary, hsl(var(--primary)));

  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  color: var(--cmm-metric-tile-fg);
  background: var(--cmm-metric-tile-bg);
  border: 1px solid var(--cmm-metric-tile-border);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(
    --shadow-card,
    0 1px 3px rgb(0 0 0 / 0.3),
    0 1px 2px rgb(0 0 0 / 0.2)
  );
}

.cmm-metric-tile__header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
  color: var(--cmm-metric-tile-accent);
}

.cmm-metric-tile__icon {
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--cmm-metric-tile-accent);
}

.cmm-metric-tile__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.cmm-metric-tile__label {
  min-width: 0;
  overflow: hidden;
  color: var(--cmm-metric-tile-muted);
  font: var(--type-label, 600 0.65625rem/1.3 var(--font-sans, sans-serif));
  letter-spacing: var(--letter-label, 0.1em);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmm-metric-tile__value {
  color: var(--cmm-metric-tile-fg);
  font: var(--type-metric, 700 1.375rem/1 var(--font-display, var(--font-sans, sans-serif)));
  font-variant-numeric: tabular-nums;
}

.cmm-metric-tile__detail {
  color: var(--color-text-dim, hsl(var(--muted-foreground)));
  font: var(--type-caption, 400 0.75rem/1.4 var(--font-sans, sans-serif));
}

.cmm-metric-tile__sparkline {
  min-height: 1.5rem;
  color: var(--cmm-metric-tile-accent);
}

.cmm-metric-tile__sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cmm-metric-tile--clickable {
  cursor: pointer;
  transition:
    border-color var(--transition-fast, 150ms),
    box-shadow var(--transition-fast, 150ms),
    transform var(--transition-fast, 150ms);
}

.cmm-metric-tile--clickable:hover {
  border-color: var(--cmm-metric-tile-accent);
  transform: translateY(-1px);
}

.cmm-metric-tile--clickable:focus-visible {
  outline: 2px solid var(--color-primary, hsl(var(--focus-ring)));
  outline-offset: 2px;
}

.cmm-metric-tile--tone-slate {
  --cmm-metric-tile-accent: var(--color-slate-400, #94a3b8);
}

.cmm-metric-tile--tone-blue {
  --cmm-metric-tile-accent: var(--color-blue-400, #60a5fa);
}

.cmm-metric-tile--tone-violet {
  --cmm-metric-tile-accent: var(--color-violet-400, #a78bfa);
}

.cmm-metric-tile--tone-amber {
  --cmm-metric-tile-accent: var(--color-amber-400, #fbbf24);
}

.cmm-metric-tile--tone-emerald {
  --cmm-metric-tile-accent: var(--color-emerald-400, #34d399);
}

.cmm-metric-tile--tone-orange {
  --cmm-metric-tile-accent: var(--color-orange-400, #fb923c);
}

.cmm-metric-tile--tone-rose {
  --cmm-metric-tile-accent: var(--color-rose-400, #fb7185);
}

.cmm-metric-tile--tone-cyan {
  --cmm-metric-tile-accent: var(--color-cyan-400, #22d3ee);
}
