/* A form row with ↑ / ↓ buttons that swap its value with the adjacent row. */

.bump-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-smd);
}

.bump-row__field {
  min-width: 0;
}

.bump-row__controls {
  display: flex;
  gap: var(--space-xs);
}

.bump-row__btn {
  appearance: none;
  background: var(--surface-card);
  color: var(--ink-700);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}

.bump-row__btn:hover:not(:disabled) {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

.bump-row__btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}