.checkbox {
  @apply items-start;
}

.checkboxControl {
  @apply w-5 h-5 rounded-sm bg-def-1 border border-inv-1 p-[0.0625rem];

  &:hover {
    @apply bg-def-acc-2;
  }

  &[data-disabled] {
    @apply border-def-2;
  }

  &[data-invalid] {
    @apply border-semantic-error-4;
  }

  &[data-readonly] {
    @apply cursor-default bg-inherit border-none;
  }

  .checkbox.s & {
    @apply w-4 h-4;
  }
  .checkbox.inverted & {
    @apply bg-inv-1;

    &:hover,
    &[data-checked] {
      @apply bg-inv-acc-4;
    }

    &[data-disabled] {
      @apply bg-def-4 border-none;
    }

    &[data-readonly] {
      @apply bg-inherit;
    }
  }
}
