flashcards-example-project/src/components/ui/checkbox/checkbox.module.scss

.container {
  display: flex;
  align-items: center;
}

.label {
  cursor: pointer;
  display: flex;
  align-items: center;

  &.disabled {
    cursor: initial;
    color: var(--color-dark-100);
  }
}

.root {
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  background-color: var(--color-dark-900);
  border: 2px solid var(--color-light-900);
  border-radius: 2px;

  &:focus {
    background-color: var(--color-bg-focus);
  }

  &:disabled {
    cursor: initial;
    border-color: var(--color-dark-100);
  }

  &[data-state='checked']:disabled {
    background-color: var(--color-checkbox-disabled);
  }
}

.buttonWrapper {
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background-color: var(--color-dark-900);
  border-radius: 50%;

  &.disabled {
    cursor: initial;
  }

  &:focus-within,
  &:hover:not(.disabled),
  &:hover .root:not([data-state='checked']) {
    background-color: var(--color-dark-500);
  }

  &:active:not(.disabled) {
    background-color: var(--color-dark-100);
  }

  &.left {
    margin-left: -9px;
  }
}

.indicator {
  width: 18px;
  height: 18px;
}