/* Buttons: one 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>
   Icons sit inside with a gap: <button class="button"><i class="bi bi-calendar"></i> Book</button> */

.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-page);
  background-color: var(--c-action);
  border: var(--border-1) solid var(--c-action);
  border-radius: var(--radius-1);
  transition: 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--lg {
  min-height: var(--button-h-lg);
  padding-inline: var(--sp-6);
  font-size: var(--fs-lead);
}

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

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

.button--secondary:hover {
  background-color: var(--c-surface);
}

.button--danger {
  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;
}