.mu-switch {
  input[type="checkbox"] {
    &:checked {
      + .mu-switch-wrapper {
        .mu-switch-track{
          background-color: @switchTrackOnColor;
        }
        .mu-switch-thumb{
          background-color: @switchThumbOnColor;
          color: @switchThumbOnColor;
        }
      }

    }
  }
  &.disabled {
    input[type="checkbox"]:checked{
      + .mu-switch-wrapper {
        .mu-switch-track{
          background-color: @switchTrackDisabledColor;
        }
        .mu-switch-thumb{
          background-color: @switchThumbDisabledColor;
        }
      }
    }
  }
}


.mu-switch-label {
  color: @switchTextColor;
  .mu-switch.disabled & {
    color: @switchTextDisabledColor;
  }
}

.mu-switch-track {
  background-color: @switchTrackOffColor;
  .mu-switch.disabled & {
    background-color: @switchTrackDisabledColor;
  }
}

.mu-switch-thumb {
  color: @switchTextColor;
  background-color: @switchThumbOffColor;
  .mu-switch.disabled & {
    background-color: @switchThumbDisabledColor;
  }
}