/* Values that differ between light and dark but are not plain colors */

/* Icons for valid and invalid form elements */
:root,
:host,
[data-theme="light"] {
  --pico-icon-valid: 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(76,154.5,137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-invalid: 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(200.25,79.25,72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --pico-icon-valid: 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(42,123,111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-invalid: 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(149.5,74,80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :host(:not([data-theme="light"])) {
    --pico-icon-valid: 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(42,123,111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-invalid: 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(149.5,74,80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }
}

/* Icon filters for filled buttons, set per scheme so a nested [data-theme] gets its own.
   Primary is dark in both schemes. Secondary and contrast flip, so their icon flips too. */
:root,
:host,
[data-theme="light"] {
  --_pico-secondary-icon-filter: brightness(0);
  --_pico-contrast-icon-filter: brightness(0) invert(1);
}

[data-theme="dark"] {
  --_pico-secondary-icon-filter: brightness(0) invert(1);
  --_pico-contrast-icon-filter: brightness(0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :host(:not([data-theme="light"])) {
    --_pico-secondary-icon-filter: brightness(0) invert(1);
    --_pico-contrast-icon-filter: brightness(0);
  }
}

/* White icon on filled buttons (chevron on summary buttons, spinner on busy buttons) */
details summary[role="button"]:not(.outline)::after,
[aria-busy="true"]:not(input, select, textarea):is(
    button,
    [type="submit"],
    [type="button"],
    [type="reset"],
    [role="button"]
  ):not(.outline)::before {
  filter: brightness(0) invert(1);
}

details summary[role="button"].secondary:not(.outline)::after,
[aria-busy="true"]:not(input, select, textarea):is(
    button,
    [type="submit"],
    [type="button"],
    [type="reset"],
    [role="button"]
  ).secondary:not(.outline)::before {
  filter: var(--_pico-secondary-icon-filter);
}

details summary[role="button"].contrast:not(.outline)::after,
[aria-busy="true"]:not(input, select, textarea):is(
    button,
    [type="submit"],
    [type="button"],
    [type="reset"],
    [role="button"]
  ).contrast:not(.outline)::before {
  filter: var(--_pico-contrast-icon-filter);
}