$option-count: 3;
  $padding: 6px;

  .switch-handle {
    position: absolute;
    z-index: -1;
    width: calc((100% - ($option-count - 1) * $gap) / $option-count + $padding);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--switch-theme-thumb-color);
    pointer-events: none;
    transition: left 0.4s ease-in-out;
  }

  @for $i from 0 to $option-count {
    .theme-#{$i}:checked ~ .switch-handle {
      left: calc(#{$i} * (100% / $option-count) - $padding / 2);
    }
  }

  $option-count: 3;
  $padding: 6px;

  .switch-handle {
    position: absolute;
    z-index: -1;
    width: calc((100% - ($option-count - 1) * $gap) / $option-count + $padding);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--switch-theme-thumb-color);
    pointer-events: none;
    transition: left 0.4s ease-in-out;
  }

  @for $i from 0 to $option-count {
    .theme-#{$i}:checked ~ .switch-handle {
      left: calc(#{$i} * (100% / $option-count) - $padding / 2);
    }
  }