@use '../../styles/mixins/dimension';
@use '../../styles/mixins/interaction';

.CheckIcon {
  transition: none;

  &:where([data-state='unchecked']) {
    visibility: hidden;
  }
}

.Checkbox {
  cursor: inherit;

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

  margin: 1px;

  background-color: var(--color-fill-grey-light);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--color-border-neutral-heavy);

  /* stylelint-disable-next-line order/order */
  @include interaction.touchable-hover {
    &:where(:not([data-disabled], [data-state='unchecked'])) {
      background-color: var(--color-text-accent-green-hovered);
    }

    &:where(:not([data-disabled])[data-state='unchecked']) .CheckIcon {
      visibility: visible;
    }
  }

  &:where(.size-s) {
    border-radius: 4.6px;

    /* stylelint-disable-next-line order/order */
    @include dimension.square(14px);
  }

  &:where(.size-m) {
    @include dimension.square(18px);
  }

  &:where([data-disabled]) {
    background-color: var(--color-fill-neutral-heavy);
    box-shadow: none;
  }

  &[data-invalid] {
    box-shadow: var(--state-input-error);
  }

  &:where([data-state='checked'], [data-state='indeterminate']) {
    background-color: var(--color-fill-accent-green-heavier);

    &:where(:not([data-invalid])) {
      box-shadow: none;
    }
  }

  &:where(:focus-visible) {
    outline: none;
    box-shadow: var(--state-input-active);

    &:where(:not([data-disabled])[data-state='unchecked']) .CheckIcon {
      visibility: visible;
    }
  }
}

.Container {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: fit-content;

  &:where(:has(.Checkbox[data-disabled])) {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  &:where(:has(.Label)) {
    height: var(--b-form-field-size);
  }
}

.Label {
  cursor: inherit;

  display: flex;
  align-items: center;

  height: 100%;
  padding-left: 12px;

  color: var(--color-text-neutral);
}