@mixin checkbox-color(
  $border-color: null,
  $border-color-css-var: --null,
  $background-color: null,
  $background-color-css-var: --null,
  $background-color--disabled: null,
  $background-color--disabled-css-var: --null,
  $background-color--hover: null,
  $background-color--hover-css-var: --null,
  $background-color--checked: null,
  $background-color--checked-css-var: --null,
  $background-color--checked-hover: null,
  $background-color--checked-hover-css-var: --null,
  $label-color: null,
  $label-color-css-var: --null,
) {
  .#{$checkbox__class}__input {
    // Base Checkbox - Not Checked
    + .#{$checkbox__class}__label {
      font-family: $input__font-family;
      color: $label-color;
      color: var($label-color-css-var, $label-color);

      &:before {
        background-color: $background-color;
        background-color: var($background-color-css-var, $background-color);
        border: 1px solid $border-color;
        border: 1px solid var($border-color-css-var, $border-color);
      }

      &:hover,
      &.hover {
        &:before {
          background-color: $background-color--hover;
          background-color: var($background-color--hover-css-var, $background-color--hover);
        }
      }
    }

    &:focus,
    &.focus {
      + .#{$checkbox__class}__label {
        &:before {
          @include focus-styles;
        }
      }
    }
    /** Checked */
    &:checked,
    &:indeterminate,
    &.indeterminate {
      + .#{$checkbox__class}__label {
        &:before {
          background-color: $background-color--checked;
          background-color: var($background-color--checked-css-var, $background-color--checked);
          border: none;
          color: var(--mds-color-theme-common-inverted-text-primary-normal);
        }

        &:hover,
        &.hover {
          &:before {
            background-color: $background-color--checked-hover;
            background-color: var($background-color--checked-hover-css-var, $background-color--checked-hover);
          }
        }
      }
    }
    /** Disabled Settings */
    &:disabled,
    &.disabled {
      + .#{$checkbox__class}__label {
        &:before {
          background-color: $background-color--disabled;
          background-color: var($background-color--disabled-css-var, $background-color--disabled);
          border: none;
        }
      }
      /**  Disabled--Checked/Indeterminate */
      &:checked,
      &:indeterminate,
      &.indeterminate {
        + .#{$checkbox__class}__label {
          &:before {
            background-color: $background-color--checked;
            background-color: var($background-color--checked-css-var, $background-color--checked);
            border: none;
          }

          &:hover,
          &.hover {
            &:before {
              background-color: $background-color--checked;
              background-color: var($background-color--checked-css-var, $background-color--checked);
            }
          }
        }
      }
    }
  }
}