.theme-carousel-indicator__progress { position: relative; width: 100%; height: 3px; } .theme-carousel-indicator__progress::before { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: calc(calc(var(--current-index) + 1) / var(--indicator-size) * 100%); height: 100%; content: ""; background-color: rgb(var(--color-text)); border-radius: 3px; transition: 0.3s ease-in-out; } .theme-carousel-indicator__progress::after { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; content: ""; background-color: rgba(var(--color-text), 0.2); border-radius: 3px; }