/* checkbox.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── Checkbox ── */
.Checkbox_checkbox,
input[type=checkbox].Checkbox_checkbox {
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  display:inline-block;
  flex:none;
  height:45px;
  width:45px;
  margin:0;
  padding:0;
  background:var(--color-white);
  border:1px solid rgba(31,68,61,.2);
  border-radius:2px;
  transition:background-color .2s;
  cursor:pointer;
}

.Checkbox_form,
input[type=checkbox].Checkbox_form {
  height:20px;
  width:20px;
  background:var(--color-white);
  border:1px solid var(--color-green);
  border-radius:2px;
}

.Checkbox_small,
input[type=checkbox].Checkbox_small {
  height:24px;
  width:24px;
}

.Checkbox_medium,
input[type=checkbox].Checkbox_medium {
  height:30px;
  width:30px;
}

.Checkbox_accent,
input[type=checkbox].Checkbox_accent {
  background:var(--color-white);
  border:1px solid var(--color-yellow);
}

.Checkbox_error,
input[type=checkbox].Checkbox_error {
  border:2px solid var(--color-input-error);
}

.Checkbox_disabled,
input[type=checkbox].Checkbox_disabled {
  pointer-events:none;
  background:rgba(230,230,230,.4);
}

.Checkbox_checkbox:checked,
input[type=checkbox].Checkbox_checkbox:checked {
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background-color:var(--color-green);
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.61334 5.43256C1.32044 5.13967 0.845571 5.13967 0.552678 5.43256C0.259784 5.72545 0.259784 6.20033 0.552678 6.49322L4.30268 10.2432C4.59557 10.5361 5.07044 10.5361 5.36334 10.2432L13.6133 1.99322C13.9062 1.70033 13.9062 1.22545 13.6133 0.932561C13.3204 0.639667 12.8456 0.639667 12.5527 0.932561L4.83301 8.65223L1.61334 5.43256Z' fill='%23f4b221'/%3E%3C/svg%3E");
  background-size:24px 24px;
  background-repeat:no-repeat;
  background-position:50%;
  border-color:var(--color-green);
}

.Checkbox_form:checked,
.Checkbox_small:checked,
input[type=checkbox].Checkbox_form:checked,
input[type=checkbox].Checkbox_small:checked {
  background-size:14px 14px;
}

.Checkbox_medium:checked,
input[type=checkbox].Checkbox_medium:checked {
  background-size:18px 18px;
}

.Checkbox_dark,
input[type=checkbox].Checkbox_dark {
  border-radius:6px;
}

.Checkbox_dark:checked,
input[type=checkbox].Checkbox_dark:checked {
  background-color:var(--color-yellow);
  border-color:var(--color-yellow);
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.61334 5.43256C1.32044 5.13967 0.845571 5.13967 0.552678 5.43256C0.259784 5.72545 0.259784 6.20033 0.552678 6.49322L4.30268 10.2432C4.59557 10.5361 5.07044 10.5361 5.36334 10.2432L13.6133 1.99322C13.9062 1.70033 13.9062 1.22545 13.6133 0.932561C13.3204 0.639667 12.8456 0.639667 12.5527 0.932561L4.83301 8.65223L1.61334 5.43256Z' fill='%23183f37'/%3E%3C/svg%3E");
}