@import './common/var.scss';
@import './mixins/function';
@import './mixins/mixins';
@include b(switch) {
  * {
    pointer-events: none;
  }
  display: inline-block;
  position: relative;
  &.disabled {
    &::before {
      content: '';
      background-color: rgba(255, 255, 255, .5);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 3px;
      z-index: 25;
      border-radius: 16px;
    }
  }
  @include e (core) {
    display: inline-block;
    position: relative;
    width: 52px;
    height: $--switch-height;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    box-sizing: border-box;
    background: #d9d9d9;
    &::before {
      content: "";
      top: 0;
      left: 0;
      position: absolute;
      transition: transform .3s;
      border-radius: 15px;
      width: 50px;
      height: $--switch-height;
      background-color: #fdfdfd;
    }
    &:after {
      content: "";
      top: 0;
      left: 0;
      position: absolute;
      transition: transform .3s;
      border-radius: 15px;
      width: 30px;
      height: $--switch-height - 2;
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }
    &.checked {
      background-color: $--color-blue;
      border-color: $--color-blue;
      &::before {
        transform: scale(0);
      }
      &::after {
        transform: translateX(20px);
      }
    }
  }
  @include e(input) {
    display: none;
  }
}