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-vertical)
    var(--coda-form-element-spacing-horizontal);
  border: 1px solid var(--coda-border-color);
  border-radius: var(--coda-border-radius);
  text-decoration: none;
  background-color: var(--pico-primary-background);
  color: var(--coda-validation-text-color);
}

a.button {
  display: inline-block;
}

.button.contrast {
  background-color: var(--coda-contrast-background-color);
  border-color: var(--coda-contrast-border-color);
  color: var(--coda-contrast-color);
}

a.button.secondary {
  background-color: var(--coda-secondary-background);
  color: var(--coda-secondary-inverse);
  border-color: var(--coda-secondary-background);
}

#search-form .button {
  color: var(--pico-accordion-active-summary-color);
  background-color: transparent;
}