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

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

$switch-ios-off-bg-color:             #fff !default;
$switch-ios-off-border-color:         #e6e6e6 !default;

$switch-ios-on-bg-color:              get-color(primary, base) !default;
$switch-ios-on-border-color:          $switch-ios-on-bg-color !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-width !default;
$switch-ios-handle-dragging-bg-color: darken(#fff, 5%) !default;
$switch-ios-handle-box-shadow:        0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;

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

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


.switch[mode="ios"] {

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

  .switch-icon {
    position: relative;
    width: $switch-ios-width;
    height: $switch-ios-height;
    border-radius: $switch-ios-border-radius;
    pointer-events: none;
    background-color: $switch-ios-off-bg-color;
    transition: background-color $switch-ios-transition-duration;
  }

  .switch-track {
    background-color: $switch-ios-off-bg-color;
    border: solid $switch-ios-border-width $switch-ios-off-border-color;
    border-radius: $switch-ios-border-radius;
    width: 100%;
    height: 100%;

    will-change: border-width, opacity;
    transition-property: border-width, opacity;
    transition-duration: $switch-ios-transition-duration + 50ms;
    transition-delay: 100ms;
  }

  .switch-handle {
    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-off-bg-color;
    box-shadow: $switch-ios-handle-box-shadow;

    will-change: width, left, transform;

    transition-property: width, left, transform;
    transition-duration: $switch-ios-transition-duration;
  }

  .activated .switch-handle {
    width: $switch-ios-handle-width + 6;
  }

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

  .activated .switch-track,
  &[aria-checked=true] .switch-track {
    border-width: $switch-ios-height / 2;
  }

  &[aria-checked=true] .switch-track {
    opacity: 0;
  }

  &[aria-checked=true] .switch-handle {
    background-color: $switch-ios-handle-on-bg-color;
    transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
  }

  &[aria-checked=true] .activated .switch-handle {
    left: $switch-ios-border-width - 6;
  }

}