.switch {
  display: inline-block;
  width: $component-size-small*2;
  height: $component-size-small;
  line-height: $component-size-small -(2*$border-width);
  border-radius: $component-size-small;
  vertical-align: middle;
  border: $border-width solid $border-color;
  background-color: $background-color;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all $transition-time $ease-in-out;

  .switch-inner {
    color: #fff;
    font-size: $font-size;
    position: absolute;
    left:$component-size-small;

    i {
      width:$component-size-small/2;
      height: $component-size-small/2;
      text-align: center;
    }
  }

  &:after {
    content: '';
    width: $component-size-small -(2*$border-width);
    height: $component-size-small -(2*$border-width);
    border-radius: $component-size-small -(2*$border-width);
    background-color: #fff;
    position: absolute;
    cursor: pointer;
    transition: left $transition-time $ease-in-out, width $transition-time $ease-in-out;
  }

  &:active:after {
    width: $component-size-small;
  }

  &:focus {
    box-shadow: $shadow-base;
    outline: 0;
  }

  &:focus:hover {
    box-shadow: none;
  }

  &.checked {
    border-color: $success-color;
    background-color: $success-color;

    .switch-inner {
      left: 0;
    }

    &:after {
      left: $component-size-small;
    }

    &:active:after {
    }
  }

  &.disabled {
    background: $disabled-color;
    border-color: $disabled-color;

    &:after {
      background: #ccc;
      cursor: not-allowed;
    }

    .switch-inner {
      color: #ccc;
    }
  }
}