.list {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  gap: var(--grapes-unit-12);
}

.list li {
  position: relative;
  background: var(--grapes-color-content-disabled);
  width: var(--grapes-unit-8);
  aspect-ratio: 1;
  border-radius: 50%;

  &::after {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--grapes-color-content-selected);
    content: '';
    display: block;
    opacity: 0;
    transform: scale(0);
    transition-duration: var(--grapes-transition-duration);
    transition-timing-function: var(--grapes-transition-timing-function);
    transition-property: opacity, transform;
  }

  &[data-active='true']::after {
    transform: scale(1);
    opacity: 1;
  }
}