/**********
 * Switch *
 **********/
 $_switch_bg: if($variant == 'light', transparentize(black, 0.9), lighten($base_color, 10%));
 $_switch_slider_bg:$base_color;

 switch {
  font-size: 1px;
  min-width: 45px;
  min-height: 27px;
  background-size: 45px 27px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg"));

  &:disabled {
    background-image: -gtk-scaled(url("../assets/switch-insensitive.svg"),url("../assets/switch-insensitive.svg"));
  }

  &, & slider {
    outline-color: transparent;
    color: transparent;
    border: none;
    box-shadow: none; 
  }
  
  &:checked {
    background-image: -gtk-scaled(url("../assets/switch-on.svg"),url("../assets/switch-on.svg"));
    slider {
      background-image: -gtk-scaled(url("../assets/switch-slider-on.svg"),url("../assets/switch-slider-on@2.png"));
    }
  }

  // Handle
  slider {
    min-width: 1px;
    min-height: 1px;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
    background-image: -gtk-scaled(url("../assets/switch-slider-off.svg"),url("../assets/switch-slider-off@2.png"));
  }
}