@switchCls: ~'@{comps-prefix}-switch';

.@{switchCls} {
  display: inline-block;
  width: @switch-width;
  height: 1em;
  border-radius: 1em;
  font-size: @switch-size;
  border: 1px solid @switch-border-color;
  background-color: @switch-background-color;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color:transparent;
  cursor: pointer;
  &--checked {
    border-color: @switch-checked-border-color;
    background-color: @switch-checked-background-color;
  }
  &--checked &__open {
    opacity: 1;
  }
  &--checked &__close {
    opacity: 0;
  }
  &--disabled {
    opacity: @switch-disabled-opacity;
    cursor: not-allowed;
  }
  &--checked &__circle {
    transform: translateX(@switch-width - 1em);
  }
  &__circle {
    width: 1em;
    height: 1em;
    border-radius: 100%;
    font-size: inherit;
    position: absolute;
    top: 0;
    background-color: @switch-circle-background-color;
    box-shadow: @switch-circle-box-shadow;
    transition: all @transition-duration ease-in-out;
  }
  &__inner {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  &__open,
  &__close {
    color: @switch-text-color;
    font-size: @switch-text-font-size;
    width: 50%;
    text-align: center;
    box-sizing: border-box;
  }
  &__open {
    opacity: 0;
  }
}