// iOS Switch
// --------------------------------------------------

$switch-ios-width:                     51px !default;
$switch-ios-height:                    32px !default;
$switch-ios-border-width:              2px !default;
$switch-ios-border-radius:             $switch-ios-height / 2 !default;

$switch-ios-off-bg-color:              $list-background-color !default;
$switch-ios-off-border-color:          lighten($list-border-color, 10%) !default;

$switch-ios-on-bg-color:               color(primary) !default;

$switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height:             $switch-ios-handle-width !default;
$switch-ios-handle-radius:             $switch-ios-handle-height / 2 !default;
$switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;

$switch-ios-handle-bg-color:           $switch-ios-off-bg-color !default;

$switch-ios-transition-duration:       300ms !default;


.switch[mode=ios] {

  .item-media {
    margin: 0;
    padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
  }


  // Switch Background Track
  // -----------------------------------------

  .switch-icon {
    // bg track, when not checked
    position: relative;
    width: $switch-ios-width;
    height: $switch-ios-height;
    border-radius: $switch-ios-border-radius;
    pointer-events: none;

    background-color: $switch-ios-off-border-color;
    will-change: background-color;
    transition: background-color $switch-ios-transition-duration;
  }

  &[aria-checked=true] .switch-icon {
    // bg track, when checked
    background-color: $switch-ios-on-bg-color;
  }


  // Switch Background Track, Inner Oval
  // -----------------------------------------

  .switch-icon:before {
    // inner bg track's oval, when not checked
    content: '';
    position: absolute;
    top: $switch-ios-border-width;
    right: $switch-ios-border-width;
    left: $switch-ios-border-width;
    bottom: $switch-ios-border-width;

    border-radius: $switch-ios-border-radius;
    background-color: $switch-ios-off-bg-color;

    will-change: transform;
    transform: scale3d(1, 1, 1);
    transition: transform $switch-ios-transition-duration;
  }

  &[aria-checked=true] .switch-icon:before,
  .activated .switch-icon:before {
    // inner bg track's oval, when checked
    transform: scale3d(0, 0, 0);
  }


  // Switch Knob
  // -----------------------------------------

  .switch-icon:after {
    // knob, when not checked
    content: '';
    position: absolute;
    top: $switch-ios-border-width;
    left: $switch-ios-border-width;

    width: $switch-ios-handle-width;
    height: $switch-ios-handle-height;

    border-radius: $switch-ios-handle-radius;
    background-color: $switch-ios-handle-bg-color;
    box-shadow: $switch-ios-handle-box-shadow;

    will-change: transform, width, left;
    transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 120ms ease-in-out 80ms;
  }

  &[aria-checked=true] .switch-icon:after {
    // knob, when checked
    transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
  }

  .activated .switch-icon:after {
    // when pressing down on the switch and NOT checked
    // then make the knob wider
    width: $switch-ios-handle-width + 6;
  }

  &[aria-checked=true] .activated .switch-icon:after {
    // when pressing down on the switch and IS checked
    // make the knob wider and move it left a bit
    left: $switch-ios-border-width - 6;
  }

}


// iOS Switch Color Mixin
// --------------------------------------------------

@mixin switch-theme-ios($color-name, $bg-on) {

  .switch[mode=ios][#{$color-name}] {

    &[aria-checked=true] .switch-icon {
      background-color: $bg-on;
    }

  }

}


// Generate iOS Switch Auxiliary Colors
// --------------------------------------------------

@each $color-name, $value in auxiliary-colors() {

  @include switch-theme-ios($color-name, $value);

}