:root,
:host,
.sl-theme-light {
    color-scheme: light;

    --sl-color-gray-50: hsl(318 2% 98%);
    --sl-color-gray-100: hsl(318 3% 96%);
    --sl-color-gray-200: hsl(318 5% 90%);
    --sl-color-gray-300: hsl(318 5% 84%);
    --sl-color-gray-400: hsl(318 5% 65%);
    --sl-color-gray-500: hsl(318 5% 46%);
    --sl-color-gray-600: hsl(318 5% 34%);
    --sl-color-gray-700: hsl(318 5% 26%);
    --sl-color-gray-800: hsl(318 5% 16%);
    --sl-color-gray-900: hsl(318 5% 10%);
    --sl-color-gray-950: hsl(318 6% 8%);

    --sl-color-red-50: hsl(4 86% 97%);
    --sl-color-red-100: hsl(4 93% 94%);
    --sl-color-red-200: hsl(4 96% 89%);
    --sl-color-red-300: hsl(4 94% 82%);
    --sl-color-red-400: hsl(4 91% 71%);
    --sl-color-red-500: hsl(4 84% 60%);
    --sl-color-red-600: hsl(4 72% 51%);
    --sl-color-red-700: hsl(4 74% 42%);
    --sl-color-red-800: hsl(4 70% 35%);
    --sl-color-red-900: hsl(4 63% 31%);
    --sl-color-red-950: hsl(4 60% 20%);

    --sl-color-orange-50: hsl(43 100% 96%);
    --sl-color-orange-100: hsl(43 100% 92%);
    --sl-color-orange-200: hsl(43 98% 83%);
    --sl-color-orange-300: hsl(43 97% 72%);
    --sl-color-orange-400: hsl(43 96% 61%);
    --sl-color-orange-500: hsl(43 95% 53%);
    --sl-color-orange-600: hsl(43 90% 48%);
    --sl-color-orange-700: hsl(4 88% 40%);
    --sl-color-orange-800: hsl(4 79% 34%);
    --sl-color-orange-900: hsl(4 75% 28%);
    --sl-color-orange-950: hsl(4 69% 19%);

    --sl-color-amber-50: hsl(43 100% 96%);
    --sl-color-amber-100: hsl(43 96% 89%);
    --sl-color-amber-200: hsl(43 97% 77%);
    --sl-color-amber-300: hsl(43 97% 64%);
    --sl-color-amber-400: hsl(43 96% 56%);
    --sl-color-amber-500: hsl(43 92% 50%);
    --sl-color-amber-600: hsl(43 95% 44%);
    --sl-color-amber-700: hsl(43 90% 37%);
    --sl-color-amber-800: hsl(43 82% 31%);
    --sl-color-amber-900: hsl(43 78% 26%);
    --sl-color-amber-950: hsl(43 74% 17%);

    --sl-color-yellow-50: hsl(43 92% 95%);
    --sl-color-yellow-100: hsl(43 97% 88%);
    --sl-color-yellow-200: hsl(43 98% 77%);
    --sl-color-yellow-300: hsl(43 98% 64%);
    --sl-color-yellow-400: hsl(43 96% 53%);
    --sl-color-yellow-500: hsl(43 93% 48%);
    --sl-color-yellow-600: hsl(43 96% 40%);
    --sl-color-yellow-700: hsl(43 92% 33%);
    --sl-color-yellow-800: hsl(43 81% 29%);
    --sl-color-yellow-900: hsl(43 72% 26%);
    --sl-color-yellow-950: hsl(43 69% 14%);

    --sl-color-lime-50: hsl(160 92% 95%);
    --sl-color-lime-100: hsl(160 89% 89%);
    --sl-color-lime-200: hsl(160 88% 80%);
    --sl-color-lime-300: hsl(160 84% 67%);
    --sl-color-lime-400: hsl(160 78% 56%);
    --sl-color-lime-500: hsl(160 80% 44%);
    --sl-color-lime-600: hsl(160 85% 34%);
    --sl-color-lime-700: hsl(160 78% 27%);
    --sl-color-lime-800: hsl(160 69% 23%);
    --sl-color-lime-900: hsl(160 61% 20%);
    --sl-color-lime-950: hsl(160 61% 14%);

    --sl-color-green-50: hsl(160 76% 97%);
    --sl-color-green-100: hsl(160 84% 92%);
    --sl-color-green-200: hsl(160 79% 85%);
    --sl-color-green-300: hsl(160 77% 73%);
    --sl-color-green-400: hsl(160 69% 58%);
    --sl-color-green-500: hsl(160 71% 45%);
    --sl-color-green-600: hsl(160 76% 36%);
    --sl-color-green-700: hsl(160 72% 29%);
    --sl-color-green-800: hsl(160 64% 24%);
    --sl-color-green-900: hsl(160 61% 20%);
    --sl-color-green-950: hsl(160 61% 12%);

    --sl-color-emerald-50: hsl(160 81% 96%);
    --sl-color-emerald-100: hsl(160 80% 90%);
    --sl-color-emerald-200: hsl(160 76% 80%);
    --sl-color-emerald-300: hsl(160 72% 67%);
    --sl-color-emerald-400: hsl(160 64% 52%);
    --sl-color-emerald-500: hsl(160 84% 39%);
    --sl-color-emerald-600: hsl(160 94% 30%);
    --sl-color-emerald-700: hsl(160 94% 24%);
    --sl-color-emerald-800: hsl(160 88% 20%);
    --sl-color-emerald-900: hsl(160 86% 16%);
    --sl-color-emerald-950: hsl(160 88% 9%);

    --sl-color-teal-50: hsl(160 76% 97%);
    --sl-color-teal-100: hsl(160 86% 89%);
    --sl-color-teal-200: hsl(160 84% 78%);
    --sl-color-teal-300: hsl(160 77% 64%);
    --sl-color-teal-400: hsl(160 66% 50%);
    --sl-color-teal-500: hsl(160 80% 40%);
    --sl-color-teal-600: hsl(160 84% 32%);
    --sl-color-teal-700: hsl(160 77% 26%);
    --sl-color-teal-800: hsl(160 69% 22%);
    --sl-color-teal-900: hsl(160 61% 19%);
    --sl-color-teal-950: hsl(160 59% 11%);

    --sl-color-cyan-50: hsl(160 100% 96%);
    --sl-color-cyan-100: hsl(172 96% 90%);
    --sl-color-cyan-200: hsl(172 94% 82%);
    --sl-color-cyan-300: hsl(172 92% 69%);
    --sl-color-cyan-400: hsl(172 86% 53%);
    --sl-color-cyan-500: hsl(172 94% 43%);
    --sl-color-cyan-600: hsl(172 91% 36%);
    --sl-color-cyan-700: hsl(172 82% 31%);
    --sl-color-cyan-800: hsl(172 70% 27%);
    --sl-color-cyan-900: hsl(172 64% 24%);
    --sl-color-cyan-950: hsl(172 61% 16%);

    --sl-color-sky-50: hsl(24 90% 97%);
    --sl-color-sky-100: hsl(24 90% 94%);
    --sl-color-sky-200: hsl(24 90% 74%);
    --sl-color-sky-300: hsl(172 96% 74%);
    --sl-color-sky-400: hsl(172 93% 60%);
    --sl-color-sky-500: hsl(172 89% 48%);
    --sl-color-sky-600: hsl(24 90% 34%);
    --sl-color-sky-700: hsl(24 90% 28%);
    --sl-color-sky-800: hsl(24 90% 24%);
    --sl-color-sky-900: hsl(24 80% 21%);
    --sl-color-sky-950: hsl(24 74% 14%);

    --sl-color-blue-50: hsl(24 90% 97%);
    --sl-color-blue-100: hsl(24 90% 93%);
    --sl-color-blue-200: hsl(24 90% 75%);
    --sl-color-blue-300: hsl(24 90% 67%);
    --sl-color-blue-400: hsl(24 90% 58%);
    --sl-color-blue-500: hsl(24 90% 51%);
    --sl-color-blue-600: hsl(24 83% 46%);
    --sl-color-blue-700: hsl(24 76% 41%);
    --sl-color-blue-800: hsl(24 71% 35%);
    --sl-color-blue-900: hsl(24 64% 28%);
    --sl-color-blue-950: hsl(24 55% 16%);

    --sl-color-indigo-50: hsl(24 90% 97%);
    --sl-color-indigo-100: hsl(24 90% 94%);
    --sl-color-indigo-200: hsl(24 90% 76%);
    --sl-color-indigo-300: hsl(24 90% 70%);
    --sl-color-indigo-400: hsl(24 90% 64%);
    --sl-color-indigo-500: hsl(24 84% 57%);
    --sl-color-indigo-600: hsl(24 75% 50%);
    --sl-color-indigo-700: hsl(24 58% 44%);
    --sl-color-indigo-800: hsl(24 55% 36%);
    --sl-color-indigo-900: hsl(24 55% 29%);
    --sl-color-indigo-950: hsl(24 55% 20%);

    --sl-color-violet-50: hsl(24 90% 98%);
    --sl-color-violet-100: hsl(24 90% 96%);
    --sl-color-violet-200: hsl(24 90% 92%);
    --sl-color-violet-300: hsl(24 90% 73%);
    --sl-color-violet-400: hsl(24 90% 66%);
    --sl-color-violet-500: hsl(24 90% 57%);
    --sl-color-violet-600: hsl(24 83% 50%);
    --sl-color-violet-700: hsl(24 70% 43%);
    --sl-color-violet-800: hsl(24 69% 36%);
    --sl-color-violet-900: hsl(24 67% 30%);
    --sl-color-violet-950: hsl(24 62% 18%);

    --sl-color-purple-50: hsl(24 90% 98%);
    --sl-color-purple-100: hsl(24 90% 96%);
    --sl-color-purple-200: hsl(24 90% 92%);
    --sl-color-purple-300: hsl(24 90% 73%);
    --sl-color-purple-400: hsl(24 90% 65%);
    --sl-color-purple-500: hsl(24 90% 56%);
    --sl-color-purple-600: hsl(24 81% 48%);
    --sl-color-purple-700: hsl(24 72% 41%);
    --sl-color-purple-800: hsl(24 67% 34%);
    --sl-color-purple-900: hsl(24 66% 28%);
    --sl-color-purple-950: hsl(24 60% 14%);

    --sl-color-fuchsia-50: hsl(24 90% 98%);
    --sl-color-fuchsia-100: hsl(24 90% 96%);
    --sl-color-fuchsia-200: hsl(24 90% 91%);
    --sl-color-fuchsia-300: hsl(24 90% 71%);
    --sl-color-fuchsia-400: hsl(24 90% 62%);
    --sl-color-fuchsia-500: hsl(24 84% 52%);
    --sl-color-fuchsia-600: hsl(24 70% 42%);
    --sl-color-fuchsia-700: hsl(24 72% 34%);
    --sl-color-fuchsia-800: hsl(24 70% 28%);
    --sl-color-fuchsia-900: hsl(24 64% 24%);
    --sl-color-fuchsia-950: hsl(24 57% 12%);

    --sl-color-pink-50: hsl(24 73% 97%);
    --sl-color-pink-100: hsl(24 78% 95%);
    --sl-color-pink-200: hsl(24 85% 77%);
    --sl-color-pink-300: hsl(24 87% 70%);
    --sl-color-pink-400: hsl(24 86% 60%);
    --sl-color-pink-500: hsl(24 81% 52%);
    --sl-color-pink-600: hsl(24 71% 44%);
    --sl-color-pink-700: hsl(24 78% 36%);
    --sl-color-pink-800: hsl(24 74% 30%);
    --sl-color-pink-900: hsl(24 69% 26%);
    --sl-color-pink-950: hsl(24 65% 14%);

    --sl-color-rose-50: hsl(4 100% 97%);
    --sl-color-rose-100: hsl(4 100% 95%);
    --sl-color-rose-200: hsl(4 96% 90%);
    --sl-color-rose-300: hsl(4 96% 82%);
    --sl-color-rose-400: hsl(4 94% 71%);
    --sl-color-rose-500: hsl(4 89% 60%);
    --sl-color-rose-600: hsl(4 77% 50%);
    --sl-color-rose-700: hsl(4 83% 41%);
    --sl-color-rose-800: hsl(24 80% 30%);
    --sl-color-rose-900: hsl(24 76% 26%);
    --sl-color-rose-950: hsl(24 70% 15%);

    /* Apple HIG-inspired system-blue accent, hue ~211 (iOS/macOS systemBlue,
       #d05a0b at the 600 step). Drives every accent across the app: buttons,
       links, switches, progress, active nav, focus rings. Deliberately plain
       and restrained -- Clarity/Deference over decoration -- see style.css /
       layout.html chrome for the matching flat surfaces and hairline borders. */
    --sl-color-primary-50: hsl(24 90% 97%);
    --sl-color-primary-100: hsl(24 90% 95%);
    --sl-color-primary-200: hsl(24 90% 90%);
    --sl-color-primary-300: hsl(24 90% 71%);
    --sl-color-primary-400: hsl(24 90% 62%);
    --sl-color-primary-500: hsl(24 90% 57%);
    --sl-color-primary-600: hsl(24 92% 46%);
    --sl-color-primary-700: hsl(24 80% 48%);
    --sl-color-primary-800: hsl(24 62% 40%);
    --sl-color-primary-900: hsl(24 55% 31%);
    --sl-color-primary-950: hsl(24 60% 21%);

    --sl-color-success-50: var(--sl-color-green-50);
    --sl-color-success-100: var(--sl-color-green-100);
    --sl-color-success-200: var(--sl-color-green-200);
    --sl-color-success-300: var(--sl-color-green-300);
    --sl-color-success-400: var(--sl-color-green-400);
    --sl-color-success-500: var(--sl-color-green-500);
    --sl-color-success-600: var(--sl-color-green-600);
    --sl-color-success-700: var(--sl-color-green-700);
    --sl-color-success-800: var(--sl-color-green-800);
    --sl-color-success-900: var(--sl-color-green-900);
    --sl-color-success-950: var(--sl-color-green-950);

    --sl-color-warning-50: var(--sl-color-amber-50);
    --sl-color-warning-100: var(--sl-color-amber-100);
    --sl-color-warning-200: var(--sl-color-amber-200);
    --sl-color-warning-300: var(--sl-color-amber-300);
    --sl-color-warning-400: var(--sl-color-amber-400);
    --sl-color-warning-500: var(--sl-color-amber-500);
    --sl-color-warning-600: var(--sl-color-amber-600);
    --sl-color-warning-700: var(--sl-color-amber-700);
    --sl-color-warning-800: var(--sl-color-amber-800);
    --sl-color-warning-900: var(--sl-color-amber-900);
    --sl-color-warning-950: var(--sl-color-amber-950);

    --sl-color-danger-50: var(--sl-color-red-50);
    --sl-color-danger-100: var(--sl-color-red-100);
    --sl-color-danger-200: var(--sl-color-red-200);
    --sl-color-danger-300: var(--sl-color-red-300);
    --sl-color-danger-400: var(--sl-color-red-400);
    --sl-color-danger-500: var(--sl-color-red-500);
    --sl-color-danger-600: var(--sl-color-red-600);
    --sl-color-danger-700: var(--sl-color-red-700);
    --sl-color-danger-800: var(--sl-color-red-800);
    --sl-color-danger-900: var(--sl-color-red-900);
    --sl-color-danger-950: var(--sl-color-red-950);

    --sl-color-neutral-50: var(--sl-color-gray-50);
    --sl-color-neutral-100: var(--sl-color-gray-100);
    --sl-color-neutral-200: var(--sl-color-gray-200);
    --sl-color-neutral-300: var(--sl-color-gray-300);
    --sl-color-neutral-400: var(--sl-color-gray-400);
    --sl-color-neutral-500: var(--sl-color-gray-500);
    --sl-color-neutral-600: var(--sl-color-gray-600);
    --sl-color-neutral-700: var(--sl-color-gray-700);
    --sl-color-neutral-800: var(--sl-color-gray-800);
    --sl-color-neutral-900: var(--sl-color-gray-900);
    --sl-color-neutral-950: var(--sl-color-gray-950);

    --sl-color-neutral-0: hsl(318, 0%, 100%);
    --sl-color-neutral-1000: hsl(318, 4%, 0%);

    /* Rounder, "continuous corner" feel closer to Apple's own controls/cards. */
    --sl-border-radius-small: 0.5rem;
    --sl-border-radius-medium: 0.75rem;
    --sl-border-radius-large: 1rem;
    --sl-border-radius-x-large: 1.5rem;

    --sl-border-radius-circle: 50%;
    --sl-border-radius-pill: 9999px;

    /* Neutral, low-contrast elevation (Depth) -- no color tint, just soft
       layered shadows so surfaces read as "above" the page without shouting. */
    --sl-shadow-x-small: 0 1px 2px rgb(18 8 22 / 5%);
    --sl-shadow-small: 0 1px 3px rgb(18 8 22 / 8%), 0 1px 2px rgb(18 8 22 / 4%);
    --sl-shadow-medium: 0 4px 10px rgb(18 8 22 / 8%), 0 2px 4px rgb(18 8 22 / 4%);
    --sl-shadow-large: 0 10px 20px rgb(18 8 22 / 10%), 0 4px 8px rgb(18 8 22 / 4%);
    --sl-shadow-x-large: 0 20px 40px rgb(18 8 22 / 12%), 0 8px 16px rgb(18 8 22 / 6%);

    --sl-spacing-3x-small: 0.125rem;
    --sl-spacing-2x-small: 0.25rem;
    --sl-spacing-x-small: 0.5rem;
    --sl-spacing-small: 0.75rem;
    --sl-spacing-medium: 1rem;
    --sl-spacing-large: 1.25rem;
    --sl-spacing-x-large: 1.75rem;
    --sl-spacing-2x-large: 2.25rem;
    --sl-spacing-3x-large: 3rem;
    --sl-spacing-4x-large: 4.5rem;

    --sl-transition-x-slow: 1000ms;
    --sl-transition-slow: 500ms;
    --sl-transition-medium: 250ms;
    --sl-transition-fast: 150ms;
    --sl-transition-x-fast: 50ms;

    --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    --sl-font-serif: Georgia, "Times New Roman", serif;

    --sl-font-size-2x-small: 0.625rem;
    --sl-font-size-x-small: 0.75rem;
    --sl-font-size-small: 0.875rem;
    --sl-font-size-medium: 1rem;
    --sl-font-size-large: 1.25rem;
    --sl-font-size-x-large: 1.5rem;
    --sl-font-size-2x-large: 2.25rem;
    --sl-font-size-3x-large: 3rem;
    --sl-font-size-4x-large: 4.5rem;

    --sl-font-weight-light: 300;
    --sl-font-weight-normal: 400;
    --sl-font-weight-semibold: 500;
    --sl-font-weight-bold: 700;

    --sl-letter-spacing-denser: -0.03em;
    --sl-letter-spacing-dense: -0.015em;
    --sl-letter-spacing-normal: normal;
    --sl-letter-spacing-loose: 0.075em;
    --sl-letter-spacing-looser: 0.15em;

    --sl-line-height-denser: 1;
    --sl-line-height-dense: 1.4;
    --sl-line-height-normal: 1.8;
    --sl-line-height-loose: 2.2;
    --sl-line-height-looser: 2.6;

    --sl-focus-ring-color: var(--sl-color-primary-600);
    --sl-focus-ring-style: solid;
    --sl-focus-ring-width: 3px;
    --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
    --sl-focus-ring-offset: 1px;

    --sl-button-font-size-small: var(--sl-font-size-x-small);
    --sl-button-font-size-medium: var(--sl-font-size-small);
    --sl-button-font-size-large: var(--sl-font-size-medium);

    --sl-input-height-small: 1.875rem;
    --sl-input-height-medium: 2.5rem;
    --sl-input-height-large: 3.125rem;

    --sl-input-background-color: var(--sl-color-neutral-0);
    --sl-input-background-color-hover: var(--sl-input-background-color);
    --sl-input-background-color-focus: var(--sl-input-background-color);
    --sl-input-background-color-disabled: var(--sl-color-neutral-100);
    --sl-input-border-color: var(--sl-color-neutral-300);
    --sl-input-border-color-hover: var(--sl-color-neutral-400);
    --sl-input-border-color-focus: var(--sl-color-primary-500);
    --sl-input-border-color-disabled: var(--sl-color-neutral-300);
    --sl-input-border-width: 1px;
    --sl-input-required-content: "*";
    --sl-input-required-content-offset: -2px;
    --sl-input-required-content-color: var(--sl-input-label-color);

    --sl-input-border-radius-small: var(--sl-border-radius-medium);
    --sl-input-border-radius-medium: var(--sl-border-radius-medium);
    --sl-input-border-radius-large: var(--sl-border-radius-medium);

    --sl-input-font-family: var(--sl-font-sans);
    --sl-input-font-weight: var(--sl-font-weight-normal);
    --sl-input-font-size-small: var(--sl-font-size-small);
    --sl-input-font-size-medium: var(--sl-font-size-medium);
    --sl-input-font-size-large: var(--sl-font-size-large);
    --sl-input-letter-spacing: var(--sl-letter-spacing-normal);

    --sl-input-color: var(--sl-color-neutral-700);
    --sl-input-color-hover: var(--sl-color-neutral-700);
    --sl-input-color-focus: var(--sl-color-neutral-700);
    --sl-input-color-disabled: var(--sl-color-neutral-900);
    --sl-input-icon-color: var(--sl-color-neutral-500);
    --sl-input-icon-color-hover: var(--sl-color-neutral-600);
    --sl-input-icon-color-focus: var(--sl-color-neutral-600);
    --sl-input-placeholder-color: var(--sl-color-neutral-500);
    --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
    --sl-input-spacing-small: var(--sl-spacing-small);
    --sl-input-spacing-medium: var(--sl-spacing-medium);
    --sl-input-spacing-large: var(--sl-spacing-large);

    --sl-input-focus-ring-color: var(--sl-color-primary-200);
    --sl-input-focus-ring-offset: 0;

    --sl-input-filled-background-color: var(--sl-color-neutral-100);
    --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
    --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
    --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
    --sl-input-filled-color: var(--sl-color-neutral-800);
    --sl-input-filled-color-hover: var(--sl-color-neutral-800);
    --sl-input-filled-color-focus: var(--sl-color-neutral-700);
    --sl-input-filled-color-disabled: var(--sl-color-neutral-800);

    --sl-input-label-font-size-small: var(--sl-font-size-small);
    --sl-input-label-font-size-medium: var(--sl-font-size-medium);
    --sl-input-label-font-size-large: var(--sl-font-size-large);
    --sl-input-label-color: inherit;

    --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
    --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
    --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
    --sl-input-help-text-color: var(--sl-color-neutral-500);

    --sl-toggle-size-small: 0.875rem;
    --sl-toggle-size-medium: 1.125rem;
    --sl-toggle-size-large: 1.375rem;

    --sl-overlay-background-color: hsl(318 5% 46% / 33%);

    --sl-panel-background-color: var(--sl-color-neutral-0);
    --sl-panel-border-color: var(--sl-color-neutral-200);
    --sl-panel-border-width: 1px;

    --sl-tooltip-border-radius: var(--sl-border-radius-medium);
    --sl-tooltip-background-color: var(--sl-color-neutral-800);
    --sl-tooltip-color: var(--sl-color-neutral-0);
    --sl-tooltip-font-family: var(--sl-font-sans);
    --sl-tooltip-font-weight: var(--sl-font-weight-normal);
    --sl-tooltip-font-size: var(--sl-font-size-small);
    --sl-tooltip-line-height: var(--sl-line-height-dense);
    --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
    --sl-tooltip-arrow-size: 6px;

    --sl-z-index-drawer: 700;
    --sl-z-index-dialog: 800;
    --sl-z-index-dropdown: 900;
    --sl-z-index-toast: 950;
    --sl-z-index-tooltip: 1000;
}

