/* ==========================================================================
   Switchers
   ========================================================================== */

.switcher {
  background: rgba($primary, .02);
  border: 1px solid rgba($primary, .12);
  border-radius: 18px;
  cursor: pointer;
  height: 36px;
  outline: none;
  position: relative;
  transition: background .333s;
  width: 60px;

  &::before:not(.disabled) {
    background: transparent;
    border-radius: 18px;
    content: " ";
    height: 100%;
    position: absolute;
    transition: background .333s;
    width: 100%;
  }

  &:hover::before:not(.disabled) {
    background: rgba($primary, .05);
  }

  &.disabled {
    cursor: not-allowed;
    opacity: .6;
  }
}

.switcher-control {
  background: $white;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba($primary, .1), 0 2px 4px rgba($primary, .05), 0 2px 8px rgba($primary, .1);
  height: 28px;
  left: 0;
  margin: 3px 3px 0;
  outline: none;
  position: absolute;
  transition: left .333s;
  width: 28px;

  &:hover {
    box-shadow: 0 1px 4px rgba($primary, .15), 0 2px 4px rgba($primary, .1), 0 2px 8px rgba($primary, .15);
  }
}

.switcher-control-icon {
  display: none;
}

/* Switcher - On - Sizes -> Large
   ========================================================================== */

.switcher.switcher-lg {
  border-radius: 24px;
  height: 48px;
  width: 72px;

  &::before {
    border-radius: 24px;
  }
}

.switcher-lg .switcher-control {
  height: 38px;
  margin: 4px 4px 0;
  width: 38px;
}

/* Switcher - On - Sizes -> Small
   ========================================================================== */

.switcher.switcher-sm {
  border-radius: 12px;
  height: 24px;
  width: 42px;

  &::before {
    border-radius: 12px;
  }
}

.switcher-sm .switcher-control {
  height: 18px;
  margin: 2px 2px 0;
  width: 18px;
}

/* Switcher - On
   ========================================================================== */

.switcher-on {
  background: $accent;
}

.switcher-on .switcher-control {
  left: calc(100% - 34px);
}

.switcher-on.switcher-lg .switcher-control {
  left: calc(100% - 46px);
}

.switcher-on.switcher-sm .switcher-control {
  left: calc(100% - 22px);
}

/* Switcher - On -> Colors
   ========================================================================== */

.switcher-on.red {
  background: $color-red;
}

.switcher-on.yellow {
  background: $color-yellow;
}

.switcher-on.orange {
  background: $color-orange;
}

.switcher-on.blue {
  background: $color-blue;
}

.switcher-on.violet {
  background: $color-violet;
}

.switcher-on.green {
  background: $color-green;
}

.switcher-on.primary {
  background: rgba($primary, .8);
}