/* view-toggle.css — Team Portal client UI primitive: compact button-group toggle.
 *
 * BEM-style classes:
 *   .view-toggle              — inline-flex pill container
 *   .view-toggle__btn         — individual mode button (default state)
 *   .view-toggle__btn--active — currently selected mode (accent background)
 *
 * Dark theme compatible via existing CSS vars (--accent, --bg-2, --text-2, --line-2, --text).
 *
 * Block 1203 of task radar-os--455-docs-control-mode.
 */

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.10));
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle__btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-2, #93a4c0);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.view-toggle__btn:hover {
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  color: var(--text, #e5e7eb);
}

.view-toggle__btn--active,
.view-toggle__btn--active:hover {
  background: var(--accent, #6366f1);
  color: #ffffff;
}