/* Buttons: pill-shaped, a powder blue main action and a quieter secondary one, in three sizes (32 / 40 / 48px).

   <button class="button" type="submit">Book a consultation</button>
   <button class="button button--sm" type="button">Edit</button>
   <button class="button button--lg" type="submit">Book now</button>
   <a class="button button--secondary" href="/contact">Contact us</a>
   <button class="button button--danger" type="submit">Delete booking</button>
   <a class="button button--light" href="#contact">Get in touch</a>  (on graphite)
   <a class="button button--outline-light" href="#about">About Dr. Beran</a>  (on graphite, the quieter one)
   <a class="button button--gradient" href="#contact">Book a consultation</a>  (blue gradient that flips on hover)
   <a class="button button--md button--soft" href="/shop">Visit the shop</a>  (36px, white gradient that fades to the blue gradient on hover)
   Icons sit inside with a gap: <button class="button"><i class="bi bi-calendar"></i> Book</button>
   An arrow on the right that slides up on hover, a second one sliding up from below to take its place
   (also used by the account cards' round arrows, pages/account.css):
   <a class="button button--gradient" href="/shop">Visit the shop <span class="button__arrow" aria-hidden="true"><i class="bi bi-arrow-right"></i><i class="bi bi-arrow-right"></i></span></a> */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--button-h);
  padding: var(--sp-1) var(--sp-4); /* min-height sets the size; padding only matters if the text wraps */
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  text-decoration: none;
  color: var(--c-button-text);
  background-color: var(--c-accent);
  border: var(--border-1) solid var(--c-accent-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-button);
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.button--sm {
  min-height: var(--button-h-sm);
  padding-inline: var(--sp-3);
  font-size: var(--fs-small);
}

.button--md {
  min-height: var(--button-h-md);
  padding-inline: var(--sp-4);
  font-size: var(--fs-small);
}

.button--lg {
  min-height: var(--button-h-lg);
  padding-inline: var(--sp-6);
  font-size: var(--fs-lead);
}

.button:hover {
  /* the menu's Create account button at rest (its tokens: --c-menu-button-*); the white secondary button does the same */
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button-border);
}

/* --- Gradient: the step bar's blue, lighter at the top; on hover it fades upside down.
   A gradient cannot fade by itself, so its two colours are registered properties that can.
   The step bar's sliding pill (pages/home.css) uses the same two properties. --- */
@property --gradient-top {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --gradient-bottom {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.button--gradient {
  --gradient-top: var(--c-menu-button-light);
  --gradient-bottom: var(--c-menu-button);
  color: var(--c-menu-button-text);
  background-image: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  border-color: transparent;
  box-shadow: var(--shadow-gradient);
  transition: --gradient-top var(--duration-slow) var(--ease), --gradient-bottom var(--duration-slow) var(--ease);
}

.button--gradient:hover {
  --gradient-top: var(--c-menu-button);
  --gradient-bottom: var(--c-menu-button-light);
  border-color: transparent;
}

.button--secondary {
  color: var(--c-action);
  background-color: var(--c-page);
}

.button--light {
  color: var(--c-text);
  background-color: var(--c-on-dark);
  border-color: var(--c-on-dark);
}

.button--light:hover {
  color: var(--c-text);
  background-color: var(--c-surface);
  border-color: var(--c-surface);
}

.button--outline-light {
  color: var(--c-on-dark);
  background-color: transparent;
  border-color: var(--c-on-dark);
}

.button--outline-light:hover {
  color: var(--c-text);
  background-color: var(--c-on-dark);
  border-color: var(--c-on-dark);
}

.button--danger {
  color: var(--c-on-dark);
  background-color: var(--c-error);
  border-color: var(--c-error);
}

.button--danger:hover {
  background-color: var(--c-error-hover);
  border-color: var(--c-error-hover);
}

.button:disabled,
.button[aria-disabled="true"] {
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  border-color: var(--c-line);
  cursor: not-allowed;
}

/* --- Soft: white, a little darker at the bottom; on hover it fades to the blue gradient above. --- */
.button--soft {
  --gradient-top: var(--c-page);
  --gradient-bottom: var(--c-button-soft-bottom);
  color: var(--c-button-text);
  background-image: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  border-color: var(--c-line);
  transition: --gradient-top var(--duration-slow) var(--ease), --gradient-bottom var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}

.button--soft:hover {
  --gradient-top: var(--c-menu-button-light);
  --gradient-bottom: var(--c-menu-button);
  color: var(--c-menu-button-text);
  border-color: transparent;
  box-shadow: var(--shadow-gradient);
}

/* --- Arrow: two arrows in one spot; the second waits below, hidden. On hover the first slides up
   and out, the second slides up into its place. --- */
.button__arrow {
  display: inline-grid;
  overflow: hidden;
}

.button__arrow .bi {
  grid-area: 1 / 1;
  transition: translate var(--duration-slow) var(--ease);
}

.button__arrow .bi + .bi {
  translate: 0 100%;
}

.button:hover .button__arrow .bi,
.button:focus-visible .button__arrow .bi,
.account-card:hover .button__arrow .bi,
.account-card:focus-visible .button__arrow .bi {
  translate: 0 -100%;
}

.button:hover .button__arrow .bi + .bi,
.button:focus-visible .button__arrow .bi + .bi,
.account-card:hover .button__arrow .bi + .bi,
.account-card:focus-visible .button__arrow .bi + .bi {
  translate: 0 0;
}