.inlineList {
  display: flex;
  gap: var(--inlineListGap, 0.5em);
  align-items: center;
  padding-inline-start: 0; // in the case of ul.inlineList
}
.inlineList--wrap {
  flex-wrap: wrap;
}
.inlineList__item {
  margin-block-start: 0;
  list-style: none;
}
@property --inlineListSep {
  syntax: "*";
  inherits: true;
  initial-value: "|";
}

.inlineList--pipe {
  .inlineList__item:has( ~ .inlineList__item) {
    &:after {
      content: var(--inlineListSep);
      margin-inline-start: var(--inlineListGap, 0.5em);
    }
  }
}