Pure HTML Stepper Изменение цвета линии ⇐ CSS

[Anonymous]

У меня есть чистый HTML-степпер. Это работает, если «активный» класс находится во 2-м, 3-м и т. д. элементе. Но у меня проблема, если «активный» класс находится только в 1-м классе. Как мне сделать это, если «активный» класс находится в первом классе, тогда ни одна линия не будет окрашена? Если активен только первый степпер, то ни одна линия не должна менять цвет, должен быть окрашен только цвет перед степпером с активным классом. Благодарю за всю помощь, которую могу получить.
Ниже приведен снимок экрана:
[img]https://i.sstatic.net /Kn1tpfDG.png[/img]

HTML:

• Step 1
  Authentication started
• Step 2
  Authentication successful
• Step 3
  Authorization complete
• Step 4
  Finalizing process
• Step 5
  Process complete

CSS:
:root {
--circle-size: clamp(1.5rem, 5vw, 3rem);
--spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.stepper {
display: flex;
}

.stepper-item {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;

&::before {
--size: 3rem;
content: "";
display: block;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 0.4rem solid green;
background-color: transparent;
opacity: 0.5;
margin: 0 auto 1rem;
}

&:not(:last-child) {
&::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
order: -1;
}
}
}

.stepper-title {
font-weight: bold;
font-size: clamp(1rem, 4vw, 1.25rem);
margin-bottom: 0.5rem;
color: #448b62;
}

.stepper-desc {
color: grey;
font-size: clamp(0.85rem, 2vw, 1rem);
padding-left: var(--spacing);
padding-right: var(--spacing);
}

/*** Non-demo CSS ***/

.wrapper {
max-width: 100%;
margin: 2rem auto 0;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

.stepper-item::before {
--size: 3rem;
content: attr(data-step); /* Use a custom attribute for step number */
display: flex;
align-items: center;
justify-content: center;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 4% solid rgb(0, 64, 255);
opacity: 0.5;
margin: 0 auto 1rem;
font-weight: bold;
font-size: 1.25rem;
color: #448b62;
/* Font customization */
font-family: 'Poppins', sans-serif; /* Change to any desired font */
font-weight: 700; /* Bold */
font-size: 1.5rem; /* Adjust size */
letter-spacing: 0.05rem; /* Optional spacing */
}

.stepper-item.active::before {
opacity: 1;
border: 0.4rem solid red;
color: red;
}

.stepper-item.active .stepper-title {
color: red;
}

.stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
}

/* Style the line between consecutive active items */
.stepper-item.active + .active:before {
opacity: 1;
}

.stepper-item:not(:last-child)::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
opacity: 0.5;
order: -1;
}

/* Color line red only when current item is active AND next item is active */
.stepper-item:not(:first-child).active:not(:last-child):has(+ .active)::after {
background-color: red;
opacity: 1;
}

/* Special case for first item - only color if next is active */
.stepper-item:first-child.active:has(+ .active)::after {
background-color: rgb(255, 0, 0);
opacity: 1;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... f-the-line