@supports (scrollbar-gutter: stable) {
    .sl-scroll-lock {
        scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
    }

    .sl-scroll-lock body {
        overflow: hidden !important;
    }
}

@supports not (scrollbar-gutter: stable) {
    .sl-scroll-lock body {
        padding-right: var(--sl-scroll-lock-size) !important;
        overflow: hidden !important;
    }
}

.sl-toast-stack {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    z-index: var(--sl-z-index-toast);
    width: 28rem;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.sl-toast-stack sl-alert {
    margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
    box-shadow: var(--sl-shadow-large);
}

sl-switch {
    --width: 2rem;
    --height: 1.125rem;
    --thumb-size: 0.875rem;
}

.validity-styles sl-input,
.validity-styles sl-select,
.validity-styles sl-checkbox {
    display: block;
    margin-bottom: var(--sl-spacing-medium);
}

/* user invalid styles */
.validity-styles sl-input[data-user-invalid]::part(base),
.validity-styles sl-select[data-user-invalid]::part(combobox),
.validity-styles sl-checkbox[data-user-invalid]::part(control) {
    border-color: var(--sl-color-danger-600);
}

.validity-styles [data-user-invalid]::part(form-control-label),
.validity-styles [data-user-invalid]::part(form-control-help-text),
.validity-styles sl-checkbox[data-user-invalid]::part(label) {
    color: var(--sl-color-danger-700);
}

.validity-styles sl-checkbox[data-user-invalid]::part(control) {
    outline: none;
}

.validity-styles sl-input:focus-within[data-user-invalid]::part(base),
.validity-styles sl-select:focus-within[data-user-invalid]::part(combobox),
.validity-styles sl-checkbox:focus-within[data-user-invalid]::part(control) {
    border-color: var(--sl-color-danger-600);
    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}

/* User valid styles */
.validity-styles sl-input[data-user-valid]::part(base),
.validity-styles sl-select[data-user-valid]::part(combobox),
.validity-styles sl-checkbox[data-user-valid]::part(control) {
    border-color: var(--sl-color-success-600);
}

.validity-styles [data-user-valid]::part(form-control-label),
.validity-styles [data-user-valid]::part(form-control-help-text),
.validity-styles sl-checkbox[data-user-valid]::part(label) {
    color: var(--sl-color-success-700);
}

.validity-styles sl-checkbox[data-user-valid]::part(control) {
    background-color: var(--sl-color-success-600);
    outline: none;
}

.validity-styles sl-input:focus-within[data-user-valid]::part(base),
.validity-styles sl-select:focus-within[data-user-valid]::part(combobox),
.validity-styles sl-checkbox:focus-within[data-user-valid]::part(control) {
    border-color: var(--sl-color-success-600);
    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
}

/* Callouts */
.callout {
    position: relative;
    background-color: var(--sl-color-neutral-100);
    border-left: solid 4px var(--sl-color-neutral-500);
    border-radius: var(--sl-border-radius-medium);
    color: var(--sl-color-neutral-800);
    padding: 1rem 1rem 1rem 1.5rem;
    margin-bottom: var(--sl-spacing-medium);
}

.callout> :first-child {
    margin-top: 0;
}

.callout> :last-child {
    margin-bottom: 0;
}

.callout--tip {
    background-color: var(--sl-color-primary-100);
    border-left-color: var(--sl-color-primary-600);
    color: var(--sl-color-primary-800);
}

.callout::before {
    content: '';
    position: absolute;
    top: calc(50% - 0.8rem);
    left: calc(-0.8rem - 2px);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-font-serif);
    font-weight: var(--sl-font-weight-bold);
    color: var(--sl-color-neutral-0);
    clip-path: circle(50% at 50% 50%);
}

