@import '../../../styles/assets/constant.scss';

.switch {
  position: relative;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  background-color: $input-bg-color;
  border: 1px solid $basic-border-color;
  transition: background-color 0.3s;
  vertical-align: top;
  padding: 1px 10px 1px 18px;
  color: $font-color-low;
  line-height: 20px;
  width: 40px;

  &.disabled {
    cursor: not-allowed;

    &.active {
      background-color: $disable-color;
      border-color: $disable-color;
    }
  }

  &-item {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  &::after {
    transition: all 0.3s;
    content: '';
    border-radius: 50%;
    position: absolute;
    left: 0;
    margin-left: 2px;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: $basic-border-color;
    z-index: 1;
  }
  &.active {
    padding-right: 18px;
    padding-left: 10px;
    background-color: $basic-aid-blue-color;
    border-color: $basic-aid-blue-color;
    color: #fff;

    &::after {
      margin-left: calc(100% - 16px);
      background-color: #fff;
    }
  }
}