.react-toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
  -webkit-tap-highlight-color: transparent;

  @include unselectable;

  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transition: opacity 0.25s;
  }
}

.react-toggle-screenreader-only {
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;

  @include size(1px);
}

.react-toggle-track {
  padding: 0;
  border-radius: 30px;
  background-color: $ui-base-color;
  transition: background-color 0.2s ease;

  @include size(50px, 24px);
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: darken($ui-base-color, 10%);
}

.react-toggle--checked .react-toggle-track {
  background-color: $gab-brand-default;
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: lighten($gab-brand-default, 10%);
}

.react-toggle-track-check {
  line-height: 0;
  opacity: 0;
  transition: opacity 0.25s ease;

  @include abs-position(0, auto, 0, 8px);
  @include size(14px, 10px);
  @include vertical-margin(auto);
}

.react-toggle--checked .react-toggle-track-check {
  opacity: 1;
  transition: opacity 0.25s ease;
}

.react-toggle-track-x {
  line-height: 0;
  opacity: 1;
  transition: opacity 0.25s ease;

  @include abs-position(0, 10px, 0);
  @include size(10px);
  @include vertical-margin(auto);
}

.react-toggle--checked .react-toggle-track-x {
  opacity: 0;
}

.react-toggle-thumb {
  border: 1px solid $ui-base-color;
  background-color: darken($simple-background-color, 2%);
  box-sizing: border-box;
  transition: all 0.25s ease;
  transition-property: border-color, left;

  @include abs-position(1, auto, auto, 1px);
  @include circle(22px);
}

.react-toggle--checked .react-toggle-thumb {
  left: 27px;
  border-color: $gab-brand-default;
}