@import "variables.less";


.switchControl {
  display: flex;
  align-items: center;
  padding: 5px;

  &.disabled {
    .switchBackground {
      opacity: 0.3;
    }
    .switchControlRightText, .switchControlLeftText {
      opacity: 0.3;
    }
  }

  &:not(.disabled) {
    .switchBackground.switchedOn {
      background-color: @switchBG_on;
      .switchIndicator {
        right: 2px;
      }
    }
  }

  &.large {
    .switchBackground {
      height: 26px;
      width: 60px;
      background-color: @switchBG_off_lrg;
      .switchIndicator {
        height: 22px;
        width: 22px;
        right: calc(60px - 22px - @switchNubRightMargin);
      }
    }
  }

  .switchControlText {
    margin: auto 0;
  }

  .switchControlLeftText {
    margin: auto 5px auto 0;
  }

  .switchControlRightText {
    margin: auto 0 auto 5px;
  }

  .switchControlTopText {
    margin: 0 auto 5px auto;
    color: #bbb;
  }

  .switchControlRight {
    display: flex;
  }

  .switchMiddle {
    display: flex;
    flex-direction: column;
  }

  .switchBackground {
    background-color: @switchBG_off;
    border-radius: 12px;
    height: @switchHeight;
    position: relative;
    width: @switchWidth;
    box-shadow: @switchShadow;
    transition: @switchBGTransition;

    .switchIndicator {
      background-color: white;
      border-radius: 100%;
      height: @switchNubDiameter;
      right: calc(@switchWidth - @switchNubDiameter - @switchNubRightMargin);
      position: absolute;
      top: @switchNubTopMargin;
      width: @switchNubDiameter;
      box-shadow: @switchNubShadow;
      transition: @switchNubTransition;
    }
  }
}