@ozen-ui/kit/__inner__/esm/components/CheckboxNext/Checkbox.css

React component library

.CheckboxNext {
  --checkbox-icon-border-color-checked: var(--checkbox-icon-background-color-checked);
  --checkbox-icon-border-color-hover-checked: var(--checkbox-icon-background-color-hover-checked);
  --checkbox-icon-border-color-active-checked: var(--checkbox-icon-background-color-active-checked);
}

  .CheckboxNext_size_l,
  .CheckboxNext_size_m {
    --checkbox-size: 20px;
  }

  .CheckboxNext_size_s,
  .CheckboxNext_size_xs,
  .CheckboxNext_size_2xs {
    --checkbox-size: 16px;
  }

  .CheckboxNext_variant_default {
    /* ---- ICON BORDER ---- */

    --checkbox-icon-border-color: var(--color-border-main);
    --checkbox-icon-border-color-hover: var(--color-border-main-hover);
    --checkbox-icon-border-color-active: var(--color-border-main-hover);

    /* ---- ICON BACKGROUND ---- */

    --checkbox-icon-background-color: var(--color-background-primary);
    --checkbox-icon-background-color-checked: var(--color-background-action);
    --checkbox-icon-background-color-hover: var(--color-background-primary-hover);
    --checkbox-icon-background-color-hover-checked: var(--color-background-action-hover);
    --checkbox-icon-background-color-active: var(--color-background-primary-pressed);
    --checkbox-icon-background-color-active-checked: var(--color-background-action-pressed);
  }

  .CheckboxNext_variant_error {
    /* ---- ICON BORDER ---- */

    --checkbox-icon-border-color: var(--color-border-error);
    --checkbox-icon-border-color-hover: var(--color-border-error);
    --checkbox-icon-border-color-active: var(--color-border-error);

    /* ---- ICON BACKGROUND ---- */

    --checkbox-icon-background-color: var(--color-background-primary);
    --checkbox-icon-background-color-checked: var(--color-background-error);
    --checkbox-icon-background-color-hover: var(--color-background-primary);
    --checkbox-icon-background-color-hover-checked: var(--color-background-error);
    --checkbox-icon-background-color-active: var(--color-background-primary);
    --checkbox-icon-background-color-active-checked: var(--color-background-error);
  }

  .CheckboxNext_indeterminate, .CheckboxNext_indeterminate.CheckboxNext_disabled {
    /* ---- ICON BORDER ---- */

    --checkbox-icon-border-color: var(--checkbox-icon-border-color-checked);
    --checkbox-icon-border-color-hover: var(--checkbox-icon-border-color-hover-checked);
    --checkbox-icon-border-color-active: var(--checkbox-icon-border-color-active-checked);

    /* ---- ICON BACKGROUND ---- */

    --checkbox-icon-background-color: var(--checkbox-icon-background-color-checked);
    --checkbox-icon-background-color-hover: var(--checkbox-icon-background-color-hover-checked);
    --checkbox-icon-background-color-active: var(--checkbox-icon-background-color-active-checked);
  }

  .CheckboxNext_indeterminate .CheckboxNext-Icon, .CheckboxNext_indeterminate.CheckboxNext_disabled .CheckboxNext-Icon {
      opacity: 1;
    }

  .CheckboxNext_disabled {
    /* ---- ICON BORDER ---- */

    --checkbox-icon-border-color: var(--color-border-disabled);
    --checkbox-icon-border-color-hover: var(--color-border-disabled);
    --checkbox-icon-border-color-active: var(--color-border-disabled);

    /* ---- ICON BACKGROUND ---- */

    --checkbox-icon-background-color: var(--color-background-disabled);
    --checkbox-icon-background-color-checked: var(--color-background-action-active-disabled);
    --checkbox-icon-background-color-hover: var(--color-background-disabled);
    --checkbox-icon-background-color-hover-checked: var(--color-background-action-active-disabled);
    --checkbox-icon-background-color-active: var(--color-background-disabled);
    --checkbox-icon-background-color-active-checked: var(--color-background-action-active-disabled);
  }

  .CheckboxNext-Box {
    position: relative;
    inline-size: var(--checkbox-size);
    block-size: var(--checkbox-size);
    border-radius: var(--border-radius-xs);
    flex-shrink: 0;
  }

  .CheckboxNext-IconWrapper {
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    box-sizing: border-box;
    border: 1px solid var(--checkbox-icon-border-color);
    background-color: var(--checkbox-icon-background-color);
    transition: border-color var(--transition-default),
    background-color var(--transition-default),
    box-shadow var(--transition-default);
  }

  .CheckboxNext-Icon {
    opacity: 0;
    transition: opacity var(--transition-default);
    color: var(--color-content-primary-inverse);
  }

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

  .CheckboxNext-Input:hover:not(:checked, :disabled) + .CheckboxNext-IconWrapper{
      background-color: var(--checkbox-icon-background-color-hover);
      border-color: var(--checkbox-icon-border-color-hover);
    }

  .CheckboxNext-Input:hover:checked:not(:active, :disabled) + .CheckboxNext-IconWrapper {
      background-color: var(--checkbox-icon-background-color-hover-checked);
      border-color: var(--checkbox-icon-border-color-hover-checked);
    }

  .CheckboxNext-Input:active:not(:checked, :disabled) + .CheckboxNext-IconWrapper {
      background-color: var(--checkbox-icon-background-color-active);
      border-color: var(--checkbox-icon-border-color-active);
    }

  .CheckboxNext-Input:active:checked + .CheckboxNext-IconWrapper {
      background-color: var(--checkbox-icon-background-color-active-checked);
      border-color: var(--checkbox-icon-border-color-active-checked);
    }

  .CheckboxNext-Input:focus + .CheckboxNext-IconWrapper {
      box-shadow: var(--shadow-outline-focused);
    }

  .CheckboxNext-Input:focus:not(:focus-visible) + .CheckboxNext-IconWrapper {
      box-shadow: none;
    }

  .CheckboxNext-Input:checked:not(:hover, :active) + .CheckboxNext-IconWrapper {
      background-color: var(--checkbox-icon-background-color-checked);
      border-color: var(--checkbox-icon-border-color-checked);
    }

  .CheckboxNext-Input:checked + .CheckboxNext-IconWrapper .CheckboxNext-Icon {
      opacity: 1;
    }