@import "var";

.@{uiName} {
  &-switch {
    width: @switchWidth;
    height: @switchHeight;
    position: relative;
  }
  &-switch-checkbox {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
  }
  &-switch-inner {
    width: 100%;
    height: 100%;
    &:before {
      content: '';
      width: 100%;
      height: @switchInnerHeight;
      margin-top: (@switchHeight - @switchInnerHeight)/2;
      display: block;
      position: absolute;
      background: rgba(206, 206, 206, 0.58);
      border-radius: @switchHeight;
    }
    &:after {
      content: '';
      position: absolute;
      width: @switchHeight;
      height: @switchHeight;
      background: #C0C1C9;
      border-radius: 50%;
    }
  }

  &-switch-checkbox:checked + &-switch-inner {
    &:before {
      background: rgba(67, 187, 252, 0.33);
    }
    &:after {
      background: #44BBFC;
      right: 0;
    }
  }
}