/* generic aura checkbox */
.aura-checkbox {
  appearance: var(--aura-none);
  border: var(--aura-unit-1-px) var(--aura-border-type-solid)
    var(--aura-secondary);
  width: var(--aura-unit-20-px);
  height: var(--aura-unit-20-px);
  margin-right: var(--aura-unit-10-px);
}

/* input styling for checkmark */
input[type='checkbox']:checked::before {
  content: var(--aura-checkmark);
  color: var(--aura-secondary);
  display: var(--aura-display-block);
  text-align: var(--aura-align-center);
}

/* disabled state styling */
.aura-checkbox-disabled {
  appearance: var(--aura-none);
  border: var(--aura-unit-1-px) var(--aura-border-type-solid)
    var(--aura-disabled-body-text);
  opacity: var(--aura-opacity-point-four);
  background-color: var(--aura-scroll-white);
  width: var(--aura-unit-20-px);
  height: var(--aura-unit-20-px);
  margin-right: var(--aura-unit-10-px);
}

/* styling for disabled label */
.aura-checkbox-label {
  color: var(--aura-medallion-earnings-grey);
  opacity: var(--aura-opacity-point-four);
}

/* error state styling */
.aura-checkbox-error {
  border-color: var(--aura-primary);
}

/* input styling when checked and disabled simultaneously */
.aura-checkbox-check-disabled {
  opacity: var(--aura-opacity-point-four);
  border-color: var(--aura-medallion-earnings-grey);
  background-color: var(--aura-light-grey);
}

/* input styling when checked and disabled simultaneously */
input[type='checkbox'].aura-checkbox-check-disabled:checked {
  background-color: var(--aura-light-grey);
}

/* input styling when checked and disabled simultaneously with grey checkmark */
input[type='checkbox'].aura-checkbox-check-disabled:checked::before {
  content: var(--aura-checkmark-disabled);
  color: var(--aura-secondary);
  display: var(--aura-display-block);
  text-align: var(--aura-align-center);
}