_checkbox-and-radio.scss

@mixin format-input {
  & + [class$="__label"]::before {
    @content;
  }
}

@mixin format-label {
  & + [class$="__label"] {
    @content;
  }
}

@mixin checkbox-and-radio-colors(
  $bg-color: $theme-input-background-color,
  $selected-color: "default"
) {
  $input-text-color: get-color-token-from-bg($bg-color);
  $input-bg-color: if(
    $bg-color == "default",
    $theme-body-background-color,
    $bg-color
  );
  $input-active-color: nth(
    get-link-tokens-from-bg($bg-color, $preferred-link-token: $selected-color),
    1
  );
  $input-disabled-alpha: -0.7;
  $input-disabled-alpha--strong: -0.5;
  $input-disabled-alpha--weak: -0.8;
  $input-border-alpha: -0;
  $color-input-disabled: adjust-color(
    color($input-text-color),
    $alpha: $input-disabled-alpha
  );
  $color-input-disabled--strong: adjust-color(
    color($input-text-color),
    $alpha: $input-disabled-alpha--strong
  );
  $color-input-disabled--weak: adjust-color(
    color($input-text-color),
    $alpha: $input-disabled-alpha--weak
  );
  $input-darkmode: if(lightness(color($input-bg-color)) < 50%, true, false);
  $input-checkmark: if($input-darkmode, "correct8-alt", "correct8");

  .usa-checkbox,
  .usa-radio {
    background: color($input-bg-color);
  }

  .usa-checkbox__label,
  .usa-radio__label {
    color: color($input-text-color);
    &::before {
      background: color($input-bg-color);
      box-shadow: 0 0 0 units($theme-input-select-border-width)
        adjust-color(color($input-text-color), $alpha: $input-border-alpha);
    }
  }
  .usa-checkbox__input,
  .usa-radio__input {
    &:checked {
      @include format-input {
        background-color: color($input-active-color);
        box-shadow: 0 0 0 units($theme-input-select-border-width)
          color($input-active-color);
      }
    }
    &:disabled {
      @include format-label {
        color: $color-input-disabled;
      }
      @include format-input {
        background-color: color($input-bg-color);
        box-shadow: 0 0 0 units($theme-input-select-border-width)
          $color-input-disabled;
      }
    }
    &--tile {
      @include format-label {
        background-color: color($input-bg-color);
        border: units($theme-input-tile-border-width) solid
          $color-input-disabled;
        color: color($input-text-color);
      }
      &:checked {
        @include format-label {
          background-color: adjust-color(
            color($input-active-color),
            $alpha: -0.9
          );
          border-color: color($input-active-color);
        }
      }
      &:disabled:checked {
        @include format-label {
          background-color: color($input-bg-color);
          border-color: $color-input-disabled;
        }
      }
    }
  }
  .usa-checkbox__input {
    &:checked,
    &:checked:disabled {
      @include format-input {
        @include add-background-svg($input-checkmark);
      }
    }
    &:checked:disabled {
      @include format-input {
        background-color: $color-input-disabled;
      }
    }
  }
  .usa-radio__input {
    &:checked {
      @include format-input {
        box-shadow: 0 0 0 units($theme-input-select-border-width)
            color($input-active-color),
          inset 0 0 0 units($theme-input-select-border-width)
            color($input-bg-color);
      }
    }
    &:checked:disabled {
      @include format-input {
        background-color: $color-input-disabled--weak;
        box-shadow: 0 0 0 2px $color-input-disabled,
          inset 0 0 0 2px color($input-bg-color);
      }
    }
  }
}

@include override-prose {
  .usa-input-list {
    @include add-list-reset;

    li {
      line-height: line-height(
        $theme-form-font-family,
        $theme-input-line-height
      );
    }
  }
}

@include checkbox-and-radio-colors;

.usa-checkbox__input,
.usa-radio__input {
  // The actual input element is only visible to screen readers, because
  // all visual styling is done via the label.
  @include sr-only();

  &:focus {
    @include format-input {
      @include focus-outline(null, null, null, 0.5);
    }
  }

  &:disabled {
    @include format-input {
      cursor: not-allowed;
    }
    @include format-label {
      cursor: not-allowed;
    }
  }

  // Checkboxes and radios with tap-friendly targets
  &--tile {
    @include format-label {
      border-radius: radius($theme-input-tile-border-radius);
      margin-top: units(1);
      padding: units(1.5) units(2) units(1.5) units(5);
    }
  }
}

.usa-radio__input {
  &:checked {
    @include format-input {
      @media print {
        box-shadow: inset 0 0 0 units($theme-input-select-border-width)
            color("white"),
          inset 0 0 0 units(2) color("primary"),
          0 0 0 units($theme-input-select-border-width) color("primary");
      }
    }
  }
}

.usa-checkbox__input {
  &:checked,
  &:checked:disabled {
    @include format-input {
      background-position: center center;
      background-size: units(1.5) auto;
      @media print {
        background-image: none;
        background-color: color("white");
        content: url("#{$theme-image-path}/checkbox-check-print.svg");
        text-indent: 0;
      }
    }
  }
}

.usa-checkbox__label,
.usa-radio__label {
  cursor: pointer;
  display: inherit;
  font-weight: font-weight("normal");
  margin-top: units(1.5);
  padding-left: units($input-select-margin-right + $theme-input-select-size);
  position: relative;
  text-indent: units(-$input-select-margin-right - $theme-input-select-size);

  &:before {
    content: " ";
    display: inline-block;
    left: units($theme-input-select-border-width);
    line-height: units($theme-input-select-size);
    margin-right: units($input-select-margin-right);
    position: relative;
    text-indent: 0;
    vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
    white-space: pre;
  }
}

.usa-checkbox__label::before {
  @include u-square($theme-input-select-size);
  border-radius: radius($theme-checkbox-border-radius);
}

.usa-radio__label::before {
  @include u-circle($theme-input-select-size);
}

.usa-checkbox__label-description,
.usa-radio__label-description {
  display: block;
  font-size: size("ui", "2xs");
  margin-top: units(1);
  text-indent: 0;
}

// Test code for scoped custom colors
/*
.checkbox-tests {
  @include set-text-and-bg("green-80");
  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
  padding: units(2);
  border-radius: radius("md");
}
*/