/* Checkbox, radio and switch: [type=checkbox], [type=radio], [type=checkbox][role=switch] */

[type="checkbox"],
[type="radio"] {
  --pico-border-width: 0.125rem;
}

[type="checkbox"][role="switch"] {
  --pico-border-width: 0.1875rem;
}

label:has([type="checkbox"], [type="radio"]) {
  inline-size: fit-content;
  font-weight: var(--pico-font-weight);
  cursor: pointer;
}

[type="checkbox"],
[type="radio"] {
  appearance: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-block-start: -0.125em;
  margin-inline-end: 0.5em;
  border-width: var(--pico-border-width);
  border-radius: calc(var(--pico-border-radius) * 0.5);
  /* The check mark grows from the center when checked */
  background-position: center;
  background-size: 0;
  background-repeat: no-repeat;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color var(--pico-transition),
    border-color var(--pico-transition),
    background-size var(--pico-transition),
    box-shadow var(--pico-transition);

  &:checked,
  &:checked:active,
  &:checked:focus {
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    background-image: var(--pico-icon-checkbox);
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
  }

  &:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
  }

  & ~ label {
    display: inline-block;
    margin-block-end: 0;
    font-weight: var(--pico-font-weight);
    cursor: pointer;

    &:not(:last-of-type) {
      margin-inline-end: 1em;
    }
  }
}

[type="checkbox"]:indeterminate {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  background-image: var(--pico-icon-minus);
  background-position: center;
  background-size: 0.75em auto;
  background-repeat: no-repeat;
}

[type="radio"] {
  border-radius: 50%;

  &:checked,
  &:checked:active,
  &:checked:focus {
    --pico-background-color: var(--pico-primary-inverse);
    border-width: 0.35em;
    background-image: none;
  }
}

[type="checkbox"][role="switch"] {
  --pico-background-color: var(--pico-switch-background-color);
  --pico-color: var(--pico-switch-color);
  inline-size: 2.25em;
  block-size: 1.25em;
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: 1.25em;
  background-color: var(--pico-background-color);
  line-height: 1.25em;

  &:not([aria-invalid]) {
    --pico-border-color: var(--pico-switch-background-color);
  }

  /* The thumb */
  &::before {
    display: block;
    aspect-ratio: 1;
    block-size: 100%;
    border-radius: 50%;
    background-color: var(--pico-color);
    box-shadow: var(--pico-switch-thumb-box-shadow);
    content: "";
    transition: margin var(--pico-transition);
  }

  &:focus {
    --pico-background-color: var(--pico-switch-background-color);
    --pico-border-color: var(--pico-switch-background-color);
  }

  &:checked {
    --pico-background-color: var(--pico-switch-checked-background-color);
    --pico-border-color: var(--pico-switch-checked-background-color);
    background-image: none;

    &::before {
      margin-inline-start: calc(2.25em - 1.25em);
    }
  }

  &[disabled] {
    --pico-background-color: var(--pico-border-color);
  }
}

/* Valid and invalid: filled background for checkbox and switch, border for all three. Flat lists, because :is() would raise the specificity of the plain :checked branch. */
[type="checkbox"][aria-invalid="false"]:checked,
[type="checkbox"][aria-invalid="false"]:checked:active,
[type="checkbox"][aria-invalid="false"]:checked:focus,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
  --pico-background-color: var(--pico-form-element-valid-border-color);
}

[type="checkbox"]:checked[aria-invalid="true"],
[type="checkbox"]:checked:active[aria-invalid="true"],
[type="checkbox"]:checked:focus[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
  --pico-background-color: var(--pico-form-element-invalid-border-color);
}

[type="checkbox"][aria-invalid="false"]:checked,
[type="checkbox"][aria-invalid="false"]:checked:active,
[type="checkbox"][aria-invalid="false"]:checked:focus,
[type="radio"][aria-invalid="false"]:checked,
[type="radio"][aria-invalid="false"]:checked:active,
[type="radio"][aria-invalid="false"]:checked:focus,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
  --pico-border-color: var(--pico-form-element-valid-border-color);
}

[type="checkbox"]:checked[aria-invalid="true"],
[type="checkbox"]:checked:active[aria-invalid="true"],
[type="checkbox"]:checked:focus[aria-invalid="true"],
[type="radio"]:checked[aria-invalid="true"],
[type="radio"]:checked:active[aria-invalid="true"],
[type="radio"]:checked:focus[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
  --pico-border-color: var(--pico-form-element-invalid-border-color);
}