// 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-background-color-off:      $list-background-color !default;
$switch-ios-border-color-off:          grayscale(lighten($list-border-color, 11%)) !default;

$switch-ios-background-color-on:       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-background-color:   $switch-ios-background-color-off !default;

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


ion-switch {

  [item-right].media-switch {
    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-border-color-off;
    will-change: background-color;
    transition: background-color $switch-ios-transition-duration;
  }

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


  // 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-background-color-off;

    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-background-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 110ms 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) {

  ion-switch[#{$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);

}