.#{$prefix}switch {
  width: 48px;
  height: 16px;
  line-height: 16px;
  border-radius: 24px;
  background: $text-color;
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: sub;
  transition: all 0.2s ease-in-out;

  &-inner {
    color: $nothing-color;
    font-size: 12px;
    position: absolute;
    left: 18px;
  }

  &::after {
    content: '';
    width: 12px;
    height: 12px;
    background: $nothing-color;
    border-radius: 12px;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
  }
}

.switch-checked {
  background: $auxiliary-color-success;

  > .emfe-switch-inner {
    color: $nothing-color;
    font-size: 12px;
    position: absolute;
    left: 12px;
  }

  &::after {
    content: '';
    width: 12px;
    height: 12px;
    background: $nothing-color;
    border-radius: 12px;
    position: absolute;
    left: 34px;
    top: 2px;
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
  }
}

.switch-disabled {
  color: $background-color-write;
  background: $background-color-disable;
  border-color: $background-color-disable;
  cursor: no-drop;

  > .emfe-switch-inner {
    color: $text-color-disable;
  }
}