/* Component: WishlistButton ------------------------------------------------ */
@layer components {
  .tp-wishlist-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--tp-color-ink);
    transition: color var(--tp-dur-fast) ease, opacity var(--tp-dur-fast) ease;
  }

  .tp-wishlist-button__icon {
    fill: none;
    transition: fill var(--tp-dur-fast) ease;
  }

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

  .tp-wishlist-button.is-active .tp-wishlist-button__icon {
    fill: currentColor;
  }

  .tp-wishlist-button.is-busy {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ---- button variant: the product page's labelled control -------------- */
  .tp-wishlist-button--button {
    display: flex;
    width: 100%;
    min-height: var(--tp-btn-h-secondary);
    padding: 0 var(--tp-space-5);
    border: var(--tp-border-brass-soft);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-l);
    letter-spacing: var(--tp-track-wide);
    text-transform: uppercase;
    color: var(--tp-color-ink);
    text-align: center;
    transition: background-color var(--tp-dur-fast) ease, color var(--tp-dur-fast) ease;
  }

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

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

  /* ---- quiet variant: a named control with no chrome --------------------
     Objects of Desire needs the word "Remove" under every card, and twenty
     bordered blocks would read as twenty buttons rather than twenty objects.
     Same component, same states; the box is simply not drawn. */
  .tp-wishlist-button--quiet {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    /* The icon variant is a fixed 30px square; this one is sized by its own
       text and padding, so the hit area can grow on touch. */
    height: auto;
    min-height: 0;
    padding: 7px 0;
    border: 0;
    background: none;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
  }

  .tp-wishlist-button--quiet:hover,
  .tp-wishlist-button--quiet:focus-visible,
  .tp-wishlist-button--quiet.is-active {
    background: none;
    color: var(--tp-color-ink);
  }

  /* Fingers, not a cursor: the row grows to ~40px tall on phones. It is not a
     full 44 because two of these sit side by side in the mobile grid and a
     44px row there would push the cards themselves apart. */
  @media (max-width: 699px) {
    .tp-wishlist-button--quiet {
      padding: 12px 0;
    }
  }
}