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

React component library

.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 {
  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(--color-border-main);
  background-color: var(--color-background-primary);
  transition: border-color var(--transition-default),
    background-color var(--transition-default),
    box-shadow var(--transition-default);
}

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

.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 {
    background-color: var(--color-background-primary-hover);
    border-color: var(--color-border-main-hover);
  }

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

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

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

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

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

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

.Checkbox-Input:checked + .Checkbox-Box .Checkbox-Icon {
    opacity: 1;
  }

.Checkbox_indeterminate .Checkbox-Box {
    background-color: var(--color-background-action);
    border-color: var(--color-background-action);
  }

.Checkbox_indeterminate .Checkbox-Icon {
    opacity: 1;
  }

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

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

.Checkbox_disabled {
  pointer-events: none;
}

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

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