:root,
:host {
    --pico-danger: light-dark(var(--pico-color-red-550), var(--pico-color-red-350));

    [color-theme=amber],
    &[color-theme=amber] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-amber-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-amber-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-amber-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-amber-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-amber-550), var(--pico-color-amber-350));
        --pico-primary-background: var(--pico-color-amber-200);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-amber-650), var(--pico-color-amber-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-amber-250), var(--pico-color-amber-150));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=azure],
    &[color-theme=azure] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-azure-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-azure-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-azure-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-azure-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-azure-550), var(--pico-color-azure-350));
        --pico-primary-background: var(--pico-color-azure-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-azure-650), var(--pico-color-azure-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-azure-600), var(--pico-color-azure-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=blue],
    &[color-theme=blue] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-blue-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-blue-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-blue-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-blue-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-blue-550), var(--pico-color-blue-350));
        --pico-primary-background: var(--pico-color-blue-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-blue-650), var(--pico-color-blue-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-blue-600), var(--pico-color-blue-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=cyan],
    &[color-theme=cyan] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-cyan-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-cyan-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-cyan-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-cyan-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-cyan-550), var(--pico-color-cyan-350));
        --pico-primary-background: var(--pico-color-cyan-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-cyan-650), var(--pico-color-cyan-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-cyan-600), var(--pico-color-cyan-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=fuchsia],
    &[color-theme=fuchsia] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-fuchsia-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-fuchsia-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-fuchsia-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-fuchsia-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-fuchsia-550), var(--pico-color-fuchsia-350));
        --pico-primary-background: var(--pico-color-fuchsia-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-fuchsia-650), var(--pico-color-fuchsia-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-fuchsia-600), var(--pico-color-fuchsia-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=green],
    &[color-theme=green] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-green-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-green-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-green-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-green-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-green-550), var(--pico-color-green-350));
        --pico-primary-background: var(--pico-color-green-500);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-green-650), var(--pico-color-green-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-green-550), var(--pico-color-green-450));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=grey],
    &[color-theme=grey] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-grey-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-grey-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-grey-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-grey-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-grey-550), var(--pico-color-grey-350));
        --pico-primary-background: var(--pico-color-grey-300);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-grey-650), var(--pico-color-grey-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-grey-350), var(--pico-color-grey-250));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=indigo],
    &[color-theme=indigo] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-indigo-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-indigo-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-indigo-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-indigo-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-indigo-550), var(--pico-color-indigo-350));
        --pico-primary-background: var(--pico-color-indigo-600);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-indigo-650), var(--pico-color-indigo-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-indigo-650), var(--pico-color-indigo-550));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=jade],
    &[color-theme=jade] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-jade-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-jade-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-jade-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-jade-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-jade-550), var(--pico-color-jade-350));
        --pico-primary-background: var(--pico-color-jade-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-jade-650), var(--pico-color-jade-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-jade-600), var(--pico-color-jade-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=lime],
    &[color-theme=lime] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-lime-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-lime-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-lime-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-lime-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-lime-550), var(--pico-color-lime-350));
        --pico-primary-background: var(--pico-color-lime-200);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-lime-650), var(--pico-color-lime-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-lime-250), var(--pico-color-lime-150));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=orange],
    &[color-theme=orange] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-orange-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-orange-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-orange-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-orange-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-orange-550), var(--pico-color-orange-350));
        --pico-primary-background: var(--pico-color-orange-500);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-orange-650), var(--pico-color-orange-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-orange-550), var(--pico-color-orange-450));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=pink],
    &[color-theme=pink] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-pink-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-pink-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-pink-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-pink-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-pink-550), var(--pico-color-pink-350));
        --pico-primary-background: var(--pico-color-pink-500);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-pink-650), var(--pico-color-pink-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-pink-550), var(--pico-color-pink-450));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=pumpkin],
    &[color-theme=pumpkin] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-pumpkin-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-pumpkin-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-pumpkin-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-pumpkin-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-pumpkin-550), var(--pico-color-pumpkin-350));
        --pico-primary-background: var(--pico-color-pumpkin-300);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-pumpkin-650), var(--pico-color-pumpkin-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-pumpkin-350), var(--pico-color-pumpkin-250));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=purple],
    &[color-theme=purple] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-purple-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-purple-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-purple-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-purple-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-purple-550), var(--pico-color-purple-350));
        --pico-primary-background: var(--pico-color-purple-600);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-purple-650), var(--pico-color-purple-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-purple-650), var(--pico-color-purple-550));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=red],
    &[color-theme=red] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-red-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-red-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-red-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-red-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-red-550), var(--pico-color-red-350));
        --pico-primary-background: var(--pico-color-red-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-red-650), var(--pico-color-red-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-red-600), var(--pico-color-red-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=sand],
    &[color-theme=sand] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-sand-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-sand-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-sand-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-sand-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-sand-550), var(--pico-color-sand-350));
        --pico-primary-background: var(--pico-color-sand-200);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-sand-650), var(--pico-color-sand-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-sand-250), var(--pico-color-sand-150));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=slate],
    &[color-theme=slate] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-slate-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-slate-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-slate-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-slate-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-slate-550), var(--pico-color-slate-350));
        --pico-primary-background: var(--pico-color-slate-600);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-slate-650), var(--pico-color-slate-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-slate-650), var(--pico-color-slate-550));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=violet],
    &[color-theme=violet] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-violet-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-violet-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-violet-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-violet-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-violet-550), var(--pico-color-violet-350));
        --pico-primary-background: var(--pico-color-violet-600);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-violet-650), var(--pico-color-violet-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-violet-650), var(--pico-color-violet-550));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    [color-theme=yellow],
    &[color-theme=yellow] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-yellow-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-yellow-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-yellow-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-yellow-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-yellow-550), var(--pico-color-yellow-350));
        --pico-primary-background: var(--pico-color-yellow-100);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-yellow-650), var(--pico-color-yellow-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-yellow-150), color-mix(in srgb, var(--pico-color-yellow-100), var(--pico-color-yellow-50)));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: black;
        --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    }

    [color-theme=zinc],
    &[color-theme=zinc] {
        --text-selection-light-color: color-mix(in srgb, var(--pico-color-zinc-400), transparent 75%);
        --text-selection-dark-color: color-mix(in srgb, var(--pico-color-zinc-350), transparent 81.25%);
        --primary-focus-light: color-mix(in srgb, var(--pico-color-zinc-400), transparent 50%);
        --primary-focus-dark: color-mix(in srgb, var(--pico-color-zinc-350), transparent 62.5%);

        --pico-text-selection-color: light-dark(var(--text-selection-light-color), var(--text-selection-dark-color));
        --pico-primary: light-dark(var(--pico-color-zinc-550), var(--pico-color-zinc-350));
        --pico-primary-background: var(--pico-color-zinc-550);
        --pico-primary-underline: color-mix(in srgb, var(--pico-primary), transparent 50%);
        --pico-primary-hover: light-dark(var(--pico-color-zinc-650), var(--pico-color-zinc-250));
        --pico-primary-hover-background: light-dark(var(--pico-color-zinc-600), var(--pico-color-zinc-500));
        --pico-primary-focus: light-dark(var(--primary-focus-light), var(--primary-focus-dark));
        --pico-primary-inverse: white;
        --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

img.icon {
    --dark-mode-drop-shadow: drop-shadow(0.0625rem 0 0 var(--pico-contrast-background)) drop-shadow(0 0.0625rem 0 var(--pico-contrast-background)) drop-shadow(-0.0625rem 0 0 var(--pico-contrast-background)) drop-shadow(0 -0.0625rem 0 var(--pico-contrast-background));

    [data-theme=dark] &,
    [data-theme=dark]& {
        filter: var(--dark-mode-drop-shadow);
    }

}

[data-theme=dark] #sidebar,
[data-theme=dark]#sidebar {
    --pico-card-sectioning-background-color: #262626;
}

@media only screen and (prefers-color-scheme: dark) {
    img.icon:not([data-theme="light"]) {
        filter: var(--dark-mode-drop-shadow);
    }

    #sidebar {
        --pico-card-sectioning-background-color: #262626;
    }
}