$listVariants: (
    'arrowed': '>',
    'dotted': '\2219',
    'dashed': '-',
    'piped': '|',
    'slashed': '/',
    'tagged': '#',
    'csv': ',',
    'csv-amp': ','
);

// %listParent {
//     display: inline-flex;
// }
%listChild {
    color: var(--list-before-color);
    font-size: var(--list-before-size);
    position: relative;
    margin: 0 var(--size-s);
}

@each $listType, $listSeparator in $listVariants {
    // .list--#{$listType} {
    //     @extend %listParent;
    // }
    .list--#{$listType} > * + *:not(.list--disabled)::before {
        @extend %listChild;
    }
    .list--#{$listType} > * + *:not(.list--disabled)::before { content: $listSeparator; }
}

    .list--tagged > * + *:not(.list--disabled)::before { margin-right: 0; }
    .list--csv-amp > * + *:not(.list--disabled):last-child::before { content: '&'; }
    .list--csv-amp > * + *:not(.list--disabled):not(:last-child)::before,
    .list--csv > * + *:not(.list--disabled)::before { margin-left: 0; }