.control {
  display: inline-flex;
  max-inline-size: 100%;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  overflow-x: auto;
}
.option {
  flex: none;
  min-block-size: 2.5rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 700;
}
.option[aria-checked='true'] {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-subtle);
}
.option:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
