/* Component: Button -------------------------------------------------------- */
@layer components {
  .tp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp-space-2);
    box-sizing: border-box;
    max-width: 100%;
    background: none;
    border: var(--tp-border-brass);
    border-radius: var(--tp-radius);
    cursor: pointer;
    font-family: var(--tp-font-mono);
    font-weight: var(--tp-weight-regular);
    text-transform: uppercase;
    text-align: center;
    color: var(--tp-color-ink);
    line-height: 1.3;
    transition:
      background-color var(--tp-dur-fast) ease,
      border-color var(--tp-dur-fast) ease,
      color var(--tp-dur-fast) ease;
  }

  .tp-button:hover {
    color: var(--tp-color-ink);
  }

  .tp-button__icon {
    flex: none;
  }

  /* Primary: navy fill, paper text, cobalt on hover (Add to Cart). */
  .tp-button--primary {
    min-height: var(--tp-btn-h-primary);
    padding: 0 var(--tp-space-6);
    background: var(--tp-color-ink);
    border-color: var(--tp-color-ink);
    color: var(--tp-color-paper);
    font-size: var(--tp-size-label-xl);
    letter-spacing: var(--tp-track-label);
  }

  .tp-button--primary:hover {
    background: var(--tp-color-cobalt);
    border-color: var(--tp-color-cobalt);
    color: var(--tp-color-paper);
  }

  /* Outline brass CTA (View Objects of Desire). */
  .tp-button--outline-brass {
    min-height: var(--tp-btn-h-cta);
    padding: 0 30px;
    gap: 20px;
    font-size: var(--tp-size-label-xl);
    letter-spacing: var(--tp-track-label);
  }

  .tp-button--outline-brass:hover {
    background: var(--tp-color-paper-hover);
  }

  /* Load more. */
  .tp-button--load-more {
    min-height: var(--tp-btn-h-load-more);
    padding: 0 34px;
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-label);
  }

  .tp-button--load-more:hover {
    background: var(--tp-color-paper-hover);
  }

  /* Outline parchment (Add to Objects of Desire). */
  .tp-button--outline-parchment {
    min-height: var(--tp-btn-h-secondary);
    padding: 0 var(--tp-space-5);
    border-color: var(--tp-color-brass-soft);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-wide);
  }

  .tp-button--outline-parchment:hover {
    background: var(--tp-color-paper-hover);
  }

  /* Toolbar (Filter). */
  .tp-button--toolbar {
    min-height: var(--tp-btn-h-toolbar);
    padding: 0 18px;
    gap: 12px;
    border-color: var(--tp-color-brass-soft);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-cta);
  }

  .tp-button--toolbar:hover {
    background: var(--tp-color-paper-hover);
  }

  /* Chip (colour / size). */
  .tp-button--chip {
    min-height: var(--tp-btn-h-chip);
    padding: 0 18px;
    border-color: var(--tp-color-line);
    color: var(--tp-color-text-muted);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-chip);
    transition: background-color var(--tp-dur) ease, border-color var(--tp-dur) ease;
  }

  .tp-button--chip.is-active {
    background: var(--tp-color-chip-active);
    border-color: var(--tp-color-cobalt);
    color: var(--tp-color-ink);
  }

  /* Footer "Contact the Procuress". */
  .tp-button--footer-contact {
    width: var(--tp-btn-w-footer);
    min-height: var(--tp-btn-h-footer);
    padding: 0 8px;
    white-space: nowrap;
    font-size: var(--tp-size-label-xs);
    letter-spacing: var(--tp-track-button);
  }

  .tp-button--footer-contact:hover {
    background: var(--tp-color-paper-hover);
  }

  /* Newsletter "Sign Up": borderless, divided from the input by a hairline. */
  .tp-button--sign-up {
    flex: none;
    white-space: nowrap;
    min-height: var(--tp-btn-h-signup);
    padding: 0 12px;
    border: 0;
    border-left: var(--tp-border-brass-soft);
    font-size: var(--tp-size-label-xs);
    letter-spacing: var(--tp-track-button);
  }

  .tp-button--sign-up:hover {
    background: var(--tp-color-paper-hover);
  }
}