@keyframes check1 {

0% {
  width: 0;
}
50% {
  width: 5px;
}

} @keyframes check2 {

0% {
  width: 0;
}
50% {
  width: 0;
}
100% {
  width: 8px;
}

}

.label-checkbox {

padding: 6px 0;
cursor: pointer;
margin-right: 25px;
vertical-align: middle;
color: #3c4257;
font-size: 14px;
.checkbox + span {
  position: relative;
  margin-left: 4px;
}

}

.label-checkbox .checkbox .icon-checkbox {

transform: translateY(-1px);

} label.checkbox {

margin-bottom: initial;

} .checkbox {

transform: translateY(3px);
&.focus {
  @include focus-outline;
}
$size: 14px;
@include size($size);
cursor: pointer;
position: relative;
display: inline-block;

input[type="checkbox"] {
  @include size($size);
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  position: absolute;
  display: block;
  bottom: 0;
  &:checked ~ .icon-checkbox {
    background-color: #6772e5;
    box-shadow: none;
    &:before {
      animation: .3s check1;
      width: 5px;
      transform: rotate(45deg) translate(7px, 2px);
      transform-origin: left top;
    }
    &:after {
      animation: .3s check2;
      width: 9px;
      transform: rotate(-50deg) translate(-5px, 10px);
      transform-origin: left top;
    }
  }
}
.icon-checkbox {
  background-color: #fff;
  transform: translateY(-2px);
  transition: .3s background-color;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(60, 66, 87, 0.16),
    0 2px 5px 0 rgba(60, 66, 87, 0.12);
  border-radius: 3px;
  @include size(100%);
  display: inline-block;
  &:before,
  &:after {
    position: absolute;
    content: '';
    display: block;
    background-color: #fff;
    height: 2px;
  }
}
@include ripple(34px, -10px, -9px);
&.disabled {
  @extend %checkbox-disabled;
}

}