.root {
  --index: 0;
  .slider {
    --track-height: 8px;
    --point-size: 14px;
  }

  .handle {
    background: var(--track-bg);
    background-size: 5000%;
    background-position-x: calc(100% * var(--value));
    border: 2px solid var(--color-neutral-100);
  }
}

.position {
  --size: 16px;
  --dot-size: 8px;
  position: relative;
  border: 1px solid var(--color-neutral-100);
  width: var(--size);
  height: var(--size);

  &.big {
    --size: 72px;
    --dot-size: 16px;

    border-width: 2px;
    border-color: var(--color-neutral-40);
    &::before {
      background: var(--color-neutral-100);
    }
  }

  &::before {
    content: '';
    position: absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--color-accent-30);
  }

  &.circle {
    --angle: 0deg;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &::before {
      top: calc(50% - var(--dot-size) / 2);
      left: calc(50% - var(--dot-size) / 2);
      transform: rotate(var(--angle)) translateX(calc(var(--size) / 2));
    }
  }

  &.square {
    --top: 50%;
    --left: 50%;
    border-radius: 2px;
    &.big {
      border-radius: 8px;
    }
    &::before {
      top: calc(var(--top) - var(--dot-size) / 2);
      left: calc(var(--left) - var(--dot-size) / 2);
    }
  }
}