/* Switches */

// these are equal to the size of the SVG assets
$switch_height: 24px;
$switch_width: 52px;

.toggle-switch {
  color: $fg_color;
  height: $switch_height;
  width: $switch_width;
  background-size: contain;
  background-image: url("assets/toggle-off.svg");
  background-color: transparent;

  &:checked { background-image: url("assets/toggle-on.svg"); }

  .popup-menu-item:hover &,
  .popup-menu-item:selected & {
    background-image: url("assets/toggle-off.svg");

    &:checked {
      background-image: url("assets/toggle-on.svg");
      box-shadow: inset 0 0 0 100px rgba(white, 0.35);
    }
  }

  .handle {
    margin: 0;
    width: 0;
    height: 0;
    background: none;
    box-shadow: none;
  }

  &:checked {
    background-color: transparent;
    color: transparent;

    &:hover {
    background-color: transparent;
    color: transparent;
    }

    .handle {
      background: none;
    }
  }
}
