.carousel-indicator__dots {
  visibility: visible;
}

.carousel-indicator__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  border-radius: 999px;
}

.carousel-indicator__dot::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: rgba(var(--color-text)/ 0.2);
  transition: width 0.3s ease;
}

.carousel-indicator__dot.active,
.carousel-indicator__dot.active::before {
  width: 30px;
}

.carousel-indicator__dot.active::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  border-radius: 999px;
  background-color: rgba(var(--color-text));
  height: 5px;
  width: 50%;
}