@import '../palette';
.checkbox {
  input[type="checkbox"] {
    float: left;
    opacity: 0;
    &:checked + label:before {
      background-color: $brand-color;
    }
    &:disabled + label, &:disabled + label:after {
      opacity: .6;
      cursor: default;
    }
  }
  label {
    display: block;
    position: relative;
    cursor: pointer;
    padding-left: em-calc(26px);
    outline: none;
    &:before,
    &:after {
      position: absolute;
      content: "";
      display: inline-block;
      top: 50%;
      transform: translateY(-50%);
    }
    &:before {
      left: 2px;
      width: 12px;
      height: 12px;
    }
    &:after {
      @include border(lighten($light-blue-color,8));
      left: -1px;
      width: 18px;
      height: 18px;
    }
  }
}

.checkbox--no-label {
  .checkbox label {
    display: inline;
  }
}