//== Checkbox
//
//##

// Animated Checkbox
//
// Animated checkboxes will use a similar structure as the Bootstrap's default checkboxes.

.checkbox-animated {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;

  input[type=checkbox] {
    display: none;
    
    &:disabled ~ label .box {
      border-color: #777;
      background-color: #E6E6E6;
    }

    &:disabled ~ label .check {
      border-color: #777;
    }

    &:checked ~ label .box {
      opacity: 0;
      -webkit-transform:  scale(0) rotate(-180deg);
      -moz-transform:     scale(0) rotate(-180deg);
      transform:          scale(0) rotate(-180deg);
    }

    &:checked ~ label .check {
      opacity:1;
      -webkit-transform:  scale(1) rotate(45deg);
      -moz-transform:     scale(1) rotate(45deg);
      transform:          scale(1) rotate(45deg);
    }
  }

  label {
    cursor: pointer;
    padding-left: 28px;
    font-weight: normal;
    margin-bottom: 0;

    & span {
      display: block;
      position: absolute;
      left: 0;
      -webkit-transition-duration:  0.3s;
      -moz-transition-duration:     0.3s;
      transition-duration:          0.3s;
    }

    & .box {
      border: 2px solid #000;
      height: 20px;
      width: 20px;
      z-index: 888;
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay:    0.2s;
      transition-delay:         0.2s;
    }

    & .check {
      top: -7px;
      left: 6px;
      width: 12px;
      height: 24px;
      border: 2px solid #BADA55;
      border-top: none;
      border-left: none;
      opacity:0;
      z-index:888;
      -webkit-transform:  rotate(180deg);
      -moz-transform:     rotate(180deg);
      transform:          rotate(180deg);

      -webkit-transition-delay: 0.3s;
      -moz-transition-delay:    0.3s;
      transition-delay:         0.3s;
    }
  }
}

.checkbox-animated-inline {
  .checkbox-animated();

  &.checkbox-animated-inline {
    display: inline-block;
    & + .checkbox-animated-inline {
      margin-left: 10px;
    }
  }
}