$checkbox-size: 16px;
$checkbox-font-size: 18px;
$checkbox-background: $color-white;
$checkbox-disabled-background: $color-mystic;
$checkbox-border-radius: 3px;
$checkbox-border: 1px solid $color-loblolly;
$checkbox-margin-right: 10px;

.input-checkbox {
  display: none;
}

.input-checkbox + label{
  font-size: rem-calc(12);
  font-weight: 600;
  letter-spacing: rem-calc(0.2);
  text-transform: uppercase;
  line-height: #{$checkbox-size + 1px};

  color: $color-pale-sky;

  display: flex;
  align-items: center;

  &[disabled] {
    background: $checkbox-disabled-background;
  }
}

.input-checkbox + label:before {
  font-weight: 400;
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: $checkbox-size;
  min-width: $checkbox-size;
  height: $checkbox-size;
  overflow: hidden;
  margin-right: $checkbox-margin-right;
  font-family: 'shoplo-kit';
  background-color: transparent;
  border: $checkbox-border;
  background: $checkbox-background;
  border-radius: $checkbox-border-radius;
  color: #fff;
  text-align: center;
  cursor: pointer;
  content: "\e910";
  font-size: $checkbox-font-size;
  line-height: $checkbox-font-size;
  @include transition(0.2s ease-in-out);
  vertical-align: top;
}

.input-checkbox:checked + label:before {
  background: $color-cerulean;
  border-color: $color-cerulean;
}

.input-checkbox.input-checkbox-error + label:before{
  background: $color-chablis;
  border-color: $color-mandy;
  color: $color-chablis;
}

.input-checkbox.input-checkbox-error:checked + label:before{
  color: $color-mandy;
}

.input-checkbox[disabled] + label:before{
  background: $checkbox-disabled-background;
  border-color: $color-loblolly;
  color: $checkbox-disabled-background;
}

.input-checkbox[disabled]:checked + label:before{
  color: $color-pale-sky;
}