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

  --sl-color-gray-50: #fafafa;
  --sl-color-gray-100: #f5f5f5;
  --sl-color-gray-200: #e5e5e5;
  --sl-color-gray-300: #d9d9d9;
  --sl-color-gray-400: #b2b2b2;
  --sl-color-gray-500: #999999;
  --sl-color-gray-600: #555555;
  --sl-color-gray-700: #404040;
  --sl-color-gray-800: #2f2f2f;
  --sl-color-gray-900: #212121;
  --sl-color-gray-950: #1a1a1a;

  --sl-color-gray-blue-50: #fafbfc;
  --sl-color-gray-blue-100: #f7f8fa;
  --sl-color-gray-blue-200: #f1f4f6;
  --sl-color-gray-blue-300: #ebeef2;
  --sl-color-gray-blue-400: #eaeef2;
  --sl-color-gray-blue-500: #d0d4dc;
  --sl-color-gray-blue-600: #b3b8c5;
  --sl-color-gray-blue-700: #989eac;
  --sl-color-gray-blue-800: #797f91;
  --sl-color-gray-blue-900: #646a78;
  --sl-color-gray-blue-950: #3a3c46;

  --sl-color-black-0: rgba(0, 0, 0, 0);
  --sl-color-black-3: rgba(0, 0, 0, 0.03);
  --sl-color-black-6: rgba(0, 0, 0, 0.06);
  --sl-color-black-12: rgba(0, 0, 0, 0.12);
  --sl-color-black-18: rgba(0, 0, 0, 0.18);
  --sl-color-black-28: rgba(0, 0, 0, 0.28);
  --sl-color-black-46: rgba(0, 0, 0, 0.46);
  --sl-color-black-64: rgba(0, 0, 0, 0.64);
  --sl-color-black-82: rgba(0, 0, 0, 0.82);
  --sl-color-black-94: rgba(0, 0, 0, 0.94);
  --sl-color-black-100: rgba(0, 0, 0, 1);

  --sl-color-white-0: rgba(255, 255, 255, 0);
  --sl-color-white-3: rgba(255, 255, 255, 0.03);
  --sl-color-white-6: rgba(255, 255, 255, 0.06);
  --sl-color-white-12: rgba(255, 255, 255, 0.12);
  --sl-color-white-18: rgba(255, 255, 255, 0.18);
  --sl-color-white-28: rgba(255, 255, 255, 0.28);
  --sl-color-white-46: rgba(255, 255, 255, 0.46);
  --sl-color-white-64: rgba(255, 255, 255, 0.64);
  --sl-color-white-82: rgba(255, 255, 255, 0.82);
  --sl-color-white-94: rgba(255, 255, 255, 0.94);
  --sl-color-white-100: rgba(255, 255, 255, 1);

  --sl-color-purple-gray-50: #fafbff;
  --sl-color-purple-gray-100: #f5f8ff;
  --sl-color-purple-gray-200: #e4eaf6;
  --sl-color-purple-gray-300: #ced7eb;
  --sl-color-purple-gray-400: #bcc7e0;
  --sl-color-purple-gray-500: #97a5c7;
  --sl-color-purple-gray-600: #6c7ca3;
  --sl-color-purple-gray-700: #55658a;
  --sl-color-purple-gray-800: #2f3e61;
  --sl-color-purple-gray-900: #1d2947;
  --sl-color-purple-gray-950: #0d172e;

  --sl-color-red-50: #fff5f6;
  --sl-color-red-100: #ffe0e5;
  --sl-color-red-200: #ffccd2;
  --sl-color-red-300: #ff8088;
  --sl-color-red-400: #ff5257;
  --sl-color-red-500: #fb2d2d;
  --sl-color-red-600: #e6150e;
  --sl-color-red-700: #a80b00;
  --sl-color-red-800: #800d00;
  --sl-color-red-900: #4d0800;
  --sl-color-red-950: #330500;

  --sl-color-orange-50: #fff8f2;
  --sl-color-orange-100: #ffe7d6;
  --sl-color-orange-200: #ffcaa8;
  --sl-color-orange-300: #ffa97a;
  --sl-color-orange-400: #ff7433;
  --sl-color-orange-500: #ff500a;
  --sl-color-orange-600: #d14300;
  --sl-color-orange-700: #a63907;
  --sl-color-orange-800: #852a00;
  --sl-color-orange-900: #611f00;
  --sl-color-orange-950: #331000;

  --sl-color-amber-50: #fffbf2;
  --sl-color-amber-100: #fff1d4;
  --sl-color-amber-200: #ffe0a6;
  --sl-color-amber-300: #ffcb78;
  --sl-color-amber-400: #ffab33;
  --sl-color-amber-500: #ff950b;
  --sl-color-amber-600: #db7c00;
  --sl-color-amber-700: #a35700;
  --sl-color-amber-800: #853c00;
  --sl-color-amber-900: #522500;
  --sl-color-amber-950: #271501;

  --sl-color-yellow-50: #fffded;
  --sl-color-yellow-100: #fff8cc;
  --sl-color-yellow-200: #ffef9e;
  --sl-color-yellow-300: #ffe270;
  --sl-color-yellow-400: #ffd342;
  --sl-color-yellow-500: #f2b50d;
  --sl-color-yellow-600: #cc9200;
  --sl-color-yellow-700: #986d00;
  --sl-color-yellow-800: #805900;
  --sl-color-yellow-900: #664600;
  --sl-color-yellow-950: #332200;

  --sl-color-lime-50: #fbffed;
  --sl-color-lime-100: #f2ffd1;
  --sl-color-lime-200: #e1fca2;
  --sl-color-lime-300: #bee86b;
  --sl-color-lime-400: #96cf34;
  --sl-color-lime-500: #6db500;
  --sl-color-lime-600: #599603;
  --sl-color-lime-700: #3f7000;
  --sl-color-lime-800: #345c00;
  --sl-color-lime-900: #264500;
  --sl-color-lime-950: #162900;

  --sl-color-green-50: #f2fff5;
  --sl-color-green-100: #dcfae4;
  --sl-color-green-200: #bfeecc;
  --sl-color-green-300: #6dd18e;
  --sl-color-green-400: #40bd6e;
  --sl-color-green-500: #1ba854;
  --sl-color-green-600: #0b8443;
  --sl-color-green-700: #03632f;
  --sl-color-green-800: #004d26;
  --sl-color-green-900: #003d1f;
  --sl-color-green-950: #002914;

  --sl-color-emerald-50: #ecfef6;
  --sl-color-emerald-100: #d1fae5;
  --sl-color-emerald-200: #a8f3cf;
  --sl-color-emerald-300: #6ee7b5;
  --sl-color-emerald-400: #34d396;
  --sl-color-emerald-500: #12b984;
  --sl-color-emerald-600: #07926b;
  --sl-color-emerald-700: #05785b;
  --sl-color-emerald-800: #065f49;
  --sl-color-emerald-900: #064e3c;
  --sl-color-emerald-950: #022d23;

  --sl-color-teal-50: #edfffb;
  --sl-color-teal-100: #dbfff8;
  --sl-color-teal-200: #a6f5e8;
  --sl-color-teal-300: #70e1d2;
  --sl-color-teal-400: #3ecbbd;
  --sl-color-teal-500: #1ab7ad;
  --sl-color-teal-600: #0aa39b;
  --sl-color-teal-700: #088680;
  --sl-color-teal-800: #006663;
  --sl-color-teal-900: #003e3d;
  --sl-color-teal-950: #001515;

  --sl-color-cyan-50: #edfdff;
  --sl-color-cyan-100: #d6f8ff;
  --sl-color-cyan-200: #a8eeff;
  --sl-color-cyan-300: #7ae0ff;
  --sl-color-cyan-400: #62cef6;
  --sl-color-cyan-500: #21b8ef;
  --sl-color-cyan-600: #1a9dd6;
  --sl-color-cyan-700: #0779ad;
  --sl-color-cyan-800: #005885;
  --sl-color-cyan-900: #003c5c;
  --sl-color-cyan-950: #002033;

  --sl-color-sky-50: #f7f9ff;
  --sl-color-sky-100: #f2f6ff;
  --sl-color-sky-200: #e9f0ff;
  --sl-color-sky-300: #e2ebff;
  --sl-color-sky-400: #b5caff;
  --sl-color-sky-500: #87a9ff;
  --sl-color-sky-600: #5582f3;
  --sl-color-sky-700: #3761ca;
  --sl-color-sky-800: #1f44a1;
  --sl-color-sky-900: #0e2c79;
  --sl-color-sky-950: #031c5e;

  --sl-color-blue-50: #f5faff;
  --sl-color-blue-100: #e3f1ff;
  --sl-color-blue-200: #cce5ff;
  --sl-color-blue-300: #99c6ff;
  --sl-color-blue-400: #66a6ff;
  --sl-color-blue-500: #3382ff;
  --sl-color-blue-600: #1466ff;
  --sl-color-blue-700: #044ad6;
  --sl-color-blue-800: #0037ad;
  --sl-color-blue-900: #002680;
  --sl-color-blue-950: #00164d;

  --sl-color-indigo-50: #f5f6ff;
  --sl-color-indigo-100: #e5e9ff;
  --sl-color-indigo-200: #ccd3ff;
  --sl-color-indigo-300: #9ba6fd;
  --sl-color-indigo-400: #7d85fc;
  --sl-color-indigo-500: #6468f7;
  --sl-color-indigo-600: #4b4bf5;
  --sl-color-indigo-700: #322fcc;
  --sl-color-indigo-800: #1a18a3;
  --sl-color-indigo-900: #0d097a;
  --sl-color-indigo-950: #040047;

  --sl-color-violet-50: #f5f2ff;
  --sl-color-violet-100: #e9e3ff;
  --sl-color-violet-200: #d1c2ff;
  --sl-color-violet-300: #ba9eff;
  --sl-color-violet-400: #a880ff;
  --sl-color-violet-500: #8f58f9;
  --sl-color-violet-600: #742ff7;
  --sl-color-violet-700: #5a17cf;
  --sl-color-violet-800: #4305a6;
  --sl-color-violet-900: #330080;
  --sl-color-violet-950: #250059;

  --sl-color-purple-50: #f8f2ff;
  --sl-color-purple-100: #f0e3ff;
  --sl-color-purple-200: #dec2ff;
  --sl-color-purple-300: #cb9eff;
  --sl-color-purple-400: #bf80ff;
  --sl-color-purple-500: #a858f8;
  --sl-color-purple-600: #932ff7;
  --sl-color-purple-700: #7317cf;
  --sl-color-purple-800: #5605a6;
  --sl-color-purple-900: #400080;
  --sl-color-purple-950: #2d0059;

  --sl-color-fuchsia-50: #fff2fc;
  --sl-color-fuchsia-100: #ffe3f8;
  --sl-color-fuchsia-200: #ffc2f0;
  --sl-color-fuchsia-300: #ff9ee7;
  --sl-color-fuchsia-400: #ff80df;
  --sl-color-fuchsia-500: #f858d0;
  --sl-color-fuchsia-600: #ed1db9;
  --sl-color-fuchsia-700: #b8148f;
  --sl-color-fuchsia-800: #950471;
  --sl-color-fuchsia-900: #66004d;
  --sl-color-fuchsia-950: #4d0039;

  --sl-color-pink-50: #fff0f3;
  --sl-color-pink-100: #ffdbe4;
  --sl-color-pink-200: #ffc2d2;
  --sl-color-pink-300: #ff99b8;
  --sl-color-pink-400: #f86d9b;
  --sl-color-pink-500: #f74f87;
  --sl-color-pink-600: #e32067;
  --sl-color-pink-700: #ba0b4e;
  --sl-color-pink-800: #91003a;
  --sl-color-pink-900: #69002c;
  --sl-color-pink-950: #40001c;

  --sl-color-rose-50: #fff0f2;
  --sl-color-rose-100: #ffdbe0;
  --sl-color-rose-200: #ffc2ca;
  --sl-color-rose-300: #ff99a7;
  --sl-color-rose-400: #f86d7f;
  --sl-color-rose-500: #f74f65;
  --sl-color-rose-600: #e3203a;
  --sl-color-rose-700: #ba0b22;
  --sl-color-rose-800: #910013;
  --sl-color-rose-900: #69000e;
  --sl-color-rose-950: #400009;

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

  --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-gray-50: var(--sl-color-gray-blue-50);
  --sl-color-neutral-gray-100: var(--sl-color-gray-blue-100);
  --sl-color-neutral-gray-200: var(--sl-color-gray-blue-200);
  --sl-color-neutral-gray-300: var(--sl-color-gray-blue-300);
  --sl-color-neutral-gray-400: var(--sl-color-gray-blue-400);
  --sl-color-neutral-gray-500: var(--sl-color-gray-blue-500);
  --sl-color-neutral-gray-600: var(--sl-color-gray-blue-600);
  --sl-color-neutral-gray-700: var(--sl-color-gray-blue-700);
  --sl-color-neutral-gray-800: var(--sl-color-gray-blue-800);
  --sl-color-neutral-gray-900: var(--sl-color-gray-blue-900);
  --sl-color-neutral-gray-950: var(--sl-color-gray-blue-950);

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

  --sl-color-on-surface-01: #ffffff;

  --sl-border-radius-small: calc(
    16 * 0.125 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-medium: calc(
    16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-x-medium: calc(
    16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-large: calc(
    16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-x-large: calc(
    16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-2x-large: calc(
    16 * 1 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-border-radius-3x-large: calc(
    16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem
  );

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

  --sl-shadow-x-small: 0 1px 2px rgba(47, 62, 97, 0.1);
  --sl-shadow-small: 0 2px 5px rgba(47, 62, 97, 0.12);
  --sl-shadow-medium: 0 4px 10px rgba(47, 62, 97, 0.12);
  --sl-shadow-large: 0 4px 15px rgba(47, 62, 97, 0.12);
  --sl-shadow-x-large: 0 8px 20px rgba(47, 62, 97, 0.12);

  --sl-spacing-3x-small: calc(
    16 * 0.125 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-spacing-2x-small: calc(
    16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-spacing-1-5x-small: calc(
    16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-spacing-x-small: calc(16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-0-5x-small: calc(
    16 * 0.625 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-spacing-small: calc(16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-medium: calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-large: calc(16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-x-large: calc(16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-2x-large: calc(
    16 * 2.25 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-spacing-3x-large: calc(16 * 3 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-spacing-4x-large: calc(16 * 4.5 / var(--kdds-base-font-size, 16) * 1rem);

  --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:
    Microsoft Sans Serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  --sl-font-size-2x-small: calc(
    16 * 0.625 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-font-size-x-small: calc(
    16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-font-size-small: calc(
    16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-font-size-medium: calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-font-size-large: calc(16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-font-size-x-large: calc(
    16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-font-size-2x-large: calc(
    16 * 2.25 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-font-size-3x-large: calc(16 * 3 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-font-size-4x-large: calc(
    16 * 4.5 / var(--kdds-base-font-size, 16) * 1rem
  );

  --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.5;
  --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: 1px;
  --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-button-min-width-small: 60px;
  --sl-button-min-width-medium: 60px;
  --sl-button-min-width-large: 68px;

  --sl-input-height-small: calc(
    16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-input-height-medium: calc(
    16 * 2 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-input-height-large: calc(
    16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
  );

  --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-primary-600);
  --sl-input-border-color-focus: var(--sl-color-primary-600);
  --sl-input-border-color-disabled: var(--sl-color-neutral-100);
  --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-small);
  --sl-input-border-radius-medium: var(--sl-border-radius-small);
  --sl-input-border-radius-large: var(--sl-border-radius-small);

  --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-x-small);
  --sl-input-font-size-medium: var(--sl-font-size-small);
  --sl-input-font-size-large: var(--sl-font-size-medium);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);

  --sl-input-color: var(--sl-color-neutral-900);
  --sl-input-color-hover: var(--sl-color-neutral-900);
  --sl-input-color-focus: var(--sl-color-neutral-900);
  --sl-input-color-disabled: var(--sl-color-neutral-500);
  --sl-input-icon-color: var(--sl-color-neutral-600);
  --sl-input-icon-color-hover: var(--sl-color-primary-600);
  --sl-input-icon-color-focus: var(--sl-color-primary-700);
  --sl-input-placeholder-color: var(--sl-color-neutral-400);
  --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: hsl(198.6 88.7% 48.4% / 40%);
  --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-900);
  --sl-input-filled-color-hover: var(--sl-color-neutral-900);
  --sl-input-filled-color-focus: var(--sl-color-neutral-900);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-500);

  --sl-input-label-font-size-small: var(--sl-font-size-x-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-x-small);
  --sl-input-label-font-size-large: var(--sl-font-size-x-small);
  --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-x-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-x-small);
  --sl-input-help-text-color: var(--sl-color-neutral-500);

  --sl-toggle-size-small: calc(16 * 1 / var(--kdds-base-font-size, 16) * 1rem);
  --sl-toggle-size-medium: calc(
    16 * 1.25 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-toggle-size-large: calc(
    16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
  );

  --sl-overlay-background-color: hsla(0, 0%, 0%, 0.3);

  --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-0);
  --sl-tooltip-color: var(--sl-color-neutral-900);
  --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-small);
  --sl-tooltip-arrow-size: 6px;

  --sl-details-height: 40px;

  --sl-dialog-header-height: 50px;

  --sl-calendar-header-height: 40px;
  --sl-calendar-header-height-mobile: 48px;
  --sl-calendar-label-height-mobile: 32px;
  --sl-calendar-wheel-item-height: 50px;

  --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f7f8fa);
  --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
  --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
  --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
  --sl-table-row-background-active-hover: var(--sl-color-primary-200, #e9f0ff);
  --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
  --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
  --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
  --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
  --sl-table-mask: rgba(255, 255, 255, 0.65);
  --sl-datatable-footer-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));

  --sl-table-column-header-padding: var(--sl-spacing-x-small);
  --sl-table-cell-padding: var(--sl-spacing-x-small);
  --sl-table-default-text-margin-vertical: calc(
    16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
  );

  --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
  --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
  --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);

  --sl-table-header-line-height: calc(
    16 * 2 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
  --sl-table-cell-line-height: calc(
    16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-table-default-text-color: var(--sl-color-neutral-600, #555555);
  --sl-table-font-size: var(--sl-font-size-small);
  --sl-table-header-line-height-small: calc(
    16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-table-cell-line-height-small: calc(
    16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-table-header-line-height-middle: calc(
    16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-table-cell-line-height-middle: calc(
    16 * 2 / var(--kdds-base-font-size, 16) * 1rem
  );

  --sl-table-drag-handle-width: calc(
    16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-datatable-tree-indent: 1.75rem;

  --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;
  --sl-z-index-table-overlay: 1100;

  --sl-dashboard-bg-color: var(--sl-color-purple-gray-50);
  --sl-dashboard-card-bg-color: var(--sl-color-purple-gray-100);
  --sl-dashboard-card-bg-color-hover: var(--sl-color-purple-gray-200);
  --sl-dashboard-card-border-color: var(--sl-color-purple-gray-200);
  --sl-dashboard-card-border-width: 1px;
  --sl-dashboard-card-border-radius: var(--sl-border-radius-large);
  --sl-dashboard-card-shadow: var(--sl-shadow-medium);
  --sl-dashboard-card-shadow-hover: var(--sl-shadow-large);
  --sl-card-dragging-bg: var(--sl-color-primary-50);
  --sl-card-dragging-border: var(--sl-color-primary-600);
  --sl-card-dragging-shadow: var(--sl-shadow-x-large);
  --sl-card-dragging-opacity: 0.9;
  --sl-card-resize-handle-size: 12px;
  --sl-del-btn-bg-color: var(--sl-color-purple-gray-200);
  --sl-del-btn-color: var(--sl-color-purple-gray-700);
  --sl-del-btn-hover-bg-color: var(--sl-color-primary-600);
  --sl-del-btn-hover-color: var(--sl-color-neutral-0);
  --sl-del-btn-active-bg-color: var(--sl-color-primary-700);
  --sl-del-btn-active-color: var(--sl-color-neutral-0);

  --sl-pagination-text-color: var(--sl-color-neutral-600);
  --sl-pagination-current-page-color: var(--sl-color-neutral-900);
  --sl-pagination-font-size: var(--sl-font-size-small);
  --sl-pagination-current-page-border-width: var(--sl-input-border-width);
  --sl-pagination-current-page-border-radius: var(
    --sl-input-border-radius-small
  );
  --sl-pagination-current-page-sizing-width: 3rem;
  --sl-pagination-current-page-background: var(--sl-input-background-color);
  --sl-pagination-current-page-background-disabled: var(
    --sl-input-background-color-disabled
  );
  --sl-pagination-current-page-border: var(--sl-input-border-color);
  --sl-pagination-current-page-border-hover: var(--sl-input-border-color-focus);
  --sl-pagination-current-page-border-active: var(
    --sl-input-border-color-focus
  );
  --sl-pagination-icon-font-size: 1rem;
  --sl-pagination-icon-font: var(--sl-color-neutral-600);
  --sl-pagination-icon-font-hover: var(--sl-color-primary-600);
  --sl-pagination-icon-font-disabled: var(--sl-color-neutral-400);
  --sl-pagination-page-size-color: var(--sl-color-neutral-900);
  --sl-pagination-font-size: var(--sl-font-size-small);

  --sl-sender-background-color: var(--sl-color-neutral-0);
  --sl-sender-background-color-disabled: var(--sl-color-neutral-100);
  --sl-sender-border-width: 1px;
  --sl-sender-border-color: var(--sl-color-neutral-300);
  --sl-sender-border-color-hover: var(--sl-color-neutral-300);
  --sl-sender-border-color-focus: var(--sl-color-neutral-300);
  --sl-sender-border-color-disabled: var(--sl-color-neutral-300);
  --sl-sender-border-radius: var(--sl-border-radius-large);
  --sl-sender-shadow: none;
  --sl-sender-shadow-focus: none;
  --sl-single-line-sender-height: 3.5rem;
  --sl-multi-line-sender-min-height: 8rem;
  --sl-multi-line-sender-max-height: 10.875rem;
  --sl-sender-input-color: var(--sl-color-neutral-900);
  --sl-sender-input-color-disabled: var(--sl-color-neutral-400);
  --sl-sender-input-placeholder-color: var(--sl-color-neutral-400);
  --sl-sender-input-placeholder-color-disabled: var(--sl-color-neutral-400);
  --sl-sender-action-border-radius: var(--sl-border-radius-circle);
  --sl-sender-action-color: var(--sl-color-neutral-900);
  --sl-sender-action-color-hover: var(--sl-color-primary-900);
  --sl-sender-action-color-active: var(--sl-color-primary-900);
  --sl-sender-action-color-disable: var(--sl-color-neutral-400);
  --sl-sender-action-background-hover: var(--sl-color-neutral-100);
  --sl-sender-action-background-active: var(--sl-color-neutral-300);
  --sl-sender-submit-border-radius: var(--sl-border-radius-circle);
  --sl-sender-submit-background: var(--sl-color-primary-600);
  --sl-sender-submit-color: var(--sl-color-neutral-0);
  --sl-sender-submit-background-hover: var(--sl-color-primary-500);
  --sl-sender-submit-color-hover: var(--sl-color-neutral-0);
  --sl-sender-submit-background-active: var(--sl-color-primary-700);
  --sl-sender-submit-color-active: var(--sl-color-neutral-0);
  --sl-sender-submit-background-disabled: var(--sl-color-neutral-100);
  --sl-sender-voice-waveform-color: var(--sl-color-primary-600);
  --sl-sender-voice-recording-background: var(--sl-color-primary-50);
  --sl-sender-quote-background: var(--sl-color-neutral-100);
  --sl-sender-quote-border-radius: var(--sl-border-radius-pill);
  --sl-sender-quote-accent-color: var(--sl-color-neutral-300);
  --sl-sender-quote-text-color: var(--sl-color-neutral-500);
  --sl-sender-quote-close-color: var(--sl-color-neutral-900);
  --sl-sender-quote-close-background-hover-color: var(--sl-color-neutral-300);
  --sl-sender-attachment-background: var(--sl-color-neutral-100);
  --sl-sender-attachment-name-color: var(--sl-color-neutral-900);
  --sl-sender-attachment-icon-color: var(--sl-color-neutral-900);
  --sl-sender-attachment-remove-color: var(--sl-color-neutral-900);

  --sl-transfer-bg-color: var(--sl-color-neutral-0, #ffffff);
  --sl-transfer-header-bg-color: var(--sl-color-neutral-50, #fafafa);
  --sl-transfer-border-color: var(--sl-color-neutral-300, #d9d9d9);
  --sl-transfer-border-color-warn: var(--sl-color-warning-200, #ffe0a6);
  --sl-transfer-border-color-error: var(--sl-color-danger-200, #ffc7cc);
  --sl-transfer-list-item-hover-bg-color: var(--sl-color-neutral-50, #fafafa);
  --sl-transfer-border-radius: var(--sl-border-radius-small);
  --sl-transfer-list-width: calc(
    16 * 14.5 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-transfer-list-height: calc(
    16 * 15.625 / var(--kdds-base-font-size, 16) * 1rem
  );
  --sl-transfer-header-padding: var(--sl-spacing-0-5x-small)
    var(--sl-spacing-small);
  --sl-transfer-header-font-size: var(--sl-font-size-x-small);
  --sl-transfer-list-item-padding: var(--sl-spacing-1-5x-small)
    var(--sl-spacing-small);
  --sl-transfer-operation-button-gap: var(--sl-spacing-large);
  --sl-transfer-search-padding: var(--sl-spacing-small) var(--sl-spacing-small);
  --sl-transfer-footer-padding: var(--sl-spacing-x-small)
    var(--sl-spacing-small);
}

@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-start: 50%;
  z-index: var(--sl-z-index-toast);
  transform: translateX(-50%);
  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);
}