.Checkbox {
  inline-size: var(--checkbox-size, 20px);
  block-size: var(--checkbox-size, 20px);
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
}

  .Checkbox_size_l,
  .Checkbox_size_m {
    --checkbox-size: 20px;
  }

  .Checkbox_size_s,
  .Checkbox_size_xs,
  .Checkbox_size_2xs {
    --checkbox-size: 16px;
  }

  .Checkbox-Box {
    --checkbox-box-background-color: var(--color-background-base-primary);
    --checkbox-box-border-color: var(--color-border-base-main);
    --checkbox-box-focus-shadow: none;
    --checkbox-box-check-icon-opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    box-sizing: border-box;
    background-color: var(--checkbox-box-background-color);
    border: 1px solid var(--checkbox-box-border-color);
    box-shadow: var(--checkbox-box-focus-shadow);
    transition: border-color var(--transition-default),
      background-color var(--transition-default),
      box-shadow var(--transition-default);
  }

  .Checkbox-Icon {
    color: var(--color-content-base-accent-on);
    opacity: var(--checkbox-box-check-icon-opacity);
    transition: opacity var(--transition-default);
  }

  .Checkbox-Input {
    position: absolute;
    opacity: 0;
    margin: 0;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    cursor: pointer;
    z-index: var(--z-index-absolute);
  }

  .Checkbox-Input:hover:not(:checked, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-base-primary-hover);
      --checkbox-box-border-color: var(--color-border-base-main-hover);
    }

  .Checkbox-Input:active:not(:checked, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-base-primary-pressed);
      --checkbox-box-border-color: var(--color-border-base-main-pressed);
    }

  .Checkbox-Input:checked:not(:hover, :active) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-default);
      --checkbox-box-border-color: var(--color-background-accent-default);
    }

  .Checkbox-Input:hover:checked:not(:active, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-hover);
      --checkbox-box-border-color: var(--color-background-accent-hover);
    }

  .Checkbox-Input:active:checked + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-pressed);
      --checkbox-box-border-color: var(--color-background-accent-pressed);
    }

  .Checkbox-Input:focus-visible + .Checkbox-Box {
      --checkbox-box-focus-shadow: var(--shadow-outline-focused);
    }

  .Checkbox-Input:checked + .Checkbox-Box {
      --checkbox-box-check-icon-opacity: 1;
    }

  .Checkbox-Input:disabled + .Checkbox-Box {
      --checkbox-box-check-icon-opacity: 0;
    }

  .Checkbox-Input:disabled:checked + .Checkbox-Box {
      --checkbox-box-check-icon-opacity: 0.7;
    }

  .Checkbox_indeterminate .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-default);
      --checkbox-box-border-color: var(--color-background-accent-default);
      --checkbox-box-check-icon-opacity: 1;
    }

  .Checkbox_indeterminate .Checkbox-Input:hover:not(:disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-hover);
      --checkbox-box-border-color: var(--color-background-accent-hover);
    }

  .Checkbox_indeterminate .Checkbox-Input:active:not(:disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-pressed);
      --checkbox-box-border-color: var(--color-background-accent-pressed);
    }

  .Checkbox_error .Checkbox-Input:not(:checked, :disabled) + .Checkbox-Box {
      --checkbox-box-border-color: var(--color-border-error-default);
    }

  .Checkbox_error .Checkbox-Input:hover:checked:not(:active, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-hover);
      --checkbox-box-border-color: var(--color-background-error-hover);
    }

  .Checkbox_error .Checkbox-Input:checked:not(:hover, :active) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-default);
      --checkbox-box-border-color: var(--color-background-error-default);
    }

  .Checkbox_error .Checkbox-Input:active:checked + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-pressed);
      --checkbox-box-border-color: var(--color-background-error-pressed);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:not(:checked, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-default);
      --checkbox-box-border-color: var(--color-border-error-default);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:hover:not(:checked, :active, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-hover);
      --checkbox-box-border-color: var(--color-background-error-hover);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:active:not(:checked, :active, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-pressed);
      --checkbox-box-border-color: var(--color-background-error-pressed);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:hover:checked:not(:active, :disabled) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-hover);
      --checkbox-box-border-color: var(--color-background-error-hover);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:checked:not(:hover, :active) + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-default);
      --checkbox-box-border-color: var(--color-background-error-default);
    }

  .Checkbox_error.Checkbox_indeterminate .Checkbox-Input:active:checked + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-error-pressed);
      --checkbox-box-border-color: var(--color-background-error-pressed);
    }

  .Checkbox_disabled {
    pointer-events: none;
  }

  .Checkbox_disabled .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-base-disabled);
      --checkbox-box-border-color: var(--color-border-base-disabled);
    }

  .Checkbox_disabled .Checkbox-Input:checked + .Checkbox-Box {
      --checkbox-box-background-color: var(--color-background-accent-active-disabled);
      --checkbox-box-border-color: var(--color-background-accent-active-disabled);
    }