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

 switch {
  font-size: 1px;
  font-weight: bold;
  outline-offset: -4px;
  transition: all 200ms ease-in;

  border: none;
  border-radius: 14px;
  color: transparent;
  padding: 2px;

  background-color:$_switch_bg;
  box-shadow: inset 0 0 0 1px transparentize(black, 0.95), 0px 1px $bottom_highlight;

  &:disabled {
    background-color: $insensitive_bg_color;
  }

  &:backdrop {
    background-color: darken($_switch_bg, 7%);
    transition: $backdrop_transition;

    &:disabled { background-color: $insensitive_bg_color; }
  }


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

    &:backdrop {
      background-color: $lime;

      slider {
        &:backdrop {
          box-shadow:none;
          background-color:transparentize($base_color, 0.1);
          border:none;
        }
      }
    }
  }

  // Handle
  slider {
    padding:2px;
    min-width: 16px;
    min-height: 16px;

    border-radius: 100%;
    transition: $button_transition;
    background-color: $_switch_slider_bg;

    box-shadow: 0 2px 2px transparentize(black, 0.8),
                0 1px 2px transparentize(black, 0.8);

    &:backdrop {
      padding:2px;
      box-shadow:none;
      background-color: $base_color;
    }
  }

  &:checked slider { }

  &:backdrop {
  }

  row:selected & {
    @if $variant == 'light' {
      box-shadow: none;
      border-color: $selected_borders_color;

      &:backdrop { border-color: $selected_borders_color; }

      &.slider:dir(rtl) { border-left-color: $borders_color; }
      &.slider:dir(ltr) { border-right-color: $borders_color; }

      &.slider { &:checked, & { border-color: $selected_borders_color; } }
    }
  }

  // Trough
  trough {

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

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