/*
 * Button: pill shape, works on a button or an a element.
 * Hover changes the border to text color, not the fill: a dark brand fill
 * has too little contrast with the dark page to show a change on its own.
 * Error is a dashed border, not red. The message text comes from i18n.
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--color-accent);
  border-radius: 9999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease-out;
}

/* Visited buttons keep the button colors; the link colors do not apply. */
.button:visited {
  color: var(--color-on-accent);
}

.button:hover {
  border-color: var(--color-text);
  color: var(--color-on-accent);
  text-decoration: none;
}

.button[aria-invalid="true"] {
  border-style: dashed;
  border-width: 3px;
  border-color: var(--color-text);
}

/*
 * Pill variant of the home hero: a flat fill, no shadow, no translucent border.
 * The border is the fill color, so the base hover (border to text color) still shows.
 * Uses the accent until the button token (--color-button) exists in tokens.css.
 */
.button--pill {
  box-sizing: border-box;
  min-block-size: 58px;
  padding: 0 36px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 300;
}

@media (max-width: 780px) {
  .button--pill {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}