// Switch
// --------------------------------------------------

$switch-padding:                   0 15px !default;
$switch-width:                     52px !default;
$switch-height:                    32px !default;
$switch-border-width:              2px !default;
$switch-slider-off-background:     #ccc !default;
$switch-slider-on-background:      #387ef5 !default;
$switch-toggle-on-background:      #fff !default;


.switch .item-media {
  padding: $switch-padding;
}

.switch-toggle {
  position: relative;

  width: $switch-width;
  height: $switch-height;
  border-radius: $switch-height / 2;

  background: $switch-slider-off-background;
}

.switch-toggle:before {
  position: absolute;
  left: $switch-border-width;
  top: $switch-border-width;

  width: $switch-width - ($switch-border-width * 2);
  height: $switch-height - ($switch-border-width * 2);
  border-radius: $switch-height / 2;

  transition-duration: 300ms;
  content: ' ';
}

.switch[aria-checked=true] .switch-toggle {
  background: $switch-slider-on-background;
}

.switch .switch-toggle:after {
  position: absolute;
  left: $switch-border-width;
  top: $switch-border-width;

  width: $switch-height - ($switch-border-width * 2);
  height: $switch-height - ($switch-border-width * 2);

  border-radius: $switch-height - ($switch-border-width * 2);
  background: $switch-toggle-on-background;

  transition-duration: 300ms;

  content: ' ';
}

.switch[aria-checked=true] .switch-toggle:after {
  transform: translate3d(20px,0,0);
}

.switch[aria-disabled=true] {
  pointer-events: none;
  opacity: 0.5;
  color: gray;
}

.switch .item-media,
.switch .item-content {
  pointer-events: none;
}