/* List item — auto-loaded for the list-item snippet (site/snippets/ui/list-item.php).
   Only what the rows share: the row, its vertical spacing, the optical centring
   and the rule below. Side padding, mark size, typeface and behaviour belong to
   the caller. */

.list-item {
  display: flex;
  align-items: flex-start; /* mark and end sit on the first line, see below */
  gap: var(--space-2xs);
  width: 100%; /* a button row (a filter group's toggle) fills its column too */
  /* Optical centring: the label moves down by --optical-shift and the row
     gives back half of it above and below, so its height stays the same. */
  padding-block: calc(var(--space-2xs) - var(--optical-shift) / 2);
  font-size: var(--fs-subheading); /* a default; a caller may override it */
  text-align: left; /* a button centres its text otherwise */
  border-bottom: var(--border);
}
.list-item--thin {
  border-bottom: var(--border-thin);
}
.list-item--flush {
  border-bottom: 0;
}

.list-item__label {
  min-width: 0;
  padding-top: var(--optical-shift);
}
/* Mark and end are centred on the label's first line, shift included: in a
   one-line row that is the middle of the row. */
.list-item__mark,
.list-item__end {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(1lh + var(--optical-shift));
}
.list-item__end {
  margin-left: auto;
}
/* The mark in the middle of the whole row, however many lines the label has. */
.list-item--mark-middle > .list-item__mark {
  align-self: center;
  height: auto;
}