.noora-checkbox-control {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--noora-radius-small);
  width: 16px;
  height: 16px;
  color: var(--noora-choice-selector-label);

  & svg {
    width: 12px;
    height: 12px;
  }

  & [data-part="check"],
  & [data-part="minus"] {
    display: none;
    width: 12px;
    height: 12px;
    color: var(--noora-surface-background-primary);

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  &[data-state="unchecked"] {
    box-shadow: var(--noora-border-light-default);
    background: var(--noora-choice-selector-uncheck-background);
  }

  &[data-state="checked"],
  &[data-state="indeterminate"] {
    box-shadow: 0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset;
    border: 1px solid var(--noora-purple-500);
    background: var(--noora-choice-selector-check-background);
  }

  &[data-state="checked"] [data-part="check"] {
    display: flex;
  }

  &[data-state="indeterminate"] [data-part="minus"] {
    display: flex;
  }
}