@use '../colors';

.root {
  display: flex;
  position: relative;
  overflow: hidden;
  &.size-s {
    --dot-regular-size: 4;
    --dot-active-size: 4;
    --dot-distant-size: 3;
  }
  &.size-m {
    --dot-regular-size: 6;
    --dot-active-size: 6;
    --dot-distant-size: 4;
  }
  &.size-l {
    --dot-regular-size: 8;
    --dot-active-size: 12;
    --dot-distant-size: 4;
  }
}

.item {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  transition: left 0.3s;
  --dot-size: var(--dot-regular-size);
  cursor: pointer;
  .size-s & {
    width: 8px;
    height: 8px;
  }
  &.active {
    --dot-size: var(--dot-active-size);
  }
  &.distant {
    --dot-size: var(--dot-distant-size);
  }
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: colors.$basic-gray12;

    // используем 10 чтобы проще считать коэффициенты масштабирования
    // ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
    width: 10px;
    height: 10px;

    // используем scale() чтобы плавное изменение размера выглядело нормально
    transform: translate3d(-50%, -50%, 0) scale(calc(var(--dot-size) / 10));
    transition:
      transform 0.3s,
      background 0.3s;
  }
  &.active::after {
    background: colors.$basic-gray38;
  }
}