@import "settings.global";
@import "objects.grid";

@mixin toggle {
  @include grid;
  @include grid--center;
  width: auto;
  user-select: none;
  cursor: pointer;
}

@mixin toggle__checkbox {
  display: none;
}

@mixin toggle__track--background-color($track-color: $toggle-track-background-color) {
  background-color: $track-color;
}

@mixin toggle__track {
  position: relative;
  @include grid__cell;
  @include grid__cell--width-fixed;
  width: 1em;
  height: 0.5em;
  margin: $toggle-margin;
  @include toggle__track--background-color;
  border-radius: $toggle-track-border-radius;
}

@mixin toggle__track--primary {
  @include toggle__track--background-color($toggle-track-primary-background-color);
}

@mixin toggle__track--secondary {
  @include toggle__track--background-color($toggle-track-secondary-background-color);
}

@mixin toggle__track--success {
  @include toggle__track--background-color($toggle-track-success-background-color);
}

@mixin toggle__track--error {
  @include toggle__track--background-color($toggle-track-error-background-color);
}

@mixin toggle__track--unchecked {
  background-color: $toggle-track-unchecked-background-color;
}

@mixin toggle__track--disabled {
  background-color: $toggle-track-disabled-background-color;
  cursor: not-allowed;
}

@mixin toggle__handle {
  position: absolute;
  top: -0.25em;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: $toggle-handle-background-color;
  border-radius: $toggle-handle-border-radius;
  box-shadow: $toggle-handle-box-shadow;
  transform: translateX(100% );
}

@mixin toggle__handle--unchecked {
  transform: translateZ(0);
}

@mixin toggle__handle--disabled {
  background-color: $toggle-handle-disabled-background-color;
  cursor: not-allowed;
}