.root {
  --fake-translate: calc(8px);
  --dot-width: calc(10px + 8px);
  --start-from: 0;
  --length: 50;
  --count: 8;
  --center: calc((var(--length) * var(--dot-width)) / 2);

  transform:
    translateX(
      calc(var(--center) - (var(--dot-width) * var(--count) / 2) - (var(--dot-width) * var(--start-from)))
    );

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2rem;

  transition: 0.25s ease-out transform;
}

.arrow {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 0.5rem;

  transition: 0.25s ease-in-out opacity;
}

.right {
  right: 0.5rem;
  left: initial;
}

.arrow.arrow-hidden {
  opacity: 0 !important;
}

.dot {
  cursor: var(--custom-cursor, pointer);

  flex: none;

  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;

  background: #DFE1E5;

  transition: 0.25s ease-in-out opacity;
}

.medium {
  width: 6px;
  height: 6px;
}

.small {
  width: 4px;
  height: 4px;
}

.invisible {
  pointer-events: none;
  opacity: 0;
}

.active {
  background: #8F77FF;
}