/*
 * The variation picker's families (src/Families/Picker.php), as the boards draw them (tools/mockups/src/screens/
 * configure.ts): one grid of the option's values with a heading per family before its values, "Velvet · +$200 · Ships
 * in 7–9 weeks", the name in `xs` semibold `muted` like the rest of the line. Picker places the headings and the
 * buttons by `order`, since WooCommerce's chips keep their own order in the markup; a heading takes the whole row and
 * the first one no space above it. A value whose surcharge its family does not share shows it under the value.
 */
.lanternwp-families .wc-block-product-filter-chips__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--10);
}

.lanternwp-families__head {
  flex: 1 1 100%;
  margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--line-height--snug, 1.3);

  &.is-first {
    margin-block-start: 0;
  }

  /* Over texture swatches, whose ring stands out of the row by its frame: level with the squares. */
  .is-style-swatch & {
    padding-inline-start: var(--wp--preset--spacing--10);
  }
}

.lanternwp-families__meta {
  &::before {
    content: ' · ';
  }

  &[hidden] {
    display: none;
  }
}

.lanternwp-families .wc-block-product-filter-chips__item[data-lanternwp-surcharge] {
  position: relative;
  margin-block-end: var(--wp--preset--spacing--50);

  &::after {
    content: attr(data-lanternwp-surcharge);
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--2-xs);
    font-weight: var(--wp--custom--weight--semibold);
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }
}

/*
 * A filter's families (src/Families/Filter.php), as the boards' filters draw them (tools/mockups/src/screens/
 * landing.ts): a family's checkbox, in WooCommerce's checkbox markup, takes a row of its own before its values, the
 * first without space above it. A List stacks its options, so it becomes a column that the order can arrange.
 */
.lanternwp-family-filter .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
}

.lanternwp-family-filter__family {
  flex: 1 1 100%;
  margin-block-start: var(--wp--preset--spacing--30);

  &.is-first {
    margin-block-start: 0;
  }

  /* A family whose options the list hides until Show more (Filter::head()). */
  &[hidden] {
    display: none;
  }

  /* Over swatches, whose frame stands out of the row: level with the squares. */
  .is-style-swatch & {
    padding-inline-start: var(--wp--preset--spacing--10);
  }
}