Patternflow

/* ── PreviewPanel: its own classes ─────────────────────────────────────────
   Moved out of PatternLab.module.css on 2026-09; only this file uses them. */

/* Direct W×H entry, sitting next to the frame picker. */
.customMatrix {
  display: flex;
  align-items: center;
  gap: 6px;
}

.customMatrixField {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(23, 21, 18, 0.5);
  font-family: var(--font-jetbrains), monospace;
  font-size: 12px;
}

.customMatrixField input {
  width: 58px;
  min-height: 32px;
  border: 1px solid rgba(23, 21, 18, 0.22);
  border-radius: 5px;
  background: #ffffff;
  color: #171512;
  padding: 0 6px;
  font-family: var(--font-jetbrains), monospace;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.customMatrixField input:focus {
  outline: none;
  border-color: #171512;
}

/* Camera view chip in the Preview header — names the borrowed view, exits on click. */
.cameraChip {
  padding: 0 8px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(20, 90, 180, 0.45);
  border-radius: 5px;
  background: rgba(40, 120, 220, 0.12);
  color: #1c4f8a;
  font-family: var(--font-jetbrains), monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.cameraChip:hover {
  background: rgba(40, 120, 220, 0.2);
}

.frameWarning {
  padding: 0 8px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(180, 110, 20, 0.45);
  border-radius: 5px;
  background: rgba(220, 150, 40, 0.12);
  color: #8a5a10;
  font-family: var(--font-jetbrains), monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  cursor: help;
}