button:is(.info, .success, .warning, .danger) {
  --_background-hover-color: color-mix(in hsl, var(--_background-color) 90%, white 10%);
}

button:is(.info, .success, .warning, .danger):hover {
  background-color: var(--_background-hover-color);
  border-color: var(--_background-hover-color);
}

button.outline:is(.info, .success, .warning, .danger) {
  --_background-hover-color: color-mix(in hsl, var(--_background-color) 85%, white 15%);
  background-color: transparent;
  border-color: var(--_background-color);
  color: var(--_background-color);
}

button.outline:is(.info, .success, .warning, .danger):hover {
  color: var(--_background-hover-color);
  border-color: var(--_background-hover-color);
}

:is(button, [role="button"]).outline.muted {
  border-color: var(--coda-muted-border-color);
  color: currentColor;
}

button.undecorated {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.button {
  padding: var(--coda-form-element-spacing-horizontal) var(--coda-form-element-spacing-vertical);
  border: 1px solid var(--coda-border-color);
  border-radius: var(--coda-border-radius);
}