.group {
  display: inline-flex;
  border: 1px solid var(--divider);
  border-radius: 6px;
  overflow: visible;
  background: var(--surface-subtle, transparent);
}

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.button + .button {
  border-left: 1px solid var(--divider);
}

.button:hover:not(.buttonActive):not(.buttonDisabled) {
  background: var(--hover-bg-subtle);
  color: var(--text-primary);
}

/* `aria-disabled` keeps hover/focus events available for AppTooltip. */
.buttonDisabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buttonActive {
  background: rgba(var(--accent-primary-rgb), 0.15);
  color: var(--accent-primary);
}
