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

  border: none;
  border-radius: 14px;
  color: transparent;
  padding: 2.3px 0px;

  background:  linear-gradient(to right, #0e1011, #0e1011);
  border: 1px solid #0a0b0c;
  &:disabled {
    background-color: $insensitive_bg_color;
  }

  &:backdrop {
    background-color: $backdrop_bg_color;
    transition: $backdrop_transition;

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


  &:active,
  &:checked {
    slider{
      background:  linear-gradient(to right, #00a6c9, #00e4ce);
    }
    &:backdrop {
      slider {
        &:backdrop {
          box-shadow:none;
          background:  linear-gradient(to right, darken(#00a6c9, 10%), darken(#00e4ce, 10%));
          border:none;
        }
      }
    }
  }

  // Handle
  slider {
    padding:2px;
    margin: 0 2.3px;
    min-width: 12px;
    min-height: 12px;

    border-radius: 100%;
    transition: $button_transition;
    background-color: lighten(#0e1011, 5%);

    &: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;
      }
    }
  }
}