$indicatorScale: 22px;
$scale: 26px;

.__switch {
  border-radius: 20px;
  background-color: #AAA;
  // border: 1px solid #AAA;
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(#000, 0.05);
  min-width: 56px;
  text-align: right;
  height: $scale;
  line-height: $scale;
  transition: background-color 0.2s ease;
  user-select: none;
  &.disabled,&[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  &.checked {
    background-color: $themeColor;
    // border-color: $themeColor;
    text-align: left;
    .indicator {
      left: 100%;
      transform: translateX(- $indicatorScale - 2);
    }
  }
  .indicator {
    height: $indicatorScale;
    width: $indicatorScale;
    position: absolute;
    left: 2px;
    top: ($scale - $indicatorScale) / 2;
    // background-color: $themeColor;
    background-color: #FFF;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 1px 1px rgba(#000, 0.2);
  }
  .switch-btn {
    padding: 0 10px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    // color: #666;
    color: #FFF;
    display: inline-block;
    // z-index: 1;
    position: relative;
    transition: color 0.2s ease;
    // height: $scale;
    // line-height: $scale;
    // font-size: 12px;
    &.active {
      color: #FFF !important;
    }
    // &:hover {
    //   color: $themeColor;
    // }
    &[disabled] {
      // background-color: #CCC;
      // display: none;
    }
  }
}