/*!
 * VILLAGE v0.0.3 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@media print {
  .village-checkbox-group input[type=checkbox] + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-village-primary) 4px, var(--border-action-high-village-primary) 5px, transparent 6px), linear-gradient(var(--border-action-high-village-primary), var(--border-action-high-village-primary)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-village-primary) 4px, var(--border-action-high-village-primary) 5px, transparent 6px), linear-gradient(var(--border-action-high-village-primary), var(--border-action-high-village-primary)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-village-primary) 4px, var(--border-action-high-village-primary) 5px, transparent 6px), linear-gradient(var(--border-action-high-village-primary), var(--border-action-high-village-primary)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-village-primary) 4px, var(--border-action-high-village-primary) 5px, transparent 6px), linear-gradient(var(--border-action-high-village-primary), var(--border-action-high-village-primary)), var(--data-uri-svg);
  }

  .village-checkbox-group input[type=checkbox]:checked + label::before {
    background-color: var(--background-active-village-primary);
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-village-primary) 4px, var(--border-active-village-primary) 5px, transparent 6px), linear-gradient(var(--border-active-village-primary), var(--border-active-village-primary)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-village-primary) 4px, var(--border-active-village-primary) 5px, transparent 6px), linear-gradient(var(--border-active-village-primary), var(--border-active-village-primary)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-village-primary) 4px, var(--border-active-village-primary) 5px, transparent 6px), linear-gradient(var(--border-active-village-primary), var(--border-active-village-primary)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-village-primary) 4px, var(--border-active-village-primary) 5px, transparent 6px), linear-gradient(var(--border-active-village-primary), var(--border-active-village-primary)), var(--data-uri-svg);

    --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='hsl(180, 80%, 98%)' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
  }

  :root[data-village-theme=dark] .village-checkbox-group input[type=checkbox]:checked + label::before {
    --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='hsl(180, 20%, 7%)' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
  }

  .village-checkbox-group input[type=checkbox]:disabled + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), var(--data-uri-svg);
  }

  .village-checkbox-group input[type=checkbox]:disabled:checked + label::before {
    background-color: var(--background-disabled-grey);

    --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23929292' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
  }

  :root[data-village-theme=dark] .village-checkbox-group input[type=checkbox]:disabled:checked + label::before {
    --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23666' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
  }

  .village-checkbox-group--error input[type=checkbox] + label,
  .village-checkbox-group--error input[type=checkbox]:checked + label {
    color: hsl(0, 45%, 43%);
  }

  .village-checkbox-group--error input[type=checkbox] + label::before,
  .village-checkbox-group--error input[type=checkbox]:checked + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg);
  }

  .village-checkbox-group--error::before {
    background-color: hsl(0, 45%, 43%);
  }

  .village-checkbox-group--valid input[type=checkbox] + label,
  .village-checkbox-group--valid input[type=checkbox]:checked + label {
    color: hsl(90, 45%, 43%);
  }

  .village-checkbox-group--valid input[type=checkbox] + label::before,
  .village-checkbox-group--valid input[type=checkbox]:checked + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg);
  }

  .village-checkbox-group--valid::before {
    background-color: hsl(90, 45%, 43%);
  }

  .village-fieldset--error .village-checkbox-group input[type=checkbox] + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg);
  }

  .village-fieldset--valid .village-checkbox-group input[type=checkbox] + label::before {
    background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg);
  }
}
