/* Pill button — auto-loaded for the button snippet (site/snippets/ui/button.php). */

.button {
  --fa-serif: 0;
  font-size: var(--fs-subheading);
  width: max-content;
  /* Optical centring, as in a chip (ui/chip): the text moves down by half of
     --optical-shift, traded from the bottom padding to the top. */
  padding:
    calc(var(--space-2xs) + var(--optical-shift) / 2) var(--space-s)
    calc(var(--space-2xs) - var(--optical-shift) / 2);
  background: var(--color-bar);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
}
.button:hover {
  text-decoration: none;
  background: var(--color-bar-hover);
}
.button:disabled {
  color: var(--color-muted);
  background: var(--color-bar);
  box-shadow: none;
  cursor: default;
}