/* Buttons. Two red ones: .button--danger, the outline, for a destructive act
   offered among other controls; .button--destructive, filled, only where
   the act is the one being confirmed (the confirm dialog's verb), so it
   stands alone beside a subtle Cancel. */
.button {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: inherit;
  /* Stated, so a .button is one height whatever element carries it: a
     <button> or <input> otherwise takes the UA's normal, and an <a> or
     <summary> the page's 1.5. */
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    border-color: var(--color-text-muted);
  }

  /* [hidden] is a UA rule and loses to the `display` above, so a hidden
     button stays drawn without this. */
  &[hidden] {
    display: none;
  }
}

/* Disabled, wherever a button is: a fact it carries, so a global rule, and
   the App's own disabled buttons take it too (Impersonate for a pending
   invitee, operator console spec §10). Not a button whose form is out, which
   Turbo disables to hold its spinner (application.css's PENDING). */
.button:disabled:not(:is(form[aria-busy="true"], .house-dialog:has(form[aria-busy="true"]) .footer) *) {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);

  &:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
  }
}

.button--subtle {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-text);
    border-color: transparent;
  }

  /* Muted under the pointer too, so a disabled one never reads as live. */
  &:disabled:hover {
    color: var(--color-text-muted);
  }
}

.button--destructive {
  background: var(--color-fail);
  border-color: var(--color-fail);
  color: #fff;

  &:hover {
    background: var(--color-fail-dark);
    border-color: var(--color-fail-dark);
  }
}

.button--danger {
  color: var(--color-fail);

  &:hover {
    border-color: var(--color-fail);
  }
}

/* A button's spinner while its form is out, and its tick once the press has
   worked, are application.css's PENDING: a menu item that sends a form
   shows the same two. */