/*
 * The Option Guide block (src/Blocks/OptionGuide.php): the guide's link at the end of its option's name row, as the
 * product boards draw it (`sm`, semibold, underlined, the text colour), with the option's choices on the row below;
 * and the guide in its dialog (resources/front/dialog.css), as the board Demo-Tessel-Guide draws it: how to measure in
 * `sm` and `muted`, the drawing beside it where the dialog is wide enough and under it where not, the cm/in switch at
 * the end of its row (two segments in the control radius, the chosen one filled with `contrast`), then the table in
 * `sm` with tabular figures, its first column (what is measured) kept in view while a narrow screen scrolls the values
 * sideways.
 */
.wp-block-group:has(> .wp-block-lanternwp-option-guide) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;

  &
    > :not(
      .wp-block-lanternwp-option-guide,
      .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name
    ) {
    grid-column: 1 / -1;
  }
}

.lanternwp-option-guide__open {
  min-block-size: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--custom--link--underline-rest);
  text-underline-offset: var(--wp--custom--link--underline-offset);
  cursor: pointer;
  transition: text-decoration-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);

  /* A text button in the link role (docs/design-tokens.html#roles): its line takes the text's colour and thickens. */
  &:hover {
    text-decoration-color: currentcolor;
    text-decoration-thickness: 2px;
  }
}

.lanternwp-option-guide__content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--sm);
}

.lanternwp-option-guide__how {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--40);

  & p {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--wp--preset--color--muted);
    line-height: var(--wp--custom--line-height--normal);
  }
}

.lanternwp-option-guide__drawing {
  flex: 0 1 14rem;
  margin: 0 auto;

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
}

.lanternwp-option-guide__units {
  align-self: flex-end;
}

/* The table scrolls inside the dialog's padding, so its edge meets the panel's. */
.lanternwp-option-guide__scroll {
  overflow-x: auto;
}

.lanternwp-option-guide__table {
  inline-size: 100%;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;

  & th,
  & td {
    padding: var(--wp--preset--spacing--30);
    border-block-end: 1px solid var(--wp--preset--color--border-subtle);
    text-align: center;
    white-space: nowrap;
  }

  & thead th {
    padding-block-start: 0;
    border-block-end-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--muted);
    font-family: var(--wp--custom--label--family);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--label--weight);
    letter-spacing: var(--wp--custom--label--tracking);
    text-transform: var(--wp--custom--label--transform);
  }

  & tbody th {
    font-weight: inherit;
  }

  & :is(th, td):first-child {
    position: sticky;
    inset-inline-start: 0;
    padding-inline-start: 0;
    background: var(--wp--preset--color--base);
    text-align: start;
  }
}