.ca-input-checkbox {
  $block: &;
  $checkbox-size: rem-calc(20px);
  $c-input-checkbox-bg: $c-white !default;
  $input-checkbox-border: $border-dark !default;
  $c-input-checkbox-text: $c-text-secondary !default;
  $c-input-checkbox-checked-bg: $c-darkest-gray !default;
  $c-input-checkbox-checked-border: $c-darkest-gray !default;
  $c-input-checkbox-check: $c-white !default;

  display: flex;
  cursor: pointer;

  &__box {
    @include flex-calign;

    width: $checkbox-size;
    height: $checkbox-size;
    background-color: $c-input-checkbox-bg;
    border: $input-checkbox-border;
    transition: all 150ms ease;
    margin: 0 $px10 0 0;
    flex-shrink: 0;
    border-radius: $input-border-radius;
  }

  &__check {
    color: $c-input-checkbox-check;
    opacity: 0;
    transition: opacity 150ms ease;
  }

  &__label {
    line-height: $checkbox-size;
  }

  &__input {
    display: none;
  }

  &__description {
    color: $c-input-checkbox-text;
    margin-top: 3px;
  }

  &--checked {
    #{$block}__box {
      background-color: $c-input-checkbox-checked-bg;
      border-color: $c-input-checkbox-checked-border;
    }

    #{$block}__check {
      opacity: 1;
    }
  }
}