/* Customize the label (the container) */
.checkbox {
  display: block;
  position: relative;
  padding-left: 30px;
  margin: 5px 0;
  cursor: pointer;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:checked ~ .checkmark {
      border-color: $primary;

      &:after {
        color: $primary;
      }
    }
  }

  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid $gray-400;

    &:after {
      @include icon-font(transparent, 1rem);
      content: '\e902';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}