/*///// Checkboxes and Radiobuttons /////*/

.form-check, 
.form-radio {
  display: flex;
  align-items: start;
  position: relative;
  padding-left: 0;
}

.form-radio label, 
.form-check label  {
  position: relative;
  margin-left: $spacing-xs;
  padding-top: 0.25rem;
  cursor: pointer;
  font-weight: $font-weight-base;
  color: $black;
  &:hover, &:focus {
    color: $link-hover-color;
  }
}

.form-check input {
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  border-radius: $border-radius;
  background-color: transparent;
}

.form-check input {
  height: $btn-sm-height;
  width: $btn-sm-height;
  border: solid $border-width $primary;
  border-radius: $border-radius;
}

.form-check.sm input {
  height: $spacing-md;
  width: $spacing-md;
}

.form-check.sm input + label {
  padding-top: 0;
}

.form-radio input {
  cursor: pointer;
  appearance: none;
  border-radius: 50%;
  background-color: transparent;
}

.form-check input[type=checkbox]:checked {
  color: $white;
  border-color: $info;
  background-color: $info;
  background-image: none;
  overflow: hidden;

  &::after {
    display: block;
    height: 100%;
    width: 100%;
    background-color: $white;
    content: "";
    mask-image: url("@images/checkbox-background.svg");
    mask-repeat: no-repeat;
  }
}

.form-check.sm input[type=checkbox]:checked::after {
  mask-image: url("@images/checkbox-background-sm.svg");
}

.form-check input[type=checkbox]:checked:disabled,
.form-check.disabled input[type=checkbox]:checked,
.form-check.disabled input,
.form-check input:disabled,
.form-check input.disabled,
.form-check input.disabled[type=checkbox]:checked {
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  background-color: transparent;
  border-color: $disabled;
  cursor: not-allowed;
  background-size: auto;

  &::after {
    background-color: $disabled;
  }
}

.form-check.inverted input:checked:disabled,
.form-check.inverted.disabled input:checked,
.form-check.inverted.disabled input,
.form-check.inverted input:disabled,
.form-check.inverted input.disabled,
.form-check.inverted input.disabled:checked,
.form-check.inverted.sm input:checked:disabled,
.form-check.inverted.sm.disabled input:checked,
.form-check.inverted.sm.disabled input,
.form-check.inverted.sm input:disabled,
.form-check.inverted.sm input.disabled,
.form-check.inverted.sm input.disabled:checked {
  background-image: url("@images/pattern-striped-dark.png");
  border-color: $gray-dark;

  &::after {
    background-color: $gray-dark;
  }
}

.form-check.disabled label,
.form-check input[type=checkbox]:disabled + label,
.form-check input[type=checkbox]:checked:disabled + label {
  color: $disabled;
  cursor: not-allowed;
}


.form-check.inverted.disabled label,
.form-check.inverted input:disabled + label,
.form-check.inverted input:checked:disabled + label,
.form-check.inverted.sm.disabled label,
.form-check.inverted.sm input:disabled + label,
.form-check.inverted.sm input:checked:disabled + label {
  color: $disabled-dark;
}

.form-check.inverted input {
  $border-color: $white;
}

.form-check.inverted input[type=checkbox]:checked {
  color: $white;
}

////// Radiobuttons //////

.form-radio input {
  width: $btn-sm-height;
  height: $btn-sm-height;
  border-color: $primary;
  border: solid $border-width;

  &:disabled {
    background-image: url("@images/pattern-striped-bright.png");
    background-repeat: repeat;
    background-color: transparent;
    border-color: $disabled;
    cursor: not-allowed;
    background-size: auto;
  }
}

.form-radio input[type=radio]:checked {
  border-color: $info;
  background-color: $info;
  &::after {
    display: block;
    height: 100%;
    width: 100%;
    background-color: $white;
    content: "";
    mask-image: url("@images/radio-checked-white.svg");
    mask-repeat: no-repeat;
  }
}

.form-radio.inverted label, 
.form-check.inverted label  {
  color: $white;
}

.form-radio.inverted input {
  border-color: $white;

  &:disabled {
    background-image: url("@images/pattern-striped-dark.png");
    border-color: $gray-dark;
  }
}

.form-radio.sm input {
  height: $spacing-md;
  width: $spacing-md;
}

.form-radio.sm input + label {
  padding-top: 0;
}


// Icon only checkboxes

.form-check.icon-only {
  input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
  }

  label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
  }
}

.form-check.icon-only input[type="checkbox"]:not(:checked):not(:indeterminate) + label .icon {
  color: $gray;
}