@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);

      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .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;

        @media (forced-colors: active) {
          color: GrayText;
        }
      }
      @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);

          @media (forced-colors: active) {
            border: ButtonText solid units("05");
          }
        }
      }
      &: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);
      }

      @media (forced-colors: active) {
        @include format-input {
          @include add-background-svg("correct8-alt");
        }
      }
    }
    &: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);

        @media (forced-colors: active) {
          background-color: ButtonText;
        }
      }
    }
    &: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);

      &:before {
        left: units(5) - units($input-select-margin-right) -
          units($theme-input-select-size);
      }
    }
  }
}

.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: "\2714";
        text-align: center;
      }

      @media (forced-colors: active) {
        background-color: ButtonText;

        &--tile {
          background-color: ButtonText;
        }
      }
    }
  }
}

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

  &:before {
    content: " ";
    display: block;
    left: 0;
    margin-left: units($theme-input-select-border-width);
    margin-top: divide(
      line-height($theme-form-font-family, $theme-input-line-height) *
        font-size($theme-form-font-family, $theme-body-font-size) -
        units($theme-input-select-size),
      2
    );
    position: absolute;
  }
}

.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);
}

// 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");
}
*/