/*
 * The Product Quick View block (src/QuickView/QuickView.php) and its dialog. The button is a glass pill in a corner
 * of the card's image, opposite the badges: always shown on touch screens, and on screens with a pointer while the
 * card is hovered or holds the focus. It stands after the image, outside its link, so CSS anchor positioning puts it
 * in the image's box: the bottom end corner, or the top end corner where a theme sets `--lanternwp-quick-view-align`
 * to `start` (a card whose top corner is free). A browser without anchor positioning shows no button, and the card
 * opens the product's page as before. Its hover and press are the control role's, in the theme
 * (docs/design-tokens.html#roles). The dialog is the plugin's dialog panel (resources/front/dialog.css), wider, with
 * its padding on the product inside, so a click on the dialog itself is one on the backdrop (it leaves at once, since
 * Back or closing removes it with the page's region): the product's gallery beside its summary from 48rem, one above
 * the other below, scrolling inside the panel; its close button is an icon button, also styled in the theme. The summary is the theme's product summary (`lanternwp-product-summary`), so the
 * price, the options and the button look as they do on the product page.
 */
.wc-block-product:has(> .lanternwp-quick-view) {
  position: relative;
  anchor-scope: --lanternwp-quick-view-image;

  & > .wc-block-components-product-image {
    anchor-name: --lanternwp-quick-view-image;
  }
}

.lanternwp-quick-view {
  position: absolute;
  position-anchor: --lanternwp-quick-view-image;
  position-area: center;
  place-self: var(--lanternwp-quick-view-align, end) end;
  z-index: 1;
  margin: var(--wp--preset--spacing--30);
  min-block-size: 2rem;
  padding: 0 var(--wp--preset--spacing--30);
  border: 0;
  border-radius: var(--wp--custom--radius--control);
  background: var(--wp--custom--color--glass);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  &[aria-busy='true'] {
    cursor: progress;
  }

  @supports not (position-area: center) {
    display: none;
  }

  /* The editor's sample, without a product: in the flow, where the block stands. */
  &.lanternwp-quick-view--sample {
    position: static;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: default;
  }
}

/*
 * The theme's control role sets this button's transition (its tint and press); the fade joins them here, one class
 * heavier than the theme's rule.
 */
@media (hover: hover) and (pointer: fine) {
  .wc-block-product-template .wc-block-product > .lanternwp-quick-view {
    opacity: 0;
    transition:
      opacity var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
      --lanternwp-tint var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
      scale var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
  }

  .wc-block-product-template .wc-block-product:is(:hover, :focus-within) > .lanternwp-quick-view,
  .wc-block-product-template .wc-block-product > .lanternwp-quick-view[aria-busy='true'] {
    opacity: 1;
  }
}

.lanternwp-dialog.lanternwp-quick-view-dialog {
  inline-size: min(64rem, 100% - 2 * var(--wp--preset--spacing--30));

  /* The dialog holds the focus as it opens (its name is read first); the panel itself shows where the focus is. */
  &:focus {
    outline: none;
  }
}

.lanternwp-quick-view-dialog__close {
  position: absolute;
  inset-block-start: var(--wp--preset--spacing--20);
  inset-inline-end: var(--wp--preset--spacing--20);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--wp--custom--size--icon-button);
  block-size: var(--wp--custom--size--icon-button);
  padding: 0;
  border: 0;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;

  & svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
}

.lanternwp-quick-view-dialog__product {
  display: grid;
  padding: var(--wp--preset--spacing--50);
  gap: var(--wp--preset--spacing--50);
  align-items: start;

  @media (width >= 48rem) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  & > * {
    min-inline-size: 0;
  }
}

.lanternwp-quick-view-dialog__summary {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);

  /*
   * The dialog arrives with the page's region, without the layout styles WordPress prints for the groups of a page,
   * so the summary's flow margins come off here, on every page, as the theme's summary does with its block gap.
   */
  .lanternwp-quick-view-dialog__product > & > * {
    margin-block: 0;
  }

  & .wp-block-post-title {
    margin: 0;
    padding-inline-end: var(--wp--custom--size--icon-button);
    font-size: var(--wp--preset--font-size--xl);
  }
}

.lanternwp-quick-view-dialog__more {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
}