.checkbox {
  height: var(--grapes-unit-16);
  width: var(--grapes-unit-16);
  display: flex;
  flex: 0 0 auto;
  color: var(--grapes-color-content-complementary);
  cursor: pointer;
  border-radius: var(--grapes-border-radius-4);
  position: relative;
  background-color: var(--grapes-color-background-primary-default);
  outline: 1px var(--grapes-color-border-default) solid;
  outline-offset: -1px;

  &:hover {
    background-color: var(--grapes-color-background-primary-hover);
  }
}

:is(.checkbox:has(:checked), .checkbox:has([aria-checked='mixed'])):not(
  :has(:disabled)
) {
  background-color: var(--grapes-color-content-selected);
  outline: none;
}

.checkbox:has(:disabled) {
  cursor: not-allowed;
  color: var(--grapes-color-content-disabled);

  .checkboxInput {
    pointer-events: none;
    background-color: var(--grapes-color-background-primary-disabled);
    border: 1px solid var(--grapes-color-border-default);
  }

  .checkboxIcon {
    position: absolute;
  }
}

.checkboxInput {
  position: absolute;
  height: var(--grapes-unit-16);
  width: var(--grapes-unit-16);
  cursor: inherit;
  appearance: none;
  border-radius: inherit;
  margin: 0;

  &:focus-visible {
    outline: var(--grapes-focus-ring);
    outline-offset: var(--grapes-focus-ring-offset);
  }
}