@use "sass:math";
@use "sb-element/core/spacing";
@use "sb-element/core/transitioning";
@use "sb-element/core/border";
/*****************************************************************************
Toggle-Switch / Style
******************************************************************************/

// SIZE
@mixin toggle-switch-size($size, $value) {

  $height: $value;
  $width: calc(2 * $height);
  $diameter: calc(math.div(math.round(math.div(2, 3)*100), 100) * $height);
  $padding: calc(($height - $diameter) / 2);
  $innerwidth: calc($width - 2 * $padding);

  &.sb--#{$size} {
    width: $width;
    height: $value;
    @include border.radius($size);

    div {
      top: calc($padding - 2px);
      left: calc($padding - 2px);
      width: $diameter;
      height: $diameter;
      @include border.radius(calc($diameter / 2));
    }

    &.off div {
      transform: translateX(0);
    }
    &.on div {
      transform: translateX(calc($innerwidth - $diameter));
    }
  }
}

// ROOT
.sb-toggle-switch {
  cursor: pointer;
  position: relative;
  @include transitioning.ease(300ms, background);

  div {
    position: absolute;
    @include transitioning.ease(300ms, transform, background);
  }

  &.disabled {cursor: not-allowed;}

  @include spacing.for-each-size using ($size, $value) {
    @include toggle-switch-size($size, $value);
  }
}