button.primary,
a.button.primary,
button.outline,
a.button.outline,
button.flat,
a.button.flat {
  /* display */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;

  /* positioning */
  /* box-model */
  border-radius: 0.5em;
  padding: 0.675em 1em;

  /* typography */
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;

  /* manipulation */
  /* misc */
  --bgColor: var(--theme-secondary-color);
  --textColor: var(--light-text);
}

button.primary,
a.button.primary {
  /* display */
  /* positioning */
  /* box-model */
  background-color: var(--bgColor);

  /* typography */
  color: var(--textColor);
  /* manipulation */
  /* misc */
}

button.outline,
a.button.outline {
  /* display */
  /* positioning */
  /* box-model */
  border: 1px solid currentColor;

  /* typography */
  color: var(--bgColor);
  /* manipulation */
  /* misc */
}

button.flat,
a.button.flat {
  /* display */
  /* positioning */
  /* box-model */

  /* typography */
  color: var(--bgColor);
  /* manipulation */
  /* misc */
}

button.danger,
a.button.danger {
  --bgColor: var(--invalid-color);
}

button:disabled,
a.button:disabled {
  /* display */
  /* positioning */
  /* box-model */
  --bgColor: var(--disabled-color);

  /* typography */
  /* manipulation */
  /* misc */
}

button.small,
a.button.small {
  /* display */
  /* positioning */
  /* box-model */
  /* typography */
  font-size: 0.75em;

  /* manipulation */
  /* misc */
}

button.inline,
a.button.inline {
  margin: -0.675em -1em;
}

button:focus,
a.button:focus {
  --bgColor: var(--theme-primary-color);
  --textColor: var(--light-text);
}

button.flat:focus,
a.button.flat:focus,
button.flat:focus-visible,
a.button.flat:focus-visible {
  background-color: unset;
}

button.danger:focus,
a.button.danger:focus,
button.danger:focus-visible,
a.button.danger:focus-visible {
  background-color: var(--invalid-color);
  color: var(--light-text);
}

button.primary.danger:focus,
a.button.primary.danger:focus,
button.primary.danger:focus-visible,
a.button.primary.danger:focus-visible {
  background-color: var(--invalid-highlight);
  color: var(--invalid-color);
}

button .spinner,
a.button .spinner {
  display: none;
}

button.loading .spinner,
a.button.loading .spinner {
  display: inline-block;
}