.container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.controlsRow {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.select {
  min-width: 180px;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text-primary);
}

.saveButton,
.applyButton,
.deleteButton {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--font-size-body-xs);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}

.saveButton {
  background: var(--color-info);
  color: var(--color-text-on-primary);
}

.applyButton {
  background: var(--color-success);
  color: var(--color-text-on-primary);
}

.deleteButton {
  background: var(--color-error);
  color: var(--color-text-on-primary);
}

.saveButton:disabled,
.applyButton:disabled,
.deleteButton:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error {
  font-size: var(--font-size-body-xs);
  color: var(--color-error);
}
