/**
 * @file
 * Form buttons, including primary, preview and destructive actions.
 */

.pure-button,
.button {
  margin: 0.2rem;
  text-decoration: none;
  color: light-dark(#222, #c8cbce);
  border: 1px solid var(--border);
  background-color: light-dark(#e6e6e6, #303438);
}

.form-actions .pure-button {
  border: 0;
}

.pure-button.button--primary,
.pure-button-primary {
  color: light-dark(#fff, #141618);
  background-color: var(--primary);
}

.form-actions .button--preview {
  background-color: light-dark(#d3eda3, #26482e);
}

.form-actions .button--danger {
  background-color: light-dark(#f5ab9e, #60302d);
}

/* Neutral buttons retain a grey hover; named actions keep their colors. */
:is(.pure-button, .button):not(.button--primary, .pure-button-primary, .button--preview, .button--danger, .search-submit):is(:hover, :focus-visible),
.form-actions :is(.pure-button, .button, input[type="submit"]):not(.button--primary, .pure-button-primary, .button--preview, .button--danger, .search-submit):is(:hover, :focus-visible) {
  text-decoration: none;
  color: light-dark(#222, #c8cbce);
  background-color: light-dark(#d4d4d4, #43494e);
  background-image: none;
}

:is(.pure-button.button--primary, .pure-button-primary):is(:hover, :focus-visible) {
  color: light-dark(#fff, #141618);
  background-color: var(--primary-hover);
  background-image: none;
}

.form-actions .button--preview:is(:hover, :focus-visible) {
  background-color: light-dark(#c0df8a, #356242);
  background-image: none;
}

.form-actions .button--danger:is(:hover, :focus-visible) {
  background-color: light-dark(#ed9283, #81423c);
  background-image: none;
}

:is(.pure-button, .button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.button:first-child,
.image-button:first-child {
  margin-inline-start: 0;
}

.rnd :is(.pure-button, .button) {
  border-radius: var(--control-radius);
}