/**
 * Slider
 *
 * Markup:
 *   <div class="slider {$modifiers}" onclick="this.className = 'slider enabled';"><div></div></div>
 *
 * .enabled - For sliders that are enabled
 * .disabled - For sliders that are unchangeable
 *
 * Styleguide 60.4
 */
.slider {
  background: $secondary-view-bg-color;
  border: 2px solid $primary-border-color;
  border-radius: 11px;
  height: 22px;
  position: relative;
  transition: border 1.2s linear;
  transition: background 0.4s ease;
  width: 36px;
}
.slider.enabled {
  background: $primary-accent-color;
  border-color: transparent;
}
.slider.enabled div {
  left: 15px;
  background: #FFFFFF;
}
.slider div {
  background: $primary-border-color;
  border-radius: inherit;
  box-shadow: 0 0 1px rgba($primary-text-color, 0.75), 0 0 3px rgba($primary-text-color, 0.3);
  height: 22px;
  left: -5px;
  position: absolute;
  top: -2px;
  width: 22px;
  transition: all 0.4s ease;
}
.slider:active div {
  background: #FFFFFF;
  width: 26px;
}
.slider.enabled:active div {
  left: 15px;
}
.slider:hover div {
  background: #FFFFFF;
}
.slider.disabled {
  background: $primary-border-color;
  border-color: transparent;
  pointer-events: none;
}
.slider.disabled div {
  background: $primary-border-color;
  box-shadow: none;
}
.slider.disabled:active div {
  background: $primary-border-color;
  width: 22px;
}
.slider.disabled:hover div {
  background: $primary-border-color;
}
.slider.disabled.enabled:active div {
  left: 15px;
}
.slider:focus {
  outline: 0;
}
