.switch {
  padding: 8px 15px;
  padding-left: 60px;
  display: block;
  cursor: pointer;
  position: relative;
  margin: 0;
  min-height: 20px;
  font-weight: normal;
  max-width: 100%;
  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  &.switch-xs {
    padding-left: 50px;
  }
  &.switch-sm {
    padding-left: 55px;
  }
  &.switch-lg {}
  &.switch-xlg {
    padding: 8px 15px 8px 75px;
  }
  span {
    &.open {
      background-color: rgb(100, 189, 99);
      border-color: rgb(100, 189, 99);
      box-shadow: rgb(100, 189, 99) 0px 0px 0px 8px inset;/*no*/
      transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
    }
    &.close {
      background-color: rgb(255, 255, 255);
      border-color: rgb(223, 223, 223);
      box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
      transition: border 0.4s, box-shadow 0.4s;
    }
    &.switchery {
      position: absolute;
      left: 15px;
      margin-top: 2px;
      height: 14px;
      width: 28px;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ddd;/*no*/
      border-radius: 100px;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      small {
        height: 14px;
        width: 14px;
        background-color: #fff;
        border-radius: 100px;
        position: absolute;
        top: 0;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);/*no*/
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);/*no*/
        font-size: 92%;
        &.open {
          left: 14px;
          transition: background-color 0.4s, left 0.2s;
          background-color: rgb(255, 255, 255);
        }
        &.close {
          left: 0px;
          transition: background-color 0.4s, left 0.2s;
        }
      }
      &.disabled {
        cursor: not-allowed;
      }
    }
    &.switchery-xs {
      height: 14px;
      width: 28px;
      small {
        height: 14px;
        width: 14px;
      }
    }
    &.switchery-sm {
      height: 18px;
      width: 32px;
      margin-top: 0px;
      small {
        height: 18px;
        width: 18px;
      }
      &.open {
        box-shadow: rgb(100, 189, 99) 0px 0px 0px 10px inset;/*no*/
      }
    }
    &.switchery-lg {
      height: 22px;
      width: 42px;
      margin-top: -2px;
      margin-left: -5px;
      small {
        height: 22px;
        width: 22px;
        &.open {
          left: 20px;
        }
      }
      &.open {
        box-shadow: rgb(100, 189, 99) 0px 0px 0px 12px inset;/*no*/
      }
    }
    &.switchery-xlg {
      height: 26px;
      width: 50px;
      margin-top: -4px;
      small {
        height: 26px;
        width: 26px;
        &.open {
          left: 24px;
        }
      }
      &.open {
        box-shadow: rgb(100, 189, 99) 0px 0px 0px 14px inset;/*no*/
      }
    }
  }
}