@use './focus';
@use './icon';
@use './state';

$ods-checkbox-size: 16px;

@mixin ods-checkbox() {
  appearance: none;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: solid 1px var(--ods-color-neutral-300);
  border-radius: var(--ods-border-radius-sm);
  background: var(--ods-color-primary-000);
  cursor: pointer;
  width: $ods-checkbox-size;
  height: $ods-checkbox-size;

  &::before {
    @include icon.ods-icon();

    position: absolute;
    color: var(--ods-color-primary-000);
    font-size: 0.5rem;
  }

  &:focus {
    @include focus.ods-focus();
  }

  &:not(&--error) {
    &:focus {
      border-color: var(--ods-color-form-element-border-focus-default);
    }

    &:hover {
      border-color: var(--ods-color-form-element-border-hover-default);
    }
  }

  &:checked {
    &::before {
      content: "\e914";
    }
  }

  &:indeterminate {
    &::before {
      content: "\e963";
    }
  }

  &:disabled {
    @include state.ods-is-disabled();

    &::before {
      color: state.$ods-state-is-disabled-text-color;
    }
  }

  &:not(:disabled):checked, &:not(:disabled):indeterminate {
    border-color: var(--ods-color-primary-500);
    background: var(--ods-color-primary-500);

    &:focus,
    &:hover {
      border-color: var(--ods-color-primary-700);
      background: var(--ods-color-primary-700);
    }
  }
}