Help with math in SCSS

<div class="tri-switch">
  {#each themes as themeCurrent, i}
    <input
            id="theme-{themeCurrent}"
            name="theme-switch"
            class="theme-{i}"
            checked={$theme === themeCurrent}
            value={themeCurrent}
            type="radio"
            bind:group={$theme}/>
  {/each}

  <div class="switch-labels">
    <label for="theme-auto">
      <ThemeAuto checked={$theme === "auto"}/>
    </label>
    <label for="theme-light">
      <ThemeLight checked={$theme === "light"}/>
    </label>
    <label for="theme-dark">
      <ThemeDark checked={$theme === "dark"}/>
    </label>
  </div>

  <div class="switch-handle"></div>
</div>

<style lang="scss">

<div class="tri-switch">
  {#each themes as themeCurrent, i}
    <input
            id="theme-{themeCurrent}"
            name="theme-switch"
            class="theme-{i}"
            checked={$theme === themeCurrent}
            value={themeCurrent}
            type="radio"
            bind:group={$theme}/>
  {/each}

  <div class="switch-labels">
    <label for="theme-auto">
      <ThemeAuto checked={$theme === "auto"}/>
    </label>
    <label for="theme-light">
      <ThemeLight checked={$theme === "light"}/>
    </label>
    <label for="theme-dark">
      <ThemeDark checked={$theme === "dark"}/>
    </label>
  </div>

  <div class="switch-handle"></div>
</div>

<style lang="scss">

  .tri-switch {
    display: flex;
    align-items: center;
    position: relative;
  }

  input[type="radio"] {
    display: none;
  }

  .switch-labels {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;

    label {
      flex: 1;
      width: 30px;
      aspect-ratio: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  $option-count: 3;
  $handle-width: calc(100% / $option-count);
  $portion: 100% / $option-count;

  .switch-handle {
    position: absolute;
    z-index: -1;
    width: calc(100% / $option-count);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--switch-theme-thumb-color);
    pointer-events: none;
  }

  @for $i from 0 to $option-count {
    .theme-#{$i}:checked ~ .switch-handle {
      left: calc(#{$i} * $portion + ($portion - $handle-width));
    }
  }

  .tri-switch {
    display: flex;
    align-items: center;
    position: relative;
  }

  input[type="radio"] {
    display: none;
  }

  .switch-labels {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;

    label {
      flex: 1;
      width: 30px;
      aspect-ratio: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  $option-count: 3;
  $handle-width: calc(100% / $option-count);
  $portion: 100% / $option-count;

  .switch-handle {
    position: absolute;
    z-index: -1;
    width: calc(100% / $option-count);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--switch-theme-thumb-color);
    pointer-events: none;
  }

  @for $i from 0 to $option-count {
    .theme-#{$i}:checked ~ .switch-handle {
      left: calc(#{$i} * $portion + ($portion - $handle-width));
    }
  }

</style>

</style>