Пользовательский степпер Angular 16 ⇐ CSS

[Anonymous]

Я создал собственный шаговый компонент Angular:

Я бы отобразил тонкую горизонтальную полосу, которая начинается непосредственно перед содержимым шага (например, с размером 80 пикселей), содержит номер шага и заканчивается сразу после содержимого шага (например, с размером 80 пикселей). Я также хочу, чтобы, если я нахожусь на шаге 1, полоса перед этим меняла цвет. Когда я нахожусь на шаге 2, полоса между шагами 1 и 2 меняет цвет. Когда я дохожу до последнего шага, полоса перед последним шагом просто меняет цвет.
{{шаг.метка}} {{я + 1}} {{я + 1}} {{я + 1}} ``` .stepper-прогресс { дисплей: гибкий; оправдание-содержание: пространство между; выровнять-элементы: по центру; маржа: 0 авто; высота: 80 пикселей; } .stepper-контейнер { дисплей: гибкий; гибкий: 1; оправдание-содержание: пространство между; выровнять-элементы: по центру; } .step-content{ дисплей: встроенный гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; положение: относительное; } .step-default { ширина: 32 пикселей; высота: 32 пикселей; отступы: 9 пикселей 11 пикселей 11 пикселей; граница: сплошная 4 пикселя #f5f6fa; box-shadow: inset 0px 0px 0px 1px $grey-80; размер коробки: граница-коробка; цвет фона: #f5f6fa; радиус границы: 48 пикселей; семейство шрифтов: «Вековая готика», без засечек; размер шрифта: 17 пикселей; начертание шрифта: жирный; шрифт-стретч: нормальный; стиль шрифта: нормальный; высота строки: 1,41; межбуквенный интервал: нормальный; выравнивание текста: по центру; цвет: $серый-80; } .step-активный{ ширина: 40 пикселей; высота: 40 пикселей; поле: 0 пикселей; отступы: 13 пикселей, 15 пикселей, 15 пикселей; радиус границы: 48 пикселей; цвет фона: $вторичный-зеленый; семейство шрифтов: «Вековая готика», без засечек; размер шрифта: 24 пикселей; начертание шрифта: жирный; шрифт-стретч: нормальный; стиль шрифта: нормальный; высота строки: 1,33; межбуквенный интервал: нормальный; выравнивание текста: по центру; цвет: $blue-primary; } .step-complet{ ширина: 40 пикселей; высота: 40 пикселей; поле: 0 пикселей; отступы: 13 пикселей, 15 пикселей, 15 пикселей; радиус границы: 48 пикселей; цвет фона: $blue-primary; семейство шрифтов: «Вековая готика», без засечек; размер шрифта: 24 пикселей; начертание шрифта: жирный; шрифт-стретч: нормальный; стиль шрифта: нормальный; высота строки: 1,33; межбуквенный интервал: нормальный; выравнивание текста: по центру; цвет: белый; } .step-информация{ дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; }```