@import '../../style/index.scss';

$switch: 'cp-ui-switch';

.#{$switch} {
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;

  &.#{$switch}-checked {
    .#{$switch}-checkbox-ios {
      &::before {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
      }

      &::after {
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
      }
    }

    .#{$switch}-checkbox-android {
      &::before {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
      }

      &::after {
        -webkit-transform: translateX(24px);
        -ms-transform: translateX(24px);
        transform: translateX(24px);
      }
    }
  }

  &.#{$switch}-disabled {
    cursor: not-allowed;

    .#{$switch}-checkbox-ios {
      cursor: not-allowed;
      opacity: 0.3;
      z-index: 3;
    }
  }

  &-checkbox-ios {
    cursor: pointer;
    width: 51px;
    height: 31px;
    border-radius: 31px;
    background: #e5e5e5;
    z-index: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;

    &::before {
      content: " ";
      position: absolute;
      left: 1.5px;
      top: 1.5px;
      height: 28px;
      border-radius: 28px;
      background: #fff;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      width: 48px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    &::after {
      content: " ";
      position: absolute;
      left: 1.5px;
      top: 1.5px;
      height: 28px;
      border-radius: 28px;
      background: #fff;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      width: 28px;
      z-index: 2;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.21);
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.21);
    }
  }

  &-checkbox-android {
    cursor: pointer;
    width: 55px;
    height: 24px;
    background: #e5e5e5;
    z-index: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;

    &::before {
      content: " ";
      position: absolute;
      left: 1.5px;
      top: 1px;
      height: 22px;
      background: #fff;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      width: 52px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 1;
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    &::after {
      content: " ";
      position: absolute;
      left: 2px;
      top: 1px;
      height: 22px;
      background: #fff;
      transition: all 0.2s;
      width: 28px;
      z-index: 2;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.21);

    }
  }

  &-input {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0 none;
    -webkit-appearance: none;
    box-sizing: border-box;
    padding: 0;
  }
}