/* One button shape for Settings, whatever element it happens to be: a link
   (Export, and the approval page while a connection is pending), a form submit
   (Connect, Import) or a button_to's button
   (Disconnect). Before this each of those looked like something else — Export
   borrowed .button-link from the start page and read as body text, Disconnect
   was a browser default, and every submit was a full-width slab.

   The slab is forms.css's `input[type=submit]`, and it is right where it came
   from: a sign-in form whose submit is the whole point of the page. It is wrong
   for a button sitting in a row of prose, which is every button in Settings.
   So the submits here are <button>s, which the slab does not match, and never
   inputs — the optical centring below says why. */
.action-button {
  /* inline-flex centres the label in a link and a button alike; a fixed
     height with default inline layout does not — see the note in settings.css
     about the file picker, which is the same trap. */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: auto;
  height: var(--button-height);
  padding: 0 1.5em;
  margin: 0;
  border: 0.0625rem solid transparent;
  border-radius: 0.5em;

  font-family: inherit;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  color: var(--button-fg-color);
  background: var(--button-bg);
  transition: 0.2s ease all;
}

/* Optical centring. Flex centres the line box, and where the letters sit in
   the line box depends on the font's ascent and descent. With Literata the
   capitals sat 1.4px low; with Geist, about even. text-box trims the line box
   to cap height and baseline, and equal padding then centres the capitals in
   any font, at the same --button-height. It does not reach the text inside a
   flex container, so this is inline-block. A browser without text-box keeps
   the flex centring above.

   Safari does not trim inside an <input>, and the padding then makes one 57px
   tall. That is why no .action-button is an input.

   No test holds this: the test browser cannot load Google Fonts, and its
   fallback serif is already centred. It was measured from screenshots. */
@supports (text-box: trim-both cap alphabetic) {
  .action-button {
    display: inline-block;
    height: auto;
    padding-block: calc((var(--button-height) - 1cap - 0.125rem) / 2);
    text-box: trim-both cap alphabetic;
  }
}

.action-button:hover {
  /* Spelled out because the global `a:hover` would otherwise underline it and
     repaint the text in the link colour. The hover is a ring, not a new fill,
     so the label keeps the contrast it has at rest. */
  color: var(--button-fg-color);
  box-shadow: 0 0 0 0.25rem var(--accent-wash);
  text-decoration: none;
}

.action-button:active {
  box-shadow: inset 0 0.125em 0.25em rgba(0, 0, 0, 0.4),
              inset 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
}

/* Destructive, and outlined rather than filled: the same size and shape as its
   neighbours, but never the loudest thing in the box it sits in. It fills on
   hover, so what it is about to do is not in doubt once you are on it. */
.action-button.danger {
  color: var(--danger-color);
  background: transparent;
  border-color: var(--danger-color);
}

/* Its own text colour, not --button-fg-color: that is black for the light
   accents, and black on the light theme's danger red is 3:1. */
.action-button.danger:hover {
  color: light-dark(white, black);
  background: var(--danger-color);
}