/**********
 * Switch *
 **********/
switch {
  font-size: 1px;
  min-width: 40px;
  min-height: 25px;
  background-color: transparent;
  background-size: 40px 24px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: -gtk-scaled(url("../assets/switch-off.svg"),url("../assets/switch-off.svg"));
  transition: $button_transition;

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

  &, & slider {
    outline-color: transparent;
    color: transparent;
    border: none;
    box-shadow: none; 
  }
  
  // &:active,
  &: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"));
    }
    &:disabled {
      background-image: -gtk-scaled(url("../assets/switch-on-insensitive.svg"),url("../assets/switch-on-insensitive.svg"));
      slider {
        background-image: -gtk-scaled(url("../assets/switch-slider-on-insensitive.svg"),url("../assets/switch-slider-on-insensitive@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"));
  }

  // Trough
  trough {

    &:active,
    &:checked {
      background-color: $selected_bg_color;

      &:backdrop {
        background-color: $backdrop_selected_bg_color;
      }
    }
  }
}
