.inv-checkbox {
  appearance: none;
  min-width: 18px;
  height: 18px;
  border: solid 2px var(--color-default--regular);
  border-radius: 2px;
  outline: none;
  position: relative;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
}

.inv-checkbox:disabled {
  border-color: var(--color-default--light);
  cursor: not-allowed;
}

.inv-checkbox:hover {
  border-color: var(--color-primary--regular);
}

.inv-checkbox:active {
  background-color: var(--color-primary--dark);
  border-color: var(--color-primary--dark);
}

.inv-checkbox:checked {
  background-color: var(--color-primary--regular);
  border-color: var(--color-primary--regular);
}

.inv-checkbox:checked::before,
.inv-checkbox:active::before {
  content: 'check';
  position: absolute;
  top: -1px;
  left: -1px;
  color: var(--color-system--white);
  direction: ltr;
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.inv-checkbox:disabled:hover {
  border-color: var(--color-default--light);
  cursor: not-allowed;
}

.inv-checkbox:disabled:checked,
.inv-checkbox:disabled:checked:hover {
  border-color: var(--color-default--light);
  background-color: var(--color-default--light);
  cursor: not-allowed;
}

.inv-checkbox:disabled:checked:hover::before,
.inv-checkbox:disabled:active:hover::before {
  color: var(--color-system--white);
}