.callout--tip::before {
    content: 'i';
    font-style: italic;
    background-color: var(--sl-color-primary-600);
}

.callout--warning {
    background-color: var(--sl-color-warning-100);
    border-left-color: var(--sl-color-warning-600);
    color: var(--sl-color-warning-800);
}

.callout--warning::before {
    content: '!';
    background-color: var(--sl-color-warning-600);
}

.callout--danger {
    background-color: var(--sl-color-danger-100);
    border-left-color: var(--sl-color-danger-600);
    color: var(--sl-color-danger-800);
}

.callout--danger::before {
    content: '‼';
    background-color: var(--sl-color-danger-600);
}

.callout+.callout {
    margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));
}

.callout a {
    color: inherit;
}


sl-menu sl-icon {
    font-size: .875rem;

}

sl-tab-group::part(active-tab-indicator) {
    transition-duration: 0s;
}

/* top center Toast */
.sl-toast-stack {
    left: 0;
    right: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
/* 
sl-select::part(prefix) {
    margin-right: 0.5rem;
} */

sl-alert::part(base) {
    border-radius: 8px;
    border: 1px solid var(--sl-color-neutral-200) !important;
}

sl-alert::part(message) {
    padding: 1rem;
}
input[type="file"] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding-right: 1rem;
    min-height: 2.25rem;
    background: var(--sl-input-filled-background-color, var(--sl-color-neutral-50));
    color: var(--sl-input-filled-color, var(--sl-color-neutral-800));
    border-radius: 0.25rem;
    cursor: pointer;
    overflow: hidden;
    font-family: var(--sl-input-font-family);
    font-size: var(--sl-input-font-size-medium);
}

