$switch-width-xs: 68px;
$switch-height-xs: 25px;

.wswg-switch {
  border: none;
  outline: 0;
  padding: 0;
  position: relative;
  user-select: none;
}

.wswg-switch .wswg-switch__checkbox {
  position: absolute;
  top: 9px;
  left: 10px;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.wswg-switch .wswg-switch__label {
  margin: 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  display: block;
  position: relative;

  &:after {
    content: "";
    display: block;
    background: #FFF;
    position: absolute;
    left: 0;
    transition: transform .15s ease-out;
    will-change: transform;
  }
}

.wswg-switch__label__on,
.wswg-switch__label__off {
  display: none;
  font-size: 12px;
  font-weight: $font-weight-main;
  color: #FFF;
  text-transform: uppercase;
  position: absolute;
  top: 7px;
}

.wswg-switch__label__on { left: 13%; }
.wswg-switch__label__off { right: 13%; }

// XSMALL

.wswg-switch.wswg-switch--xs {
  .wswg-switch__label {
    width: $switch-width-xs;
    height: $switch-height-xs;
    
    &:after {
      top: ($switch-height-xs - ($switch-height-xs - 4px)) * 0.5;
      width: ($switch-width-xs * 0.5) - 4px;
      height: $switch-height-xs - 4px;
    }
  }

  .wswg-switch__label__on,
  .wswg-switch__label__off {
    font-size: 10px;
    top: 6px;
  }

  .wswg-switch__checkbox:checked {
    & + .wswg-switch__label:after {
      transform: translateX(($switch-width-xs * 0.5) + 2px);
    }

    &:not(:checked) + .wswg-switch__label:after {
      transform: translateX(2px);
    }
  }
}

// INTERACTION

.wswg-switch .wswg-switch__checkbox{
  &:not(:checked) + .wswg-switch__label {
    &:after {
      left: 2px;
    }
      
    .wswg-switch__label__off { display: block; }
  }

  &:checked + .wswg-switch__label {
    .wswg-switch__label__on { display: block; }
  }

  &[disabled] + .wswg-switch__label {
    opacity: .6;
    cursor: not-allowed;
  }
}
// COLOR ACTIVE

.wswg-switch .wswg-switch__checkbox:checked + .wswg-switch__label {
  background: $main-color-green;
}
// COLOR INACTIVE

.wswg-switch .wswg-switch__checkbox:not(:checked) + .wswg-switch__label {
  background: #BBB;
}

.wswg-btn--darkmode {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  margin-top: 8px
}

.wswg-label--darkmode {
  margin-bottom: 0;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #3B3B3B;
}