// Base for label styling
[type="checkbox"]:not(.switch):not(:checked),
[type="checkbox"]:not(.switch):checked {
  left: -9999px;
  position: absolute;
}

[type="checkbox"]:not(.switch):not(:checked) + label,
[type="checkbox"]:not(.switch):checked + label,
[type="checkbox"]:not(.switch):not(:checked) + [type=hidden] + label,
[type="checkbox"]:not(.switch):checked + [type=hidden] + label {
  cursor: pointer;
  font-size: $checkbox-radio-switch-font-size;
  font-weight: $font-weight-normal;
  margin-bottom: 0;
  padding-left: $checkbox-radio-margin-left;
  position: relative;
}

// checkbox aspect
[type="checkbox"]:not(.switch):not(:checked) + label::before,
[type="checkbox"]:not(.switch):checked + label::before,
[type="checkbox"]:not(.switch):not(:checked) + [type=hidden] + label::before,
[type="checkbox"]:not(.switch):checked + [type=hidden] + label::before {
  background: transparent;
  border: 1px solid $checkbox-border-color;
  border-radius: $input-border-radius;
  content: "";
  height: 18px;
  left: 0;
  position: absolute;
  top: 0;
  width: 18px;
}

[type="checkbox"]:not(.switch):checked + label::before,
[type="checkbox"]:not(.switch):checked + [type=hidden] + label::before {
  background-color: $checkbox-checked-bg-color;
  border-color: $checkbox-checked-bg-color;
}

// checked mark aspect
[type="checkbox"]:not(.switch):not(:checked) + label::after,
[type="checkbox"]:not(.switch):checked + label::after,
[type="checkbox"]:not(.switch):not(:checked) + [type=hidden] + label::after,
[type="checkbox"]:not(.switch):checked + [type=hidden] + label::after {
  background: url($base-icon-path + 'check-mark.svg') no-repeat center center;
  background-size: 17px;
  content: "";
  font-size: 1.3em;
  height: 16px;
  left: 2px;
  line-height: 0.8;
  position: absolute;
  top: 2px;
  transition: all $default-transition;
  width: 16px;
}

// checked mark aspect changes
[type="checkbox"]:not(.switch):not(:checked) + label::after,
[type="checkbox"]:not(.switch):not(:checked) + [type=hidden] + label::after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:not(.switch):checked + label::after,
[type="checkbox"]:not(.switch):checked + [type=hidden] + label::after {
  opacity: 1;
  transform: scale(1);
}

// disabled checkbox
[type="checkbox"]:not(.switch):disabled:not(:checked) + label::before,
[type="checkbox"]:not(.switch):disabled:checked + label::before,
[type="checkbox"]:not(.switch):disabled:not(:checked) + [type=hidden] + label::before,
[type="checkbox"]:not(.switch):disabled:checked + [type=hidden] + label::before {
  background-color: transparent;
  border-color: $checkbox-disabled-border-color;
  box-shadow: none;
}

[type="checkbox"]:not(.switch):disabled:checked + label::before,
[type="checkbox"]:not(.switch):disabled:checked + [type=hidden] + label::before {
  background-color: $checkbox-disabled-border-color;
}

[type="checkbox"]:not(.switch):disabled + label,
[type="checkbox"]:not(.switch):disabled + [type=hidden] + label {
  color: $checkbox-disabled-text-color;
  cursor: not-allowed;
}

[type="checkbox"]:not(.switch):focus + label::before {
  box-shadow: $outline-box-shadow rgba($checkbox-focus-color, $outline-border-opacity);
  outline: 0;
}