/* ==========================================================================
   Checkbox
   ========================================================================== */

.checkbox-group {
  list-style: none;
  margin-left: 0;
  padding: 0;

  &.checkbox-group-inline {
    > .checkbox {
      display: inline-block;
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.checkbox {
  display: block;
  font-family: $font-secondary;
  font-size: inherit;
  font-weight: inherit;
  line-height: 24px;
}

.checkbox {
  position: relative;
}

.checkbox label {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding-left: 24px;
  top: 0;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox input[type="checkbox"] + label::before {
  color: rgba($primary, .8);
  content: "\E017";
  font-family: "icon-16";
  font-size: 24px;
  font-weight: 400;
  left: 0;
  line-height: 24px;
  position: absolute;
  top: 0;

  @include anim(all);
}

.checkbox input[type="checkbox"]:checked + label::before {
  color: $accent;
  content: "\E015";
}

.checkbox input[type="checkbox"]:indeterminate + label::before {
  color: rgba($primary, .4);
  content: "\E016";
}