/* || Checkbox */
/* Highly inspired from https://moderncss.dev/pure-css-custom-checkbox-style/ */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--size-m);
}

.checkbox > input[type='checkbox'] {
  display: grid;
  place-content: center;
  transform: translateY(-0.075em);

  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: var(--size-radius-xs);
  width: var(--size-xl);
  height: var(--size-xl);
  color: currentColor;
  font: inherit;
}

.checkbox > input[type='checkbox']::before {
  transform: scale(0);
  clip-path: polygon(19% 54%, 36% 70%, 83% 14%, 90% 20%, 36% 84%, 12% 61%);
  transition: 120ms transform ease-in-out;
  box-shadow: inset var(--size-l) var(--size-l) currentColor;
  background-color: CanvasText;
  width: var(--size-l);
  height: var(--size-l);
  content: '';
}

.checkbox > input[type='checkbox']:checked::before {
  transform: scale(1);
}

.checkbox > input[type='checkbox']:focus-visible {
  outline: max(2px, 0.15rem) solid currentColor;
  outline-offset: max(2px, 0.15rem);
}

@supports not selector(:focus-visible) {
  .checkbox > input[type='checkbox']:focus {
    outline: max(2px, 0.15rem) solid currentColor;
    outline-offset: max(2px, 0.15rem);
  }
}

.checkbox > input:checked + label {
  font-weight: 700;
}