/*
 * The Product Dimensions block (src/Blocks/Dimensions.php), as the configure product page board draws its dimensions
 * band: a full-width `surface` band, the theme's section spacing above it and inside it, holding the wide column; the
 * heading (`2-xl`, the chosen size after it in `base` and `muted`) and the unit switch on one line; under them the
 * drawing on a `base` panel (`radius.panel`) beside the table, 7 to 5, from 48rem; on a phone the drawing above the
 * table. The table: a row a length, its name in `muted`, the value in the unit shown in semibold and the other unit in
 * `muted`, lines in `border-subtle`, figures in tabular numbers. The boxes under it, a line each. The switch is a
 * control (docs/design-tokens.html#roles), as a size guide's.
 */
.wp-block-lanternwp-dimensions {
  margin-block-start: var(--wp--custom--layout--section);
  padding-block: var(--wp--custom--layout--section);
  padding-inline: var(--wp--custom--layout--gutter);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}

/*
 * Full width on the product page (Block Hooks place it so), where the template's layout sets its children's margins
 * to the group's gap (0) after this sheet: the section space above it again.
 */
.wp-block-lanternwp-dimensions.alignfull {
  margin-block-start: var(--wp--custom--layout--section);
}

/* The link beside the price (`display` link): a plain link in the price's line, not a band. */
.wp-block-lanternwp-dimensions.is-link {
  margin-block: 0;
  padding: 0;
  background: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);

  & a {
    color: inherit;
  }
}

.lanternwp-dimensions__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--60);
  max-inline-size: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

.lanternwp-dimensions__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
}

.lanternwp-dimensions__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--2-xl);
}

.lanternwp-dimensions__chosen {
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--muted);
}

.lanternwp-dimensions__view:not([hidden]) {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-items: center;

  @media (width >= 48rem) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--wp--preset--spacing--80);
  }
}

.lanternwp-dimensions__drawing {
  @media (width >= 48rem) {
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--wp--custom--radius--panel);
    background: var(--wp--preset--color--base);
  }
}

.lanternwp-dimensions__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 22rem;
}

.lanternwp-dimensions__body {
  fill: color-mix(in srgb, currentcolor 4%, transparent);
  stroke: currentcolor;
  stroke-width: 1.5;
}

.lanternwp-dimensions__seat {
  stroke: currentcolor;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.lanternwp-dimensions__arrow {
  stroke: currentcolor;
  stroke-width: 1.2;
}

.lanternwp-dimensions__ground {
  stroke: var(--wp--preset--color--border-strong);
  stroke-width: 1;
}

.lanternwp-dimensions__label {
  /* Its size is the drawing's (font-size in the SVG's own units), so it scales with the drawing. */
  fill: currentcolor;
  font-weight: var(--wp--custom--weight--semibold);
  font-variant-numeric: tabular-nums;
}

/* Every length in both units; the block's class shows one, the table's last column the other. */
.wp-block-lanternwp-dimensions.is-in .lanternwp-dimensions__cm,
.wp-block-lanternwp-dimensions.is-cm .lanternwp-dimensions__in {
  display: none;
}

.lanternwp-dimensions__table {
  inline-size: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
  font-variant-numeric: tabular-nums;

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

  & th {
    padding-inline-end: var(--wp--preset--spacing--40);
    color: var(--wp--preset--color--muted);
    font-weight: var(--wp--custom--weight--medium);
    text-align: start;
  }

  & td {
    font-weight: var(--wp--custom--weight--semibold);
    text-align: end;
  }

  & td.lanternwp-dimensions__other {
    padding-inline-start: var(--wp--preset--spacing--40);
    color: var(--wp--preset--color--muted);
    font-weight: var(--wp--custom--weight--regular);
    white-space: nowrap;
  }
}

.lanternwp-dimensions__boxes {
  margin-block-start: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--sm);

  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    padding-block: var(--wp--preset--spacing--20);
    font-variant-numeric: tabular-nums;
  }
}

.lanternwp-dimensions__subtitle {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
}

.lanternwp-dimensions__box {
  color: var(--wp--preset--color--muted);
}