/*
 * The Fit Scale block (src/Blocks/FitScale.php), as the boards' fitScale() draws it: a 4px track in `surface-2` with
 * a 12px marker in `contrast` (`radius.badge`) where the answers meet, over the three answers in the label style,
 * `2xs` and `muted`; the reviews it counts in `xs` and `muted` above. A product's scale beside its sizes is a section
 * between lines in `border-subtle` with its heading in the label style, as How It Fits is; right after How It Fits the
 * two read as the board's one section: no line between them and one heading. Also the review form's question
 * (Reviews\FitAnswers): the three answers in a row where they fit on one, else in a column, never two and one; and a
 * review's own answer under its stars, in `xs` and `muted`.
 */
.wp-block-lanternwp-fit-scale {
  --lanternwp-fit-marker: 12px;

  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.wp-block-lanternwp-fit-scale.lanternwp-fit-scale--product {
  margin-block: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--30);
  border-block: 1px solid var(--wp--preset--color--border-subtle);
}

.lanternwp-fit-scale__title {
  margin: 0;
  font-family: var(--wp--custom--label--family, inherit);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--label--tracking, normal);
  text-transform: var(--wp--custom--label--transform, none);
}

.wp-block-lanternwp-how-it-fits:has(+ .lanternwp-fit-scale--product) {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: 0;
}

.wp-block-lanternwp-how-it-fits + .wp-block-lanternwp-fit-scale.lanternwp-fit-scale--product {
  margin-block-start: var(--wp--preset--spacing--20);
  padding-block-start: 0;
  border-block-start: 0;

  & .lanternwp-fit-scale__title {
    display: none;
  }
}

.lanternwp-fit-scale__count {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

.lanternwp-fit-scale__track {
  position: relative;
  block-size: 4px;
  background: var(--wp--preset--color--surface-2);
}

.lanternwp-fit-scale__marker {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--lanternwp-fit, 0.5) * (100% - var(--lanternwp-fit-marker)));
  inline-size: var(--lanternwp-fit-marker);
  block-size: var(--lanternwp-fit-marker);
  border-radius: var(--wp--custom--radius--badge);
  background: var(--wp--preset--color--contrast);
  translate: 0 -50%;
}

.lanternwp-fit-scale__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--custom--label--family, inherit);
  font-size: var(--wp--preset--font-size--2-xs);
  letter-spacing: var(--wp--custom--label--tracking, normal);
  text-transform: var(--wp--custom--label--transform, none);
}

.lanternwp-fit-field {
  container-type: inline-size;
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  border: 0;

  & legend {
    margin-block-end: var(--wp--preset--spacing--20);
    padding: 0;
    font-weight: var(--wp--custom--weight--semibold);

    & span {
      color: var(--wp--preset--color--muted);
      font-weight: var(--wp--custom--weight--regular);
    }
  }
}

.lanternwp-fit-field__options {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

@container (min-width: 26rem) {
  .lanternwp-fit-field__options {
    flex-direction: row;
    gap: var(--wp--preset--spacing--40);
  }
}

.lanternwp-fit-field__option {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  min-block-size: 1.5rem;
}

.lanternwp-review-fit {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}