/* Buttons: crisp rectangles with spaced capitals, like gallery signage. 44px minimum hit area.
   .button works on <a> and <button>. */

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .button .icon { font-size: 20px; transition: transform var(--dur) var(--ease); }
  .button:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }

  .button--primary {
    background: var(--bp-brand-600);
    border-color: var(--bp-brand-600);
    color: var(--bp-on-primary);
  }

  .button--primary:hover { background: var(--bp-brand-700); border-color: var(--bp-brand-700); color: var(--bp-on-primary); box-shadow: var(--shadow-md); }

  /* Ink outline that fills on hover. */
  .button--secondary {
    background: transparent;
    border-color: var(--bp-ink);
    color: var(--bp-ink);
  }

  .button--secondary:hover { background: var(--bp-ink); color: var(--bp-paper); }

  .button--quiet {
    background: var(--bp-surface);
    border-color: var(--bp-line-strong);
    color: var(--bp-ink);
  }

  .button--quiet:hover { border-color: var(--bp-ink); color: var(--bp-ink); }

  .button--lg { min-height: 52px; padding-inline: 28px; font-size: var(--fs-md); }
  .button--sm { min-height: 38px; padding-inline: 14px; font-size: var(--fs-xs); }
  .button--block { width: 100%; }

  .button:disabled,
  .button[aria-disabled="true"] {
    background: transparent;
    border-color: var(--bp-line-strong);
    color: var(--bp-ink-3);
    box-shadow: none;
    cursor: not-allowed;
  }

  .button[aria-busy="true"] { cursor: progress; }

  .button[aria-busy="true"]::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: button-spin .7s linear infinite;
  }

  @keyframes button-spin { to { transform: rotate(360deg); } }

  /* A link on its way to the next page (js/components/busy-links.js): it keeps its colour, shows the
     spinner in place of its arrow, and takes no more clicks. */
  .button--primary[aria-busy="true"][aria-disabled="true"] {
    background: var(--bp-brand-600);
    border-color: var(--bp-brand-600);
    color: var(--bp-on-primary);
    cursor: progress;
  }

  .button--secondary[aria-busy="true"][aria-disabled="true"] { border-color: var(--bp-ink); color: var(--bp-ink); cursor: progress; }

  a.button[aria-busy="true"] .icon { display: none; }

  /* A button that reads as a text link. */
  .link-button {
    border: 0;
    background: transparent;
    padding: var(--space-2) var(--space-1);
    min-height: var(--control-h);
    color: var(--bp-brand-600);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .link-button:hover { color: var(--bp-brand-800); }

  /* Round icon-only button: close, show password, scroll arrows. */
  .icon-button {
    display: inline-grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--bp-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--bp-ink);
    cursor: pointer;
    transition: background-color var(--dur), color var(--dur), border-color var(--dur);
  }

  .icon-button:hover { background: var(--bp-ink); border-color: var(--bp-ink); color: var(--bp-paper); }

  /* "Share this page" (js/components/share.js). It needs script, so it only shows once the page has it. */
  .share-button { display: none; }
  .js .share-button { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; }
  .share-button .icon { font-size: 18px; }

  /* The shop list's share button, with what it shares written beside it (the filters, in words). */
  .share-row { display: none; }
  .js .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .share-row__what { font-size: var(--fs-sm); color: var(--bp-ink-2); }
}