/* Base input[type=checkbox] */
input[type=checkbox]{
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  border: var(--border-width-medium) var(--border-style-solid) var(--gray-400);
  border-radius: var(--radius-sm);
  background-color: var(--gray-25);
}

/* Hover + Focus */
input[type=checkbox]:checked:hover, input[type=checkbox].indeterminate:hover {
  background-color: var(--primary-800);
  border-color: var(--primary-800);
}

input[type=checkbox]:not(:checked):disabled:hover{
  background-color: var(--gray-100);
}

input[type=checkbox]:checked:disabled:hover, input[type=checkbox].indeterminate:disabled:hover {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

input[type=checkbox].error:hover{
  border-color: var(--error-700);
  background-color: var(--error-50);
}

input[type=checkbox].error:checked:hover, input[type=checkbox].error.indeterminate:hover {
  border-color: var(--error-700);
  background-color: var(--error-700);
}

input[type="checkbox"]:focus {
  outline: var(--border-width-medium)  var(--border-style-solid) var(--blue-300);
}

/* Checked */
input[type=checkbox]:checked {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
input[type=checkbox]:checked::after {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -58%);
  color: var(--gray-25);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* Disabled */
input[type="checkbox"]:not(:checked):disabled{
  background-color: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-25);
  cursor: not-allowed;
}

input[type="checkbox"]:disabled, input[type="checkbox"].indeterminate:disabled {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
  cursor: not-allowed;
}

/* Error */
input[type=checkbox].error {
  border-color: var(--error-600);
  background-color: var(--error-50);
}

input[type=checkbox].error:checked, input[type=checkbox].error.indeterminate{
  background-color: var(--error-600);
  border-color: var(--error-600);
  color: var(--gray-25);
}

/* Indeterminate */
input[type=checkbox].indeterminate {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

input[type=checkbox].indeterminate::after {
  content: "\F2EA";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  color: var(--gray-25);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}