/* Modern browsers */
input[type="file"]::file-selector-button {
    background: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    border: none;
    padding: 0.4rem 0.75rem;
    margin: 0;
    font-weight: var(--sl-font-weight-semibold);
    cursor: pointer;
}

/* WebKit fallback */
input[type="file"]::-webkit-file-upload-button {
    background: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    border: none;
    padding: 0.4rem 0.75rem;
    margin-right: 0.75rem;
    font-weight: var(--sl-font-weight-semibold);
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--sl-color-primary-700);
}

input[type="file"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--sl-focus-ring-width, 3px) var(--sl-focus-ring-color);
    border-color: var(--sl-input-border-color-focus);
}

input[type="file"][disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Optional size modifiers */
input[type="file"][data-size="small"] {
    padding: 0.25rem 0.5rem;
    font-size: var(--sl-font-size-small);
}

input[type="file"][data-size="large"] {
    padding: 0.75rem 1rem;
    font-size: var(--sl-font-size-large);
}

.badge-light::part(base) {
    background-color: var(--sl-color-gray-100);
    color: var(--sl-color-gray-800);
}

sl-button[circle]::part(label) {
    display: flex;
    align-items: center;
    justify-content: center;
}

sl-card::part(base) {
    border-radius: var(--sl-border-radius-large);
}