@layer blades {
:where(:scope), :host {
  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-switch-background-color: light-dark(#bfc7d9, #333c4e);
  --pico-switch-checked-background-color: var(--pico-primary-background);
  --pico-switch-color: #fff;
  --pico-switch-thumb-box-shadow: 0 0 0 #0000;
}

label:has([type="checkbox"], [type="radio"]) {
  cursor: pointer;
  width: fit-content;
}

[type="checkbox"], [type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -.125em;
  border-width: var(--pico-border-width);
  vertical-align: middle;
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
  margin-inline-end: .5em;
}

[type="checkbox"]::-ms-check, [type="radio"]::-ms-check {
  display: none;
}

[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]: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-repeat: no-repeat;
  background-size: .75em;
}

[type="checkbox"] ~ label, [type="radio"] ~ label {
  cursor: pointer;
  margin-bottom: 0;
  display: inline-block;
}

[type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label: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-repeat: no-repeat;
  background-size: .75em;
}

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

[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
  --pico-background-color: var(--pico-primary-inverse);
  background-image: none;
  border-width: .35em;
}

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

[type="checkbox"][role="switch"]:not([aria-invalid]) {
  --pico-border-color: var(--pico-switch-background-color);
}

[type="checkbox"][role="switch"]:before {
  aspect-ratio: 1;
  background-color: var(--pico-color);
  height: 100%;
  box-shadow: var(--pico-switch-thumb-box-shadow);
  content: "";
  border-radius: 50%;
  transition: margin .1s ease-in-out;
  display: block;
}

[type="checkbox"][role="switch"]:focus {
  --pico-background-color: var(--pico-switch-background-color);
  --pico-border-color: var(--pico-switch-background-color);
}

[type="checkbox"][role="switch"]:checked {
  --pico-background-color: var(--pico-switch-checked-background-color);
  --pico-border-color: var(--pico-switch-checked-background-color);
  background-image: none;
}

[type="checkbox"][role="switch"]:checked:before {
  margin-inline-start: 1em;
}

[type="checkbox"][role="switch"][disabled] {
  --pico-background-color: var(--pico-border-color);
}

[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);
}

}