/**
 * Intel Spark CSS (@spark-design/css 1.1.5-alpha.11), copied verbatim from
 * vendor/spark-css/ by scripts/sync-spark.py. Do not edit this file:
 * change nothing here, regenerate it instead.
 */

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- global/spark-colors.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-color-transparent: transparent;
    --spark-color-theme-light-gray50: #ffffff;
    --spark-color-theme-light-gray75: #f9f9f9;
    --spark-color-theme-light-gray100: #f4f5f5;
    --spark-color-theme-light-gray200: #e9eaeb;
    --spark-color-theme-light-gray300: #e2e2e4;
    --spark-color-theme-light-gray400: #c9cace;
    --spark-color-theme-light-gray500: #b2b3b9;
    --spark-color-theme-light-gray600: #8b8e97;
    --spark-color-theme-light-gray700: #6a6d75;
    --spark-color-theme-light-gray800: #494b51;
    --spark-color-theme-light-gray900: #2b2c30;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-theme-dark-gray75: #2e2f32;
    --spark-color-theme-dark-gray100: #313236;
    --spark-color-theme-dark-gray200: #3c3e42;
    --spark-color-theme-dark-gray300: #484a50;
    --spark-color-theme-dark-gray400: #585a62;
    --spark-color-theme-dark-gray500: #6b6e76;
    --spark-color-theme-dark-gray600: #8e9099;
    --spark-color-theme-dark-gray700: #b7b9be;
    --spark-color-theme-dark-gray800: #e3e3e5;
    --spark-color-theme-dark-gray900: #ffffff;
    --spark-color-classic-blue-tint2: #6cc4f5;
    --spark-color-classic-blue-tint1: #0099ec;
    --spark-color-classic-blue: #0054ae;
    --spark-color-classic-blue-shade1: #00377c;
    --spark-color-classic-blue-shade2: #001e50;
    --spark-color-energy-blue-tint2: #a0ebff;
    --spark-color-energy-blue-tint1: #6ddcff;
    --spark-color-energy-blue: #00c7fd;
    --spark-color-energy-blue-shade1: #0095ca;
    --spark-color-energy-blue-shade2: #005b85;
    --spark-color-carbon-tint2: #e9e9e9;
    --spark-color-carbon-tint1: #aeaeae;
    --spark-color-carbon: #808080;
    --spark-color-carbon-shade1: #525252;
    --spark-color-carbon-shade2: #262626;
    --spark-color-blue-steel-tint2: #b9d6e5;
    --spark-color-blue-steel-tint1: #86b3ca;
    --spark-color-blue-steel: #548fad;
    --spark-color-blue-steel-shade1: #41728a;
    --spark-color-blue-steel-shade2: #183544;
    --spark-color-geode-tint2: #eec3f7;
    --spark-color-geode-tint1: #cc94da;
    --spark-color-geode: #8f5da2;
    --spark-color-geode-shade1: #653171;
    --spark-color-moss-tint2: #d7f3a2;
    --spark-color-moss-tint1: #b1d272;
    --spark-color-moss: #8bae46;
    --spark-color-moss-shade1: #708541;
    --spark-color-moss-shade2: #515a3d;
    --spark-color-rust-tint2: #ffc599;
    --spark-color-rust-tint1: #ff8f51;
    --spark-color-rust: #e96115;
    --spark-color-rust-shade1: #b24501;
    --spark-color-cobalt-tint2: #98a1ff;
    --spark-color-cobalt-tint1: #5b69ff;
    --spark-color-cobalt: #1e2eb8;
    --spark-color-cobalt-shade1: #000f8a;
    --spark-color-cobalt-shade2: #000864;
    --spark-color-cobalt-shade3: #040e35;
    --spark-color-coral-tint2: #ffb6b9;
    --spark-color-coral-tint1: #ff848a;
    --spark-color-coral: #ff5662;
    --spark-color-coral-shade1: #c81326;
    --spark-color-daisy-tint1: #ffe17a;
    --spark-color-daisy: #fec91b;
    --spark-color-daisy-shade1: #edb200;
    --spark-color-daisy-shade2: #c98f00;
    --spark-color-white: #ffffff;
    --spark-color-black: #000000;
    --spark-color-digital-classic-blue: #0046cb;
    --spark-color-electric-moss: #9fd541;
    --spark-color-electric-daisy: #ffe500;
    --spark-color-electric-rust: #fe8022;
    --spark-color-electric-coral: #fe5a80;
    --spark-color-electric-geode: #a923f1;
    --spark-color-electric-cobalt: #1e1eff;
    --spark-color-electric-aqua: #16cfb1;
    --spark-color-electric-cosmos: #7000ff;
    --spark-color-classic-blue-shade1-5: #002567;
    --spark-color-classic-blue-shade3: #030f26;
    --spark-color-energy-blue-shade3: #005b85;
    --spark-color-cobalt-shade4: #040b24;
    --spark-color-cobalt-shade5: #020316;
    --spark-color-aqua-tint2: #a2f6e8;
    --spark-color-aqua-tint1: #5be3cd;
    --spark-color-aqua: #16cfb1;
    --spark-color-aqua-shade1: #0f9b8f;
    --spark-color-aqua-shade1-5: #09857c;
    --spark-color-aqua-shade2: #08746e;
    --spark-color-aqua-shade3: #065955;
    --spark-color-aqua-shade4: #044845;
    --spark-color-cosmos-tint2: #af98ff;
    --spark-color-cosmos-tint1: #8b50ff;
    --spark-color-cosmos: var(--spark-color-electric-cosmos);
    --spark-color-cosmos-shade1: #5400c0;
    --spark-color-cosmos-shade2: #38007f;
    --spark-color-tb-theme-light-gray50: #ffffff;
    --spark-color-tb-theme-light-gray75: #f7f7f8;
    --spark-color-tb-theme-light-gray100: #f1f1f3;
    --spark-color-tb-theme-light-gray200: #e7e7eb;
    --spark-color-tb-theme-light-gray300: #dcdce3;
    --spark-color-tb-theme-light-gray400: #bec0cb;
    --spark-color-tb-theme-light-gray500: #acaebc;
    --spark-color-tb-theme-light-gray600: #82879b;
    --spark-color-tb-theme-light-gray700: #676d84;
    --spark-color-tb-theme-light-gray800: #383e56;
    --spark-color-tb-theme-light-gray900: #1c223b;
    --spark-color-tb-theme-dark-gray50: #020316;
    --spark-color-tb-theme-dark-gray75: #070c21;
    --spark-color-tb-theme-dark-gray100: #0d132b;
    --spark-color-tb-theme-dark-gray200: #1c223b;
    --spark-color-tb-theme-dark-gray300: #383e56;
    --spark-color-tb-theme-dark-gray400: #555b72;
    --spark-color-tb-theme-dark-gray500: #676d84;
    --spark-color-tb-theme-dark-gray600: #82879b;
    --spark-color-tb-theme-dark-gray700: #acaebc;
    --spark-color-tb-theme-dark-gray800: #e7e7eb;
    --spark-color-tb-theme-dark-gray900: #ffffff;
    --spark-color-bright-gradient-aqua-cobalt: linear-gradient(
        var(--spark-color-gradient-degree, 45deg),
        #16cfb1,
        #040e35
    );
    --spark-color-bright-gradient-aqua-cosmos: linear-gradient(
        var(--spark-color-gradient-degree, 45deg),
        #16cfb1,
        #057aff,
        #5400c0
    );
    --spark-color-deep-ambient-gradient-cosmos-classic-blue-shade1-5: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #002567,
        #7000ff
    );
    --spark-color-deep-ambient-gradient-cosmos-cobalt-shade3: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #040e35,
        #7000ff
    );
    --spark-color-deep-ambient-gradient-cosmos-shade2-cobalt-shade3: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #040e35,
        #38007f
    );
    --spark-color-aqua-gradient-aqua-tint2-white: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #a2f6e8,
        #c6faf1,
        #ffffff
    );
    --spark-color-aqua-gradient-aqua-white: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #16cfb1,
        #b7f0e7,
        #ffffff
    );
    --spark-color-aqua-gradient-aqua-blue: linear-gradient(
        var(--spark-color-gradient-degree, 45deg),
        #020e37,
        #0054ae,
        #00d2af
    );
    --spark-color-cosmos-gradient-cosmos-tint1-white: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #8b50ff,
        #cbb0ff,
        #ffffff
    );
    --spark-color-cosmos-gradient-cosmos-tint1-aqua: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #8b50ff,
        #057aff,
        #16cfb1
    );
    --spark-color-cosmos-gradient-cosmos-white: linear-gradient(
        var(--spark-color-gradient-degree, 180deg),
        #7000ff,
        #9848ff,
        #d1adff,
        #ffffff
    );
    --spark-color-cosmos-gradient-cosmos-shade2: linear-gradient(
        var(--spark-color-gradient-degree, 45deg),
        #3e0083,
        #020e37
    );
}

/* ---- global/spark-monochrome-colors.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-color-monochrome-transparent: transparent;
    --spark-color-monochrome-theme-light-gray50: #ffffff;
    --spark-color-monochrome-theme-light-gray200: #e9eaeb;
    --spark-color-monochrome-theme-light-gray400: #c9cace;
    --spark-color-monochrome-theme-light-gray500: #b2b3b9;
    --spark-color-monochrome-theme-light-gray700: #6a6d75;
    --spark-color-monochrome-theme-light-gray800: #494b51;
    --spark-color-monochrome-theme-light-gray900: #2b2c30;
    --spark-color-monochrome-theme-dark-gray50: #242528;
    --spark-color-monochrome-theme-dark-gray200: #3c3e42;
    --spark-color-monochrome-theme-dark-gray400: #585a62;
    --spark-color-monochrome-theme-dark-gray500: #6b6e76;
    --spark-color-monochrome-theme-dark-gray700: #b7b9be;
    --spark-color-monochrome-theme-dark-gray800: #e3e3e5;
    --spark-color-monochrome-theme-dark-gray900: #ffffff;
    --spark-color-monochrome-coral-tint2: #ffb6b9;
    --spark-color-monochrome-coral-tint1: #ff848a;
    --spark-color-monochrome-coral: #ff5662;
    --spark-color-monochrome-coral-shade1: #c81326;
}

/* ---- global/spark-typography.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-font-intel-one-text: IntelOneText, var(--global-font-apple-system),
        var(--global-font-blink-mac-system-font), var(--global-font-segoe-ui),
        var(--global-font-roboto), var(--global-font-helvetica), var(--global-font-arial),
        var(--global-font-sans-serif), var(--global-font-apple-color-emoji),
        var(--global-font-segoe-ui-emoji), var(--global-font-segoe-ui-symbol);
    --spark-font-intel-one-display: IntelOneDisplay, var(--global-font-apple-system),
        var(--global-font-blink-mac-system-font), var(--global-font-segoe-ui),
        var(--global-font-roboto), var(--global-font-helvetica), var(--global-font-arial),
        var(--global-font-sans-serif), var(--global-font-apple-color-emoji),
        var(--global-font-segoe-ui-emoji), var(--global-font-segoe-ui-symbol);
}
:root {
    --global-font-apple-system: -apple-system;
    --global-font-blink-mac-system-font: BlinkMacSystemFont;
    --global-font-segoe-ui: 'Segoe UI';
    --global-font-roboto: Roboto;
    --global-font-helvetica: Helvetica;
    --global-font-arial: Arial;
    --global-font-sans-serif: sans-serif;
    --global-font-apple-color-emoji: 'Apple Color Emoji';
    --global-font-segoe-ui-emoji: 'Segoe UI Emoji';
    --global-font-segoe-ui-symbol: 'Segoe UI Symbol';
}
:root {
    --spark-font-size-25: 0.6875rem;
    --spark-font-size-50: 0.75rem;
    --spark-font-size-75: 0.875rem;
    --spark-font-size-100: 1rem;
    --spark-font-size-200: 1.25rem;
    --spark-font-size-300: 1.5rem;
    --spark-font-size-350: 2rem;
    --spark-font-size-400: 2.25rem;
    --spark-font-size-500: 3rem;
    --spark-font-size-600: 3.75rem;
    --spark-font-size-700: 4.5rem;
}
:root {
    --spark-line-height-text: 1.5;
    --spark-line-height-heading: 1.3;
}
:root {
    --spark-letter-spacing-small: 0.015625rem;
    --spark-letter-spacing-zero: 0rem;
}

/* ---- global/spark-global.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

body {
    font-size: var(--spark-font-size-100, 1rem);
    font-family: var(--spark-font-intel-one-text);
    font-weight: normal;
    line-height: var(--spark-line-height-text, 1.5);
    letter-spacing: var(--spark-letter-spacing-zero, 0rem);
}

/* ---- global/spark-utilities.css ---- */
.spark-visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 0.0625rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 0.0625rem;
}

/**
  *  import this file to get all interaction CSS
  */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- interactions/focus/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-focus-snap {
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-init-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        transparent;
    transition: box-shadow var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline-offset var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        background-color var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function);
    outline-color: transparent;
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-init-primary);
    outline-offset: var(--spark-focus-outline-width-init-backup);
    -webkit-transform: translate3d(0, 0, 0);
}
.spark-focus.spark-focus-suppress:focus {
    outline: var(--spark-focus-custom-focus-suppress-outline) solid transparent;
    box-shadow: none;
}
.spark-focus.spark-focus-self:focus {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus.spark-focus-self.spark-focus-snap:not(:focus) {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus.spark-focus-self.spark-focus-background:focus {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus.spark-focus-within:focus-within {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus.spark-focus-within.spark-focus-snap:not(:focus-within) {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus.spark-focus-within.spark-focus-background:focus-within {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus.spark-focus-adjacent:focus + .spark-focus {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus.spark-focus-adjacent:not(:focus) + .spark-focus.spark-focus-snap {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus.spark-focus-adjacent:focus + .spark-focus.spark-focus-background {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus:where(.spark-focus-slider):focus::-webkit-slider-thumb {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus:where(.spark-focus-slider.spark-focus-snap)::-webkit-slider-thumb {
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-init-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        transparent;
    transition: box-shadow var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline-offset var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        background-color var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function);
    outline-color: transparent;
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-init-primary);
    outline-offset: var(--spark-focus-outline-width-init-backup);
    -webkit-transform: translate3d(0, 0, 0);
}
.spark-focus:where(.spark-focus-slider.spark-focus-snap):not(:focus)::-webkit-slider-thumb {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus:where(.spark-focus-slider.spark-focus-background):focus::-webkit-slider-thumb {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}

/* ---- interactions/focus/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media (forced-colors: active) {
    .spark-focus-snap {
        outline-style: revert;
    }
}

/* ---- interactions/focus/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-focus-outline-width-final-extra: 0rem;
    --spark-focus-outline-width-final-primary: 0.1875rem;
    --spark-focus-outline-width-final-backup: 0.1875rem;
    --spark-focus-outline-width-init-primary: 0.75rem;
    --spark-focus-outline-width-init-backup: 0.1875rem;
    --spark-focus-snap-transition-duration: 1.5s;
    --spark-focus-snap-transition-timing-function: cubic-bezier(0.06, 0.98, 0.2, 0.99);
    --spark-focus-custom-focus-suppress-outline: 0.125rem;
    --spark-focus-box-shadow-x: 0rem;
    --spark-focus-box-shadow-y: 0rem;
    --spark-focus-box-shadow-blur-radius: 0rem;
}

/* ---- interactions/focus/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-focus-color-focus-primary: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-focus-color-focus-backup: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-focus-color-focus-background: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-focus-color-focus-foreground: var(--spark-color-carbon-shade2, #262626);
}

/* ---- interactions/focus/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-focus-color-focus-primary: var(--spark-color-energy-blue-tint1, #6ddcff);
    --spark-focus-color-focus-backup: var(--spark-color-theme-dark-gray50, #242528);
    --spark-focus-color-focus-background: var(--spark-color-theme-dark-gray50, #242528);
    --spark-focus-color-focus-foreground: var(--spark-color-theme-dark-gray900, #ffffff);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- interactions/focus-visible/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-focus-visible-snap {
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-init-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        transparent;
    transition: box-shadow var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline-offset var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        background-color var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function);
    outline-color: transparent;
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-init-primary);
    outline-offset: var(--spark-focus-outline-width-init-backup);
    -webkit-transform: translate3d(0, 0, 0);
}
.spark-focus-visible.spark-focus-visible-suppress:focus {
    outline: var(--spark-focus-custom-focus-suppress-outline) solid transparent;
    box-shadow: none;
}
.spark-focus-visible.spark-focus-visible-self:focus {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible.spark-focus-visible-self:focus:not(:focus-visible) {
    z-index: revert;
    position: revert;
    box-shadow: revert;
    outline-color: revert;
    outline-style: revert;
    outline-width: revert;
    outline-offset: revert;
}
.spark-focus-visible.spark-focus-visible-self:focus-visible {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible.spark-focus-visible-self.spark-focus-visible-snap:not(:focus-visible) {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus-visible.spark-focus-visible-self.spark-focus-visible-background:focus {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible.spark-focus-visible-self.spark-focus-visible-background:focus:not(
        :focus-visible
    ) {
    color: revert;
    background-color: revert;
}
.spark-focus-visible.spark-focus-visible-self.spark-focus-visible-background:focus-visible {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible.spark-focus-visible-within:has(:focus-visible) {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible.spark-focus-visible-within.spark-focus-visible-snap:not(:has(:focus-visible)) {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus-visible.spark-focus-visible-within.spark-focus-visible-background:has(:focus-visible) {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible.spark-focus-visible-adjacent:focus + .spark-focus-visible {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible.spark-focus-visible-adjacent:focus:not(:focus-visible) + .spark-focus-visible {
    z-index: revert;
    position: revert;
    box-shadow: revert;
    outline-color: revert;
    outline-style: revert;
    outline-width: revert;
    outline-offset: revert;
}
.spark-focus-visible.spark-focus-visible-adjacent:focus-visible + .spark-focus-visible {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible.spark-focus-visible-adjacent:not(:focus-visible)
    + .spark-focus-visible.spark-focus-visible-snap {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus-visible.spark-focus-visible-adjacent:focus
    + .spark-focus-visible.spark-focus-visible-background {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible.spark-focus-visible-adjacent:focus:not(:focus-visible)
    + .spark-focus-visible.spark-focus-visible-background {
    color: revert;
    background-color: revert;
}
.spark-focus-visible.spark-focus-visible-adjacent:focus-visible
    + .spark-focus-visible.spark-focus-visible-background {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible:where(.spark-focus-visible-slider):focus::-webkit-slider-thumb {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible:where(.spark-focus-visible-slider):focus:not(
        :focus-visible
    )::-webkit-slider-thumb {
    z-index: revert;
    position: revert;
    box-shadow: revert;
    outline-color: revert;
    outline-style: revert;
    outline-width: revert;
    outline-offset: revert;
}
.spark-focus-visible:where(.spark-focus-visible-slider):focus-visible::-webkit-slider-thumb {
    z-index: 1;
    position: relative;
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-final-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        var(--spark-focus-color-focus-backup);
    outline-color: var(--spark-focus-color-focus-primary);
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-final-primary);
    outline-offset: var(--spark-focus-outline-width-final-backup);
}
.spark-focus-visible:where(
        .spark-focus-visible-slider.spark-focus-visible-snap
    )::-webkit-slider-thumb {
    box-shadow: var(--spark-focus-box-shadow-x) var(--spark-focus-box-shadow-y)
        var(--spark-focus-box-shadow-blur-radius)
        calc(
            var(--spark-focus-outline-width-final-primary) +
                var(--spark-focus-outline-width-init-backup) +
                var(--spark-focus-outline-width-final-extra)
        )
        transparent;
    transition: box-shadow var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        outline-offset var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function),
        background-color var(--spark-focus-snap-transition-duration)
            var(--spark-focus-snap-transition-timing-function);
    outline-color: transparent;
    outline-style: solid;
    outline-width: var(--spark-focus-outline-width-init-primary);
    outline-offset: var(--spark-focus-outline-width-init-backup);
    -webkit-transform: translate3d(0, 0, 0);
}
.spark-focus-visible:where(.spark-focus-visible-slider.spark-focus-visible-snap):not(
        :focus-visible
    )::-webkit-slider-thumb {
    transition-delay: 0s;
    transition-duration: 0s;
}
.spark-focus-visible:where(
        .spark-focus-visible-slider.spark-focus-visible-background
    ):focus::-webkit-slider-thumb {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}
.spark-focus-visible:where(.spark-focus-visible-slider.spark-focus-visible-background):focus:not(
        :focus-visible
    )::-webkit-slider-thumb {
    color: revert;
    background-color: revert;
}
.spark-focus-visible:where(
        .spark-focus-visible-slider.spark-focus-visible-background
    ):focus-visible::-webkit-slider-thumb {
    color: var(--spark-focus-color-focus-foreground);
    background-color: var(--spark-focus-color-focus-background);
}

/* ---- interactions/focus-visible/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media (forced-colors: active) {
    .spark-focus-visible-snap {
        outline-style: revert;
    }
}

/* ---- interactions/focus-visible/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
}

/* ---- interactions/focus-visible/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
}

/* ---- interactions/focus-visible/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
}

/* ---- global/spark-space.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-space-4: 0.25rem;
    --spark-space-8: 0.5rem;
    --spark-space-12: 0.75rem;
    --spark-space-20: 1.25rem;
    --spark-space-32: 2rem;
    --spark-space-52: 3.25rem;
    --spark-space-84: 5.25rem;
    --spark-space-136: 8.5rem;
    --spark-space-220: 13.75rem;
    --spark-space-356: 22.25rem;
    --spark-space-576: 36rem;
}

/* ---- global/spark-breakpoint.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-breakpoint-mobile: 24.75rem;
    --spark-breakpoint-tablet: 50.5rem;
    --spark-breakpoint-laptop: 90rem;
    --spark-breakpoint-desktop: 120rem;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/badge/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-badge-text-size-xl {
    font-size: var(--spark-badge-xl-font-size);
    block-size: var(--spark-badge-xl-height);
    font-weight: normal;
    inline-size: fit-content;
    line-height: var(--spark-badge-xl-line-height-text);
    letter-spacing: var(--spark-badge-xl-letter-spacing);
    padding-inline: var(--spark-badge-xl-padding-inline);
    min-inline-size: var(--spark-badge-xl-width);
}
.spark-badge-text-size-l {
    font-size: var(--spark-badge-l-font-size);
    block-size: var(--spark-badge-l-height);
    font-weight: normal;
    inline-size: fit-content;
    line-height: var(--spark-badge-l-line-height-text);
    letter-spacing: var(--spark-badge-l-letter-spacing);
    padding-inline: var(--spark-badge-l-padding-inline);
    min-inline-size: var(--spark-badge-l-width);
}
.spark-badge-text-size-m {
    font-size: var(--spark-badge-m-font-size);
    block-size: var(--spark-badge-m-height);
    font-weight: normal;
    inline-size: fit-content;
    line-height: var(--spark-badge-m-line-height-text);
    letter-spacing: var(--spark-badge-m-letter-spacing);
    padding-inline: var(--spark-badge-m-padding-inline);
    min-inline-size: var(--spark-badge-m-width);
}
.spark-badge-text-size-s {
    font-size: var(--spark-badge-s-font-size);
    block-size: var(--spark-badge-s-height);
    font-weight: normal;
    inline-size: fit-content;
    line-height: var(--spark-badge-s-line-height-text);
    letter-spacing: var(--spark-badge-s-letter-spacing);
    padding-inline: var(--spark-badge-s-padding-inline);
    min-inline-size: var(--spark-badge-s-width);
}
.spark-badge-text-size-xs {
    font-size: var(--spark-badge-xs-font-size);
    block-size: var(--spark-badge-xs-height);
    font-weight: normal;
    inline-size: fit-content;
    line-height: var(--spark-badge-xs-line-height-text);
    letter-spacing: var(--spark-badge-xs-letter-spacing);
    padding-inline: var(--spark-badge-xs-padding-inline);
    min-inline-size: var(--spark-badge-xs-width);
}
.spark-badge-no-text-size-xl {
    block-size: var(--spark-badge-xl-height);
    inline-size: var(--spark-badge-xl-width);
    padding-inline: 0;
}
.spark-badge-no-text-size-l {
    block-size: var(--spark-badge-l-height);
    inline-size: var(--spark-badge-l-width);
    padding-inline: 0;
}
.spark-badge-no-text-size-m {
    block-size: var(--spark-badge-m-height);
    inline-size: var(--spark-badge-m-width);
    padding-inline: 0;
}
.spark-badge-no-text-size-s {
    block-size: var(--spark-badge-s-height);
    inline-size: var(--spark-badge-s-width);
    padding-inline: 0;
}
.spark-badge-no-text-size-xs {
    block-size: var(--spark-badge-xs-height);
    inline-size: var(--spark-badge-xs-width);
    padding-inline: 0;
}
.spark-badge-shape-circle {
    border-radius: var(--spark-badge-circle-border-radius);
}
.spark-badge-shape-square {
    border-radius: var(--spark-badge-square-border-radius);
}
.spark-badge-shape-pill {
    border-radius: var(--spark-badge-pill-border-radius);
}
.spark-badge-variant-success {
    background-color: var(--spark-badge-success-background-color);
}
.spark-badge-variant-info {
    background-color: var(--spark-badge-info-background-color);
}
.spark-badge-variant-alert {
    background-color: var(--spark-badge-alert-background-color);
}
.spark-badge-variant-warning {
    background-color: var(--spark-badge-warning-background-color);
}
.spark-badge-variant-unknown {
    background-color: var(--spark-badge-unknown-background-color);
}
.spark-badge {
    color: var(--spark-badge-color);
    display: var(--spark-badge-base-display);
    align-items: var(--spark-badge-base-text-align);
    justify-content: var(--spark-badge-base-text-align);
}

/* ---- components/badge/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-badge {
        --spark-badge-color: HighlightText;
        --spark-badge-info-background-color: Highlight;
        --spark-badge-alert-background-color: Highlight;
        --spark-badge-success-background-color: Highlight;
        --spark-badge-unknown-background-color: Highlight;
        --spark-badge-warning-background-color: Highlight;
    }
    .spark-badge-text {
        forced-color-adjust: none;
    }
}

/* ---- components/badge/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-badge-base-display: flex;
    --spark-badge-base-text-align: center;
    --spark-badge-xs-height: 0.75rem;
    --spark-badge-xs-width: 0.75rem;
    --spark-badge-xs-font-size: 0.5rem;
    --spark-badge-xs-padding-inline: 0.125rem;
    --spark-badge-xs-line-height-text: 1.5;
    --spark-badge-xs-letter-spacing: 0.015625rem;
    --spark-badge-s-height: 1rem;
    --spark-badge-s-width: 1rem;
    --spark-badge-s-font-size: 0.625rem;
    --spark-badge-s-padding-inline: 0.25rem;
    --spark-badge-s-line-height-text: 1.5;
    --spark-badge-s-letter-spacing: 0.015625rem;
    --spark-badge-m-height: 1.5rem;
    --spark-badge-m-width: 1.5rem;
    --spark-badge-m-font-size: 0.75rem;
    --spark-badge-m-padding-inline: 0.5rem;
    --spark-badge-m-line-height-text: 1.5;
    --spark-badge-m-letter-spacing: 0rem;
    --spark-badge-l-height: 2rem;
    --spark-badge-l-width: 2rem;
    --spark-badge-l-font-size: 0.875rem;
    --spark-badge-l-padding-inline: 0.75rem;
    --spark-badge-l-line-height-text: 1.5;
    --spark-badge-l-letter-spacing: 0rem;
    --spark-badge-xl-height: 2.5rem;
    --spark-badge-xl-width: 2.5rem;
    --spark-badge-xl-font-size: 1rem;
    --spark-badge-xl-padding-inline: 0.875rem;
    --spark-badge-xl-line-height-text: 1.5;
    --spark-badge-xl-letter-spacing: 0rem;
    --spark-badge-circle-border-radius: 50%;
    --spark-badge-pill-border-radius: 2.5rem;
    --spark-badge-square-border-radius: 0.3125rem;
}

/* ---- components/badge/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-badge-color: var(--spark-color-white, #ffffff);
    --spark-badge-success-background-color: var(--spark-color-moss, #8bae46);
    --spark-badge-info-background-color: var(--spark-color-classic-blue, #0054ae);
    --spark-badge-warning-background-color: var(--spark-color-daisy, #fec91b);
    --spark-badge-alert-background-color: var(--spark-color-coral-shade1, #c81326);
    --spark-badge-unknown-background-color: var(--spark-color-carbon-shade1, #525252);
}

/* ---- components/badge/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-badge-color: var(--spark-color-white, #ffffff);
    --spark-badge-success-background-color: #8bae46;
    --spark-badge-info-background-color: #00c7fd;
    --spark-badge-warning-background-color: #fec91b;
    --spark-badge-alert-background-color: #c81326;
    --spark-badge-unknown-background-color: #525252;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/breadcrumb/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-breadcrumb-items {
    margin: var(--spark-breadcrumb-margin);
    display: flex;
    padding: var(--spark-breadcrumb-padding);
    flex-wrap: wrap;
    list-style: none;
}
.spark-breadcrumb-item {
    display: flex;
    align-items: center;
}
.spark-breadcrumb-item:not(:first-of-type):before {
    content: '';
    display: flex;
    transform: skew(-18deg);
    block-size: var(--spark-breadcrumb-block-size);
    inline-size: var(--spark-breadcrumb-inline-size);
    margin-inline: var(--spark-breadcrumb-split-gap);
    background-color: var(--spark-breadcrumb-color-split);
}
.spark-breadcrumb-is-current .spark-hyperlink.spark-hyperlink-is-disabled {
    color: var(--spark-breadcrumb-color-is-current) !important;
}

/* ---- components/breadcrumb/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media (forced-colors: active) {
    .spark-breadcrumb-item.spark-breadcrumb-is-current .spark-hyperlink.spark-hyperlink-primary,
    .spark-breadcrumb-item.spark-breadcrumb-is-current .spark-hyperlink.spark-hyperlink-secondary {
        color: ActiveText !important;
    }
    .spark-breadcrumb-item:not(:first-of-type):before {
        background-color: CanvasText;
    }
}

/* ---- components/breadcrumb/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-breadcrumb-split-gap: 0.38rem;
    --spark-breadcrumb-margin: 0;
    --spark-breadcrumb-padding: 0;
    --spark-breadcrumb-block-size: 0.78rem;
    --spark-breadcrumb-inline-size: 0.08rem;
}

/* ---- components/breadcrumb/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-breadcrumb-color-is-current: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-breadcrumb-color-split: var(--spark-color-theme-light-gray700, #6a6d75);
}

/* ---- components/breadcrumb/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-breadcrumb-color-is-current: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-breadcrumb-color-split: var(--spark-color-theme-dark-gray700, #b7b9be);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/button/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-button-start-slot {
    display: flex;
    font-size: var(--spark-button-start-slot-font-size);
    flex-shrink: var(--spark-button-start-slot-flex-shrink);
    justify-content: center;
}
.spark-button-end-slot {
    display: flex;
    font-size: var(--spark-button-end-slot-font-size);
    flex-shrink: var(--spark-button-end-slot-flex-shrink);
    justify-content: center;
}
.spark-button-disabled {
    pointer-events: none;
}
.spark-button-content {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    justify-content: center;
}
.spark-button {
    cursor: pointer;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    font-family: var(--spark-button-font-family);
    font-weight: var(--spark-button-font-weight);
    inline-size: max-content;
    white-space: nowrap;
    border-style: solid;
    border-width: var(--spark-button-border-width);
    justify-content: center;
    max-inline-size: var(--spark-button-max-inline-size);
    text-decoration: none;
}
.spark-button.spark-button-unstyled {
    color: var(--spark-button-unstyled-color);
    font-weight: normal;
    border-inline: none;
    text-decoration: none;
    background-color: var(--spark-button-transparent);
    border-block-end: var(--spark-button-border-width) solid var(--spark-button-unstyled-color);
    border-block-start: none;
}
.spark-button.spark-button-unstyled.spark-button-monochrome {
    color: var(--spark-button-monochrome-unstyled-color);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end: var(--spark-button-border-width) solid
        var(--spark-button-monochrome-unstyled-color);
}
.spark-button.spark-button-unstyled-alert {
    color: var(--spark-button-unstyled-alert-color);
    font-weight: normal;
    border-inline: none;
    text-decoration: none;
    background-color: var(--spark-button-transparent);
    border-block-end: var(--spark-button-border-width) solid
        var(--spark-button-unstyled-alert-color);
    border-block-start: none;
}
.spark-button.spark-button-unstyled-alert.spark-button-monochrome {
    color: var(--spark-button-monochrome-unstyled-alert-color);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end: var(--spark-button-border-width) solid
        var(--spark-button-monochrome-unstyled-alert-color);
}
.spark-button.spark-button-action {
    color: var(--spark-button-action-color);
    border-color: var(--spark-button-action-border-color);
    background-color: var(--spark-button-action-bg-color);
}
.spark-button.spark-button-action.spark-button-monochrome {
    color: var(--spark-button-monochrome-action-color);
    border-color: var(--spark-button-monochrome-action-border-color);
    background-color: var(--spark-button-monochrome-action-bg-color);
}
.spark-button.spark-button-primary {
    color: var(--spark-button-primary-color);
    border-color: var(--spark-button-primary-border-color);
    background-color: var(--spark-button-primary-bg-color);
}
.spark-button.spark-button-primary.spark-button-monochrome {
    color: var(--spark-button-monochrome-primary-color);
    border-color: var(--spark-button-monochrome-primary-border-color);
    background-color: var(--spark-button-monochrome-primary-bg-color);
}
.spark-button.spark-button-secondary {
    color: var(--spark-button-secondary-color);
    border-color: var(--spark-button-secondary-border-color);
    background-color: var(--spark-button-secondary-bg-color);
}
.spark-button.spark-button-secondary.spark-button-monochrome {
    color: var(--spark-button-monochrome-secondary-color);
    border-color: var(--spark-button-monochrome-secondary-border-color);
    background-color: var(--spark-button-monochrome-secondary-bg-color);
}
.spark-button.spark-button-ghost {
    color: var(--spark-button-ghost-color);
    border-color: var(--spark-button-ghost-border-color);
    background-color: var(--spark-button-ghost-bg-color);
}
.spark-button.spark-button-ghost.spark-button-monochrome {
    color: var(--spark-button-monochrome-ghost-color);
    border-color: var(--spark-button-monochrome-ghost-border-color);
    background-color: var(--spark-button-monochrome-ghost-bg-color);
}
.spark-button.spark-button-alert {
    color: var(--spark-button-alert-color);
    border-color: var(--spark-button-alert-border-color);
    background-color: var(--spark-button-alert-bg-color);
}
.spark-button.spark-button-alert.spark-button-monochrome {
    color: var(--spark-button-monochrome-alert-color);
    border-color: var(--spark-button-monochrome-alert-border-color);
    background-color: var(--spark-button-monochrome-alert-bg-color);
}
.spark-button.spark-button-alert-ghost {
    color: var(--spark-button-alert-ghost-color);
    border-color: var(--spark-button-alert-ghost-border-color);
    background-color: var(--spark-button-alert-ghost-bg-color);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome {
    color: var(--spark-button-monochrome-alert-ghost-color);
    border-color: var(--spark-button-monochrome-alert-ghost-border-color);
    background-color: var(--spark-button-monochrome-alert-ghost-bg-color);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome:hover,
.spark-button.spark-button-alert-ghost.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-alert-ghost-bg-color-hover);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-alert-ghost-color);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome:active,
.spark-button.spark-button-alert-ghost.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-alert-ghost-bg-color-active);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome:disabled,
.spark-button.spark-button-alert-ghost.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-alert-ghost-color);
}
.spark-button.spark-button-alert-ghost.spark-button-monochrome:disabled a,
.spark-button.spark-button-alert-ghost.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-alert-ghost:hover,
.spark-button.spark-button-alert-ghost.spark-button-hovered {
    background-color: var(--spark-button-alert-ghost-bg-color-hover);
}
.spark-button.spark-button-alert-ghost:visited {
    color: var(--spark-button-alert-ghost-color);
}
.spark-button.spark-button-alert-ghost:active,
.spark-button.spark-button-alert-ghost.spark-button-active {
    background-color: var(--spark-button-alert-ghost-bg-color-active);
}
.spark-button.spark-button-alert-ghost:disabled,
.spark-button.spark-button-alert-ghost.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-alert-ghost .spark-button-content a {
    color: var(--spark-button-alert-ghost-color);
    text-decoration: none;
}
.spark-button.spark-button-alert-ghost:disabled a,
.spark-button.spark-button-alert-ghost.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-alert.spark-button-monochrome:hover,
.spark-button.spark-button-alert.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-alert-bg-color-hover);
}
.spark-button.spark-button-alert.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-alert-color);
}
.spark-button.spark-button-alert.spark-button-monochrome:active,
.spark-button.spark-button-alert.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-alert-bg-color-active);
}
.spark-button.spark-button-alert.spark-button-monochrome:disabled,
.spark-button.spark-button-alert.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-alert.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-alert-color);
}
.spark-button.spark-button-alert.spark-button-monochrome:disabled a,
.spark-button.spark-button-alert.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-alert:hover,
.spark-button.spark-button-alert.spark-button-hovered {
    background-color: var(--spark-button-alert-bg-color-hover);
}
.spark-button.spark-button-alert:visited {
    color: var(--spark-button-alert-color);
}
.spark-button.spark-button-alert:active,
.spark-button.spark-button-alert.spark-button-active {
    background-color: var(--spark-button-alert-bg-color-active);
}
.spark-button.spark-button-alert:disabled,
.spark-button.spark-button-alert.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-alert .spark-button-content a {
    color: var(--spark-button-alert-color);
    text-decoration: none;
}
.spark-button.spark-button-alert:disabled a,
.spark-button.spark-button-alert.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-ghost.spark-button-monochrome:hover,
.spark-button.spark-button-ghost.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-ghost-bg-color-hover);
}
.spark-button.spark-button-ghost.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-ghost-color);
}
.spark-button.spark-button-ghost.spark-button-monochrome:active,
.spark-button.spark-button-ghost.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-ghost-bg-color-active);
}
.spark-button.spark-button-ghost.spark-button-monochrome:disabled,
.spark-button.spark-button-ghost.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-ghost.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-ghost-color);
}
.spark-button.spark-button-ghost.spark-button-monochrome:disabled a,
.spark-button.spark-button-ghost.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-ghost:hover,
.spark-button.spark-button-ghost.spark-button-hovered {
    background-color: var(--spark-button-ghost-bg-color-hover);
}
.spark-button.spark-button-ghost:visited {
    color: var(--spark-button-ghost-color);
}
.spark-button.spark-button-ghost:active,
.spark-button.spark-button-ghost.spark-button-active {
    background-color: var(--spark-button-ghost-bg-color-active);
}
.spark-button.spark-button-ghost:disabled,
.spark-button.spark-button-ghost.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-ghost .spark-button-content a {
    color: var(--spark-button-ghost-color);
    text-decoration: none;
}
.spark-button.spark-button-ghost:disabled a,
.spark-button.spark-button-ghost.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-secondary.spark-button-monochrome:hover,
.spark-button.spark-button-secondary.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-secondary-bg-color-hover);
}
.spark-button.spark-button-secondary.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-secondary-color);
}
.spark-button.spark-button-secondary.spark-button-monochrome:active,
.spark-button.spark-button-secondary.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-secondary-bg-color-active);
}
.spark-button.spark-button-secondary.spark-button-monochrome:disabled,
.spark-button.spark-button-secondary.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-secondary.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-secondary-color);
}
.spark-button.spark-button-secondary.spark-button-monochrome:disabled a,
.spark-button.spark-button-secondary.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-secondary:hover,
.spark-button.spark-button-secondary.spark-button-hovered {
    background-color: var(--spark-button-secondary-bg-color-hover);
}
.spark-button.spark-button-secondary:visited {
    color: var(--spark-button-secondary-color);
}
.spark-button.spark-button-secondary:active,
.spark-button.spark-button-secondary.spark-button-active {
    background-color: var(--spark-button-secondary-bg-color-active);
}
.spark-button.spark-button-secondary:disabled,
.spark-button.spark-button-secondary.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-secondary .spark-button-content a {
    color: var(--spark-button-secondary-color);
    text-decoration: none;
}
.spark-button.spark-button-secondary:disabled a,
.spark-button.spark-button-secondary.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-primary.spark-button-monochrome:hover,
.spark-button.spark-button-primary.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-primary-bg-color-hover);
}
.spark-button.spark-button-primary.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-primary-color);
}
.spark-button.spark-button-primary.spark-button-monochrome:active,
.spark-button.spark-button-primary.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-primary-bg-color-active);
}
.spark-button.spark-button-primary.spark-button-monochrome:disabled,
.spark-button.spark-button-primary.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-primary.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-primary-color);
}
.spark-button.spark-button-primary.spark-button-monochrome:disabled a,
.spark-button.spark-button-primary.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-primary:hover,
.spark-button.spark-button-primary.spark-button-hovered {
    background-color: var(--spark-button-primary-bg-color-hover);
}
.spark-button.spark-button-primary:visited {
    color: var(--spark-button-primary-color);
}
.spark-button.spark-button-primary:active,
.spark-button.spark-button-primary.spark-button-active {
    background-color: var(--spark-button-primary-bg-color-active);
}
.spark-button.spark-button-primary:disabled,
.spark-button.spark-button-primary.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-primary .spark-button-content a {
    color: var(--spark-button-primary-color);
    text-decoration: none;
}
.spark-button.spark-button-primary:disabled a,
.spark-button.spark-button-primary.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-action.spark-button-monochrome:hover,
.spark-button.spark-button-action.spark-button-monochrome.spark-button-hovered {
    background-color: var(--spark-button-monochrome-action-bg-color-hover);
}
.spark-button.spark-button-action.spark-button-monochrome:visited {
    color: var(--spark-button-monochrome-action-color);
}
.spark-button.spark-button-action.spark-button-monochrome:active,
.spark-button.spark-button-action.spark-button-monochrome.spark-button-active {
    background-color: var(--spark-button-monochrome-action-bg-color-active);
}
.spark-button.spark-button-action.spark-button-monochrome:disabled,
.spark-button.spark-button-action.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-disabled-border-color);
    background-color: var(--spark-button-monochrome-disabled-bg-color);
}
.spark-button.spark-button-action.spark-button-monochrome .spark-button-content a {
    color: var(--spark-button-monochrome-action-color);
}
.spark-button.spark-button-action.spark-button-monochrome:disabled a,
.spark-button.spark-button-action.spark-button-monochrome.spark-button-disabled
    .spark-button-content
    a {
    color: var(--spark-button-monochrome-disabled-color);
    border-color: var(--spark-button-monochrome-transparent);
    background-color: var(--spark-button-monochrome-transparent);
}
.spark-button.spark-button-action:hover,
.spark-button.spark-button-action.spark-button-hovered {
    background-color: var(--spark-button-action-bg-color-hover);
}
.spark-button.spark-button-action:visited {
    color: var(--spark-button-action-color);
}
.spark-button.spark-button-action:active,
.spark-button.spark-button-action.spark-button-active {
    background-color: var(--spark-button-action-bg-color-active);
}
.spark-button.spark-button-action:disabled,
.spark-button.spark-button-action.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-disabled-border-color);
    background-color: var(--spark-button-disabled-bg-color);
}
.spark-button.spark-button-action .spark-button-content a {
    color: var(--spark-button-action-color);
    text-decoration: none;
}
.spark-button.spark-button-action:disabled a,
.spark-button.spark-button-action.spark-button-disabled .spark-button-content a {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-color: var(--spark-button-transparent);
    background-color: var(--spark-button-transparent);
}
.spark-button.spark-button-size-l {
    font-size: var(--spark-button-l-font-size);
    block-size: var(--spark-button-l-block-size);
    line-height: var(--spark-button-l-line-height);
    min-inline-size: var(--spark-button-l-block-size);
    padding-block-end: var(--spark-button-l-padding-block);
    padding-inline-end: var(--spark-button-l-padding-inline);
    padding-block-start: var(--spark-button-l-padding-block);
    padding-inline-start: var(--spark-button-l-padding-inline);
}
.spark-button.spark-button-size-m {
    font-size: var(--spark-button-m-font-size);
    block-size: var(--spark-button-m-block-size);
    line-height: var(--spark-button-m-line-height);
    min-inline-size: var(--spark-button-m-block-size);
    padding-block-end: var(--spark-button-m-padding-block);
    padding-inline-end: var(--spark-button-m-padding-inline);
    padding-block-start: var(--spark-button-m-padding-block);
    padding-inline-start: var(--spark-button-m-padding-inline);
}
.spark-button.spark-button-size-s {
    font-size: var(--spark-button-s-font-size);
    block-size: var(--spark-button-s-block-size);
    line-height: var(--spark-button-s-line-height);
    min-inline-size: var(--spark-button-s-block-size);
    padding-block-end: var(--spark-button-s-padding-block);
    padding-inline-end: var(--spark-button-s-padding-inline);
    padding-block-start: var(--spark-button-s-padding-block);
    padding-inline-start: var(--spark-button-s-padding-inline);
}
.spark-button.spark-button-size-s.spark-button-icon-only {
    font-size: var(--spark-button-icon-only-s-font-size);
    max-inline-size: var(--spark-button-s-block-size);
    min-inline-size: var(--spark-button-s-block-size);
    padding-inline-end: var(--spark-button-icon-only-s-padding-inline);
    padding-inline-start: var(--spark-button-icon-only-s-padding-inline);
}
.spark-button.spark-button-size-s.spark-button-unstyled:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-s.spark-button-unstyled-alert:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-s:not(.spark-button-icon-only) .spark-button-start-slot {
    padding-inline-end: var(--spark-button-s-icon-gap);
}
.spark-button.spark-button-size-s:not(.spark-button-icon-only) .spark-button-end-slot {
    padding-inline-end: var(--spark-button-s-icon-gap);
    padding-inline-start: var(--spark-button-s-icon-gap);
}
.spark-button.spark-button-size-m.spark-button-icon-only {
    font-size: var(--spark-button-icon-only-m-font-size);
    max-inline-size: var(--spark-button-m-block-size);
    min-inline-size: var(--spark-button-m-block-size);
    padding-inline-end: var(--spark-button-icon-only-m-padding-inline);
    padding-inline-start: var(--spark-button-icon-only-m-padding-inline);
}
.spark-button.spark-button-size-m.spark-button-unstyled:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-m.spark-button-unstyled-alert:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-m:not(.spark-button-icon-only) .spark-button-start-slot {
    padding-inline-end: var(--spark-button-m-icon-gap);
}
.spark-button.spark-button-size-m:not(.spark-button-icon-only) .spark-button-end-slot {
    padding-inline-end: var(--spark-button-m-icon-gap);
    padding-inline-start: var(--spark-button-m-icon-gap);
}
.spark-button.spark-button-size-l.spark-button-icon-only {
    font-size: var(--spark-button-icon-only-l-font-size);
    max-inline-size: var(--spark-button-l-block-size);
    min-inline-size: var(--spark-button-l-block-size);
    padding-inline-end: var(--spark-button-icon-only-l-padding-inline);
    padding-inline-start: var(--spark-button-icon-only-l-padding-inline);
}
.spark-button.spark-button-size-l.spark-button-unstyled:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-l.spark-button-unstyled-alert:not(.spark-button-icon-only) {
    padding: inherit;
    block-size: inherit;
    min-inline-size: inherit;
}
.spark-button.spark-button-size-l:not(.spark-button-icon-only) .spark-button-start-slot {
    padding-inline-end: var(--spark-button-l-icon-gap);
}
.spark-button.spark-button-size-l:not(.spark-button-icon-only) .spark-button-end-slot {
    padding-inline-end: var(--spark-button-l-icon-gap);
    padding-inline-start: var(--spark-button-l-icon-gap);
}
.spark-button.spark-button-unstyled-alert.spark-button-monochrome:hover,
.spark-button.spark-button-unstyled-alert.spark-button-monochrome.spark-button-hovered {
    color: var(--spark-button-monochrome-unstyled-alert-bg-color-hover);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end-color: var(--spark-button-monochrome-unstyled-alert-bg-color-hover);
}
.spark-button.spark-button-unstyled-alert.spark-button-monochrome:active,
.spark-button.spark-button-unstyled-alert.spark-button-monochrome.spark-button-active {
    color: var(--spark-button-monochrome-unstyled-alert-bg-color-active);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end-color: var(--spark-button-monochrome-unstyled-alert-bg-color-active);
}
.spark-button.spark-button-unstyled-alert.spark-button-monochrome:disabled,
.spark-button.spark-button-unstyled-alert.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-block-end-color: var(--spark-button-monochrome-disabled-color);
}
.spark-button.spark-button-unstyled-alert a {
    color: inherit;
    border-color: inherit;
    text-decoration: none;
}
.spark-button.spark-button-unstyled-alert.spark-button-icon-only {
    border-block-end: none;
}
.spark-button.spark-button-unstyled-alert:hover,
.spark-button.spark-button-unstyled-alert.spark-button-hovered {
    color: var(--spark-button-unstyled-alert-bg-color-hover);
    background-color: var(--spark-button-transparent);
    border-block-end-color: var(--spark-button-unstyled-alert-bg-color-hover);
}
.spark-button.spark-button-unstyled-alert:active,
.spark-button.spark-button-unstyled-alert.spark-button-active {
    color: var(--spark-button-unstyled-alert-bg-color-active);
    background-color: var(--spark-button-transparent);
    border-block-end-color: var(--spark-button-unstyled-alert-bg-color-active);
}
.spark-button.spark-button-unstyled-alert:disabled,
.spark-button.spark-button-unstyled-alert.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-block-end-color: var(--spark-button-disabled-color);
}
.spark-button.spark-button-unstyled-alert:disabled a,
.spark-button.spark-button-unstyled-alert.spark-button-disabled a {
    color: inherit;
    border-color: inherit;
}
.spark-button.spark-button-unstyled-alert:active a,
.spark-button.spark-button-unstyled-alert.spark-button-active a {
    color: inherit;
    border-color: inherit;
}
.spark-button.spark-button-unstyled-alert:hover a,
.spark-button.spark-button-unstyled-alert.spark-button-hovered a {
    color: inherit;
    border-color: inherit;
}
.spark-button.spark-button-unstyled.spark-button-monochrome:hover,
.spark-button.spark-button-unstyled.spark-button-monochrome.spark-button-hovered {
    color: var(--spark-button-monochrome-unstyled-bg-color-hover);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end-color: var(--spark-button-monochrome-unstyled-bg-color-hover);
}
.spark-button.spark-button-unstyled.spark-button-monochrome:active,
.spark-button.spark-button-unstyled.spark-button-monochrome.spark-button-active {
    color: var(--spark-button-monochrome-unstyled-bg-color-active);
    background-color: var(--spark-button-monochrome-transparent);
    border-block-end-color: var(--spark-button-monochrome-unstyled-bg-color-active);
}
.spark-button.spark-button-unstyled.spark-button-monochrome:disabled,
.spark-button.spark-button-unstyled.spark-button-monochrome.spark-button-disabled {
    color: var(--spark-button-monochrome-disabled-color);
    border-block-end-color: var(--spark-button-monochrome-disabled-color);
}
.spark-button.spark-button-unstyled a {
    color: inherit;
    border-color: inherit;
    text-decoration: none;
}
.spark-button.spark-button-unstyled.spark-button-icon-only {
    border-block-end: none;
}
.spark-button.spark-button-unstyled:hover,
.spark-button.spark-button-unstyled.spark-button-hovered {
    color: var(--spark-button-unstyled-bg-color-hover);
    background-color: var(--spark-button-transparent);
    border-block-end-color: var(--spark-button-unstyled-bg-color-hover);
}
.spark-button.spark-button-unstyled:active,
.spark-button.spark-button-unstyled.spark-button-active {
    color: var(--spark-button-unstyled-bg-color-active);
    background-color: var(--spark-button-transparent);
    border-block-end-color: var(--spark-button-unstyled-bg-color-active);
}
.spark-button.spark-button-unstyled:disabled,
.spark-button.spark-button-unstyled.spark-button-disabled {
    color: var(--spark-button-disabled-color);
    cursor: default;
    border-block-end-color: var(--spark-button-disabled-color);
}
.spark-button.spark-button-unstyled:disabled a,
.spark-button.spark-button-unstyled.spark-button-disabled a {
    color: inherit;
    border-color: inherit;
}
.spark-button.spark-button-unstyled:active a,
.spark-button.spark-button-unstyled.spark-button-active a {
    color: inherit;
    border-color: inherit;
}
.spark-button.spark-button-unstyled:hover a,
.spark-button.spark-button-unstyled.spark-button-hovered a {
    color: inherit;
    border-color: inherit;
}

/* ---- components/button/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-button-font-weight: 500;
    --spark-button-font-family: inherit;
    --spark-button-max-inline-size: 37.5rem;
    --spark-button-border-width: 0.0625rem;
    --spark-button-l-block-size: 2.5rem;
    --spark-button-l-font-size: 1rem;
    --spark-button-l-line-height: 1.375rem;
    --spark-button-l-padding-block: 0.75rem;
    --spark-button-l-padding-inline: 1.25rem;
    --spark-button-l-icon-gap: 0.5rem;
    --spark-button-m-block-size: 2rem;
    --spark-button-m-font-size: 0.875rem;
    --spark-button-m-line-height: 1.125rem;
    --spark-button-m-padding-block: 0.5rem;
    --spark-button-m-padding-inline: 1rem;
    --spark-button-m-icon-gap: 0.25rem;
    --spark-button-s-block-size: 1.5rem;
    --spark-button-s-font-size: 0.75rem;
    --spark-button-s-line-height: 0.875rem;
    --spark-button-s-padding-block: 0.25rem;
    --spark-button-s-padding-inline: 0.75rem;
    --spark-button-s-icon-gap: 0.25rem;
    --spark-button-start-slot-font-size: 1rem;
    --spark-button-start-slot-flex-shrink: 0;
    --spark-button-end-slot-font-size: 1rem;
    --spark-button-end-slot-flex-shrink: 0;
    --spark-button-icon-only-l-font-size: 1rem;
    --spark-button-icon-only-l-padding-inline: 0.5rem;
    --spark-button-icon-only-m-font-size: 1rem;
    --spark-button-icon-only-m-padding-inline: 0.5rem;
    --spark-button-icon-only-s-font-size: 1rem;
    --spark-button-icon-only-s-padding-inline: 0.25rem;
}

/* ---- components/button/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-button-transparent: var(--spark-color-transparent);
    --spark-button-disabled-color: var(--spark-color-theme-light-gray500);
    --spark-button-disabled-bg-color: var(--spark-color-theme-light-gray200);
    --spark-button-disabled-border-color: var(--spark-color-theme-light-gray200);
    --spark-button-action-color: var(--spark-color-theme-light-gray50);
    --spark-button-action-bg-color: var(--spark-color-classic-blue);
    --spark-button-action-bg-color-hover: var(--spark-color-classic-blue-shade1);
    --spark-button-action-bg-color-active: var(--spark-color-classic-blue-shade2);
    --spark-button-action-border-color: var(--spark-color-transparent);
    --spark-button-primary-color: var(--spark-color-classic-blue);
    --spark-button-primary-bg-color: var(--spark-color-transparent);
    --spark-button-primary-bg-color-hover: var(--spark-color-theme-light-gray200);
    --spark-button-primary-bg-color-active: var(--spark-color-theme-light-gray400);
    --spark-button-primary-border-color: var(--spark-color-classic-blue);
    --spark-button-secondary-color: var(--spark-color-classic-blue);
    --spark-button-secondary-bg-color: var(--spark-color-transparent);
    --spark-button-secondary-bg-color-hover: var(--spark-color-theme-light-gray200);
    --spark-button-secondary-bg-color-active: var(--spark-color-theme-light-gray400);
    --spark-button-secondary-border-color: var(--spark-color-theme-light-gray400);
    --spark-button-ghost-color: var(--spark-color-classic-blue);
    --spark-button-ghost-bg-color: var(--spark-color-transparent);
    --spark-button-ghost-bg-color-hover: var(--spark-color-theme-light-gray200);
    --spark-button-ghost-bg-color-active: var(--spark-color-theme-light-gray400);
    --spark-button-ghost-border-color: var(--spark-color-transparent);
    --spark-button-alert-color: var(--spark-color-coral-shade1);
    --spark-button-alert-bg-color: var(--spark-color-transparent);
    --spark-button-alert-bg-color-active: var(--spark-color-coral-tint2);
    --spark-button-alert-bg-color-hover: #fee9e9;
    --spark-button-alert-border-color: var(--spark-color-coral-shade1);
    --spark-button-alert-ghost-color: var(--spark-color-coral-shade1);
    --spark-button-alert-ghost-bg-color: var(--spark-color-transparent);
    --spark-button-alert-ghost-bg-color-hover: #fee9e9;
    --spark-button-alert-ghost-bg-color-active: var(--spark-color-coral-tint2);
    --spark-button-alert-ghost-border-color: var(--spark-color-transparent);
    --spark-button-unstyled-color: var(--spark-color-classic-blue);
    --spark-button-unstyled-bg-color: var(--spark-color-transparent);
    --spark-button-unstyled-bg-color-hover: var(--spark-color-classic-blue-shade1);
    --spark-button-unstyled-bg-color-active: var(--spark-color-classic-blue-shade2);
    --spark-button-unstyled-border-color: var(--spark-color-transparent);
    --spark-button-unstyled-alert-color: var(--spark-color-coral-shade1);
    --spark-button-unstyled-alert-bg-color: var(--spark-color-transparent);
    --spark-button-unstyled-alert-bg-color-hover: #950000;
    --spark-button-unstyled-alert-bg-color-active: #620000;
    --spark-button-unstyled-alert-border-color: var(--spark-color-transparent);
}

/* ---- components/button/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-button-transparent: var(--spark-color-transparent);
    --spark-button-disabled-color: var(--spark-color-theme-dark-gray500);
    --spark-button-disabled-bg-color: var(--spark-color-theme-dark-gray200);
    --spark-button-disabled-border-color: var(--spark-color-theme-dark-gray200);
    --spark-button-action-color: var(--spark-color-theme-dark-gray50);
    --spark-button-action-bg-color: var(--spark-color-energy-blue);
    --spark-button-action-bg-color-hover: var(--spark-color-energy-blue-tint1);
    --spark-button-action-bg-color-active: var(--spark-color-energy-blue-tint2);
    --spark-button-action-border-color: var(--spark-color-transparent);
    --spark-button-primary-color: var(--spark-color-energy-blue);
    --spark-button-primary-bg-color: var(--spark-color-transparent);
    --spark-button-primary-bg-color-hover: var(--spark-color-theme-dark-gray200);
    --spark-button-primary-bg-color-active: var(--spark-color-theme-dark-gray400);
    --spark-button-primary-border-color: var(--spark-color-energy-blue);
    --spark-button-secondary-color: var(--spark-color-energy-blue);
    --spark-button-secondary-bg-color: var(--spark-color-transparent);
    --spark-button-secondary-bg-color-hover: var(--spark-color-theme-dark-gray200);
    --spark-button-secondary-bg-color-active: var(--spark-color-theme-dark-gray400);
    --spark-button-secondary-border-color: var(--spark-color-theme-dark-gray400);
    --spark-button-ghost-color: var(--spark-color-energy-blue);
    --spark-button-ghost-bg-color: var(--spark-color-transparent);
    --spark-button-ghost-bg-color-hover: var(--spark-color-theme-dark-gray200);
    --spark-button-ghost-bg-color-active: var(--spark-color-theme-dark-gray400);
    --spark-button-ghost-border-color: var(--spark-color-transparent);
    --spark-button-alert-color: var(--spark-color-coral);
    --spark-button-alert-bg-color: var(--spark-color-transparent);
    --spark-button-alert-bg-color-active: #321a1b;
    --spark-button-alert-bg-color-hover: #3a2325;
    --spark-button-alert-border-color: var(--spark-color-coral);
    --spark-button-alert-ghost-color: var(--spark-color-coral);
    --spark-button-alert-ghost-bg-color: var(--spark-color-transparent);
    --spark-button-alert-ghost-bg-color-hover: #3a2325;
    --spark-button-alert-ghost-bg-color-active: #321a1b;
    --spark-button-alert-ghost-border-color: var(--spark-color-transparent);
    --spark-button-unstyled-color: var(--spark-color-energy-blue);
    --spark-button-unstyled-bg-color: var(--spark-color-transparent);
    --spark-button-unstyled-bg-color-hover: var(--spark-color-energy-blue-tint1);
    --spark-button-unstyled-bg-color-active: var(--spark-color-energy-blue-tint2);
    --spark-button-unstyled-border-color: var(--spark-color-transparent);
    --spark-button-unstyled-alert-color: var(--spark-color-coral);
    --spark-button-unstyled-alert-bg-color: var(--spark-color-transparent);
    --spark-button-unstyled-alert-bg-color-hover: var(--spark-color-coral-tint1);
    --spark-button-unstyled-alert-bg-color-active: var(--spark-color-coral-tint2);
    --spark-button-unstyled-alert-border-color: var(--spark-color-transparent);
}

/* ---- components/button/monochrome-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-button-monochrome-transparent: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-disabled-color: var(--spark-color-monochrome-theme-light-gray500);
    --spark-button-monochrome-disabled-bg-color: var(--spark-color-monochrome-theme-light-gray200);
    --spark-button-monochrome-disabled-border-color: var(
        --spark-color-monochrome-theme-light-gray200
    );
    --spark-button-monochrome-action-color: var(--spark-color-monochrome-theme-light-gray50);
    --spark-button-monochrome-action-bg-color: var(--spark-color-monochrome-theme-light-gray900);
    --spark-button-monochrome-action-bg-color-hover: var(
        --spark-color-monochrome-theme-light-gray800
    );
    --spark-button-monochrome-action-bg-color-active: var(
        --spark-color-monochrome-theme-light-gray700
    );
    --spark-button-monochrome-action-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-primary-color: var(--spark-color-monochrome-theme-light-gray900);
    --spark-button-monochrome-primary-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-primary-bg-color-hover: var(
        --spark-color-monochrome-theme-light-gray200
    );
    --spark-button-monochrome-primary-bg-color-active: var(
        --spark-color-monochrome-theme-light-gray400
    );
    --spark-button-monochrome-primary-border-color: var(
        --spark-color-monochrome-theme-light-gray900
    );
    --spark-button-monochrome-secondary-color: var(--spark-color-monochrome-theme-light-gray900);
    --spark-button-monochrome-secondary-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-secondary-bg-color-hover: var(
        --spark-color-monochrome-theme-light-gray200
    );
    --spark-button-monochrome-secondary-bg-color-active: var(
        --spark-color-monochrome-theme-light-gray400
    );
    --spark-button-monochrome-secondary-border-color: var(
        --spark-color-monochrome-theme-light-gray400
    );
    --spark-button-monochrome-ghost-color: var(--spark-color-monochrome-theme-light-gray900);
    --spark-button-monochrome-ghost-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-ghost-bg-color-hover: var(
        --spark-color-monochrome-theme-light-gray200
    );
    --spark-button-monochrome-ghost-bg-color-active: var(
        --spark-color-monochrome-theme-light-gray400
    );
    --spark-button-monochrome-ghost-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-color: var(--spark-color-monochrome-coral-shade1);
    --spark-button-monochrome-alert-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-bg-color-active: var(--spark-color-monochrome-coral-tint2);
    --spark-button-monochrome-alert-bg-color-hover: #fee9e9;
    --spark-button-monochrome-alert-border-color: var(--spark-color-monochrome-coral-shade1);
    --spark-button-monochrome-alert-ghost-color: var(--spark-color-monochrome-coral-shade1);
    --spark-button-monochrome-alert-ghost-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-ghost-bg-color-hover: #fee9e9;
    --spark-button-monochrome-alert-ghost-bg-color-active: var(
        --spark-color-monochrome-coral-tint2
    );
    --spark-button-monochrome-alert-ghost-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-color: var(--spark-color-monochrome-theme-light-gray900);
    --spark-button-monochrome-unstyled-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-bg-color-hover: var(
        --spark-color-monochrome-theme-light-gray800
    );
    --spark-button-monochrome-unstyled-bg-color-active: var(
        --spark-color-monochrome-theme-light-gray700
    );
    --spark-button-monochrome-unstyled-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-alert-color: var(--spark-color-monochrome-coral-shade1);
    --spark-button-monochrome-unstyled-alert-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-alert-bg-color-hover: #950000;
    --spark-button-monochrome-unstyled-alert-bg-color-active: #620000;
    --spark-button-monochrome-unstyled-alert-border-color: var(
        --spark-color-monochrome-transparent
    );
}

/* ---- components/button/monochrome-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-button-monochrome-transparent: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-disabled-color: var(--spark-color-monochrome-theme-dark-gray500);
    --spark-button-monochrome-disabled-bg-color: var(--spark-color-monochrome-theme-dark-gray200);
    --spark-button-monochrome-disabled-border-color: var(
        --spark-color-monochrome-theme-dark-gray200
    );
    --spark-button-monochrome-action-color: var(--spark-color-monochrome-theme-dark-gray50);
    --spark-button-monochrome-action-bg-color: var(--spark-color-monochrome-theme-dark-gray900);
    --spark-button-monochrome-action-bg-color-hover: var(
        --spark-color-monochrome-theme-dark-gray800
    );
    --spark-button-monochrome-action-bg-color-active: var(
        --spark-color-monochrome-theme-dark-gray700
    );
    --spark-button-monochrome-action-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-primary-color: var(--spark-color-monochrome-theme-dark-gray900);
    --spark-button-monochrome-primary-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-primary-bg-color-hover: var(
        --spark-color-monochrome-theme-dark-gray200
    );
    --spark-button-monochrome-primary-bg-color-active: var(
        --spark-color-monochrome-theme-dark-gray400
    );
    --spark-button-monochrome-primary-border-color: var(
        --spark-color-monochrome-theme-dark-gray900
    );
    --spark-button-monochrome-secondary-color: var(--spark-color-monochrome-theme-dark-gray900);
    --spark-button-monochrome-secondary-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-secondary-bg-color-hover: var(
        --spark-color-monochrome-theme-dark-gray200
    );
    --spark-button-monochrome-secondary-bg-color-active: var(
        --spark-color-monochrome-theme-dark-gray400
    );
    --spark-button-monochrome-secondary-border-color: var(
        --spark-color-monochrome-theme-dark-gray400
    );
    --spark-button-monochrome-ghost-color: var(--spark-color-monochrome-theme-dark-gray900);
    --spark-button-monochrome-ghost-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-ghost-bg-color-hover: var(
        --spark-color-monochrome-theme-dark-gray200
    );
    --spark-button-monochrome-ghost-bg-color-active: var(
        --spark-color-monochrome-theme-dark-gray400
    );
    --spark-button-monochrome-ghost-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-color: var(--spark-color-monochrome-coral);
    --spark-button-monochrome-alert-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-bg-color-active: #321a1b;
    --spark-button-monochrome-alert-bg-color-hover: #3a2325;
    --spark-button-monochrome-alert-border-color: var(--spark-color-monochrome-coral);
    --spark-button-monochrome-alert-ghost-color: var(--spark-color-monochrome-coral);
    --spark-button-monochrome-alert-ghost-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-alert-ghost-bg-color-hover: #3a2325;
    --spark-button-monochrome-alert-ghost-bg-color-active: #321a1b;
    --spark-button-monochrome-alert-ghost-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-color: var(--spark-color-monochrome-theme-dark-gray900);
    --spark-button-monochrome-unstyled-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-bg-color-hover: var(
        --spark-color-monochrome-theme-dark-gray800
    );
    --spark-button-monochrome-unstyled-bg-color-active: var(
        --spark-color-monochrome-theme-dark-gray700
    );
    --spark-button-monochrome-unstyled-border-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-alert-color: var(--spark-color-monochrome-coral);
    --spark-button-monochrome-unstyled-alert-bg-color: var(--spark-color-monochrome-transparent);
    --spark-button-monochrome-unstyled-alert-bg-color-hover: var(
        --spark-color-monochrome-coral-tint1
    );
    --spark-button-monochrome-unstyled-alert-bg-color-active: var(
        --spark-color-monochrome-coral-tint2
    );
    --spark-button-monochrome-unstyled-alert-border-color: var(
        --spark-color-monochrome-transparent
    );
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/card/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-card-checkbox {
    z-index: 3;
    position: var(--spark-card-checkbox-container-position);
    block-size: var(--spark-card-checkbox-container-side-length);
    inline-size: var(--spark-card-checkbox-container-side-length);
    background-color: var(--spark-card-checkbox-container-background);
    margin-block-start: var(--spark-card-checkbox-container-margin-block-start);
    margin-inline-start: var(--spark-card-checkbox-container-margin-inline-start);
    padding-inline-start: var(--spark-card-checkbox-container-padding-inline-start);
}
.spark-card-checkbox .spark-checkbox {
    position: var(--spark-card-checkbox-container-checkbox-position);
    padding-inline-start: var(--spark-card-checkbox-container-checkbox-padding-inline-start);
}
.spark-card-link.spark-card {
    color: inherit;
}
.spark-card-bg-fit-fill {
    object-fit: var(--spark-card-bg-fill);
}
.spark-card-bg-fit-contain {
    object-fit: var(--spark-card-bg-contain);
}
.spark-card-bg-fit-cover {
    object-fit: var(--spark-card-bg-cover);
}
.spark-card-bg-fit-none {
    object-fit: var(--spark-card-bg-none);
}
.spark-card-bg-fit-scale-down {
    object-fit: var(--spark-card-bg-scale-down);
}
.spark-card-vertical-titles-container {
    color: var(--spark-card-color);
    display: flex;
    align-items: flex-start;
    inline-size: var(--spark-card-vertical-titles-container-inline-size);
    flex-direction: column;
}
.spark-card-vertical-metrics-container {
    gap: var(--spark-card-vertical-gap);
    display: flex;
    font-size: var(--spark-card-vertical-sub-title-font-size);
    align-items: center;
    inline-size: 100%;
    line-height: var(--spark-card-vertical-sub-title-line-height);
    flex-direction: row;
    justify-content: space-between;
}
.spark-card-vertical-metrics-container .spark-card-options {
    gap: var(--spark-card-vertical-spark-card-options-gap);
    display: flex;
    align-items: center;
    flex-direction: row;
}
.spark-card-vertical-metrics-container .spark-checkbox {
    position: var(--spark-card-vertical-metrics-container-checkbox-position);
    max-inline-size: var(--spark-card-vertical-metrics-container-checkbox-max-inline-size);
}
.spark-card-vertical-metrics-container .spark-icon {
    cursor: pointer;
    padding: var(--spark-card-icon-padding);
    margin-inline-end: var(--spark-card-icon-margin-end);
}
.spark-card-vertical-metrics-container .spark-icon::not(ellipsis-v) {
    padding-inline-end: var(--spark-card-vertical-metrics-container-spark-icon-padding-inline-end);
}
.spark-card-vertical-metrics-container .spark-icon.hidden-metrics {
    transform: rotate(180deg);
}
.spark-card-vertical-options-item {
    gap: var(--spark-card-vertical-options-item-gap);
    display: flex;
    align-items: center;
}
.spark-card-vertical-information-container {
    gap: var(--spark-card-vertical-information-container-gap);
    display: flex;
    block-size: var(--spark-card-vertical-information-container-block-size);
    box-sizing: border-box;
    align-items: flex-start;
    inline-size: var(--spark-card-vertical-information-container-inline-size);
    flex-direction: column;
    max-block-size: var(--spark-card-vertical-information-container-max-block-size);
    padding-inline-end: var(--spark-card-vertical-information-container-padding);
    padding-block-start: var(--spark-card-vertical-information-container-padding);
    padding-inline-start: var(--spark-card-vertical-information-container-padding);
}
.spark-card-vertical-properties-container {
    gap: var(--spark-card-vertical-properties-container-gap);
    color: var(--spark-card-color);
    display: flex;
    block-size: var(--spark-card-vertical-properties-container-block-size);
    box-sizing: border-box;
    align-items: flex-start;
    inline-size: var(--spark-card-vertical-properties-container-inline-size);
    flex-direction: row;
    max-block-size: var(--spark-card-vertical-properties-container-max-block-size);
    padding-block-end: var(--spark-card-vertical-properties-container-padding-block-start-end);
    padding-inline-end: var(--spark-card-vertical-properties-container-padding-inline-start-end);
    padding-block-start: var(--spark-card-vertical-properties-container-padding-block-start-end);
    padding-inline-start: var(--spark-card-vertical-properties-container-padding-inline-start-end);
}
.spark-card-vertical-properties-container .spark-card-chevron {
    font-size: var(--spark-card-metrics-container-spark-chevron-icon-font-size);
}
.spark-card-vertical-properties-container .spark-card-vertical-icon-container {
    gap: var(--spark-card-vertical-properties-container-icon-gap);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spark-card-vertical-footer-container {
    gap: var(--spark-card-vertical-information-container-gap);
    display: flex;
    block-size: var(--spark-card-vertical-information-container-block-size);
    box-sizing: border-box;
    align-items: flex-start;
    inline-size: var(--spark-card-vertical-information-container-inline-size);
    flex-direction: column;
    padding-block-end: var(--spark-card-vertical-information-container-padding);
    padding-inline-end: var(--spark-card-vertical-information-container-padding);
    padding-inline-start: var(--spark-card-vertical-information-container-padding);
}
.spark-card-vertical-buttons-container {
    display: flex;
    flex-flow: row;
    inline-size: 100%;
    justify-content: space-between;
}
.spark-card-vertical-title {
    overflow: hidden;
    font-weight: 500 !important;
    white-space: nowrap;
    margin-block: 0px !important;
    text-overflow: ellipsis;
    max-inline-size: var(--spark-card-vertical-title-max-inline-size);
    min-inline-size: var(--spark-card-vertical-title-min-inline-size);
    padding-inline-end: var(--spark-card-vertical-title-padding-inline-end);
}
.spark-card-vertical-subtitle {
    overflow: hidden;
    font-size: var(--spark-card-vertical-sub-title-font-size);
    block-size: var(--spark-card-vertical-sub-title-line-height);
    inline-size: var(--spark-card-vertical-sub-title-inline-size);
    line-height: var(--spark-card-vertical-sub-title-line-height);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.spark-card-vertical-description {
    color: var(--spark-card-vertical-main-text-color);
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--spark-card-vertical-description-font-size);
    inline-size: var(--spark-card-vertical-description-inline-size);
    line-height: var(--spark-card-vertical-description-line-height);
    min-block-size: var(--spark-card-vertical-description-min-block-size);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
.spark-card-vertical {
    display: var(--spark-card-vertical-display);
    position: relative;
    flex-direction: column;
    min-block-size: var(--spark-card-vertical-block-size);
    min-inline-size: var(--spark-card-vertical-inline-size);
}
.spark-card-vertical .spark-card-vertical-bg-image {
    z-index: var(--spark-card-vertical-bg-image-z-index);
    position: absolute;
    block-size: var(--spark-card-vertical-bg-image-block-size);
    inline-size: var(--spark-card-vertical-bg-image-inline-size);
}
.spark-card-vertical .spark-card-vertical-avatar {
    z-index: var(--spark-card-vertical-avatar-z-index);
    block-size: var(--spark-card-vertical-avatar-side-length);
    box-shadow: 0 0 0 var(--spark-card-vertical-avatar-box-shadow) inset
        var(--spark-card-vertical-avatar-border-color);
    inline-size: var(--spark-card-vertical-avatar-side-length);
    border-radius: var(--spark-card-vertical-avatar-border-radius);
    margin-block-start: var(--spark-card-vertical-avatar-margin-block-start);
    margin-inline-start: var(--spark-card-vertical-avatar-margin-inline-start);
}
.spark-card-vertical a {
    text-decoration: none !important;
}
.spark-card-vertical-subtitle,
.spark-card-vertical-metrics-container,
.spark-card-vertical-metrics-container {
    color: var(--spark-card-vertical-sub-text-color);
}
.spark-card-horizontal-wrapper {
    display: grid;
    grid-template-columns: min-content auto;
}
.spark-card-horizontal-information-container {
    gap: var(--spark-card-horizontal-information-container-gap);
    display: flex;
    block-size: var(--spark-card-horizontal-information-container-block-size);
    box-sizing: border-box;
    align-items: flex-start;
    inline-size: var(--spark-card-horizontal-information-container-inline-size);
    flex-direction: column;
    max-block-size: var(--spark-card-horizontal-information-container-max-block-size);
    padding-inline-end: var(--spark-card-horizontal-information-container-padding);
    padding-block-start: var(--spark-card-horizontal-information-container-padding);
    padding-inline-start: var(--spark-card-horizontal-information-container-padding);
}
.spark-card-horizontal-titles-container {
    color: var(--spark-card-color);
    display: flex;
    align-items: flex-start;
    inline-size: var(--spark-card-horizontal-titles-container-inline-size);
    flex-direction: column;
    margin-block-start: var(--spark-card-horizontal-titles-container-margin-block-start);
    margin-inline-start: calc(
        var(--spark-card-horizontal-avatar-side-length) +
            var(--spark-card-horizontal-avatar-margin-inline-start)
    );
}
.spark-card-horizontal-title {
    overflow: hidden;
    font-weight: 500 !important;
    white-space: nowrap;
    margin-block: 0px !important;
    text-overflow: ellipsis;
    max-inline-size: var(--spark-card-horizontal-title-max-inline-size);
    min-inline-size: var(--spark-card-horizontal-title-min-inline-size);
    padding-inline-end: var(--spark-card-horizontal-title-padding-inline-end);
}
.spark-card-horizontal-subtitle {
    overflow: hidden;
    font-size: var(--spark-card-horizontal-sub-title-font-size);
    block-size: var(--spark-card-vertical-sub-title-line-height);
    inline-size: var(--spark-card-horizontal-sub-title-inline-size);
    line-height: var(--spark-card-horizontal-sub-title-line-height);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.spark-card-horizontal-description {
    color: var(--spark-card-horizontal-main-text-color);
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--spark-card-horizontal-description-font-size);
    inline-size: var(--spark-card-horizontal-description-inline-size);
    line-height: var(--spark-card-horizontal-description-line-height);
    min-block-size: var(--spark-card-horizontal-description-min-block-size);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
.spark-card-horizontal-properties-container {
    gap: var(--spark-card-horizontal-properties-container-gap);
    top: var(--spark-card-horizontal-properties-container-padding-inline);
    color: var(--spark-card-color);
    right: var(--spark-card-horizontal-properties-container-padding-inline);
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    max-block-size: var(--spark-card-horizontal-properties-container-max-block-size);
}
.spark-card-horizontal-properties-container .spark-card-chevron {
    font-size: var(--spark-card-metrics-container-spark-chevron-icon-font-size);
}
.spark-card-horizontal-properties-container .spark-card-horizontal-icon-container {
    gap: var(--spark-card-horizontal-properties-container-icon-gap);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spark-card-horizontal-footer-container {
    gap: var(--spark-card-horizontal-information-container-gap);
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: flex-start;
    inline-size: -webkit-fill-available;
    flex-direction: column;
    padding-block-end: var(--spark-card-horizontal-information-container-padding);
    margin-block-start: var(--spark-card-horizontal-information-container-margin-start);
    padding-inline-end: var(--spark-card-horizontal-information-container-padding);
    margin-inline-start: var(--spark-card-horizontal-information-container-inline-start);
    padding-inline-start: var(--spark-card-horizontal-information-container-padding);
}
.spark-card-horizontal-buttons-container {
    display: flex;
    flex-flow: row;
    inline-size: 100%;
    justify-content: space-between;
}
.spark-card-horizontal {
    position: var(--spark-card-horizontal-position);
    block-size: var(--spark-card-horizontal-min-block-size);
    box-shadow: var(--spark-card-horizontal-box-shadow);
    flex-direction: var(--spark-card-horizontal-flex-direction);
    min-inline-size: var(--spark-card-horizontal-min-inline-size);
}
.spark-card-horizontal .spark-card-horizontal-bg-image {
    z-index: var(--spark-card-horizontal-bg-image-z-index);
    block-size: var(--spark-card-horizontal-bg-image-block-size);
    inline-size: var(--spark-card-horizontal-bg-image-inline-size);
}
.spark-card-horizontal .spark-card-horizontal-avatar {
    z-index: var(--spark-card-horizontal-avatar-z-index);
    block-size: var(--spark-card-horizontal-avatar-side-length);
    inline-size: var(--spark-card-horizontal-avatar-side-length);
    border-radius: var(--spark-card-horizontal-avatar-border-radius);
}
.spark-card-horizontal a {
    text-decoration: none !important;
}
.spark-card-border-normal {
    block-size: min-content;
    box-shadow: 0 0 0 var(--spark-card-box-shadow1) var(--spark-card-normal-border-color) !important;
    inline-size: min-content;
}
.spark-card-border-normal.spark-card-overlay.spark-card-checked::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 1;
    position: absolute;
    background-color: var(--spark-card-checkbox-checked-card-background-color-overlay);
}
.spark-card-border-normal.spark-card-checked {
    position: relative;
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color) !important;
}
.spark-card-border-normal:hover {
    box-shadow: 0 0 0 var(--spark-card-box-shadow1) var(--spark-card-normal-hover-border-color) !important;
}
.spark-card-border-normal.spark-card-full-width {
    block-size: fit-content;
    inline-size: 100%;
}
.spark-card-border-normal.spark-card-full-width .spark-card-vertical {
    inline-size: 100%;
}
.spark-card-border-normal:hover .spark-card-vertical-checkbox,
.spark-card-border-normal:hover .spark-card-horizontal-checkbox {
    opacity: 1;
}
.spark-card-border-normal:hover.spark-card-link {
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color);
}
.spark-card-border-normal.spark-card-checked:hover {
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color) !important;
}
.spark-card-border-normal.spark-card-checked .spark-card-vertical-checkbox,
.spark-card-border-normal.spark-card-checked .spark-card-horizontal-checkbox {
    opacity: 1;
}
.spark-card-border-ghost {
    block-size: min-content;
    box-shadow: 0 0 0 var(--spark-card-box-shadow1) var(--spark-card-ghost-border-color);
    inline-size: min-content;
}
.spark-card-border-ghost.spark-card-overlay.spark-card-checked::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 1;
    position: absolute;
    background-color: var(--spark-card-checkbox-checked-card-background-color-overlay);
}
.spark-card-border-ghost.spark-card-checked {
    position: relative;
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color);
}
.spark-card-border-ghost:hover {
    box-shadow: 0 0 0 var(--spark-card-box-shadow1) var(--spark-card-ghost-hover-border-color);
}
.spark-card-border-ghost.spark-card-full-width {
    block-size: fit-content;
    inline-size: 100%;
}
.spark-card-border-ghost.spark-card-full-width .spark-card-vertical {
    inline-size: 100%;
}
.spark-card-border-ghost:hover .spark-card-vertical-checkbox,
.spark-card-border-ghost:hover .spark-card-horizontal-checkbox {
    opacity: 1;
}
.spark-card-border-ghost:hover.spark-card-link {
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color);
}
.spark-card-border-ghost.spark-card-checked:hover {
    box-shadow: 0 0 0 var(--spark-card-box-shadow2)
        var(--spark-card-checkbox-checked-card-border-color);
}
.spark-card-border-ghost.spark-card-checked .spark-card-vertical-checkbox,
.spark-card-border-ghost.spark-card-checked .spark-card-horizontal-checkbox {
    opacity: 1;
}
.spark-card-menu {
    display: flex;
}
.spark-card-content-overlay::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 1;
    position: absolute;
    background-color: var(--spark-card-checkbox-checked-card-background-color-overlay);
}
.spark-card-horizontal-line {
    block-size: var(--spark-card-horizontal-line-block-size);
    box-sizing: border-box;
    inline-size: var(--spark-card-horizontal-line-inline-size);
    background-color: var(--spark-card-normal-border-color);
}
.spark-card {
    display: flex;
    z-index: 0;
    text-decoration: none;
}

/* ---- components/card/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-card-box-shadow1: 0.0625rem;
    --spark-card-box-shadow2: 0.125rem;
    --spark-card-horizontal-line-inline-size: 100%;
    --spark-card-horizontal-line-block-size: 0.0625rem;
    --spark-card-metrics-container-checkbox-position: relative;
    --spark-card-metrics-container-checkbox-max-inline-size: 1.25rem;
    --spark-card-metrics-container-spark-icon-padding-inline-end: 0.25rem;
    --spark-card-metrics-container-spark-icon-vertical-padding-inline-end: 0.25rem;
    --spark-card-metrics-container-spark-chevron-icon-font-size: 1rem;
    --spark-card-checkbox-container-margin-block-start: 1rem;
    --spark-card-checkbox-container-margin-inline-start: 1rem;
    --spark-card-checkbox-container-padding-inline-start: 0.3125rem;
    --spark-card-checkbox-container-side-length: 2rem;
    --spark-card-checkbox-container-position: absolute;
    --spark-card-checkbox-container-checkbox-position: absolute;
    --spark-card-checkbox-container-checkbox-padding-inline-start: 0.3125rem;
    --spark-card-bg-fill: fill;
    --spark-card-bg-contain: contain;
    --spark-card-bg-cover: cover;
    --spark-card-bg-none: none;
    --spark-card-bg-scale-down: scale-down;
    --spark-card-icon-padding: 0.25rem;
    --spark-card-icon-margin-end: -0.25rem;
    --spark-card-horizontal-min-block-size: 13.125rem;
    --spark-card-horizontal-min-inline-size: 55rem;
    --spark-card-horizontal-display: flex;
    --spark-card-horizontal-flex-direction: row;
    --spark-card-horizontal-position: relative;
    --spark-card-horizontal-box-shadow: none;
    --spark-card-horizontal-bg-image-block-size: auto;
    --spark-card-horizontal-bg-image-inline-size: 21.25rem;
    --spark-card-horizontal-bg-image-max-inline-size: 21.25rem;
    --spark-card-horizontal-bg-image-z-index: -1;
    --spark-card-horizontal-avatar-side-length: 2.5rem;
    --spark-card-horizontal-avatar-border-radius: 100%;
    --spark-card-horizontal-avatar-z-index: 1;
    --spark-card-horizontal-avatar-margin-inline-start: 1rem;
    --spark-card-horizontal-avatar-margin-block-start: 1rem;
    --spark-card-horizontal-information-container-inline-size: 100%;
    --spark-card-horizontal-information-container-block-size: 100%;
    --spark-card-horizontal-information-container-padding: 1rem;
    --spark-card-horizontal-information-container-gap: 0.75rem;
    --spark-card-horizontal-information-container-max-block-size: 18.0625rem;
    --spark-card-horizontal-information-container-margin-start: 9.375rem;
    --spark-card-horizontal-information-container-inline-start: 21.25rem;
    --spark-card-horizontal-titles-container-inline-size: -webkit-fill-available;
    --spark-card-horizontal-titles-container-margin-block-start: -3.25rem;
    --spark-card-horizontal-title-font-size: 1rem;
    --spark-card-horizontal-title-line-height: 1.5rem;
    --spark-card-horizontal-title-padding-inline-end: 1rem;
    --spark-card-horizontal-title-max-inline-size: 19.75rem;
    --spark-card-horizontal-title-min-inline-size: 4.5rem;
    --spark-card-horizontal-sub-title-font-size: 0.75rem;
    --spark-card-horizontal-sub-title-line-height: 1.125rem;
    --spark-card-horizontal-sub-title-inline-size: 100%;
    --spark-card-horizontal-sub-title-max-inline-size: 28.75rem;
    --spark-card-horizontal-sub-title-min-inline-size: 28.75rem;
    --spark-card-horizontal-sub-title-letter-spacing: 0.015625rem;
    --spark-card-horizontal-description-font-size: 0.875rem;
    --spark-card-horizontal-description-line-height: 1.25rem;
    --spark-card-horizontal-description-inline-size: 100%;
    --spark-card-horizontal-description-min-block-size: 1.25rem;
    --spark-card-horizontal-properties-container-inline-size: 100%;
    --spark-card-horizontal-properties-container-block-size: 100%;
    --spark-card-horizontal-properties-container-padding-inline: 1rem;
    --spark-card-horizontal-properties-container-padding-block-start-end: 0.75rem;
    --spark-card-horizontal-properties-container-max-block-size: 18.0625rem;
    --spark-card-horizontal-properties-container-gap: 1rem;
    --spark-card-horizontal-properties-container-icon-gap: 0.25rem;
    --spark-card-vertical-inline-size: 17rem;
    --spark-card-vertical-block-size: auto;
    --spark-card-vertical-display: flex;
    --spark-card-vertical-gap: 1rem;
    --spark-card-vertical-bg-image-block-size: 10.5rem;
    --spark-card-vertical-bg-image-inline-size: 100%;
    --spark-card-vertical-bg-image-max-inline-size: 21.25rem;
    --spark-card-vertical-bg-image-z-index: -1;
    --spark-card-vertical-avatar-side-length: 2.5rem;
    --spark-card-vertical-avatar-border-radius: 100%;
    --spark-card-vertical-avatar-z-index: 1;
    --spark-card-vertical-avatar-margin-inline-start: 1rem;
    --spark-card-vertical-avatar-margin-block-start: 8.5rem;
    --spark-card-vertical-avatar-box-shadow: 0.0625rem;
    --spark-card-vertical-metrics-container-checkbox-position: relative;
    --spark-card-vertical-metrics-container-checkbox-max-inline-size: 1.25rem;
    --spark-card-vertical-metrics-container-spark-icon-padding-inline-end: 0.25rem;
    --spark-card-vertical-metrics-container-spark-icon-vertical-padding-inline-end: 0.25rem;
    --spark-card-vertical-metrics-container-spark-chevron-icon-font-size: 1rem;
    --spark-card-vertical-titles-container-inline-size: 100%;
    --spark-card-vertical-title-font-size: 1rem;
    --spark-card-vertical-title-line-height: 1.5rem;
    --spark-card-vertical-title-padding-inline-end: 1rem;
    --spark-card-vertical-title-max-inline-size: 19.75rem;
    --spark-card-vertical-title-min-inline-size: 4.5rem;
    --spark-card-vertical-sub-title-font-size: 0.75rem;
    --spark-card-vertical-sub-title-line-height: 1.125rem;
    --spark-card-vertical-sub-title-inline-size: 100%;
    --spark-card-vertical-sub-title-max-inline-size: 28.75rem;
    --spark-card-vertical-sub-title-min-inline-size: 28.75rem;
    --spark-card-vertical-sub-title-letter-spacing: 0.015625rem;
    --spark-card-vertical-spark-card-options-gap: 1rem;
    --spark-card-vertical-options-item-gap: 0.25rem;
    --spark-card-vertical-information-container-inline-size: 100%;
    --spark-card-vertical-information-container-block-size: 100%;
    --spark-card-vertical-information-container-padding: 1rem;
    --spark-card-vertical-information-container-gap: 0.75rem;
    --spark-card-vertical-information-container-max-block-size: 18.0625rem;
    --spark-card-vertical-properties-container-inline-size: 100%;
    --spark-card-vertical-properties-container-block-size: 100%;
    --spark-card-vertical-properties-container-padding-inline-start-end: 1rem;
    --spark-card-vertical-properties-container-padding-block-start-end: 0.75rem;
    --spark-card-vertical-properties-container-max-block-size: 18.0625rem;
    --spark-card-vertical-properties-container-gap: 1rem;
    --spark-card-vertical-properties-container-icon-gap: 0.25rem;
    --spark-card-vertical-description-font-size: 0.875rem;
    --spark-card-vertical-description-line-height: 1.25rem;
    --spark-card-vertical-description-inline-size: 100%;
    --spark-card-vertical-description-min-block-size: 1.25rem;
}

/* ---- components/card/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-card-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-card-image-container-border-bottom: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-card-checkbox-container-background: rgba(255, 255, 255, 0.87);
    --spark-card-checkbox-checked-card-border-color: var(--spark-color-classic-blue, #0054ae);
    --spark-card-checkbox-checked-card-background-color-overlay: rgba(0, 84, 174, 0.12);
    --spark-card-vertical-avatar-border-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-card-vertical-sub-text-color: var(--spark-color-theme-light-gray800, #494b51);
    --spark-card-vertical-main-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-card-horizontal-sub-text-color: var(--spark-color-theme-light-gray800, #494b51);
    --spark-card-horizontal-main-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-card-normal-border-color: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-card-normal-hover-border-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-card-ghost-border-color: var(--spark-color-transparent, transparent);
    --spark-card-ghost-hover-border-color: var(--spark-color-theme-light-gray400, #c9cace);
}

/* ---- components/card/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-card-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-card-image-container-border-bottom: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-card-checkbox-container-background: rgba(36, 37, 40, 0.87);
    --spark-card-checkbox-checked-card-border-color: var(--spark-color-energy-blue, #00c7fd);
    --spark-card-checkbox-checked-card-background-color-overlay: rgba(0, 199, 253, 0.12);
    --spark-card-vertical-avatar-border-color: #242528;
    --spark-card-vertical-sub-text-color: #e3e3e5;
    --spark-card-vertical-main-text-color: #ffffff;
    --spark-card-horizontal-sub-text-color: #e3e3e5;
    --spark-card-horizontal-main-text-color: #ffffff;
    --spark-card-normal-border-color: #3c3e42;
    --spark-card-normal-hover-border-color: #585a62;
    --spark-card-ghost-border-color: transparent;
    --spark-card-ghost-hover-border-color: #585a62;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/checkbox/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-checkbox-checkmark-container {
    align-self: start;
}
.spark-checkbox-label-container {
    margin-left: var(--spark-checkbox-margin-left);
}
.spark-checkbox-no-children {
    block-size: var(--spark-checkbox-no-children-size);
    inline-size: var(--spark-checkbox-no-children-container-size) !important;
}
.spark-checkbox-size-l {
    font-size: var(--spark-checkbox-l-font-size) !important;
    line-height: var(--spark-checkbox-l-line-height) !important;
    padding-block: var(--spark-checkbox-l-padding);
    padding-inline-end: var(--spark-checkbox-l-padding);
}
.spark-checkbox-size-l .spark-checkbox-label-container {
    line-height: var(--spark-checkbox-l-line-height);
    padding-inline-start: var(--spark-checkbox-l-checkmark-gap);
}
.spark-checkbox-size-l .spark-checkbox-error-message {
    gap: var(--spark-checkbox-l-error-message-margin-left);
    color: var(--spark-checkbox-color-invalid);
    display: flex;
    align-items: center;
    padding-block-start: var(--spark-checkbox-l-padding-error);
    padding-inline-start: var(--spark-checkbox-l-padding-inline-start);
}
.spark-checkbox-size-l .spark-checkbox-checkmark-container {
    inset-block-start: var(--spark-checkbox-l-input-inset-block-start);
    inset-inline-start: 0;
}
.spark-checkbox-size-l .spark-checkbox-error-message .spark-icon {
    color: var(--spark-checkbox-color-invalid);
}
.spark-checkbox-size-m {
    font-size: var(--spark-checkbox-m-font-size) !important;
    line-height: var(--spark-checkbox-m-line-height) !important;
    padding-block: var(--spark-checkbox-m-padding);
    padding-inline-end: var(--spark-checkbox-m-padding);
}
.spark-checkbox-size-m .spark-checkbox-label-container {
    line-height: var(--spark-checkbox-m-line-height);
    padding-inline-start: var(--spark-checkbox-m-checkmark-gap);
}
.spark-checkbox-size-m .spark-checkbox-error-message {
    gap: var(--spark-checkbox-m-error-message-margin-left);
    color: var(--spark-checkbox-color-invalid);
    display: flex;
    align-items: center;
    padding-block-start: var(--spark-checkbox-m-padding-error);
    padding-inline-start: var(--spark-checkbox-m-padding-inline-start);
}
.spark-checkbox-size-m .spark-checkbox-checkmark-container {
    inset-block-start: var(--spark-checkbox-m-input-inset-block-start);
    inset-inline-start: 0;
}
.spark-checkbox-size-m .spark-checkbox-error-message .spark-icon {
    color: var(--spark-checkbox-color-invalid);
}
.spark-checkbox-size-s {
    font-size: var(--spark-checkbox-s-font-size) !important;
    line-height: var(--spark-checkbox-s-line-height) !important;
    padding-block: var(--spark-checkbox-s-padding);
    padding-inline-end: var(--spark-checkbox-s-padding);
}
.spark-checkbox-size-s .spark-checkbox-label-container {
    line-height: var(--spark-checkbox-s-line-height);
    padding-inline-start: var(--spark-checkbox-s-checkmark-gap);
}
.spark-checkbox-size-s .spark-checkbox-error-message {
    gap: var(--spark-checkbox-s-error-message-margin-left);
    color: var(--spark-checkbox-color-invalid);
    display: flex;
    align-items: center;
    padding-block-start: var(--spark-checkbox-s-padding-error);
    padding-inline-start: var(--spark-checkbox-s-padding-inline-start);
}
.spark-checkbox-size-s .spark-checkbox-checkmark-container {
    inset-block-start: var(--spark-checkbox-s-input-inset-block-start);
    inset-inline-start: 0;
}
.spark-checkbox-size-s .spark-checkbox-error-message .spark-icon {
    color: var(--spark-checkbox-color-invalid);
}
.spark-checkbox {
    display: block !important;
    position: relative;
    box-sizing: border-box;
    align-items: center;
}
.spark-checkbox.spark-checkbox-is-disabled {
    color: var(--spark-checkbox-color-disabled);
}
.spark-checkbox.spark-checkbox-checked .spark-checkbox-checkmark-container {
    background-color: var(--spark-checkbox-color-on);
}
.spark-checkbox.spark-checkbox-un-checked .spark-checkbox-checkmark-container {
    background-color: transparent;
}
.spark-checkbox .spark-checkbox-checkmark-container {
    display: flex;
    position: absolute;
    block-size: var(--spark-checkbox-checkmark-size);
    align-items: center;
    inline-size: var(--spark-checkbox-checkmark-size);
    border-block: var(--spark-checkbox-border) solid var(--spark-checkbox-unchecked-border-color);
    border-inline: var(--spark-checkbox-border) solid var(--spark-checkbox-unchecked-border-color);
    border-radius: var(--spark-checkbox-checkmark-border-radius);
    justify-content: center;
}
.spark-checkbox .spark-checkbox-checkmark-container .spark-checkbox-checked,
.spark-checkbox .spark-checkbox-checkmark-container .spark-checkbox-indeterminate {
    color: var(--spark-checkbox-icon-color);
    padding: var(--spark-checkbox-padding);
    block-size: var(--spark-checkbox-checkmark-size);
    inline-size: auto;
}
.spark-checkbox .spark-checkbox-checkmark-container .spark-checkbox-un-checked {
    color: var(--spark-checkbox-color-on);
}
.spark-checkbox.spark-checkbox-un-checked .spark-checkbox-checkmark-container:hover {
    border-color: var(--spark-checkbox-unchecked-hover-border-color);
}
.spark-checkbox.spark-checkbox-un-checked
    .spark-checkbox-checkmark-container.spark-checkbox-invalid,
.spark-checkbox.spark-checkbox-un-checked
    .spark-checkbox-checkmark-container.spark-checkbox-invalid:hover {
    border-color: var(--spark-checkbox-color-invalid);
}
.spark-checkbox.spark-checkbox-un-checked
    .spark-checkbox-checkmark-container.spark-checkbox-is-disabled {
    border-color: var(--spark-checkbox-color-disabled);
}
.spark-checkbox.spark-checkbox-checked
    .spark-checkbox-checkmark-container:not(.spark-checkbox-invalid) {
    border-color: var(--spark-checkbox-color-on);
    background-color: var(--spark-checkbox-color-on);
}
.spark-checkbox.spark-checkbox-checked .spark-checkbox-checkmark-container.spark-checkbox-invalid {
    border-color: var(--spark-checkbox-color-invalid);
    background-color: var(--spark-checkbox-color-invalid);
}
.spark-checkbox.spark-checkbox-checked
    .spark-checkbox-checkmark-container.spark-checkbox-is-disabled {
    border-color: var(--spark-checkbox-color-disabled);
    background-color: var(--spark-checkbox-color-disabled);
}

/* ---- components/checkbox/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-checkbox {
        --spark-checkbox-color-on: Highlight;
        --spark-checkbox-icon-color: HighlightText;
        --spark-checkbox-color-disabled: GrayText;
        --spark-checkbox-unchecked-border-color: ButtonBorder;
    }
}

/* ---- components/checkbox/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-checkbox-checkmark-size: 0.75rem;
    --spark-checkbox-checkmark-border-radius: 0.0625rem;
    --spark-checkbox-no-children-size: 1.5rem;
    --spark-checkbox-no-children-container-size: 0.75rem;
    --spark-checkbox-border: 0.0625rem;
    --spark-checkbox-padding: 0.0625rem;
    --spark-checkbox-label-space-gap: 0.25rem;
    --spark-checkbox-margin-left: 0.625rem;
    --spark-checkbox-l-padding: 0.375rem;
    --spark-checkbox-l-font-size: 1rem;
    --spark-checkbox-l-checkmark-gap: 0.75rem;
    --spark-checkbox-l-line-height: 1.25rem;
    --spark-checkbox-l-error-message-margin-left: 0.4375rem;
    --spark-checkbox-l-padding-error: 0.125rem;
    --spark-checkbox-l-padding-inline-start: 1.375rem;
    --spark-checkbox-l-input-inset-block-start: 0.625rem;
    --spark-checkbox-m-padding: 0.25rem;
    --spark-checkbox-m-font-size: 0.875rem;
    --spark-checkbox-m-checkmark-gap: 0.5rem;
    --spark-checkbox-m-line-height: 1rem;
    --spark-checkbox-m-error-message-margin-left: 0.3125rem;
    --spark-checkbox-m-padding-error: 0.125rem;
    --spark-checkbox-m-padding-inline-start: 1.125rem;
    --spark-checkbox-m-input-inset-block-start: 0.375rem;
    --spark-checkbox-s-padding: 0.25rem;
    --spark-checkbox-s-font-size: 0.75rem;
    --spark-checkbox-s-checkmark-gap: 0.5rem;
    --spark-checkbox-s-line-height: 1rem;
    --spark-checkbox-s-error-message-margin-left: 0.3125rem;
    --spark-checkbox-s-padding-error: 0.125rem;
    --spark-checkbox-s-padding-inline-start: 1.125rem;
    --spark-checkbox-s-input-inset-block-start: 0.375rem;
    --spark-checkbox-container-block-size: 0.875rem;
}

/* ---- components/checkbox/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-checkbox-color-on: var(--spark-color-classic-blue, #0054ae);
    --spark-checkbox-color-disabled: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-checkbox-color-invalid: var(--spark-color-coral-shade1, #c81326);
    --spark-checkbox-icon-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-checkbox-unchecked-border-color: var(--spark-color-theme-light-gray800, #494b51);
    --spark-checkbox-unchecked-hover-border-color: var(--spark-color-theme-light-gray900, #2b2c30);
}

/* ---- components/checkbox/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-checkbox-color-on: var(--spark-color-energy-blue, #00c7fd);
    --spark-checkbox-color-disabled: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-checkbox-color-invalid: var(--spark-color-coral-shade1, #c81326);
    --spark-checkbox-icon-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-checkbox-unchecked-border-color: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-checkbox-unchecked-hover-border-color: var(--spark-color-theme-dark-gray900, #ffffff);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/code-snippet/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-code-snippet-line-numbering {
    padding-inline-start: var(--spark-code-snippet-line-numbering-padding-inline-start);
}
.spark-code-snippet-inherit {
    font-size: inherit !important;
}
.spark-code-snippet-pre {
    margin: var(--spark-code-snippet-zero-margin);
    display: grid;
    padding: var(--spark-code-snippet-zero-padding);
    counter-reset: count 0;
    grid-auto-rows: auto;
    grid-template-columns: min-content 1fr;
}
.spark-code-snippet-size-l .spark-code-snippet-animate-l {
    animation: keyframes-spark-code-snippet-tooltip-animation-l;
    animation-duration: 4s;
}
.spark-code-snippet-size-m .spark-code-snippet-animate-m {
    animation: keyframes-spark-code-snippet-tooltip-animation-m;
    animation-duration: 4s;
}
.spark-code-snippet-size-s .spark-code-snippet-animate-s {
    animation: keyframes-spark-code-snippet-tooltip-animation-s;
    animation-duration: 4s;
}
.spark-code-snippet-check-icon {
    color: white;
}
.spark-code-snippet-copy-icon {
    display: none !important;
}
.spark-code-snippet-is-visible {
    display: block !important;
}
.spark-code-snippet-single-copy-icon {
    padding: var(--spark-code-snippet-single-padding);
    z-index: 999;
    position: absolute !important;
    appearance: none !important;
    background-color: var(--spark-code-snippet-background-color);
    inset-inline-end: var(--spark-code-snippet-single-inset-inline-end-copy-icon) !important;
    inset-block-start: var(--spark-code-snippet-single-inset-block-start-copy-icon) !important;
}
.spark-code-snippet-single-copy-icon .spark-button .spark-icon {
    color: var(--spark-code-snippet-color);
}
.spark-code-snippet-single-scrollbar-y-is-hidden {
    overflow-y: hidden;
}
.spark-code-snippet-multiline-copy-icon {
    z-index: 999;
    position: absolute;
    font-size: var(--spark-code-snippet-copy-icon-font-size);
    background-color: var(--spark-code-snippet-background-color);
    inset-inline-end: var(--spark-code-snippet-multiline-inset-inline-end-copy-icon) !important;
    inset-block-start: var(--spark-code-snippet-multiline-inset-block-start-copy-icon) !important;
}
.spark-code-snippet-multiline-copy-icon .spark-button .spark-icon {
    color: var(--spark-code-snippet-color);
}
.spark-code-snippet-scrollbar-is-hidden {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
.spark-code-snippet-tooltip-multiline {
    opacity: var(--spark-code-snippet-closed-opacity);
    visibility: hidden;
    -pointer-events: auto;
}
.spark-code-snippet-tooltip-l {
    gap: var(--spark-code-snippet-multiline-l-gap);
    padding: var(--spark-code-snippet-multiline-l-tooltip-top)
        var(--spark-code-snippet-multiline-l-tooltip-top);
    block-size: var(--spark-code-snippet-single-l-block-size) !important;
    align-items: center !important;
}
.spark-code-snippet-tooltip-m {
    block-size: var(--spark-code-snippet-single-m-block-size) !important;
    align-items: center !important;
}
.spark-code-snippet-tooltip-s {
    block-size: var(--spark-code-snippet-single-s-block-size) !important;
    align-items: center !important;
}
.spark-code-snippet-line-count {
    display: grid;
    text-align: end;
    font-family: var(--spark-code-snippet-font-family);
}
.spark-code-snippet {
    color: var(--spark-code-snippet-color);
    position: relative;
    background-color: var(--spark-code-snippet-background-color);
}
.spark-code-snippet .spark-code-snippet-line-count::before {
    color: var(--spark-code-snippet-numbering-color);
    content: counter(count);
    white-space: pre;
    margin-right: var(--spark-code-snippet-line-numbering-margin-right);
    border-inline-end: var(--spark-code-snippet-line-numbering-border-inline-end) solid
        var(--spark-code-snippet-border-color);
    counter-increment: count;
    padding-inline-end: var(--spark-code-snippet-line-numbering-padding-inline-end);
    padding-inline-start: var(--spark-code-snippet-line-numbering-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-inline {
    display: inline-block;
    align-items: flex-start;
    font-family: var(--spark-code-snippet-font-family);
}
.spark-code-snippet.spark-code-snippet-multiline {
    align-items: flex-start;
}
.spark-code-snippet.spark-code-snippet-multiline pre code {
    font-family: var(--spark-code-snippet-font-family);
}
.spark-code-snippet.spark-code-snippet-multiline pre.spark-code-snippet-hide-numbering {
    grid-template-columns: none !important;
}
.spark-code-snippet.spark-code-snippet-multiline.spark-code-snippet-size-l {
    font-size: var(--spark-code-snippet-multiline-l-font-size);
    block-size: var(--spark-code-snippet-multiline-l-block-size);
    padding-block-start: var(--spark-code-snippet-multiline-l-padding-block-start);
    padding-inline-start: var(--spark-code-snippet-multiline-l-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-multiline.spark-code-snippet-size-m {
    font-size: var(--spark-code-snippet-multiline-m-font-size);
    block-size: var(--spark-code-snippet-multiline-m-block-size);
    padding-block-start: var(--spark-code-snippet-multiline-m-padding-block-start);
    padding-inline-start: var(--spark-code-snippet-multiline-m-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-multiline.spark-code-snippet-size-s {
    font-size: var(--spark-code-snippet-multiline-s-font-size);
    block-size: var(--spark-code-snippet-multiline-s-block-size);
    padding-block-start: var(--spark-code-snippet-multiline-s-padding-block-start);
    padding-inline-start: var(--spark-code-snippet-multiline-s-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-single pre {
    margin: var(--spark-code-snippet-pre-margin);
    font-family: var(--spark-code-snippet-font-family);
}
.spark-code-snippet.spark-code-snippet-single code {
    font-family: var(--spark-code-snippet-font-family);
}
.spark-code-snippet.spark-code-snippet-single.spark-code-snippet-size-l {
    font-size: var(--spark-code-snippet-single-l-font-size);
    block-size: var(--spark-code-snippet-single-l-block-size);
    line-height: var(--spark-code-snippet-single-l-line-height);
    padding-inline-start: var(--spark-code-snippet-single-l-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-single.spark-code-snippet-size-m {
    font-size: var(--spark-code-snippet-single-m-font-size);
    block-size: var(--spark-code-snippet-single-m-block-size);
    line-height: var(--spark-code-snippet-single-m-line-height);
    padding-inline-start: var(--spark-code-snippet-single-m-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-single.spark-code-snippet-size-s {
    font-size: var(--spark-code-snippet-single-s-font-size);
    block-size: var(--spark-code-snippet-single-s-block-size);
    line-height: var(--spark-code-snippet-single-s-line-height);
    padding-inline-start: var(--spark-code-snippet-single-s-padding-inline-start);
}
.spark-code-snippet.spark-code-snippet-inline.spark-code-snippet-size-l {
    display: inline-flex;
    font-size: var(--spark-code-snippet-inline-l-font-size);
    block-size: var(--spark-code-snippet-inline-l-block-size);
    align-items: center;
    inline-size: var(--spark-code-snippet-inline-l-width);
    padding-inline-end: var(--spark-code-snippet-inline-l-padding-inline);
    padding-inline-start: var(--spark-code-snippet-inline-l-padding-inline);
}
.spark-code-snippet.spark-code-snippet-inline.spark-code-snippet-size-m {
    display: inline-flex;
    font-size: var(--spark-code-snippet-inline-m-font-size);
    block-size: var(--spark-code-snippet-inline-m-block-size);
    align-items: center;
    inline-size: var(--spark-code-snippet-inline-m-width);
    padding-inline-end: var(--spark-code-snippet-inline-m-padding-inline);
    padding-inline-start: var(--spark-code-snippet-inline-m-padding-inline);
}
.spark-code-snippet.spark-code-snippet-inline.spark-code-snippet-size-s {
    display: inline-flex;
    font-size: var(--spark-code-snippet-inline-s-font-size);
    block-size: var(--spark-code-snippet-inline-s-block-size);
    align-items: center;
    inline-size: var(--spark-code-snippet-inline-s-width);
    padding-inline-end: var(--spark-code-snippet-inline-s-padding-inline);
    padding-inline-start: var(--spark-code-snippet-inline-s-padding-inline);
}

/* ---- components/code-snippet/keyframes.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@keyframes keyframes-spark-code-snippet-tooltip-animation-l {
    0% {
        margin-inline-start: 100%;
    }
    37%,
    62% {
        position: absolute;
        inline-size: 100%;
        margin-inline-start: calc(100% - var(--spark-code-snippet-single-l-inline-tooltip-size));
    }
    100% {
        margin-inline-start: 100%;
    }
}
@keyframes keyframes-spark-code-snippet-tooltip-animation-m {
    0% {
        margin-inline-start: 100%;
    }
    37%,
    62% {
        position: absolute;
        inline-size: 100%;
        margin-inline-start: calc(100% - var(--spark-code-snippet-single-m-inline-tooltip-size));
    }
    100% {
        margin-inline-start: 100%;
    }
}
@keyframes keyframes-spark-code-snippet-tooltip-animation-s {
    0% {
        margin-inline-start: 100%;
    }
    37%,
    62% {
        position: absolute;
        inline-size: 100%;
        margin-inline-start: calc(100% - var(--spark-code-snippet-single-s-inline-tooltip-size));
    }
    100% {
        margin-inline-start: 100%;
    }
}

/* ---- components/code-snippet/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-code-snippet-font-family: IntelOneMono, monospace;
    --spark-code-snippet-justify-content: space-between;
    --spark-code-snippet-pre-margin: 0rem;
    --spark-code-snippet-zero-padding: 0rem;
    --spark-code-snippet-zero-margin: 0rem;
    --spark-code-snippet-closed-opacity: 0;
    --spark-code-snippet-opened-opacity: 1;
    --spark-code-snippet-inline-l-block-size: 1.5rem;
    --spark-code-snippet-inline-l-font-size: 1rem;
    --spark-code-snippet-inline-l-padding-inline: 0.5rem;
    --spark-code-snippet-inline-l-width: fit-content;
    --spark-code-snippet-inline-m-block-size: 1.3125rem;
    --spark-code-snippet-inline-m-font-size: 0.875rem;
    --spark-code-snippet-inline-m-padding-inline: 0.375rem;
    --spark-code-snippet-inline-m-width: fit-content;
    --spark-code-snippet-inline-s-block-size: 1.125rem;
    --spark-code-snippet-inline-s-font-size: 0.75rem;
    --spark-code-snippet-inline-s-padding-inline: 0.25rem;
    --spark-code-snippet-inline-s-width: fit-content;
    --spark-code-snippet-single-padding: 0rem;
    --spark-code-snippet-single-inset-block-start-copy-icon: 0rem;
    --spark-code-snippet-single-inset-inline-end-copy-icon: 0rem;
    --spark-code-snippet-single-l-block-size: 2.5rem;
    --spark-code-snippet-single-l-font-size: 1rem;
    --spark-code-snippet-single-l-padding-inline-start: 1rem;
    --spark-code-snippet-single-l-line-height: 2.5rem;
    --spark-code-snippet-single-l-inline-tooltip-size: 12.5rem;
    --spark-code-snippet-single-m-block-size: 2rem;
    --spark-code-snippet-single-m-font-size: 0.875rem;
    --spark-code-snippet-single-m-padding-inline-start: 0.75rem;
    --spark-code-snippet-single-m-line-height: 2rem;
    --spark-code-snippet-single-m-inline-tooltip-size: 10rem;
    --spark-code-snippet-single-s-block-size: 1.5rem;
    --spark-code-snippet-single-s-font-size: 0.75rem;
    --spark-code-snippet-single-s-padding-inline-start: 0.5rem;
    --spark-code-snippet-single-s-line-height: 1.5rem;
    --spark-code-snippet-single-s-inline-tooltip-size: 9.0625rem;
    --spark-code-snippet-multiline-inset-block-start-copy-icon: 0rem;
    --spark-code-snippet-multiline-inset-inline-end-copy-icon: 0.5rem;
    --spark-code-snippet-multiline-l-font-size: 1rem;
    --spark-code-snippet-multiline-l-block-size: 12.25rem;
    --spark-code-snippet-multiline-l-padding-inline-start: 0.5rem;
    --spark-code-snippet-multiline-l-padding-block-start: 0.5rem;
    --spark-code-snippet-multiline-l-gap: 1rem;
    --spark-code-snippet-multiline-l-tooltip-top: 0.75rem;
    --spark-code-snippet-multiline-l-tooltip-right: 1rem;
    --spark-code-snippet-multiline-m-font-size: 0.875rem;
    --spark-code-snippet-multiline-m-block-size: 11.25rem;
    --spark-code-snippet-multiline-m-padding-inline-start: 0.5rem;
    --spark-code-snippet-multiline-m-padding-block-start: 0.5rem;
    --spark-code-snippet-multiline-m-gap: 0.75rem;
    --spark-code-snippet-multiline-s-font-size: 0.75rem;
    --spark-code-snippet-multiline-s-block-size: 10rem;
    --spark-code-snippet-multiline-s-padding-inline-start: 0.5rem;
    --spark-code-snippet-multiline-s-padding-block-start: 0.5rem;
    --spark-code-snippet-multiline-s-gap: 0.5rem;
    --spark-code-snippet-copy-icon-font-size: 1rem;
    --spark-code-snippet-copy-icon-flex-shrink: 0;
    --spark-code-snippet-copy-icon-margin-inline-end: 0;
    --spark-code-snippet-copy-icon-padding-inline-end: 0rem;
    --spark-code-snippet-line-numbering-padding-inline-start: 0.5rem;
    --spark-code-snippet-line-numbering-padding-inline-end: 0.3125rem;
    --spark-code-snippet-line-numbering-padding-inline-top: 0.5rem;
    --spark-code-snippet-line-numbering-border-inline-end: 0.0625rem;
    --spark-code-snippet-line-numbering-margin-right: 0.625rem;
}

/* ---- components/code-snippet/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-code-snippet-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-code-snippet-background-color: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-code-snippet-border-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-code-snippet-numbering-color: var(--spark-color-theme-light-gray900, #2b2c30);
}

/* ---- components/code-snippet/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-code-snippet-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-code-snippet-background-color: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-code-snippet-border-color: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-code-snippet-numbering-color: var(--spark-color-theme-dark-gray900, #ffffff);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/divider/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-divider-thickness-light.spark-divider-horizontal {
    block-size: var(--spark-divider-light-thick);
}
.spark-divider-thickness-light.spark-divider-vertical {
    inline-size: var(--spark-divider-light-thick);
}
.spark-divider-thickness-bold.spark-divider-horizontal {
    block-size: var(--spark-divider-bold-thick);
}
.spark-divider-thickness-bold.spark-divider-vertical {
    inline-size: var(--spark-divider-bold-thick);
}
.spark-divider {
    display: inline-block;
    background-color: var(--spark-divider-background-color);
}
.spark-divider.spark-divider-horizontal {
    inline-size: 100%;
}
.spark-divider.spark-divider-vertical {
    block-size: 100%;
}

/* ---- components/divider/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-divider-light-thick: 0.0625rem;
    --spark-divider-bold-thick: 0.125rem;
}

/* ---- components/divider/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-divider-background-color: var(--spark-color-theme-light-gray400, #c9cace);
}

/* ---- components/divider/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --background-color: var(--spark-color-theme-dark-gray400, #585a62);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/dropdown/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-dropdown-list-box {
    margin: var(--spark-dropdown-list-box-margin);
    outline: var(--spark-dropdown-list-box-outline);
    padding: var(--spark-dropdown-list-box-padding);
    list-style: none;
}
.spark-dropdown-list-box.spark-list.spark-list-size-l .spark-list-item {
    padding-inline: var(--spark-dropdown-l-list-box-item-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-l.spark-dropdown-supplementary-icon.spark-dropdown-primary
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-l-supplementary-icon-primary-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-l.spark-dropdown-supplementary-icon.spark-dropdown-ghost
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-l-supplementary-icon-ghost-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-m .spark-list-item {
    padding-inline: var(--spark-dropdown-m-list-box-item-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-m.spark-dropdown-supplementary-icon.spark-dropdown-primary
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-m-supplementary-icon-primary-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-m.spark-dropdown-supplementary-icon.spark-dropdown-ghost
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-m-supplementary-icon-ghost-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-s .spark-list-item {
    padding-inline: var(--spark-dropdown-s-list-box-item-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-s.spark-dropdown-supplementary-icon.spark-dropdown-primary
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-s-supplementary-icon-primary-padding-inline-start);
}
.spark-dropdown-list-box.spark-list.spark-list-size-s.spark-dropdown-supplementary-icon.spark-dropdown-ghost
    .spark-list-item {
    padding-inline-start: var(--spark-dropdown-s-supplementary-icon-ghost-padding-inline-start);
}
.spark-dropdown-list-box-scroll {
    padding: var(--spark-dropdown-list-box-scroll-padding) !important;
    white-space: normal;
    max-block-size: var(--spark-dropdown-list-box-scroll-height) !important;
}
.spark-dropdown-ghost {
    color: var(--spark-dropdown-text-color);
}
.spark-dropdown-ghost .spark-dropdown-button {
    border: var(--spark-dropdown-ghost-variant-border) !important;
    border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid
        var(--spark-dropdown-ghost-border-bottom-color) !important;
}
.spark-dropdown-ghost .spark-dropdown-button-label {
    padding-inline-start: var(--spark-dropdown-ghost-padding-inline-start) !important;
}
.spark-dropdown-ghost .spark-dropdown-arrow-icon {
    margin-inline-end: var(--spark-dropdown-ghost-arrow-margin-inline-end) !important;
}
.spark-dropdown-ghost .spark-dropdown-button-error {
    border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid
        var(--spark-dropdown-border-invalid-color) !important;
}
.spark-dropdown-ghost:disabled,
.spark-dropdown-ghost.spark-dropdown-is-disabled {
    color: var(--spark-dropdown-text-disabled-color);
    cursor: default;
}
.spark-dropdown-ghost .spark-dropdown-button-is-disabled {
    border: var(--spark-dropdown-ghost-variant-border) !important;
    border-bottom: var(--spark-dropdown-ghost-variant-border-bottom) solid
        var(--spark-dropdown-button-disabled-color) !important;
    background-color: var(--spark-dropdown-button-disabled-background) !important;
}
.spark-dropdown-ghost:disabled .spark-dropdown-button,
.spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-button {
    border: none;
    background-color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-ghost:disabled .spark-dropdown-button-label,
.spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-button-label {
    color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-ghost:disabled .spark-dropdown-arrow-icon,
.spark-dropdown-ghost.spark-dropdown-is-disabled .spark-dropdown-arrow-icon {
    color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-primary {
    color: var(--spark-dropdown-text-color);
}
.spark-dropdown-primary:disabled,
.spark-dropdown-primary.spark-dropdown-is-disabled {
    color: var(--spark-dropdown-text-disabled-color) !important;
    cursor: default !important;
}
.spark-dropdown-primary:disabled .spark-dropdown-button,
.spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button {
    color: var(--spark-dropdown-text-disabled-color);
    cursor: default;
}
.spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-button,
.spark-dropdown-primary.spark-dropdown-is-disabled .spark-dropdown-button .spark-dropdown-button {
    border: none;
    background-color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-button-label,
.spark-dropdown-primary.spark-dropdown-is-disabled
    .spark-dropdown-button
    .spark-dropdown-button-label {
    color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-primary:disabled .spark-dropdown-button .spark-dropdown-arrow-icon,
.spark-dropdown-primary.spark-dropdown-is-disabled
    .spark-dropdown-button
    .spark-dropdown-arrow-icon {
    color: var(--spark-dropdown-button-disabled-color);
}
.spark-dropdown-size-l .spark-dropdown-button-label {
    font-size: var(--spark-dropdown-l-font-size);
    line-height: var(--spark-dropdown-l-line-height);
    padding-block: var(--spark-dropdown-l-label-padding-block);
    padding-inline-start: var(--spark-dropdown-l-label-padding-left);
}
.spark-dropdown-size-l .spark-dropdown-arrow-icon {
    margin-inline-end: var(--spark-dropdown-l-icon-padding-end);
    margin-inline-start: var(--spark-dropdown-l-icon-padding-start);
}
.spark-dropdown-size-m .spark-dropdown-button-label {
    font-size: var(--spark-dropdown-m-font-size);
    line-height: var(--spark-dropdown-m-line-height);
    padding-block: var(--spark-dropdown-m-label-padding-block);
    padding-inline-start: var(--spark-dropdown-m-label-padding-left);
}
.spark-dropdown-size-m .spark-dropdown-arrow-icon {
    margin-inline-end: var(--spark-dropdown-m-icon-padding-end);
    margin-inline-start: var(--spark-dropdown-m-icon-padding-start);
}
.spark-dropdown-size-s .spark-dropdown-button-label {
    font-size: var(--spark-dropdown-s-font-size);
    line-height: var(--spark-dropdown-s-line-height);
    padding-block: var(--spark-dropdown-s-label-padding-block);
    padding-inline-start: var(--spark-dropdown-s-label-padding-left);
}
.spark-dropdown-size-s .spark-dropdown-arrow-icon {
    margin-inline-end: var(--spark-dropdown-s-icon-padding-end);
    margin-inline-start: var(--spark-dropdown-s-icon-padding-start);
}
.spark-dropdown {
    display: inline-block;
    position: relative;
    font-family: inherit;
    inline-size: 100%;
}
.spark-dropdown.spark-dropdown-is-disabled {
    pointer-events: none;
}
.spark-dropdown .spark-dropdown-button.spark-button {
    color: var(--spark-dropdown-text-color);
    cursor: pointer;
    display: flex;
    padding: var(--spark-dropdown-button-padding);
    z-index: 1;
    font-size: var(--spark-dropdown-button-icon-font-size);
    block-size: inherit;
    align-items: center;
    font-weight: normal;
    inline-size: 100%;
    border-color: var(--spark-dropdown-border-color);
    border-style: solid;
    border-width: var(--spark-dropdown-button-border-width);
    border-radius: var(--spark-dropdown-button-border-radius);
    justify-content: flex-start;
    max-inline-size: inherit;
    background-color: inherit;
}
.spark-dropdown .spark-dropdown-button-error.spark-button {
    border-color: var(--spark-dropdown-border-invalid-color);
    border-width: var(--spark-dropdown-button-error-border-width);
}
.spark-dropdown .spark-dropdown-button-is-focused {
    outline: var(--spark-dropdown-button-opened-focus-outline-width) solid
        var(--spark-dropdown-button-focus-outline-color) !important;
}
.spark-dropdown .spark-dropdown-button-label {
    color: var(--spark-dropdown-text-placeholder-color);
    width: auto !important;
    border: none;
    display: flex;
    outline: none;
    overflow: hidden;
    box-sizing: border-box;
    font-style: var(--spark-dropdown-text-placeholder-style);
    font-family: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
}
.spark-dropdown .spark-dropdown-button-label-is-selected {
    color: var(--spark-dropdown-text-selected-color);
    font-style: normal;
}
.spark-dropdown .spark-dropdown-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.spark-dropdown .spark-dropdown-button-label .spark-dropdown-supplementary-icon {
    display: flex;
    align-items: center;
    padding-inline-end: var(--spark-dropdown-supplementary-icon-padding-inline-end);
}
.spark-dropdown .spark-dropdown-button-error.spark-button:hover {
    border-color: var(--spark-dropdown-border-invalid-hover) !important;
}
.spark-dropdown .spark-dropdown-button.spark-button:hover,
.spark-dropdown .spark-dropdown-button.spark-button.spark-button-hovered {
    border-color: var(--spark-dropdown-border-hover-color);
    background-color: inherit;
}
.spark-dropdown .spark-dropdown-button.spark-button:active,
.spark-dropdown .spark-dropdown-button.spark-button.spark-button-active {
    background-color: inherit;
}
.spark-dropdown .spark-dropdown-button.spark-button.invalid {
    border-color: var(--spark-dropdown-border-invalid-color);
}
.spark-dropdown .spark-dropdown-button.spark-button:disabled,
.spark-dropdown .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled {
    color: var(--spark-dropdown-button-disabled-text-color) !important;
    cursor: auto !important;
    border-color: var(--spark-dropdown-button-disabled-background);
    background-color: var(--spark-dropdown-background-disabled);
}
.spark-dropdown .spark-dropdown-button.spark-button .spark-button-content {
    inline-size: 100%;
    justify-content: space-between;
}
.spark-dropdown .spark-dropdown-button.spark-button:disabled .spark-dropdown-button-label,
.spark-dropdown .spark-dropdown-button.spark-button:disabled .spark-dropdown-arrow-icon,
.spark-dropdown
    .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled
    .spark-dropdown-button-label,
.spark-dropdown
    .spark-dropdown-button.spark-button.spark-dropdown-button-is-disabled
    .spark-dropdown-arrow-icon {
    color: var(--spark-dropdown-button-disabled-text-color);
}

/* ---- components/dropdown/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-dropdown-text-placeholder-style: normal;
    --spark-dropdown-supplementary-icon-padding-inline-end: 0.5rem;
    --spark-dropdown-list-box-padding: 0;
    --spark-dropdown-list-box-margin: 0;
    --spark-dropdown-list-box-outline: 0rem;
    --spark-dropdown-list-box-scroll-height: 12rem;
    --spark-dropdown-list-box-scroll-padding: 0rem;
    --spark-dropdown-button-padding: 0;
    --spark-dropdown-button-border-width: 0.0625rem;
    --spark-dropdown-button-border-radius: 0;
    --spark-dropdown-button-error-border-width: 0.0625rem;
    --spark-dropdown-button-opened-focus-outline-width: 0.1875rem;
    --spark-dropdown-button-icon-font-size: 0.875rem;
    --spark-dropdown-ghost-variant-border: 0;
    --spark-dropdown-ghost-variant-border-bottom: 0.125rem;
    --spark-dropdown-ghost-padding-inline-start: 0rem;
    --spark-dropdown-ghost-arrow-margin-inline-end: 0rem;
    --spark-dropdown-l-label-padding-left: 1rem;
    --spark-dropdown-l-label-padding-block: 0.5625rem;
    --spark-dropdown-l-icon-padding-start: 0.5rem;
    --spark-dropdown-l-icon-padding-end: 1rem;
    --spark-dropdown-l-font-size: 1rem;
    --spark-dropdown-l-line-height: 1.25rem;
    --spark-dropdown-l-list-box-item-padding-inline-start: 1rem;
    --spark-dropdown-l-supplementary-icon-primary-padding-inline-start: 2.5rem;
    --spark-dropdown-l-supplementary-icon-ghost-padding-inline-start: 1.5rem;
    --spark-dropdown-m-label-padding-left: 0.75rem;
    --spark-dropdown-m-label-padding-block: 0.4375rem;
    --spark-dropdown-m-icon-padding-start: 0.25rem;
    --spark-dropdown-m-icon-padding-end: 0.75rem;
    --spark-dropdown-m-font-size: 0.875rem;
    --spark-dropdown-m-line-height: 1rem;
    --spark-dropdown-m-list-box-item-padding-inline-start: 0.75rem;
    --spark-dropdown-m-supplementary-icon-primary-padding-inline-start: 2.25rem;
    --spark-dropdown-m-supplementary-icon-ghost-padding-inline-start: 1.375rem;
    --spark-dropdown-s-label-padding-left: 0.5rem;
    --spark-dropdown-s-label-padding-block: 0.25rem;
    --spark-dropdown-s-icon-padding-start: 0.25rem;
    --spark-dropdown-s-icon-padding-end: 0.5rem;
    --spark-dropdown-s-font-size: 0.75rem;
    --spark-dropdown-s-line-height: 0.875rem;
    --spark-dropdown-s-list-box-item-padding-inline-start: 0.5rem;
    --spark-dropdown-s-supplementary-icon-primary-padding-inline-start: 1.75rem;
    --spark-dropdown-s-supplementary-icon-ghost-padding-inline-start: 1.25rem;
}

/* ---- components/dropdown/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-dropdown-background-disabled: var(--spark-color-theme-light-gray300, #e2e2e4);
    --spark-dropdown-text-color: var(--spark-input-color, #2b2c30);
    --spark-dropdown-text-disabled-color: var(--spark-input-color-disabled, #b2b3b9);
    --spark-dropdown-text-invalid-color: var(--spark-input-color-invalid, #c81326);
    --spark-dropdown-text-placeholder-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-dropdown-text-selected-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-dropdown-button-disabled-background: var(--spark-color-transparent, transparent);
    --spark-dropdown-button-focus-outline-color: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-dropdown-button-disabled-color: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-dropdown-button-disabled-text-color: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-dropdown-border-color: var(--spark-input-border-color, #8b8e97);
    --spark-dropdown-border-invalid-color: var(--spark-input-color-invalid, #c81326);
    --spark-dropdown-border-hover-color: var(--spark-input-border-color-hover, #494b51);
    --spark-dropdown-border-invalid-hover: #950000;
    --spark-dropdown-border-opened-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-dropdown-ghost-border-bottom-color: var(--spark-color-theme-light-gray400, #c9cace);
}

/* ---- components/dropdown/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-dropdown-background-disabled: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-dropdown-text-color: #ffffff;
    --spark-dropdown-text-disabled-color: #6b6e76;
    --spark-dropdown-text-invalid-color: var(--spark-color-coral-tint1, #ff848a);
    --spark-dropdown-text-placeholder-color: #ffffff;
    --spark-dropdown-text-selected-color: #ffffff;
    --spark-dropdown-button-disabled-background: transparent;
    --spark-dropdown-button-focus-outline-color: #6ddcff;
    --spark-dropdown-button-disabled-color: #484a50;
    --spark-dropdown-button-disabled-text-color: #6b6e76;
    --spark-dropdown-border-color: #8e9099;
    --spark-dropdown-border-invalid-color: var(--spark-color-coral-tint1, #ff848a);
    --spark-dropdown-border-hover-color: #585a62;
    --spark-dropdown-border-invalid-hover: #ff848a;
    --spark-dropdown-border-opened-color: #585a62;
    --spark-dropdown-ghost-border-bottom-color: #585a62;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/fieldlabel/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-fieldlabel-required-indicator {
    position: relative;
    min-inline-size: 1ch;
    margin-inline-start: var(--spark-fieldlabel-asterisk-gap);
}
.spark-fieldlabel-required-asterisk {
    position: absolute;
    font-size: var(--spark-fieldlabel-asterisk-size);
    line-height: var(--spark-fieldlabel-asterisk-line-height);
    inset-block-start: -0.1em;
    inset-inline-start: 0;
}
.spark-fieldlabel-size-l {
    font-size: var(--spark-fieldlabel-l-font-size);
    line-height: var(--spark-fieldlabel-l-line-height);
}
.spark-fieldlabel-size-m {
    font-size: var(--spark-fieldlabel-m-font-size);
    line-height: var(--spark-fieldlabel-m-line-height);
}
.spark-fieldlabel-size-s {
    font-size: var(--spark-fieldlabel-s-font-size);
    line-height: var(--spark-fieldlabel-s-line-height);
}
.spark-fieldlabel {
    color: var(--spark-fieldlabel-text-color);
    inline-size: var(--spark-fieldlabel-inline-size);
    padding-inline: var(--spark-fieldlabel-padding-inline);
}
.spark-fieldlabel.spark-fieldlabel-is-disabled {
    color: var(--spark-fieldlabel-text-disabled-color) !important;
}

/* ---- components/fieldlabel/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-fieldlabel {
        --spark-fieldlabel-text-disabled-color: GrayText;
    }
}

/* ---- components/fieldlabel/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-fieldlabel-margin-inline: 0.3125rem;
    --spark-fieldlabel-margin-block: 0.3125rem;
    --spark-fieldlabel-inline-size: max-content;
    --spark-fieldlabel-asterisk-size: 1.25rem;
    --spark-fieldlabel-asterisk-line-height: 100%;
    --spark-fieldlabel-asterisk-gap: 0.25rem;
    --spark-fieldlabel-padding-inline: 0rem;
    --spark-fieldlabel-l-font-size: 0.875rem;
    --spark-fieldlabel-l-line-height: 1rem;
    --spark-fieldlabel-m-font-size: 0.75rem;
    --spark-fieldlabel-m-line-height: 0.875rem;
    --spark-fieldlabel-s-font-size: 0.6875rem;
    --spark-fieldlabel-s-line-height: 0.75rem;
}

/* ---- components/fieldlabel/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-fieldlabel-text-color: var(--spark-color-theme-light-gray800, #494b51);
    --spark-fieldlabel-text-disabled-color: var(--spark-color-theme-light-gray600, #8b8e97);
}

/* ---- components/fieldlabel/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-fieldlabel-text-color: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-fieldlabel-text-disabled-color: var(--spark-color-theme-dark-gray600, #8e9099);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/fieldtext-wrapper/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-fieldtext-wrapper-size-l-help-label {
    font-size: var(--spark-fieldtext-wrapper-l-help-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-l-disabled-label {
    font-size: var(--spark-fieldtext-wrapper-l-disabled-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-l-invalid-label {
    font-size: var(--spark-fieldtext-wrapper-l-invalid-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-m-help-label {
    font-size: var(--spark-fieldtext-wrapper-m-help-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-m-disabled-label {
    font-size: var(--spark-fieldtext-wrapper-m-disabled-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-m-invalid-label {
    font-size: var(--spark-fieldtext-wrapper-m-invalid-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-s-help-label {
    font-size: var(--spark-fieldtext-wrapper-s-help-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-s-disabled-label {
    font-size: var(--spark-fieldtext-wrapper-s-disabled-label-font-size) !important;
}
.spark-fieldtext-wrapper-size-s-invalid-label {
    font-size: var(--spark-fieldtext-wrapper-s-invalid-label-font-size) !important;
}
.spark-fieldtext-wrapper {
    gap: var(--spark-fieldtext-wrapper-column-gap);
    display: flex;
    flex-direction: column;
}
.spark-fieldtext-wrapper .spark-fieldtext-wrapper-description {
    color: var(--spark-fieldtext-wrapper-description-color);
    display: flow-root;
}
.spark-fieldtext-wrapper .spark-fieldtext-wrapper-is-invalid {
    gap: var(--spark-fieldtext-wrapper-label-gap);
    color: var(--spark-fieldtext-wrapper-color-invalid);
    display: flex;
    align-items: center;
}
.spark-fieldtext-wrapper .spark-fieldtext-wrapper-is-disabled {
    color: var(--spark-fieldtext-wrapper-disabled-color) !important;
    display: flow-root;
}

/* ---- components/fieldtext-wrapper/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-fieldtext-wrapper-column-gap: 0.25rem;
    --spark-fieldtext-wrapper-label-gap: 0.5rem;
    --spark-fieldtext-wrapper-l-help-label-font-size: 0.875rem;
    --spark-fieldtext-wrapper-l-disabled-label-font-size: 0.75rem;
    --spark-fieldtext-wrapper-l-invalid-label-font-size: 0.875rem;
    --spark-fieldtext-wrapper-m-help-label-font-size: 0.75rem;
    --spark-fieldtext-wrapper-m-disabled-label-font-size: 0.6875rem;
    --spark-fieldtext-wrapper-m-invalid-label-font-size: 0.75rem;
    --spark-fieldtext-wrapper-s-help-label-font-size: 0.6875rem;
    --spark-fieldtext-wrapper-s-disabled-label-font-size: 0.625rem;
    --spark-fieldtext-wrapper-s-invalid-label-font-size: 0.6875rem;
}

/* ---- components/fieldtext-wrapper/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-fieldtext-wrapper-color-invalid: var(--spark-input-color-invalid, #c81326);
    --spark-fieldtext-wrapper-disabled-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-fieldtext-wrapper-description-color: var(--spark-color-theme-light-gray800, #494b51);
}

/* ---- components/fieldtext-wrapper/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-fieldtext-wrapper-color-invalid: var(--spark-input-color-invalid, #ff848a);
    --spark-fieldtext-wrapper-disabled-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-fieldtext-wrapper-description-color: var(--spark-color-theme-dark-gray800, #e3e3e5);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/heading/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-heading {
    margin-block: var(--spark-heading-margin-block);
}

/* ---- components/heading/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-heading-margin-block: 1rem;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/hyperlink/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-hyperlink.spark-hyperlink-is-disabled,
.spark-hyperlink.spark-hyperlink-is-disabled a {
    color: var(--spark-hyperlink-disabled-color) !important;
    pointer-events: none;
}
.spark-hyperlink.spark-hyperlink-standard,
.spark-hyperlink.spark-hyperlink-standard a {
    text-decoration: underline;
}
.spark-hyperlink.spark-hyperlink-quiet,
.spark-hyperlink.spark-hyperlink-quiet a {
    text-decoration: none;
}
.spark-hyperlink.spark-hyperlink-quiet:hover,
.spark-hyperlink.spark-hyperlink-quiet a:hover {
    text-decoration: underline;
}
.spark-hyperlink.spark-hyperlink-primary {
    color: var(--spark-hyperlink-color-primary-base);
}
.spark-hyperlink.spark-hyperlink-secondary {
    color: var(--spark-hyperlink-color-secondary-base);
}
.spark-hyperlink.spark-hyperlink-secondary a,
.spark-hyperlink.spark-hyperlink-secondary a:hover,
.spark-hyperlink.spark-hyperlink-secondary a:focus,
.spark-hyperlink.spark-hyperlink-secondary a:active {
    color: inherit;
}
.spark-hyperlink.spark-hyperlink-secondary:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-secondary-base) !important;
}
.spark-hyperlink.spark-hyperlink-secondary:hover:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-secondary-hover) !important;
}
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed,
.spark-hyperlink.spark-hyperlink-secondary:active,
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed a {
    color: var(--spark-hyperlink-color-secondary-pressed) !important;
}
.spark-hyperlink.spark-hyperlink-secondary:visited,
.spark-hyperlink.spark-hyperlink-secondary:has(a:visited),
.spark-hyperlink.spark-hyperlink-secondary a:visited {
    color: var(--spark-hyperlink-color-secondary-visited-base);
}
.spark-hyperlink.spark-hyperlink-secondary:visited:focus:not(.spark-hyperlink-is-pressed),
.spark-hyperlink.spark-hyperlink-secondary:has(a:visited):focus:not(.spark-hyperlink-is-pressed),
.spark-hyperlink.spark-hyperlink-secondary a:visited:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-secondary-visited-base) !important;
}
.spark-hyperlink.spark-hyperlink-secondary:visited:hover,
.spark-hyperlink.spark-hyperlink-secondary:has(a:visited):hover,
.spark-hyperlink.spark-hyperlink-secondary a:visited:hover {
    color: var(--spark-hyperlink-color-secondary-visited-hover) !important;
}
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed:visited,
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed:has(a:visited),
.spark-hyperlink.spark-hyperlink-secondary:active:visited,
.spark-hyperlink.spark-hyperlink-secondary:active:has(a:visited),
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed a:visited,
.spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-pressed a:has(a:visited) {
    color: var(--spark-hyperlink-color-secondary-visited-pressed) !important;
}
.spark-hyperlink.spark-hyperlink-primary a,
.spark-hyperlink.spark-hyperlink-primary a:hover,
.spark-hyperlink.spark-hyperlink-primary a:focus,
.spark-hyperlink.spark-hyperlink-primary a:active {
    color: inherit;
}
.spark-hyperlink.spark-hyperlink-primary:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-primary-base) !important;
}
.spark-hyperlink.spark-hyperlink-primary:hover:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-primary-hover) !important;
}
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed,
.spark-hyperlink.spark-hyperlink-primary:active,
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed a {
    color: var(--spark-hyperlink-color-primary-pressed) !important;
}
.spark-hyperlink.spark-hyperlink-primary:visited,
.spark-hyperlink.spark-hyperlink-primary:has(a:visited),
.spark-hyperlink.spark-hyperlink-primary a:visited {
    color: var(--spark-hyperlink-color-primary-visited-base);
}
.spark-hyperlink.spark-hyperlink-primary:visited:focus:not(.spark-hyperlink-is-pressed),
.spark-hyperlink.spark-hyperlink-primary:has(a:visited):focus:not(.spark-hyperlink-is-pressed),
.spark-hyperlink.spark-hyperlink-primary a:visited:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-hyperlink-color-primary-visited-base) !important;
}
.spark-hyperlink.spark-hyperlink-primary:visited:hover,
.spark-hyperlink.spark-hyperlink-primary:has(a:visited):hover,
.spark-hyperlink.spark-hyperlink-primary a:visited:hover {
    color: var(--spark-hyperlink-color-primary-visited-hover) !important;
}
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed:visited,
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed:has(a:visited),
.spark-hyperlink.spark-hyperlink-primary:active:visited,
.spark-hyperlink.spark-hyperlink-primary:active:has(a:visited),
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed a:visited,
.spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-pressed a:has(a:visited) {
    color: var(--spark-hyperlink-color-primary-visited-pressed) !important;
}

/* ---- components/hyperlink/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media (forced-colors: active) {
    .spark-hyperlink.spark-hyperlink-primary,
    .spark-hyperlink.spark-hyperlink-secondary {
        color: LinkText;
    }
    .spark-hyperlink.spark-hyperlink-primary:visited,
    .spark-hyperlink.spark-hyperlink-secondary:visited {
        color: VisitedText;
    }
    .spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-disabled,
    .spark-hyperlink.spark-hyperlink-primary.spark-hyperlink-is-disabled > *,
    .spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-disabled,
    .spark-hyperlink.spark-hyperlink-secondary.spark-hyperlink-is-disabled > * {
        color: GrayText !important;
    }
}

/* ---- components/hyperlink/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-hyperlink-color-primary-base: var(--spark-color-classic-blue, #0054ae);
    --spark-hyperlink-color-primary-hover: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-hyperlink-color-primary-pressed: var(--spark-color-classic-blue-shade2, #001e50);
    --spark-hyperlink-color-primary-visited-base: var(--spark-color-geode, #8f5da2);
    --spark-hyperlink-color-primary-visited-hover: var(--spark-color-geode-shade1, #653171);
    --spark-hyperlink-color-primary-visited-pressed: var(--spark-color-geode-shade1, #653171);
    --spark-hyperlink-color-secondary-base: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-hyperlink-color-secondary-hover: var(--spark-color-theme-light-gray800, #494b51);
    --spark-hyperlink-color-secondary-pressed: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-hyperlink-color-secondary-visited-base: var(--spark-color-carbon-shade1, #525252);
    --spark-hyperlink-color-secondary-visited-hover: var(--spark-color-carbon-shade2, #262626);
    --spark-hyperlink-color-secondary-visited-pressed: #0f0f0f;
    --spark-hyperlink-disabled-color: var(--spark-color-theme-light-gray500, #b2b3b9);
}

/* ---- components/hyperlink/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-hyperlink-color-primary-base: #00c7fd;
    --spark-hyperlink-color-primary-hover: #6ddcff;
    --spark-hyperlink-color-primary-pressed: #a0ebff;
    --spark-hyperlink-color-primary-visited-base: #cc94da;
    --spark-hyperlink-color-primary-visited-hover: #eec3f7;
    --spark-hyperlink-color-primary-visited-pressed: #eec3f7;
    --spark-hyperlink-color-secondary-base: #ffffff;
    --spark-hyperlink-color-secondary-hover: #e3e3e5;
    --spark-hyperlink-color-secondary-pressed: #b7b9be;
    --spark-hyperlink-color-secondary-visited-base: #aeaeae;
    --spark-hyperlink-color-secondary-visited-hover: #e9e9e9;
    --spark-hyperlink-color-secondary-visited-pressed: #fefefe;
    --spark-hyperlink-disabled-color: var(--spark-color-theme-dark-gray500, #6b6e76);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/input/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-input-quiet {
    border-width: var(--spark-input-quiet-border-width);
    background-color: var(--spark-input-transparent-color);
    border-block-end-width: var(--spark-input-border-width);
}
.spark-input-size-l {
    font-size: var(--spark-input-l-font-size);
    block-size: var(--spark-input-l-block-size);
    line-height: var(--spark-input-l-line-height);
}
.spark-input-size-m {
    font-size: var(--spark-input-m-font-size);
    block-size: var(--spark-input-m-block-size);
    line-height: var(--spark-input-m-line-height);
}
.spark-input-size-s {
    font-size: var(--spark-input-s-font-size);
    block-size: var(--spark-input-s-block-size);
    line-height: var(--spark-input-s-line-height);
}
.spark-input-outline {
    border-width: var(--spark-input-border-width);
    background-color: var(--spark-input-bg-color-outline);
}
.spark-input-outline:disabled,
.spark-input-outline.spark-input-is-disabled {
    background-color: var(--spark-input-bg-color-outline-disabled);
}
.spark-input-outline.spark-input-size-l {
    padding-inline: var(--spark-input-l-padding-outline-inline);
}
.spark-input-outline.spark-input-size-m {
    padding-inline: var(--spark-input-m-padding-outline-inline);
}
.spark-input-outline.spark-input-size-s {
    padding-inline: var(--spark-input-s-padding-outline-inline);
}
.spark-input {
    color: var(--spark-input-color);
    cursor: pointer;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    font-family: inherit;
    border-color: var(--spark-input-border-color);
    border-style: solid;
}
.spark-input:hover,
.spark-input:focus {
    border-color: var(--spark-input-border-color-hover);
}
.spark-input:focus-visible {
    outline: none;
}
.spark-input::placeholder {
    color: var(--spark-input-color-placeholder);
    font-style: italic;
}
.spark-input:hover.spark-input-is-read-only,
.spark-input:focus.spark-input-is-read-only {
    border-color: var(--spark-input-border-color);
}
.spark-input:disabled,
.spark-input.spark-input-is-disabled {
    color: var(--spark-input-color-disabled) !important;
    cursor: default;
    border-color: var(--spark-input-border-color-disabled) !important;
}
.spark-input:invalid,
.spark-input.spark-input-is-invalid {
    border-color: var(--spark-input-color-invalid);
}
.spark-input:disabled::placeholder,
.spark-input.spark-input-is-disabled::placeholder {
    color: var(--spark-input-color-disabled) !important;
}
.spark-input:hover::placeholder,
.spark-input:focus::placeholder {
    color: var(--spark-input-color-placeholder-hover);
}

/* ---- components/input/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-input-border-width: 0.0625rem;
    --spark-input-quiet-border-width: 0rem;
    --spark-input-l-block-size: 2.5rem;
    --spark-input-l-font-size: 1rem;
    --spark-input-l-line-height: 1.125rem;
    --spark-input-l-padding-outline-inline: 1rem;
    --spark-input-m-block-size: 2rem;
    --spark-input-m-font-size: 0.875rem;
    --spark-input-m-line-height: 1rem;
    --spark-input-m-padding-outline-inline: 0.75rem;
    --spark-input-s-block-size: 1.5rem;
    --spark-input-s-font-size: 0.75rem;
    --spark-input-s-line-height: 0.875rem;
    --spark-input-s-padding-outline-inline: 0.5rem;
}

/* ---- components/input/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-input-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-input-color-disabled: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-input-color-placeholder: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-input-color-placeholder-hover: var(--spark-color-theme-light-gray800, #494b51);
    --spark-input-color-invalid: var(--spark-color-coral-shade1, #c81326);
    --spark-input-border-color: var(--spark-color-theme-light-gray600, #8b8e97);
    --spark-input-border-color-hover: var(--spark-color-theme-light-gray800, #494b51);
    --spark-input-border-color-focus: var(--spark-color-classic-blue, #0054ae);
    --spark-input-border-color-disabled: var(--spark-color-theme-light-gray300, #e2e2e4);
    --spark-input-border-color-active: var(--spark-color-theme-light-gray600, #8b8e97);
    --spark-input-bg-color-outline: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-input-bg-color-outline-disabled: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-input-transparent-color: var(--spark-color-transparent, transparent);
}

/* ---- components/input/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-input-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-input-color-disabled: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-input-color-placeholder: var(--spark-color-theme-dark-gray700, #b7b9be);
    --spark-input-color-placeholder-hover: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-input-color-invalid: var(--spark-color-coral-tint1, #ff848a);
    --spark-input-border-color: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-input-border-color-hover: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-input-border-color-focus: var(--spark-color-energy-blue, #00c7fd);
    --spark-input-border-color-disabled: var(--spark-color-theme-dark-gray300, #484a50);
    --spark-input-border-color-active: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-input-bg-color-outline: var(--spark-color-theme-dark-gray50, #242528);
    --spark-input-bg-color-outline-disabled: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-input-transparent-color: var(--spark-color-transparent, transparent);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/list/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-list-zebra .spark-list-item:nth-child(2n) {
    background-color: var(--spark-list-background-zebra-color);
}
.spark-list-zebra .spark-list-item:nth-child(2n):hover {
    background-color: var(--spark-list-background-hover);
}
.spark-list-divide .spark-list-item {
    border-block-end-color: var(--spark-list-divider-color);
    border-block-end-width: var(--spark-list-border-block-end-width) !important;
}
.spark-list-size-s .spark-list-item {
    gap: var(--spark-list-size-s-gap);
    font-size: var(--spark-list-size-s-font-size);
    line-height: var(--spark-list-size-s-line-height);
    min-block-size: var(--spark-list-size-s-min-block-size);
}
.spark-list-size-m .spark-list-item {
    gap: var(--spark-list-size-m-gap);
    font-size: var(--spark-list-size-m-font-size);
    line-height: var(--spark-list-size-m-line-height);
    min-block-size: var(--spark-list-size-m-min-block-size);
}
.spark-list-size-l .spark-list-item {
    gap: var(--spark-list-size-l-gap);
    font-size: var(--spark-list-size-l-font-size);
    line-height: var(--spark-list-size-l-line-height);
    min-block-size: var(--spark-list-size-l-min-block-size);
}
.spark-list-size-xl .spark-list-item {
    gap: var(--spark-list-size-xl-gap);
    font-size: var(--spark-list-size-xl-font-size);
    line-height: var(--spark-list-size-xl-line-height);
    min-block-size: var(--spark-list-size-xl-min-block-size);
}
.spark-list-size-2xl .spark-list-item {
    gap: var(--spark-list-size-2xl-gap);
    font-size: var(--spark-list-size-2xl-font-size);
    line-height: var(--spark-list-size-2xl-line-height);
    min-block-size: var(--spark-list-size-2xl-min-block-size);
}
.spark-list-size-3xl .spark-list-item {
    gap: var(--spark-list-size-3xl-gap);
    font-size: var(--spark-list-size-3xl-font-size);
    line-height: var(--spark-list-size-3xl-line-height);
    min-block-size: var(--spark-list-size-3xl-min-block-size);
}
.spark-list-size-4xl .spark-list-item {
    gap: var(--spark-list-size-4xl-gap);
    font-size: var(--spark-list-size-4xl-font-size);
    line-height: var(--spark-list-size-4xl-line-height);
    min-block-size: var(--spark-list-size-4xl-min-block-size);
}
.spark-list-size-5xl .spark-list-item {
    gap: var(--spark-list-size-5xl-gap);
    font-size: var(--spark-list-size-5xl-font-size);
    line-height: var(--spark-list-size-5xl-line-height);
    min-block-size: var(--spark-list-size-5xl-min-block-size);
}
.spark-list-size-6xl .spark-list-item {
    gap: var(--spark-list-size-6xl-gap);
    font-size: var(--spark-list-size-6xl-font-size);
    line-height: var(--spark-list-size-6xl-line-height);
    min-block-size: var(--spark-list-size-6xl-min-block-size);
}
.spark-list {
    margin: var(--spark-list-margin);
    padding: var(--spark-list-padding);
    list-style: none;
    font-family: var(--spark-list-font-family);
}
.spark-list .spark-list-item-text {
    gap: var(--spark-list-item-gap);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spark-list:focus-visible,
.spark-list:focus {
    outline: none;
}
.spark-list .spark-list-item {
    color: var(--spark-list-color);
    cursor: pointer;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    font-family: var(--spark-list-font-family);
    white-space: nowrap;
    border-style: solid;
    border-width: var(--spark-list-border-width);
    justify-content: space-between;
    padding-inline-end: var(--spark-list-inline-gap);
    padding-inline-start: var(--spark-list-inline-gap);
}
.spark-list .spark-list-item:hover {
    background-color: var(--spark-list-background-hover);
}
.spark-list .spark-list-item.spark-list-is-divided {
    border-block-end: var(--spark-list-border-block-end-width) solid var(--spark-list-divider-color);
}
.spark-list .spark-list-item.spark-list-is-disabled {
    color: var(--spark-list-color-disabled);
    cursor: default;
    background-color: transparent;
}
.spark-list .spark-list-item.spark-list-is-focused,
.spark-list .spark-list-item:focus {
    color: var(--spark-list-item-color-focused) !important;
    background-color: var(--spark-list-item-focused-b-g) !important;
}
.spark-list .spark-list-item:focus-visible,
.spark-list .spark-list-item:focus {
    outline: none;
}

/* ---- components/list/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-list {
        --spark-list-item-focused-b-g: Highlight;
        -spark-list-item-color-focused: HighlightText;
    }
    .spark-list .spark-list-is-selected.spark-list-is-focused .spark-icon,
    .spark-list .spark-list-is-selected.spark-list-is-focused .spark-list-item-text,
    .spark-list .spark-list-is-focused .spark-list-item-text {
        color: HighlightText;
        forced-color-adjust: none;
    }
}

/* ---- components/list/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-list-font-family: inherit;
    --spark-list-inline-gap: 0.5rem;
    --spark-list-margin: 0rem;
    --spark-list-padding: 0rem;
    --spark-list-border-width: 0rem;
    --spark-list-border-block-end-width: 0.0625rem;
    --spark-list-item-gap: 0.5rem;
    --spark-list-size-s-min-block-size: 1.5rem;
    --spark-list-size-s-font-size: 0.75rem;
    --spark-list-size-s-line-height: 0.9675rem;
    --spark-list-size-s-gap: 0.25rem;
    --spark-list-size-m-min-block-size: 2rem;
    --spark-list-size-m-font-size: 0.875rem;
    --spark-list-size-m-line-height: 1.12875rem;
    --spark-list-size-m-gap: 0.5rem;
    --spark-list-size-l-min-block-size: 2.5rem;
    --spark-list-size-l-font-size: 1rem;
    --spark-list-size-l-line-height: 1.29rem;
    --spark-list-size-l-gap: 0.5rem;
    --spark-list-size-xl-min-block-size: 3rem;
    --spark-list-size-xl-font-size: 1rem;
    --spark-list-size-xl-line-height: 1.29rem;
    --spark-list-size-xl-gap: 0.5rem;
    --spark-list-size-2xl-min-block-size: 3.5rem;
    --spark-list-size-2xl-font-size: 1rem;
    --spark-list-size-2xl-line-height: 1.29rem;
    --spark-list-size-2xl-gap: 0.5rem;
    --spark-list-size-3xl-min-block-size: 4rem;
    --spark-list-size-3xl-font-size: 1rem;
    --spark-list-size-3xl-line-height: 1.29rem;
    --spark-list-size-3xl-gap: 0.5rem;
    --spark-list-size-4xl-min-block-size: 4.5rem;
    --spark-list-size-4xl-font-size: 1rem;
    --spark-list-size-4xl-line-height: 1.29rem;
    --spark-list-size-4xl-gap: 0.5rem;
    --spark-list-size-5xl-min-block-size: 5rem;
    --spark-list-size-5xl-font-size: 1rem;
    --spark-list-size-5xl-line-height: 1.29rem;
    --spark-list-size-5xl-gap: 0.5rem;
    --spark-list-size-6xl-min-block-size: 6rem;
    --spark-list-size-6xl-font-size: 1rem;
    --spark-list-size-6xl-line-height: 1.29rem;
    --spark-list-size-6xl-gap: 0.5rem;
}

/* ---- components/list/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-list-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-list-color-active: var(--spark-color-classic-blue, #0054ae);
    --spark-list-color-disabled: rgba(43, 44, 48, 0.34);
    --spark-list-divider-color: rgba(43, 44, 48, 0.12);
    --spark-list-background-color: transparent;
    --spark-list-background-zebra-color: rgba(43, 44, 48, 0.02);
    --spark-list-background-hover: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-list-background-active: rgba(43, 44, 48, 0.03);
    --spark-list-background-active-hover: rgba(43, 44, 48, 0.06);
    --spark-list-item-focused-b-g: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-list-item-color-focused: var(--spark-color-theme-light-gray50, #ffffff);
}

/* ---- components/list/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-list-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-list-color-active: var(--spark-color-energy-blue, #00c7fd);
    --spark-list-color-disabled: rgba(255, 255, 255, 0.34);
    --spark-list-divider-color: rgba(255, 255, 255, 0.12);
    --spark-list-background-color: var(--spark-list-background-color, transparent);
    --spark-list-background-zebra-color: rgba(255, 255, 255, 0.02);
    --spark-list-background-hover: #3c3e42;
    --spark-list-background-active: rgba(255, 255, 255, 0.03);
    --spark-list-background-active-hover: rgba(255, 255, 255, 0.06);
    --spark-list-item-focused-b-g: #6ddcff;
    --spark-list-item-color-focused: #242528;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/message-banner/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-message-banner-hide {
    display: none !important;
}
.spark-message-banner {
    display: flex;
    padding: var(--spark-message-banner-vertical-border-gap)
        var(--spark-message-banner-horizontal-border-gap);
    position: relative;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    flex-direction: row;
}
.spark-message-banner .spark-message-banner-grid-row {
    display: flex;
    margin-bottom: var(--spark-message-banner-horizontal-content-gap);
    flex-direction: row;
}
.spark-message-banner .spark-message-banner-grid-column {
    display: flex;
    margin-right: var(--spark-message-banner-vertical-content-gap);
    flex-direction: column;
}
.spark-message-banner .spark-message-banner-grid-column-message-column-content-message-title {
    font-size: var(--spark-message-banner-message-content-message-title-font-size);
    margin-top: var(--spark-message-banner-message-content-message-title-margin-top);
    font-family: var(--spark-message-banner-message-content-message-title-font-family);
    font-weight: var(--spark-message-banner-message-content-message-title-font-weight);
    line-height: var(--spark-message-banner-message-content-message-title-line-height);
    margin-bottom: var(--spark-message-banner-message-content-message-title-margin-bottom);
    letter-spacing: var(--spark-message-banner-message-content-message-title-letter-spacing);
}
.spark-message-banner .spark-message-banner-grid-column-message-column-content-message-description {
    font-size: var(--spark-message-banner-message-content-message-description-font-size);
    font-family: var(--spark-message-banner-message-content-message-description-font-family);
    font-weight: var(--spark-message-banner-message-content-message-description-font-weight);
    line-height: var(--spark-message-banner-message-content-message-description-line-height);
    letter-spacing: var(--spark-message-banner-message-content-message-description-letter-spacing);
}
.spark-message-banner .spark-message-banner-grid-column-message-column-button-placement-left,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-left-reverse {
    margin-right: auto;
}
.spark-message-banner .spark-message-banner-grid-column-message-column-button-placement-right,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-right-reverse {
    margin-left: auto;
}
.spark-message-banner .spark-message-banner-grid-column-message-column-button-placement-center,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-center-reverse {
    margin: auto;
}
.spark-message-banner .spark-message-banner-grid-column-message-column-button-placement-spread,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-spread-reverse {
    justify-content: space-between;
}
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-left-reverse,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-right-reverse,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-center-reverse,
.spark-message-banner
    .spark-message-banner-grid-column-message-column-button-placement-spread-reverse {
    flex-direction: row-reverse;
}
.spark-message-banner.spark-message-banner-state-default {
    color: var(--spark-message-banner-regular-default-text-color);
    border: 1px solid var(--spark-message-banner-regular-default-border-color);
    background-color: var(--spark-message-banner-regular-default-background-color);
}
.spark-message-banner.spark-message-banner-state-success {
    color: var(--spark-color-theme-dark-gray50);
    border: 1px solid var(--spark-color-moss);
    background-color: var(--spark-color-moss);
}
.spark-message-banner.spark-message-banner-state-info {
    color: var(--spark-color-white);
    border: 1px solid var(--spark-color-classic-blue);
    background-color: var(--spark-color-classic-blue);
}
.spark-message-banner.spark-message-banner-state-warning {
    color: var(--spark-color-theme-dark-gray50);
    border: 1px solid var(--spark-color-daisy-shade1);
    background-color: var(--spark-color-daisy-shade1);
}
.spark-message-banner.spark-message-banner-state-error {
    color: var(--spark-color-white);
    border: 1px solid var(--spark-color-coral-shade1);
    background-color: var(--spark-color-coral-shade1);
}
.spark-message-banner.spark-message-banner-state-white {
    color: var(--spark-color-theme-dark-gray50);
    border: 1px solid var(--spark-color-theme-light-gray300);
    background-color: var(--spark-color-white);
}
.spark-message-banner.spark-message-banner-state-grey {
    color: var(--spark-color-theme-dark-gray50);
    border: 1px solid var(--spark-color-theme-light-gray400);
    background-color: var(--spark-color-theme-light-gray400);
}
.spark-message-banner .spark-message-banner-grid-column-icon-column-default {
    color: var(--spark-message-banner-regular-default-icon-color);
}
.spark-message-banner .spark-message-banner-grid-column-icon-column-success {
    color: var(--spark-color-moss);
}
.spark-message-banner .spark-message-banner-grid-column-icon-column-info {
    color: var(--spark-color-classic-blue);
}
.spark-message-banner .spark-message-banner-grid-column-icon-column-warning {
    color: var(--spark-color-daisy-shade1);
}
.spark-message-banner .spark-message-banner-grid-column-icon-column-error {
    color: var(--spark-color-coral-shade1);
}
.spark-message-banner .spark-message-banner-grid-column-close-column button {
    color: var(--spark-color-theme-light-gray200);
}
.spark-message-banner.spark-message-banner-state-default
    .spark-message-banner-grid-column-close-column
    button,
.spark-message-banner.spark-message-banner-state-success
    .spark-message-banner-grid-column-close-column
    button,
.spark-message-banner.spark-message-banner-state-warning
    .spark-message-banner-grid-column-close-column
    button,
.spark-message-banner.spark-message-banner-state-white
    .spark-message-banner-grid-column-close-column
    button,
.spark-message-banner.spark-message-banner-state-grey
    .spark-message-banner-grid-column-close-column
    button,
.spark-message-banner.spark-message-banner-outlined
    .spark-message-banner-grid-column-close-column
    button {
    color: var(--spark-color-theme-dark-gray50);
}
.spark-message-banner .spark-message-banner-grid-column-close-column button:hover {
    color: var(--spark-color-white);
    background-color: var(--spark-color-theme-dark-gray200);
}
.spark-message-banner.spark-message-banner-state-grey
    .spark-message-banner-grid-column-close-column
    button:hover {
    color: var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-white);
}
.spark-message-banner.spark-message-banner-state-default
    .spark-message-banner-grid-column-close-column
    button:hover,
.spark-message-banner.spark-message-banner-outlined
    .spark-message-banner-grid-column-close-column
    button:hover {
    color: var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-theme-light-gray200);
}
.spark-message-banner .spark-button-primary {
    color: var(--spark-color-theme-dark-gray50);
    border-color: var(--spark-color-theme-light-gray200);
    background-color: var(--spark-color-theme-light-gray200);
}
.spark-message-banner.spark-message-banner-state-default .spark-button-primary,
.spark-message-banner.spark-message-banner-state-white .spark-button-primary,
.spark-message-banner.spark-message-banner-state-black .spark-button-primary {
    color: var(--spark-color-theme-light-gray100);
    background-color: var(--spark-color-theme-dark-gray50);
}
.spark-message-banner .spark-button-secondary {
    color: var(--spark-color-theme-dark-gray50);
    border-color: var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-state-info .spark-button-secondary,
.spark-message-banner.spark-message-banner-state-error .spark-button-secondary {
    color: var(--spark-color-theme-light-gray300);
    border-color: var(--spark-color-theme-light-gray300);
}
.spark-message-banner.spark-message-banner-state-black {
    color: var(--spark-color-white);
    border: 1px solid var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-theme-dark-gray50);
}
.spark-message-banner.spark-message-banner-state-black .spark-button-secondary:hover,
.spark-message-banner.spark-message-banner-state-black
    .spark-button-secondary
    .spark-button-hovered {
    background-color: var(--spark-color-theme-dark-gray200);
}
.spark-message-banner.spark-message-banner-outlined {
    color: var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-outlined .spark-button-primary {
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-outlined .spark-button-primary:hover,
.spark-message-banner.spark-message-banner-outlined .spark-button-primary .spark-button-hovered {
    color: var(--spark-color-theme-dark-gray50);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-info
    .spark-button-primary {
    color: var(--spark-color-classic-blue);
    border-color: var(--spark-color-classic-blue);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-success
    .spark-button-primary {
    color: var(--spark-color-moss);
    border-color: var(--spark-color-moss);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-warning
    .spark-button-primary {
    color: var(--spark-color-daisy-shade1);
    border-color: var(--spark-color-daisy-shade1);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-error
    .spark-button-primary {
    color: var(--spark-color-coral-shade1);
    border-color: var(--spark-color-coral-shade1);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-grey
    .spark-button-primary {
    color: var(--spark-color-theme-dark-gray400);
    border: 1px solid var(--spark-color-theme-dark-gray400);
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-default
    .spark-button-primary,
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-white
    .spark-button-primary,
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-black
    .spark-button-primary {
    color: var(--spark-color-theme-dark-gray50);
    border: 1px solid var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-outlined .spark-button-secondary {
    color: var(--spark-color-theme-dark-gray50) !important;
    border: 1px solid var(--spark-color-theme-dark-gray50) !important;
}
.spark-message-banner.spark-message-banner-outlined .spark-button-secondary:hover {
    color: var(--spark-color-theme-light-gray100) !important;
}
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-default
    .spark-button-primary:hover,
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-white
    .spark-button-primary:hover,
.spark-message-banner.spark-message-banner-outlined.spark-message-banner-state-black
    .spark-button-primary:hover {
    background-color: var(--spark-color-transparent);
}
.spark-message-banner.spark-message-banner-state-black .spark-button-secondary,
.spark-message-banner.spark-message-banner-state-black .spark-button-secondary:hover,
.spark-message-banner.spark-message-banner-state-black
    .spark-button-secondary
    .spark-button-hovered {
    color: var(--spark-color-theme-light-gray100);
    border: 1px solid var(--spark-color-theme-light-gray100);
}
.spark-message-banner .spark-button-secondary:hover,
.spark-message-banner .spark-button-secondary .spark-button-hovered {
    color: var(--spark-color-theme-light-gray100);
    border-color: var(--spark-color-theme-dark-gray50);
    background-color: var(--spark-color-theme-dark-gray50);
}
.spark-message-banner.spark-message-banner-state-default
    .spark-button-primary
    .spark-button-hovered,
.spark-message-banner.spark-message-banner-state-default .spark-button-primary:hover,
.spark-message-banner.spark-message-banner-state-white .spark-button-primary .spark-button-hovered,
.spark-message-banner.spark-message-banner-state-white .spark-button-primary:hover,
.spark-message-banner.spark-message-banner-state-black .spark-button-primary .spark-button-hovered,
.spark-message-banner.spark-message-banner-state-black .spark-button-primary:hover {
    background-color: var(--spark-color-theme-dark-gray100);
}
.spark-message-banner .spark-button-primary:hover,
.spark-message-banner .spark-button-primary .spark-button-hovered {
    background-color: var(--spark-color-theme-light-gray100);
}
.spark-message-banner .spark-message-banner-grid-column:last-child {
    margin-right: 0;
}
.spark-message-banner
    .spark-message-banner-grid-column.spark-message-banner-grid-column-icon-column {
    padding: var(--spark-message-banner-message-content-icon-sides-gap);
    justify-content: left;
}
.spark-message-banner
    .spark-message-banner-grid-column.spark-message-banner-grid-column-message-column {
    justify-content: center;
}
.spark-message-banner
    .spark-message-banner-grid-column.spark-message-banner-grid-column-close-column {
    margin-left: auto;
}
.spark-message-banner .spark-message-banner-grid-row:last-child {
    margin-bottom: 0;
}

/* ---- components/message-banner/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-message-banner-horizontal-border-gap: 1.5rem;
    --spark-message-banner-vertical-border-gap: 1rem;
    --spark-message-banner-horizontal-content-gap: 0.5rem;
    --spark-message-banner-vertical-content-gap: 1rem;
    --spark-message-banner-message-content-icon-sides-gap: 0.5625rem;
    --spark-message-banner-message-content-message-title-margin-top: 0.3125rem;
    --spark-message-banner-message-content-message-title-margin-bottom: 0.3125rem;
    --spark-message-banner-message-content-message-title-font-size: 1rem;
    --spark-message-banner-message-content-message-title-font-weight: 500;
    --spark-message-banner-message-content-message-title-line-height: 1.5rem;
    --spark-message-banner-message-content-message-title-font-family: var(
        --spark-font-intel-one-text,
        IntelOneText,
        var(--global-font-apple-system),
        var(--global-font-blink-mac-system-font),
        var(--global-font-segoe-ui),
        var(--global-font-roboto),
        var(--global-font-helvetica),
        var(--global-font-arial),
        var(--global-font-sans-serif),
        var(--global-font-apple-color-emoji),
        var(--global-font-segoe-ui-emoji),
        var(--global-font-segoe-ui-symbol)
    );
    --spark-message-banner-message-content-message-title-letter-spacing: 0em;
    --spark-message-banner-message-content-message-description-font-size: 0.875rem;
    --spark-message-banner-message-content-message-description-font-weight: 400;
    --spark-message-banner-message-content-message-description-line-height: 1.25rem;
    --spark-message-banner-message-content-message-description-font-family: var(
        --spark-font-intel-one-text,
        IntelOneText,
        var(--global-font-apple-system),
        var(--global-font-blink-mac-system-font),
        var(--global-font-segoe-ui),
        var(--global-font-roboto),
        var(--global-font-helvetica),
        var(--global-font-arial),
        var(--global-font-sans-serif),
        var(--global-font-apple-color-emoji),
        var(--global-font-segoe-ui-emoji),
        var(--global-font-segoe-ui-symbol)
    );
    --spark-message-banner-message-content-message-description-letter-spacing: 0em;
}

/* ---- components/message-banner/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-message-banner-regular-default-text-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-regular-default-border-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-default-background-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-default-icon-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-moss: #8bae46;
    --spark-color-moss: #8bae46;
    --spark-color-moss: #8bae46;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-daisy-shade1: #edb200;
    --spark-color-daisy-shade1: #edb200;
    --spark-color-daisy-shade1: #edb200;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-theme-light-gray300: #e2e2e4;
    --spark-color-white: #ffffff;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-theme-light-gray400: #c9cace;
    --spark-color-theme-light-gray400: #c9cace;
    --spark-color-white: #ffffff;
    --spark-color-classic-blue: #0054ae;
    --spark-color-classic-blue: #0054ae;
    --spark-color-classic-blue: #0054ae;
    --spark-color-white: #ffffff;
    --spark-color-coral-shade1: #c81326;
    --spark-color-coral-shade1: #c81326;
    --spark-color-coral-shade1: #c81326;
    --spark-color-white: #ffffff;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-theme-dark-gray50: #242528;
    --spark-color-transparent: transparent;
}

/* ---- components/message-banner/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-message-banner-regular-default-text-color: #ffffff;
    --spark-message-banner-regular-default-border-color: #242528;
    --spark-message-banner-regular-default-background-color: #242528;
    --spark-message-banner-regular-default-icon-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-regular-success-text-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-regular-success-border-color: var(--spark-color-moss, #8bae46);
    --spark-message-banner-regular-success-background-color: var(--spark-color-moss, #8bae46);
    --spark-message-banner-regular-success-icon-color: var(--spark-color-moss, #8bae46);
    --spark-message-banner-regular-warning-text-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-regular-warning-border-color: var(--spark-color-daisy-shade1, #edb200);
    --spark-message-banner-regular-warning-background-color: var(
        --spark-color-daisy-shade1,
        #edb200
    );
    --spark-message-banner-regular-warning-icon-color: var(--spark-color-daisy-shade1, #edb200);
    --spark-message-banner-regular-white-text-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-message-banner-regular-white-border-color: var(
        --spark-color-theme-light-gray300,
        #e2e2e4
    );
    --spark-message-banner-regular-white-background-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-grey-text-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-message-banner-regular-grey-border-color: var(
        --spark-color-theme-light-gray400,
        #c9cace
    );
    --spark-message-banner-regular-grey-background-color: var(
        --spark-color-theme-light-gray400,
        #c9cace
    );
    --spark-message-banner-regular-info-text-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-info-border-color: var(--spark-color-classic-blue, #0054ae);
    --spark-message-banner-regular-info-background-color: var(--spark-color-classic-blue, #0054ae);
    --spark-message-banner-regular-info-icon-color: var(--spark-color-classic-blue, #0054ae);
    --spark-message-banner-regular-error-text-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-error-border-color: var(--spark-color-coral-shade1, #c81326);
    --spark-message-banner-regular-error-background-color: var(--spark-color-coral-shade1, #c81326);
    --spark-message-banner-regular-error-icon-color: var(--spark-color-coral-shade1, #c81326);
    --spark-message-banner-regular-black-text-color: var(--spark-color-white, #ffffff);
    --spark-message-banner-regular-black-border-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-regular-black-background-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-message-banner-outlined-text-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-message-banner-outlined-background-color: var(--spark-color-transparent, transparent);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/modal/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-modal-grid {
    width: 100%;
    display: grid;
    grid-template-areas:
        '. . .'
        '. header .'
        '. dividerStart .'
        '. content .'
        '. dividerEnd .'
        '. footer .'
        '. . .';
}
.spark-modal-section {
    width: 100%;
    display: flex;
    outline: none;
    box-sizing: border-box;
    max-height: inherit;
}
.spark-modal-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.spark-modal-wrapper {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    z-index: 2;
    position: fixed;
    box-sizing: border-box;
    visibility: hidden;
    align-items: center;
    pointer-events: none;
    justify-content: center;
}
.spark-modal-backdrop {
    inset: 0;
    display: flex;
    z-index: var(--spark-modal-backdrop-z-index);
    overflow: hidden;
    position: var(--spark-modal-backdrop-position);
    align-items: center;
    justify-content: center;
    background-color: var(--spark-modal-backdrop-background-color);
}
.spark-modal-backdrop.spark-modal-backdrop-is-open {
    opacity: 0.9999;
    visibility: visible;
    pointer-events: auto;
}
.spark-modal-size-l {
    inline-size: var(--spark-modal-l-size);
    min-inline-size: var(--spark-modal-l-min-inline-size);
}
.spark-modal-size-l .spark-modal-grid {
    grid-template-rows:
        var(--spark-modal-l-temp-row) auto auto auto auto
        auto var(--spark-modal-l-temp-row);
    grid-template-columns:
        var(--spark-modal-l-temp-col) auto
        var(--spark-modal-l-temp-col);
}
.spark-modal-size-l .spark-modal-header {
    gap: var(--spark-modal-l-header-gap);
    margin-block-end: var(--spark-modal-l-row-gap);
}
.spark-modal-size-l .spark-modal-content {
    min-block-size: var(--spark-modal-l-content-min-block-size);
    margin-block-end: var(--spark-modal-l-row-gap);
}
.spark-modal-size-l.spark-modal-is-divided .spark-modal-divider-start,
.spark-modal-size-l.spark-modal-is-divided .spark-modal-divider-end {
    margin: var(--spark-modal-l-margin) 0;
}
.spark-modal-size-m {
    inline-size: var(--spark-modal-m-size);
    min-inline-size: var(--spark-modal-m-min-inline-size);
}
.spark-modal-size-m .spark-modal-grid {
    grid-template-rows:
        var(--spark-modal-m-temp-row) auto auto auto auto
        auto var(--spark-modal-m-temp-row);
    grid-template-columns:
        var(--spark-modal-m-temp-col) auto
        var(--spark-modal-m-temp-col);
}
.spark-modal-size-m .spark-modal-header {
    gap: var(--spark-modal-m-header-gap);
    margin-block-end: var(--spark-modal-m-row-gap);
}
.spark-modal-size-m .spark-modal-content {
    min-block-size: var(--spark-modal-m-content-min-block-size);
    margin-block-end: var(--spark-modal-m-row-gap);
}
.spark-modal-size-m.spark-modal-is-divided .spark-modal-divider-start,
.spark-modal-size-m.spark-modal-is-divided .spark-modal-divider-end {
    margin: var(--spark-modal-m-margin) 0;
}
.spark-modal-size-s {
    inline-size: var(--spark-modal-s-size);
    min-inline-size: var(--spark-modal-s-min-inline-size);
}
.spark-modal-size-s .spark-modal-grid {
    grid-template-rows:
        var(--spark-modal-s-temp-row) auto auto auto auto
        auto var(--spark-modal-s-temp-row);
    grid-template-columns:
        var(--spark-modal-s-temp-col) auto
        var(--spark-modal-s-temp-col);
}
.spark-modal-size-s .spark-modal-header {
    gap: var(--spark-modal-s-header-gap);
    margin-block-end: var(--spark-modal-s-row-gap);
}
.spark-modal-size-s .spark-modal-content {
    min-block-size: var(--spark-modal-s-content-min-block-size);
    margin-block-end: var(--spark-modal-s-row-gap);
}
.spark-modal-size-s.spark-modal-is-divided .spark-modal-divider-start,
.spark-modal-size-s.spark-modal-is-divided .spark-modal-divider-end {
    margin: var(--spark-modal-s-margin) 0;
}
.spark-modal-display-none {
    display: none;
}
.spark-modal {
    opacity: 0.99999;
    outline: none;
    z-index: 999;
    max-width: 90vw;
    visibility: visible;
    pointer-events: auto;
    background-color: var(--spark-modal-background);
}
.spark-modal.spark-modal-is-divided .spark-modal-header,
.spark-modal.spark-modal-is-divided .spark-modal-content {
    margin-block-end: var(--spark-modal-no-spacing) !important;
}
.spark-modal .spark-modal-header {
    grid-area: header;
}
.spark-modal .spark-modal-divider-start {
    grid-area: dividerStart;
}
.spark-modal .spark-modal-divider-end {
    grid-area: dividerEnd;
}
.spark-modal .spark-modal-content {
    grid-area: content;
}
.spark-modal .spark-modal-footer {
    grid-area: footer;
}
.spark-modal .spark-modal-header .spark-heading {
    margin: var(--spark-modal-no-spacing) !important;
}
.spark-modal .spark-modal-header .spark-modal-heading-titles {
    flex: 1;
}

/* ---- components/modal/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-modal-no-spacing: 0rem;
    --spark-modal-backdrop-position: fixed;
    --spark-modal-backdrop-z-index: 2;
    --spark-modal-backdrop-inset-inline-start: 0;
    --spark-modal-backdrop-inset-block-start: 0;
    --spark-modal-backdrop-inline-size: 100%;
    --spark-modal-backdrop-block-size: 100%;
    --spark-modal-backdrop-background-color: rgba(0, 0, 0, 0.5);
    --spark-modal-s-temp-row: 1.5rem;
    --spark-modal-s-temp-col: 1.5rem;
    --spark-modal-s-content-min-block-size: 5rem;
    --spark-modal-s-row-gap: 0.5rem;
    --spark-modal-s-header-gap: 0.25rem;
    --spark-modal-s-margin: 1rem;
    --spark-modal-s-size: 31.25rem;
    --spark-modal-s-min-inline-size: 20rem;
    --spark-modal-m-temp-row: 2rem;
    --spark-modal-m-temp-col: 2rem;
    --spark-modal-m-content-min-block-size: 5rem;
    --spark-modal-m-row-gap: 0.75rem;
    --spark-modal-m-header-gap: 0.5rem;
    --spark-modal-m-margin: 1.125rem;
    --spark-modal-m-size: 40rem;
    --spark-modal-m-min-inline-size: 20rem;
    --spark-modal-l-temp-row: 2.5rem;
    --spark-modal-l-temp-col: 2.5rem;
    --spark-modal-l-content-min-block-size: 5rem;
    --spark-modal-l-row-gap: 1rem;
    --spark-modal-l-header-gap: 0.625rem;
    --spark-modal-l-margin: 1.375rem;
    --spark-modal-l-size: 50rem;
    --spark-modal-l-min-inline-size: 20rem;
}

/* ---- components/modal/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-modal-background: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-modal-shadow-color: rgba(0, 0, 0, 0.25);
    --spark-modal-border-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-modal-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
}

/* ---- components/modal/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-modal-background: var(--spark-color-theme-dark-gray50, #242528);
    --spark-modal-shadow-color: rgba(0, 0, 0, 0.25);
    --spark-modal-border-color: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-modal-text-color: #ffffff;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/pagination/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-pagination-control {
    gap: var(--spark-pagination-control-gap);
    display: var(--spark-pagination-control-display);
    align-items: var(--spark-pagination-control-align-items);
    justify-content: var(--spark-pagination-control-justify-content);
}
.spark-pagination-control .spark-button {
    outline: var(--spark-pagination-control-button-outline);
    margin-inline-end: var(--spark-pagination-control-button-margin-inline-end);
    margin-inline-start: var(--spark-pagination-control-button-margin-inline-start);
}
.spark-pagination-control .spark-dropdown {
    width: var(--spark-pagination-control-dropdown-width);
    margin-inline-start: var(--spark-pagination-control-dropdown-margin-inline-start);
}
.spark-pagination-list {
    display: var(--spark-pagination-list-display);
}
.spark-pagination-list .spark-button {
    outline: var(--spark-pagination-list-button-outline);
    margin-inline: var(--spark-pagination-list-button-margin-inline);
}
.spark-pagination {
    display: var(--spark-pagination-base-display);
    align-items: var(--spark-pagination-base-align-items);
    justify-content: var(--spark-pagination-base-justify-content);
}

/* ---- components/pagination/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-pagination-base-display: flex;
    --spark-pagination-base-justify-content: space-between;
    --spark-pagination-base-align-items: center;
    --spark-pagination-control-display: flex;
    --spark-pagination-control-align-items: center;
    --spark-pagination-control-justify-content: left;
    --spark-pagination-control-gap: 1.25rem;
    --spark-pagination-control-dropdown-margin-inline-start: 0.4375rem;
    --spark-pagination-control-dropdown-width: auto;
    --spark-pagination-control-button-margin-inline-start: 0.4375rem;
    --spark-pagination-control-button-outline: none;
    --spark-pagination-control-button-margin-inline-end: 1.6875rem;
    --spark-pagination-control-item-per-page-display: flex;
    --spark-pagination-control-item-per-page-gap: 0;
    --spark-pagination-list-display: flex;
    --spark-pagination-list-button-margin-inline: 0.1875rem;
    --spark-pagination-list-button-outline: none;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/popover/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-popover {
    color: var(--spark-popover-text-color);
    inline-size: 100%;
    max-block-size: var(--spark-popover-popover-height);
    min-inline-size: var(--spark-popover-popover-min-size);
    background-color: var(--spark-popover-background);
}
.spark-popover.spark-popover-fit-content {
    max-inline-size: fit-content;
}
.spark-popover.spark-popover-underlay {
    top: 0;
    left: 0;
    content: ' ';
    display: flex;
    position: absolute;
    block-size: 100%;
    inline-size: 100%;
    max-block-size: inherit;
    min-inline-size: inherit;
    background-color: var(--spark-popover-underlay-color);
}

/* ---- components/popover/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-popover-popover-z-index: 999;
    --spark-popover-popover-box-shadow-x: 0rem;
    --spark-popover-popover-box-shadow-y: 0.125rem;
    --spark-popover-popover-box-shadow-blur-radius: 0.25rem;
    --spark-popover-popover-height: 12rem;
    --spark-popover-popover-min-size: 5rem;
}

/* ---- components/popover/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-popover-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-popover-background: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-popover-popover-shadow-color: rgba(43, 44, 48, 0.25);
    --spark-popover-underlay-color: var(--spark-color-transparent, transparent);
}

/* ---- components/popover/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-popover-text-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-popover-background: var(--spark-color-theme-dark-gray50, #242528);
    --spark-popover-popover-shadow-color: rgba(255, 255, 255, 0.25);
    --spark-popover-underlay-color: var(--spark-color-transparent, transparent);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/progress-indicator/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-progress-indicator {
    display: block;
    position: relative;
    inline-size: var(--spark-progress-indicator-linear-inline-size);
    max-inline-size: var(--spark-progress-indicator-max-inline-size);
}
.spark-progress-indicator progress {
    border: none;
    max-inline-size: var(--spark-progress-indicator-max-inline-size);
    min-inline-size: var(--spark-progress-indicator-max-inline-size);
}
.spark-progress-indicator progress[value]::-webkit-progress-value,
.spark-progress-indicator progress:not([value]) {
    transition: var(--spark-progress-indicator-linear-bar-transition);
    background-color: var(--spark-progress-indicator-value-color);
}
.spark-progress-indicator progress[value]::-webkit-progress-bar,
.spark-progress-indicator progress:not([value])::-webkit-progress-bar {
    transition: var(--spark-progress-indicator-linear-bar-transition);
    background-color: transparent;
}
.spark-progress-indicator progress.success[value]:not(.error)::-webkit-progress-value {
    transition: var(--spark-progress-indicator-linear-bar-transition);
    background-color: var(--spark-progress-indicator-bar-color-success);
}
.spark-progress-indicator progress.error[value]:not(.success)::-webkit-progress-value {
    transition: var(--spark-progress-indicator-linear-bar-transition);
    background-color: var(--spark-progress-indicator-bar-color-error);
}
.spark-progress-indicator .spark-progress-indicator-mask-circular {
    outline: var(--spark-progress-indicator-circular-mask-outline-size) solid
        var(--spark-progress-indicator-border-color);
    background: var(--spark-progress-indicator-mask-background);
    block-size: var(--spark-progress-indicator-circular-mask-height);
    inline-size: var(--spark-progress-indicator-circular-mask-width);
    border-radius: var(--spark-progress-indicator-circular-mask-border-radius);
    margin-block-start: var(--spark-progress-indicator-circular-mask-margin-top);
    margin-inline-start: var(--spark-progress-indicator-circular-mask-margin-left);
}
.spark-progress-indicator.spark-progress-indicator-circular-container {
    block-size: var(--spark-progress-indicator-circular-container-length);
    inline-size: var(--spark-progress-indicator-circular-container-length);
}
.spark-progress-indicator.spark-progress-indicator-clipping-mask {
    inset: 0;
    z-index: 1;
    position: absolute;
    background-color: transparent;
}
.spark-progress-indicator .spark-progress-indicator-linear {
    background: var(--spark-progress-indicator-bar-color);
    inline-size: var(--spark-progress-indicator-linear-inline-size);
    border-block: var(--spark-progress-indicator-border-size) solid
        var(--spark-progress-indicator-border-color);
    border-inline: var(--spark-progress-indicator-border-size) solid
        var(--spark-progress-indicator-border-color);
    min-inline-size: var(--spark-progress-indicator-linear-min-inline-size);
}
.spark-progress-indicator .spark-progress-indicator-linear.spark-progress-indicator-normal {
    block-size: var(--spark-progress-indicator-linear-block-size);
}
.spark-progress-indicator .spark-progress-indicator-label,
.spark-progress-indicator .spark-progress-indicator-percentage {
    color: var(--spark-progress-indicator-text-color);
    display: flex;
    line-height: var(--spark-progress-indicator-label-line-height);
    padding-block-end: var(--spark-progress-indicator-label-padding);
    padding-block-start: var(--spark-progress-indicator-label-padding);
}
.spark-progress-indicator .spark-progress-indicator-percentage {
    font-weight: bold;
}
.spark-progress-indicator .spark-progress-indicator-label-container {
    display: var(--spark-progress-indicator-label-container-display);
    justify-content: var(--spark-progress-indicator-label-container-justify-content);
    min-inline-size: var(--spark-progress-indicator-label-container-min-inline-size);
}
.spark-progress-indicator .spark-progress-indicator-circular {
    mask: radial-gradient(
        circle,
        transparent var(--spark-progress-indicator-circular-mask-threshold),
        white calc(var(--spark-progress-indicator-circular-mask-threshold) + 1%)
    );
    background: conic-gradient(
        var(--spark-progress-indicator-value-color) var(--percentage),
        var(--spark-progress-indicator-bar-color) var(--percentage)
    );
    block-size: var(--spark-progress-indicator-circular-length);
    box-sizing: var(--spark-progress-indicator-circular-box-sizing);
    transition: var(--spark-progress-indicator-linear-bar-transition);
    inline-size: var(--spark-progress-indicator-circular-length);
    border-block: var(--spark-progress-indicator-border-size) solid
        var(--spark-progress-indicator-border-color);
    -webkit-mask: radial-gradient(
        circle,
        transparent var(--spark-progress-indicator-circular-mask-threshold),
        white calc(var(--spark-progress-indicator-circular-mask-threshold) + 1%)
    );
    border-inline: var(--spark-progress-indicator-border-size) solid
        var(--spark-progress-indicator-border-color);
    border-radius: var(--spark-progress-indicator-circular-border-radius);
}
.spark-progress-indicator .spark-progress-indicator-filled progress {
    opacity: var(--spark-progress-indicator-opacity-zero);
}
.spark-progress-indicator .spark-progress-indicator-filled .spark-progress-indicator-percentage {
    display: flex;
    flex-direction: row-reverse;
}
.spark-progress-indicator .spark-progress-indicator-circular.success {
    background: conic-gradient(
        var(--spark-progress-indicator-bar-color-success) var(--percentage),
        var(--spark-progress-indicator-bar-color) var(--percentage)
    );
}
.spark-progress-indicator .spark-progress-indicator-circular.error {
    background: conic-gradient(
        var(--spark-progress-indicator-bar-color-error) var(--percentage),
        var(--spark-progress-indicator-bar-color) var(--percentage)
    );
}
.spark-progress-indicator
    .spark-progress-indicator-percentage.spark-progress-indicator-filled-label {
    position: var(--spark-progress-indicator-label-filled-position);
    text-align: var(--spark-progress-indicator-label-filled-text-align);
    inline-size: calc(
        var(--spark-progress-indicator-linear-inline-size) -
            var(--spark-progress-indicator-label-overflow-inline-size)
    );
    margin-inline-start: calc(
        var(--spark-progress-indicator-label-overflow-inline-size) -
            var(--spark-progress-indicator-label-filled-padding)
    );
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-linear-label,
.spark-progress-indicator
    .spark-progress-indicator-percentage.spark-progress-indicator-linear-label {
    font-size: var(--spark-progress-indicator-label-font-size);
    max-inline-size: var(--spark-progress-indicator-label-overflow-inline-size);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-heavy,
.spark-progress-indicator .spark-progress-indicator-percentage.spark-progress-indicator-heavy {
    max-inline-size: var(--spark-progress-indicator-label-overflow-inline-size);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-heavy,
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-filled-label,
.spark-progress-indicator .spark-progress-indicator-percentage.spark-progress-indicator-heavy,
.spark-progress-indicator
    .spark-progress-indicator-percentage.spark-progress-indicator-filled-label {
    font-size: var(--spark-progress-indicator-label-heavy-font-size);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-overlay,
.spark-progress-indicator .spark-progress-indicator-percentage.spark-progress-indicator-overlay {
    color: var(--spark-progress-indicator-label-top-overlay-text-color);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-overlay.success,
.spark-progress-indicator
    .spark-progress-indicator-percentage.spark-progress-indicator-overlay.success {
    color: var(--spark-progress-indicator-label-top-overlay-text-color-success);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-overlay.error,
.spark-progress-indicator
    .spark-progress-indicator-percentage.spark-progress-indicator-overlay.error {
    color: var(--spark-progress-indicator-label-top-overlay-text-color-error);
}
.spark-progress-indicator .spark-progress-indicator-label.spark-progress-indicator-filled-label {
    position: var(--spark-progress-indicator-label-filled-position);
    margin-inline-start: var(--spark-progress-indicator-label-filled-padding);
}
.spark-progress-indicator .spark-progress-indicator-linear progress.spark-progress-indicator-bar {
    appearance: none;
    transition: var(--spark-progress-indicator-linear-bar-transition);
    background-color: transparent;
    -webkit-appearance: none;
}
.spark-progress-indicator .spark-progress-indicator-linear .spark-progress-indicator-bar {
    background: var(--spark-progress-indicator-value-color);
}
.spark-progress-indicator .spark-progress-indicator-linear progress.spark-progress-indicator-bar,
.spark-progress-indicator .spark-progress-indicator-linear .spark-progress-indicator-bar {
    display: flex;
    block-size: var(--spark-progress-indicator-linear-bar-block-size);
    transition: var(--spark-progress-indicator-linear-bar-transition);
    inline-size: var(--percentage);
}
.spark-progress-indicator .spark-progress-indicator-linear.spark-progress-indicator-filled {
    position: relative;
    block-size: var(--spark-progress-indicator-linear-bar-filled-block-size);
}
.spark-progress-indicator .spark-progress-indicator-linear.spark-progress-indicator-minimum {
    block-size: var(--spark-progress-indicator-linear-bar-minimum-block-size);
    min-inline-size: var(--spark-progress-indicator-linear-bar-minimum-min-inline-size);
}
.spark-progress-indicator .spark-progress-indicator-linear.spark-progress-indicator-heavy {
    block-size: var(--spark-progress-indicator-linear-bar-heavy-block-size);
}
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.success[value]:not(.error)::-webkit-progress-value,
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.success[value]:not(.error)::-moz-progress-bar,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.success[value]:not(.error)::-webkit-progress-value,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.success[value]:not(.error)::-moz-progress-bar {
    background-color: var(--spark-progress-indicator-bar-color-success);
}
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.error[value]::-webkit-progress-value,
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.error[value]::-moz-progress-bar,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.error[value]::-webkit-progress-value,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.error[value]::-moz-progress-bar {
    background-color: var(--spark-progress-indicator-bar-color-error);
}
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.spark-progress-indicator-overlay,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.spark-progress-indicator-overlay {
    color: var(--spark-progress-indicator-label-top-overlay-text-color);
}
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.spark-progress-indicator-overlay.success,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.spark-progress-indicator-overlay.success {
    background-color: var(--spark-progress-indicator-bar-color-success);
}
.spark-progress-indicator
    .spark-progress-indicator-linear
    progress.spark-progress-indicator-bar.spark-progress-indicator-overlay.error,
.spark-progress-indicator
    .spark-progress-indicator-linear
    .spark-progress-indicator-bar.spark-progress-indicator-overlay.error {
    background-color: var(--spark-progress-indicator-bar-color-error);
}

/* ---- components/progress-indicator/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (prefers-reduced-motion: reduce) {
    .spark-progress-indicator-linear.not-essential,
    .spark-progress-indicator-linear.not-essential > * {
        animation: none !important;
        transition: none !important;
    }
}
@media screen and (forced-colors: active) {
    .spark-progress-indicator {
        --spark-progress-indicator-value-color: Highlight;
        --spark-progress-indicator-border-color: ButtonBorder;
        --spark-progress-indicator-bar-color-error: Highlight;
        --spark-progress-indicator-bar-color-success: Highlight;
        --spark-progress-indicator-label-top-overlay-text-color-error: HighlightText;
    }
    .spark-progress-indicator .spark-progress-indicator-circular {
        forced-color-adjust: none;
    }
    .spark-progress-indicator
        .spark-progress-indicator-filled
        .spark-progress-indicator-filled-label {
        color: HighlightText;
        forced-color-adjust: none;
    }
    .spark-progress-indicator
        .spark-progress-indicator-filled
        .spark-progress-indicator-clipping-mask
        .spark-progress-indicator-filled-label {
        color: CanvasText;
    }
}

/* ---- components/progress-indicator/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-progress-indicator-display: block;
    --spark-progress-indicator-font-size: 0.6875rem;
    --spark-progress-indicator-line-height: 1rem;
    --spark-progress-indicator-max-inline-size: 100%;
    --spark-progress-indicator-inline-size: 100%;
    --spark-progress-indicator-min-inline-size: 3rem;
    --spark-progress-indicator-indeterminate-inline-size: 38.75%;
    --spark-progress-indicator-border-size: 0.0625rem;
    --spark-progress-indicator-opacity-zero: 0;
    --spark-progress-indicator-label-display: block;
    --spark-progress-indicator-label-font-size: 0.6875rem;
    --spark-progress-indicator-label-line-height: 1rem;
    --spark-progress-indicator-label-overflow-inline-size: 100%;
    --spark-progress-indicator-label-padding: 0.25rem;
    --spark-progress-indicator-label-container-display: flex;
    --spark-progress-indicator-label-container-justify-content: space-between;
    --spark-progress-indicator-label-container-min-inline-size: 15rem;
    --spark-progress-indicator-label-filled-position: absolute;
    --spark-progress-indicator-label-filled-padding: 0.5rem;
    --spark-progress-indicator-label-filled-text-align: end;
    --spark-progress-indicator-label-heavy-font-size: 0.75rem;
    --spark-progress-indicator-linear-inline-size: 100%;
    --spark-progress-indicator-linear-min-inline-size: 15rem;
    --spark-progress-indicator-linear-block-size: 0.25rem;
    --spark-progress-indicator-linear-indeterminate-inline-size: 38.75%;
    --spark-progress-indicator-linear-bar-inline-size: var(--percentage);
    --spark-progress-indicator-linear-bar-block-size: 100%;
    --spark-progress-indicator-linear-bar-transition: inline-size 0.5s ease;
    --spark-progress-indicator-linear-bar-heavy-block-size: 0.5rem;
    --spark-progress-indicator-linear-bar-filled-block-size: 1.5rem;
    --spark-progress-indicator-linear-bar-minimum-min-inline-size: 3rem;
    --spark-progress-indicator-linear-bar-minimum-block-size: 0.25rem;
    --spark-progress-indicator-circular-length: 100%;
    --spark-progress-indicator-circular-container-length: 2rem;
    --spark-progress-indicator-circular-indeterminate-percentage: 75%;
    --spark-progress-indicator-circular-mask-threshold: 56%;
    --spark-progress-indicator-circular-border-radius: 100%;
    --spark-progress-indicator-circular-box-sizing: border-box;
    --spark-progress-indicator-circular-mask-threshold: 56%;
    --spark-progress-indicator-circular-mask-position: relative;
    --spark-progress-indicator-circular-mask-width: 1.5rem;
    --spark-progress-indicator-circular-mask-height: 1.5rem;
    --spark-progress-indicator-circular-mask-margin-top: -1.75rem;
    --spark-progress-indicator-circular-mask-margin-left: 0.25rem;
    --spark-progress-indicator-circular-mask-border-radius: 50%;
    --spark-progress-indicator-circular-mask-outline-size: 0.0625rem;
}

/* ---- components/progress-indicator/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-progress-indicator-value-color: var(--spark-color-classic-blue, #0054ae);
    --spark-progress-indicator-border-color: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-progress-indicator-bar-color: rgba(0, 0, 0, 0.06);
    --spark-progress-indicator-bar-color-success: var(--spark-color-moss-tint1, #b1d272);
    --spark-progress-indicator-bar-color-error: var(--spark-color-coral-shade1, #c81326);
    --spark-progress-indicator-text-color: var(--spark-color-theme-light-gray800, #494b51);
    --spark-progress-indicator-mask-background: var(--spark-color-transparent, transparent);
    --spark-progress-indicator-label-top-overlay-text-color: var(
        --spark-color-theme-dark-gray900,
        #ffffff
    );
    --spark-progress-indicator-label-top-overlay-text-color-success: var(
        --spark-color-theme-light-gray900,
        #2b2c30
    );
    --spark-progress-indicator-label-top-overlay-text-color-error: var(
        --spark-color-theme-dark-gray900,
        #ffffff
    );
}

/* ---- components/progress-indicator/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-progress-indicator-value-color: var(--spark-color-classic-blue, #0054ae);
    --spark-progress-indicator-border-color: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-progress-indicator-bar-color: rgba(255, 255, 255, 0.06);
    --spark-progress-indicator-bar-color-success: var(--spark-color-moss-tint1, #b1d272);
    --spark-progress-indicator-bar-color-error: var(--spark-color-coral-shade1, #c81326);
    --spark-progress-indicator-text-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-progress-indicator-mask-background: var(--spark-color-transparent, transparent);
    --spark-progress-indicator-label-top-overlay-text-color: var(
        --spark-color-theme-dark-gray50,
        #242528
    );
    --spark-progress-indicator-label-top-overlay-text-color-success: #2b2c30;
    --spark-progress-indicator-label-top-overlay-text-color-error: #ffffff;
    --spark-progress-indicator-value-color: var(--spark-color-energy-blue, #00c7fd);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/scrollbar/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-scrollbar-x {
    overflow-x: auto;
    white-space: nowrap;
}
.spark-scrollbar-y {
    overflow-y: auto;
}
.spark-scrollbar {
    padding: var(--spark-scrollbar-padding-hidden-top) var(--spark-scrollbar-padding-hidden-right)
        var(--spark-scrollbar-padding-hidden-bottom) var(--spark-scrollbar-padding-hidden-left);
    max-block-size: var(--spark-scrollbar-block-size);
    max-inline-size: var(--spark-scrollbar-inline-size);
    scrollbar-color: var(--spark-scrollbar-thumb-color) var(--spark-scrollbar-track-color);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.spark-scrollbar::-webkit-scrollbar {
    block-size: var(--spark-scrollbar-thin);
    inline-size: var(--spark-scrollbar-thin);
}
.spark-scrollbar:hover {
    padding: var(--spark-scrollbar-padding-open);
}
.spark-scrollbar::-webkit-scrollbar-track {
    background: var(--spark-scrollbar-track-color);
}
.spark-scrollbar::-webkit-scrollbar-thumb {
    background: var(--spark-scrollbar-thumb-color);
}
.spark-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}
.spark-scrollbar:active {
    scrollbar-color: var(--spark-scrollbar-thumb-active-color) var(--spark-scrollbar-track-color);
}
.spark-scrollbar.spark-scrollbar-hidden::-webkit-scrollbar,
.spark-scrollbar.spark-scrollbar-hidden::-webkit-scrollbar-track,
.spark-scrollbar.spark-scrollbar-hidden::-webkit-scrollbar-thumb {
    background: transparent;
}
.spark-scrollbar.spark-scrollbar-hidden:hover::-webkit-scrollbar-track:hover {
    background: var(--spark-scrollbar-track-color);
}
.spark-scrollbar.spark-scrollbar-hidden:hover::-webkit-scrollbar-thumb {
    background: var(--spark-scrollbar-thumb-color);
}
.spark-scrollbar.spark-scrollbar-hidden:hover::-webkit-scrollbar-thumb:active {
    background: var(--spark-scrollbar-thumb-active-color);
}
.spark-scrollbar.spark-scrollbar-hidden:hover::-webkit-scrollbar:hover::-webkit-scrollbar-track {
    background: var(--spark-scrollbar-track-color);
}
.spark-scrollbar::-webkit-scrollbar-thumb:active {
    background: var(--spark-scrollbar-thumb-active-color);
}
.spark-scrollbar:hover::-webkit-scrollbar {
    block-size: var(--spark-scrollbar-thin-active);
    inline-size: var(--spark-scrollbar-thin-active);
}

/* ---- components/scrollbar/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-scrollbar-thin: 0.25rem;
    --spark-scrollbar-thin-active: 0.5rem;
    --spark-scrollbar-block-size: 100%;
    --spark-scrollbar-inline-size: 100%;
    --spark-scrollbar-padding-hidden-top: 0rem;
    --spark-scrollbar-padding-hidden-right: 0.25rem;
    --spark-scrollbar-padding-hidden-bottom: 0.25rem;
    --spark-scrollbar-padding-hidden-left: 0rem;
    --spark-scrollbar-padding-open: 0rem;
}

/* ---- components/scrollbar/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-scrollbar-track-color: rgba(139, 142, 151, 0.15);
    --spark-scrollbar-thumb-color: var(--spark-color-theme-light-gray600, #8b8e97);
    --spark-scrollbar-thumb-active-color: var(--spark-color-classic-blue, #0054ae);
}

/* ---- components/scrollbar/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-scrollbar-track-color: rgba(142, 144, 153, 0.15);
    --spark-scrollbar-thumb-color: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-scrollbar-thumb-active-color: var(--spark-color-energy-blue, #00c7fd);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/search/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-search {
    display: flex;
}
.spark-search .spark-button {
    margin-inline-start: var(--spark-search-search-button-gap);
}
.spark-search .spark-input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.spark-search .spark-input:placeholder-shown + .end-slot .clear {
    opacity: var(--spark-search-input-opacity);
    pointer-events: none;
}
.spark-search .spark-text-field:not(.is-disabled) [class^='intelicon'] {
    color: var(--spark-search-icon-color);
}

/* ---- components/search/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-search-search-button-gap: 0.5rem;
    --spark-search-input-opacity: 0rem;
}

/* ---- components/search/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-search-icon-color: var(--spark-color-theme-light-gray800, #494b51);
}

/* ---- components/search/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-search-icon-color: var(--spark-color-theme-dark-gray800, #e3e3e5);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/shimmer/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-shimmer {
    block-size: var(--spark-shimmer-block-size);
    inline-size: var(--spark-shimmer-inline-size);
}
.spark-shimmer[aria-hidden='true'] {
    display: none !important;
}
.spark-shimmer .spark-shimmer-animate {
    animation: keyframes-shimmer-animation 3s infinite linear;
    background: linear-gradient(
            -45deg,
            var(--spark-shimmer-gradient-color-zero) var(--spark-shimmer-gradient-start),
            var(--spark-shimmer-gradient-color-middle) var(--spark-shimmer-gradient-middle),
            var(--spark-shimmer-gradient-color-zero) var(--spark-shimmer-gradient-end)
        )
        fixed;
    background-size: var(--spark-shimmer-double-inline-size) var(--spark-shimmer-block-size);
    background-color: var(--spark-shimmer-background-color);
}
.spark-shimmer .spark-shimmer-skeleton-list-item {
    position: relative;
    block-size: var(--spark-shimmer-list-item-block-size);
    margin-block-end: var(--spark-shimmer-list-item-margin-block-end);
}
.spark-shimmer .spark-shimmer-skeleton-list-item .spark-shimmer-skeleton-list-avatar {
    position: absolute;
    block-size: var(--spark-shimmer-list-avatar-block-size);
    inline-size: var(--spark-shimmer-list-avatar-inline-size);
    border-radius: var(--spark-shimmer-list-avatar-border-radius);
}
.spark-shimmer .spark-shimmer-skeleton-list-item .spark-shimmer-skeleton-list-short-line {
    position: relative;
    block-size: var(--spark-shimmer-list-short-line-block-size);
    inline-size: var(--spark-shimmer-list-short-line-inline-size);
    border-radius: var(--spark-shimmer-list-short-line-border-radius);
    margin-inline-start: var(--spark-shimmer-list-short-line-margin-inline-start);
}
.spark-shimmer .spark-shimmer-skeleton-list-item .spark-shimmer-skeleton-list-long-line {
    position: relative;
    block-size: var(--spark-shimmer-list-long-line-block-size);
    inline-size: var(--spark-shimmer-list-long-line-inline-size);
    border-radius: var(--spark-shimmer-list-long-line-border-radius);
    margin-block-start: var(--spark-shimmer-list-long-line-margin-block-start);
    margin-inline-start: var(--spark-shimmer-list-long-line-margin-inline-start);
}
.spark-shimmer .spark-shimmer-skeleton-list-item .spark-shimmer-skeleton-list-hr {
    position: relative;
    block-size: var(--spark-shimmer-list-hr-block-size);
    inline-size: var(--spark-shimmer-list-hr-inline-size);
    margin-block-start: var(--spark-shimmer-list-hr-margin-block-start);
    margin-inline-start: var(--spark-shimmer-list-hr-margin-inline-start);
}
.spark-shimmer.spark-shimmer-skeleton-block {
    gap: var(--spark-shimmer-block-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    padding-block-start: var(--spark-shimmer-block-padding-block-start);
}
.spark-shimmer.spark-shimmer-skeleton-block .spark-shimmer-skeleton-block-item {
    block-size: var(--spark-shimmer-block-item-block-size);
    inline-size: var(--spark-shimmer-block-item-inline-size);
}
.spark-shimmer.spark-shimmer-skeleton-gallery {
    gap: var(--spark-shimmer-gallery-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    padding-block-start: var(--spark-shimmer-gallery-padding-block-start);
}
.spark-shimmer.spark-shimmer-skeleton-gallery .spark-shimmer-skeleton-gallery-item {
    block-size: var(--spark-shimmer-gallery-item-block-size);
    inline-size: var(--spark-shimmer-gallery-item-inline-size);
}
.spark-shimmer.spark-shimmer-skeleton-table {
    gap: var(--spark-shimmer-table-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    padding-block-start: var(--spark-shimmer-table-padding-block-start);
}
.spark-shimmer.spark-shimmer-skeleton-table .spark-shimmer-skeleton-table-item {
    block-size: var(--spark-shimmer-table-item-block-size);
    inline-size: var(--spark-shimmer-table-item-inline-size);
}
.spark-shimmer .spark-shimmer-skeleton-card-item {
    position: relative;
    block-size: var(--spark-shimmer-card-item-block-size);
    margin-block-end: var(--spark-shimmer-card-item-margin-block-end);
}
.spark-shimmer .spark-shimmer-skeleton-card-item .spark-shimmer-skeleton-card-cover {
    block-size: var(--spark-shimmer-card-cover-block-size);
    inline-size: var(--spark-shimmer-card-cover-inline-size);
}
.spark-shimmer .spark-shimmer-skeleton-card-item .spark-shimmer-skeleton-card-avatar {
    border: var(--spark-shimmer-card-avatar-border-width) solid
        var(--spark-shimmer-card-avatar-border-color);
    position: absolute;
    block-size: var(--spark-shimmer-card-avatar-block-size);
    inline-size: var(--spark-shimmer-card-avatar-inline-size);
    border-radius: var(--spark-shimmer-card-avatar-border-radius);
    margin-block-start: var(--spark-shimmer-card-avatar-margin-block-start);
    margin-inline-start: var(--spark-shimmer-card-avatar-margin-inline-start);
}
.spark-shimmer .spark-shimmer-skeleton-card-item .spark-shimmer-skeleton-card-short-line {
    position: relative;
    block-size: var(--spark-shimmer-card-short-line-block-size);
    inline-size: var(--spark-shimmer-card-short-line-inline-size);
    border-radius: var(--spark-shimmer-card-short-line-border-radius);
    margin-block-start: var(--spark-shimmer-card-short-line-margin-block-start);
}
.spark-shimmer .spark-shimmer-skeleton-card-item .spark-shimmer-skeleton-card-long-line {
    position: relative;
    block-size: var(--spark-shimmer-card-long-line-block-size);
    inline-size: var(--spark-shimmer-card-long-line-inline-size);
    border-radius: var(--spark-shimmer-card-long-line-border-radius);
    margin-block-start: var(--spark-shimmer-card-long-line-margin-block-start);
}
.spark-shimmer .spark-shimmer-skeleton-card-item .spark-shimmer-skeleton-card-hr {
    position: relative;
    block-size: var(--spark-shimmer-card-hr-block-size);
    inline-size: var(--spark-shimmer-card-hr-inline-size);
    margin-block-start: var(--spark-shimmer-card-hr-margin-block-start);
}

/* ---- components/shimmer/keyframes.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@keyframes keyframes-shimmer-animation {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ---- components/shimmer/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (prefers-reduced-motion: reduce) {
    .spark-shimmer-animate.not-essential,
    .spark-shimmer-animate.not-essential > * {
        animation: none !important;
        transition: none !important;
    }
}
@media screen and (forced-colors: active) {
    .spark-shimmer {
        --spark-shimmer-background-color: GrayText;
        --spark-shimmer-card-avatar-border-color: Canvas;
    }
    .spark-shimmer .spark-shimmer-animate {
        forced-color-adjust: none;
    }
}

/* ---- components/shimmer/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-shimmer-inline-size: 22.75rem;
    --spark-shimmer-block-size: 100%;
    --spark-shimmer-double-inline-size: 200%;
    --spark-shimmer-gradient-start: 45%;
    --spark-shimmer-gradient-middle: 50%;
    --spark-shimmer-gradient-end: 55%;
    --spark-shimmer-list-item-block-size: 2.5625rem;
    --spark-shimmer-list-item-margin-block-end: 1.25rem;
    --spark-shimmer-list-avatar-border-radius: 50%;
    --spark-shimmer-list-avatar-inline-size: 2rem;
    --spark-shimmer-list-avatar-block-size: 2rem;
    --spark-shimmer-list-short-line-border-radius: 1rem;
    --spark-shimmer-list-short-line-inline-size: 40%;
    --spark-shimmer-list-short-line-block-size: 0.5rem;
    --spark-shimmer-list-short-line-margin-inline-start: 3.125rem;
    --spark-shimmer-list-long-line-border-radius: 1rem;
    --spark-shimmer-list-long-line-inline-size: 80%;
    --spark-shimmer-list-long-line-block-size: 0.5rem;
    --spark-shimmer-list-long-line-margin-inline-start: 3.125rem;
    --spark-shimmer-list-long-line-margin-block-start: 0.5rem;
    --spark-shimmer-list-hr-inline-size: 90%;
    --spark-shimmer-list-hr-block-size: 0.0625rem;
    --spark-shimmer-list-hr-margin-inline-start: 3.125rem;
    --spark-shimmer-list-hr-margin-block-start: 1rem;
    --spark-shimmer-block-gap: 0.625rem;
    --spark-shimmer-block-padding-block-start: 0.3125rem;
    --spark-shimmer-block-item-inline-size: 100%;
    --spark-shimmer-block-item-block-size: 4rem;
    --spark-shimmer-gallery-gap: 0.0625rem;
    --spark-shimmer-gallery-padding-block-start: 0.3125rem;
    --spark-shimmer-gallery-item-inline-size: 7.5rem;
    --spark-shimmer-gallery-item-block-size: 7.5rem;
    --spark-shimmer-table-gap: 0.25rem;
    --spark-shimmer-table-padding-block-start: 0.3125rem;
    --spark-shimmer-table-item-inline-size: 7.375rem;
    --spark-shimmer-table-item-block-size: 1rem;
    --spark-shimmer-card-item-block-size: 15.5625rem;
    --spark-shimmer-card-item-margin-block-end: 1rem;
    --spark-shimmer-card-cover-inline-size: 22.75rem;
    --spark-shimmer-card-cover-block-size: 11.75rem;
    --spark-shimmer-card-avatar-border-radius: 50%;
    --spark-shimmer-card-avatar-inline-size: 2rem;
    --spark-shimmer-card-avatar-block-size: 2rem;
    --spark-shimmer-card-avatar-margin-block-start: -1.5rem;
    --spark-shimmer-card-avatar-margin-inline-start: 1rem;
    --spark-shimmer-card-avatar-border-width: 0.25rem;
    --spark-shimmer-card-short-line-border-radius: 1rem;
    --spark-shimmer-card-short-line-inline-size: 40%;
    --spark-shimmer-card-short-line-block-size: 0.5rem;
    --spark-shimmer-card-short-line-margin-block-start: 1.25rem;
    --spark-shimmer-card-long-line-border-radius: 1rem;
    --spark-shimmer-card-long-line-inline-size: 80%;
    --spark-shimmer-card-long-line-block-size: 0.5rem;
    --spark-shimmer-card-long-line-margin-block-start: 0.5rem;
    --spark-shimmer-card-hr-inline-size: 100%;
    --spark-shimmer-card-hr-block-size: 0.0625rem;
    --spark-shimmer-card-hr-margin-block-start: 1rem;
}

/* ---- components/shimmer/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-shimmer-background-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-shimmer-gradient-color-zero: rgba(255, 255, 255, 0);
    --spark-shimmer-gradient-color-middle: rgba(255, 255, 255, 0.5);
    --spark-shimmer-card-avatar-border-color: var(--spark-color-theme-light-gray50, #ffffff);
}

/* ---- components/shimmer/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-shimmer-background-color: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-shimmer-gradient-color-zero: rgba(255, 255, 255, 0);
    --spark-shimmer-gradient-color-middle: rgba(255, 255, 255, 0.1);
    --spark-shimmer-card-avatar-border-color: var(--spark-color-theme-dark-gray50, #242528);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/stepper/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-stepper .spark-stepper-step-button.spark-button.spark-button-action {
    color: var(--spark-stepper-unvisited-color);
    padding: inherit;
    border-radius: 100%;
    background-color: var(--spark-stepper-unvisited-background-color);
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink {
    color: var(--spark-stepper-unvisited-color);
    padding: inherit;
    border-radius: 100%;
    background-color: var(--spark-stepper-unvisited-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button {
    color: var(--spark-stepper-active-color);
    background-color: var(--spark-stepper-active-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink {
    color: var(--spark-stepper-active-color);
    background-color: var(--spark-stepper-active-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button {
    color: var(--spark-stepper-invalid-color);
    border-block: solid var(--spark-stepper-border-width) var(--spark-stepper-invalid-color);
    border-inline: solid var(--spark-stepper-border-width) var(--spark-stepper-invalid-color);
    background-color: var(--spark-stepper-transparent);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink {
    color: var(--spark-stepper-invalid-color);
    border-block: solid var(--spark-stepper-border-width) var(--spark-stepper-invalid-color);
    border-inline: solid var(--spark-stepper-border-width) var(--spark-stepper-invalid-color);
    background-color: var(--spark-stepper-transparent);
}
.spark-stepper .spark-stepper-step.spark-stepper-step-invalid .spark-stepper-step-text-container,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-text-container
    .spark-stepper-step-title {
    color: var(--spark-stepper-invalid-color);
}
.spark-stepper .spark-stepper-step:first-child .spark-stepper-step-container::before,
.spark-stepper .spark-stepper-step:last-child .spark-stepper-step-container::after {
    display: none;
}
.spark-stepper .spark-stepper-step.spark-stepper-step-active .spark-stepper-step-container::before,
.spark-stepper .spark-stepper-step.spark-stepper-step-visited .spark-stepper-step-container::before,
.spark-stepper .spark-stepper-step.spark-stepper-step-visited .spark-stepper-step-container::after {
    background-position-x: -100%;
}
.spark-stepper
    .spark-stepper-orientation-vertical
    .spark-stepper-step.spark-stepper-step-visited::after {
    background-position-x: -100%;
}
.spark-stepper .spark-stepper-step-active .spark-stepper-step-container::before,
.spark-stepper .spark-stepper-step-active .spark-stepper-step-container::after {
    transition-delay: var(--spark-stepper-animation-speed);
}
.spark-stepper .spark-stepper-orientation-vertical .spark-stepper-step-text-container {
    color: var(--spark-stepper-text-color);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}
.spark-stepper
    .spark-stepper-orientation-vertical
    .spark-stepper-step.spark-stepper-step-visited:after {
    background-position-x: -100% !important;
}
.spark-stepper .spark-stepper-orientation-vertical .spark-stepper-step {
    gap: var(--spark-stepper-element-gap);
    display: flex;
    justify-content: flex-start;
    padding-block-end: 3rem;
}
.spark-stepper .spark-stepper-orientation-horizontal .spark-stepper-step-text-container {
    gap: var(--spark-stepper-element-gap);
    color: var(--spark-stepper-text-color);
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    padding-inline: var(--spark-stepper-text-container-padding-inline);
    justify-content: center;
}
.spark-stepper .spark-stepper-orientation-horizontal .spark-stepper-step {
    gap: var(--spark-stepper-element-gap);
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.spark-stepper .spark-stepper-orientation-horizontal .spark-stepper-step-container {
    display: flex;
    position: relative;
    inline-size: 100%;
    justify-content: center;
}
.spark-stepper .spark-stepper-orientation-horizontal {
    display: flex;
    flex-direction: var(--spark-stepper-horizontal-flex-direction);
}
.spark-stepper .spark-stepper-orientation-vertical {
    display: flex;
    flex-direction: var(--spark-stepper-vertical-flex-direction);
}
.spark-stepper .spark-stepper-orientation-horizontal .spark-stepper-step-container::before,
.spark-stepper .spark-stepper-orientation-horizontal .spark-stepper-step-container::after {
    top: 50%;
    content: ' ';
    position: absolute;
    transform: translateY(-50%);
    background: linear-gradient(
        90deg,
        var(--spark-stepper-unvisited-color) 50%,
        var(--spark-stepper-active-background-color) 50%
    );
    block-size: var(--spark-stepper-connector-size);
    transition: background-position-y var(--spark-stepper-animation-speed) linear;
    background-size: 200%;
    background-position-x: 0%;
}
.spark-stepper
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-text-container
    .spark-stepper-step-title {
    font-weight: 500;
}
.spark-stepper
    .spark-stepper-orientation-vertical
    .spark-stepper-step-text-container
    .spark-stepper-step-title {
    font-weight: 500;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled {
    color: var(--spark-stepper-invalid-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink
    .spark-icon {
    color: var(--spark-stepper-invalid-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink:hover:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-stepper-invalid-hover-color) !important;
    border-color: var(--spark-stepper-invalid-hover-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed {
    color: var(--spark-stepper-invalid-press-color) !important;
    border-color: var(--spark-stepper-invalid-press-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed:focus:not(
        .spark-hyperlink-is-pressed
    ) {
    color: var(--spark-stepper-invalid-press-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed
    .spark-icon {
    color: var(--spark-stepper-invalid-press-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed.spark-hyperlink-is-pressed:focus {
    color: var(--spark-stepper-invalid-press-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink:hover:not(.spark-hyperlink-is-pressed)
    .spark-icon {
    color: var(--spark-stepper-invalid-hover-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled
    .spark-icon {
    color: var(--spark-stepper-invalid-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button
    .spark-icon {
    color: var(--spark-stepper-invalid-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button.spark-button-hovered:not(.spark-button-active) {
    color: var(--spark-stepper-invalid-hover-color);
    border-color: var(--spark-stepper-invalid-hover-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button.spark-button-active {
    color: var(--spark-stepper-invalid-press-color);
    border-color: var(--spark-stepper-invalid-press-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button.spark-button-active
    .spark-icon {
    color: var(--spark-stepper-invalid-press-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-invalid
    .spark-stepper-step-button.spark-button.spark-button-hovered:not(.spark-button-active)
    .spark-icon {
    color: var(--spark-stepper-invalid-hover-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled {
    color: var(--spark-stepper-active-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink:focus:not(.spark-hyperlink-is-pressed),
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-stepper-active-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink:hover,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink:hover {
    color: var(--spark-stepper-active-color) !important;
    background-color: var(--spark-stepper-active-hover-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed {
    color: var(--spark-stepper-active-color) !important;
    background-color: var(--spark-stepper-active-pressed-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed:focus,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed:focus {
    color: var(--spark-stepper-active-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink
    .spark-icon,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink
    .spark-icon {
    color: var(--spark-stepper-active-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled
    .spark-icon,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled
    .spark-icon {
    color: var(--spark-stepper-active-color) !important;
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button.spark-button-hovered,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button.spark-button-hovered {
    background-color: var(--spark-stepper-active-hover-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button.spark-button-active,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button.spark-button-active {
    background-color: var(--spark-stepper-active-pressed-background-color);
}
.spark-stepper
    .spark-stepper-step.spark-stepper-step-active:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button
    .spark-icon,
.spark-stepper
    .spark-stepper-step.spark-stepper-step-visited:not(.spark-stepper-step-invalid)
    .spark-stepper-step-button.spark-button
    .spark-icon {
    color: var(--spark-stepper-active-color);
}
.spark-stepper
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled:not(
        .spark-stepper-step-active
    ):not(.spark-stepper-step-invalid) {
    color: var(--spark-stepper-unvisited-color) !important;
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink .spark-button-content .spark-font-75 {
    font-weight: 500;
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink:focus:not(.spark-hyperlink-is-pressed) {
    color: var(--spark-stepper-unvisited-color) !important;
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink:hover {
    color: var(--spark-stepper-unvisited-color) !important;
    background-color: var(--spark-stepper-unvisited-hover-background-color);
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed {
    color: var(--spark-stepper-unvisited-color) !important;
    background-color: var(--spark-stepper-unvisited-press-background-color);
}
.spark-stepper .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-pressed:focus {
    color: var(--spark-stepper-unvisited-color) !important;
}
.spark-stepper
    .spark-stepper-step-button.spark-hyperlink.spark-hyperlink-is-disabled:not(
        .spark-stepper-step-active
    ):not(.spark-stepper-step-invalid)
    .spark-icon {
    color: var(--spark-stepper-unvisited-color) !important;
}
.spark-stepper
    .spark-stepper-step-button.spark-button.spark-button-action
    .spark-button-content
    .spark-font-75 {
    font-weight: 500;
}
.spark-stepper .spark-stepper-step-button.spark-button.spark-button-action.spark-button-hovered {
    background-color: var(--spark-stepper-unvisited-hover-background-color);
}
.spark-stepper .spark-stepper-step-button.spark-button.spark-button-action.spark-button-active {
    background-color: var(--spark-stepper-unvisited-press-background-color);
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-vertical
    .spark-stepper-step
    .spark-stepper-step-container {
    max-block-size: var(--spark-stepper-s-icon-active-size);
    max-inline-size: var(--spark-stepper-s-icon-active-size);
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-vertical
    .spark-stepper-step-text-container {
    transform: translateY(
        calc(
            (var(--spark-stepper-s-icon-active-size) / 2) - var(--spark-stepper-s-vertical-gap) / 2
        )
    );
}
.spark-stepper.spark-stepper-size-s .spark-stepper-orientation-vertical {
    gap: var(--spark-stepper-element-gap);
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child) {
    position: relative;
}
.spark-stepper.spark-stepper-size-s .spark-stepper-step .spark-stepper-step-container {
    display: flex;
    align-items: center;
    min-block-size: var(--spark-stepper-s-icon-active-size);
    justify-content: center;
    min-inline-size: var(--spark-stepper-s-icon-active-size);
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-button,
.spark-stepper.spark-stepper-size-s
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-hyperlink {
    block-size: var(--spark-stepper-s-icon-active-size);
    inline-size: var(--spark-stepper-s-icon-active-size);
}
.spark-stepper.spark-stepper-size-s .spark-stepper-step-button.spark-hyperlink {
    display: flex;
    block-size: var(--spark-stepper-s-icon-size);
    align-items: center;
    inline-size: var(--spark-stepper-s-icon-size);
    justify-content: center;
    text-decoration: none;
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child):after {
    top: calc(var(--spark-stepper-s-icon-active-size) + var(--spark-stepper-s-vertical-gap));
    left: calc(
        (var(--spark-stepper-s-icon-active-size) / 2) - var(--spark-stepper-connector-size) / 2
    );
    content: ' ';
    z-index: 1;
    position: absolute;
    background: linear-gradient(
        90deg,
        var(--spark-stepper-unvisited-color) 50%,
        var(--spark-stepper-active-background-color) 50%
    );
    block-size: calc(
        100% -
            (
                var(--spark-stepper-s-icon-active-size) +
                    (var(--spark-stepper-s-vertical-gap) * 0.875)
            )
    );
    box-sizing: border-box;
    transition: background-position-x var(--spark-stepper-animation-speed) linear;
    inline-size: var(--spark-stepper-connector-size);
    background-size: 220%;
    background-position-x: 0%;
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::before {
    left: 0;
    padding-right: calc(
        50% - (var(--spark-stepper-s-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}
.spark-stepper.spark-stepper-size-s
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::after {
    right: 0;
    padding-left: calc(
        50% - (var(--spark-stepper-s-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-vertical
    .spark-stepper-step
    .spark-stepper-step-container {
    max-block-size: var(--spark-stepper-m-icon-active-size);
    max-inline-size: var(--spark-stepper-m-icon-active-size);
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-vertical
    .spark-stepper-step-text-container {
    transform: translateY(
        calc(
            (var(--spark-stepper-m-icon-active-size) / 2) - var(--spark-stepper-m-vertical-gap) / 2
        )
    );
}
.spark-stepper.spark-stepper-size-m .spark-stepper-orientation-vertical {
    gap: var(--spark-stepper-element-gap);
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child) {
    position: relative;
}
.spark-stepper.spark-stepper-size-m .spark-stepper-step .spark-stepper-step-container {
    display: flex;
    align-items: center;
    min-block-size: var(--spark-stepper-m-icon-active-size);
    justify-content: center;
    min-inline-size: var(--spark-stepper-m-icon-active-size);
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-button,
.spark-stepper.spark-stepper-size-m
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-hyperlink {
    block-size: var(--spark-stepper-m-icon-active-size);
    inline-size: var(--spark-stepper-m-icon-active-size);
}
.spark-stepper.spark-stepper-size-m .spark-stepper-step-button.spark-hyperlink {
    display: flex;
    block-size: var(--spark-stepper-m-icon-size);
    align-items: center;
    inline-size: var(--spark-stepper-m-icon-size);
    justify-content: center;
    text-decoration: none;
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child):after {
    top: calc(var(--spark-stepper-m-icon-active-size) + var(--spark-stepper-m-vertical-gap));
    left: calc(
        (var(--spark-stepper-m-icon-active-size) / 2) - var(--spark-stepper-connector-size) / 2
    );
    content: ' ';
    z-index: 1;
    position: absolute;
    background: linear-gradient(
        90deg,
        var(--spark-stepper-unvisited-color) 50%,
        var(--spark-stepper-active-background-color) 50%
    );
    block-size: calc(
        100% -
            (
                var(--spark-stepper-m-icon-active-size) +
                    (var(--spark-stepper-m-vertical-gap) * 0.875)
            )
    );
    box-sizing: border-box;
    transition: background-position-x var(--spark-stepper-animation-speed) linear;
    inline-size: var(--spark-stepper-connector-size);
    background-size: 220%;
    background-position-x: 0%;
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::before {
    left: 0;
    padding-right: calc(
        50% - (var(--spark-stepper-m-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}
.spark-stepper.spark-stepper-size-m
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::after {
    right: 0;
    padding-left: calc(
        50% - (var(--spark-stepper-m-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-vertical
    .spark-stepper-step
    .spark-stepper-step-container {
    max-block-size: var(--spark-stepper-l-icon-active-size);
    max-inline-size: var(--spark-stepper-l-icon-active-size);
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-vertical
    .spark-stepper-step-text-container {
    transform: translateY(
        calc(
            (var(--spark-stepper-l-icon-active-size) / 2) - var(--spark-stepper-l-vertical-gap) / 2
        )
    );
}
.spark-stepper.spark-stepper-size-l .spark-stepper-orientation-vertical {
    gap: var(--spark-stepper-element-gap);
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child) {
    position: relative;
}
.spark-stepper.spark-stepper-size-l .spark-stepper-step .spark-stepper-step-container {
    display: flex;
    align-items: center;
    min-block-size: var(--spark-stepper-l-icon-active-size);
    justify-content: center;
    min-inline-size: var(--spark-stepper-l-icon-active-size);
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-button,
.spark-stepper.spark-stepper-size-l
    .spark-stepper-step.spark-stepper-step-active
    .spark-stepper-step-button.spark-hyperlink {
    block-size: var(--spark-stepper-l-icon-active-size);
    inline-size: var(--spark-stepper-l-icon-active-size);
}
.spark-stepper.spark-stepper-size-l .spark-stepper-step-button.spark-hyperlink {
    display: flex;
    block-size: var(--spark-stepper-l-icon-size);
    align-items: center;
    inline-size: var(--spark-stepper-l-icon-size);
    justify-content: center;
    text-decoration: none;
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-vertical
    .spark-stepper-step:not(:last-child):after {
    top: calc(var(--spark-stepper-l-icon-active-size) + var(--spark-stepper-l-vertical-gap));
    left: calc(
        (var(--spark-stepper-l-icon-active-size) / 2) - var(--spark-stepper-connector-size) / 2
    );
    content: ' ';
    z-index: 1;
    position: absolute;
    background: linear-gradient(
        90deg,
        var(--spark-stepper-unvisited-color) 50%,
        var(--spark-stepper-active-background-color) 50%
    );
    block-size: calc(
        100% -
            (
                var(--spark-stepper-l-icon-active-size) +
                    (var(--spark-stepper-l-vertical-gap) * 0.875)
            )
    );
    box-sizing: border-box;
    transition: background-position-x var(--spark-stepper-animation-speed) linear;
    inline-size: var(--spark-stepper-connector-size);
    background-size: 220%;
    background-position-x: 0%;
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::before {
    left: 0;
    padding-right: calc(
        50% - (var(--spark-stepper-l-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}
.spark-stepper.spark-stepper-size-l
    .spark-stepper-orientation-horizontal
    .spark-stepper-step-container::after {
    right: 0;
    padding-left: calc(
        50% - (var(--spark-stepper-l-icon-size) * var(--spark-stepper-connector-gap-factor))
    );
}

/* ---- components/stepper/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-stepper-animation-speed: 0.2s;
    --spark-stepper-text-container-padding-inline: 1.5rem;
    --spark-stepper-element-gap: 0.5rem;
    --spark-stepper-border-width: 0.125rem;
    --spark-stepper-step-size: 2rem;
    --spark-stepper-step-text-padding: 1rem;
    --spark-stepper-connector-gap-factor: 0.8;
    --spark-stepper-connector-size: 0.125rem;
    --spark-stepper-l-minimun-inline-size: 5rem;
    --spark-stepper-l-horizontal-gap: 1rem;
    --spark-stepper-l-vertical-gap: 0.5rem;
    --spark-stepper-l-icon-size: 2.5rem;
    --spark-stepper-l-icon-gap-factor: 1rem;
    --spark-stepper-l-icon-active-size: 3rem;
    --spark-stepper-l-icon-active-gap-factor: 1rem;
    --spark-stepper-m-minimun-inline-size: 5rem;
    --spark-stepper-m-horizontal-gap: 1rem;
    --spark-stepper-m-vertical-gap: 0.5rem;
    --spark-stepper-m-icon-size: 2rem;
    --spark-stepper-m-icon-gap-factor: 0.5rem;
    --spark-stepper-m-icon-active-size: 2.5rem;
    --spark-stepper-m-icon-active-gap-factor: 0.5rem;
    --spark-stepper-s-minimun-inline-size: 5rem;
    --spark-stepper-s-horizontal-gap: 1rem;
    --spark-stepper-s-vertical-gap: 0.5rem;
    --spark-stepper-s-icon-size: 1.5rem;
    --spark-stepper-s-icon-gap-factor: 0rem;
    --spark-stepper-s-icon-active-size: 2rem;
    --spark-stepper-s-icon-active-gap-factor: 0.5rem;
    --spark-stepper-horizontal-flex-direction: row;
    --spark-stepper-vertical-flex-direction: column;
}

/* ---- components/stepper/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-stepper-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-stepper-title-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-stepper-unvisited-background-color: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-stepper-unvisited-hover-background-color: var(
        --spark-color-theme-light-gray300,
        #e2e2e4
    );
    --spark-stepper-unvisited-press-background-color: var(
        --spark-color-theme-light-gray400,
        #c9cace
    );
    --spark-stepper-unvisited-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-stepper-active-background-color: var(--spark-color-classic-blue, #0054ae);
    --spark-stepper-active-hover-background-color: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-stepper-active-pressed-background-color: var(
        --spark-color-classic-blue-shade2,
        #001e50
    );
    --spark-stepper-active-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-stepper-invalid-color: var(--spark-color-coral-shade1, #c81326);
    --spark-stepper-invalid-hover-color: #950000;
    --spark-stepper-invalid-press-color: #620000;
    --spark-stepper-transparent: var(--spark-color-transparent, transparent);
}

/* ---- components/stepper/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-stepper-text-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-stepper-title-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-stepper-unvisited-background-color: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-stepper-unvisited-hover-background-color: var(
        --spark-color-theme-dark-gray300,
        #484a50
    );
    --spark-stepper-unvisited-press-background-color: var(
        --spark-color-theme-dark-gray400,
        #585a62
    );
    --spark-stepper-unvisited-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-stepper-active-background-color: var(--spark-color-energy-blue, #00c7fd);
    --spark-stepper-active-hover-background-color: var(--spark-color-energy-blue-tint1, #6ddcff);
    --spark-stepper-active-pressed-background-color: var(--spark-color-energy-blue-tint2, #a0ebff);
    --spark-stepper-active-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-stepper-invalid-color: var(--spark-color-coral, #ff5662);
    --spark-stepper-invalid-hover-color: var(--spark-color-coral-tint1, #ff848a);
    --spark-stepper-invalid-press-color: var(--spark-color-coral-tint2, #ffb6b9);
    --spark-stepper-transparent: var(--spark-color-transparent, transparent);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/table/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-table-outline {
    border-color: var(--spark-table-normal-border);
    border-style: solid;
    border-width: var(--spark-table-outline-border-width);
    border-spacing: var(--spark-table-outline-border-spacing);
    border-collapse: collapse;
}
.spark-table-outline-bold {
    border-color: var(--spark-table-outline-bold-border);
    border-style: solid;
    border-width: var(--spark-table-outline-border-width);
    border-spacing: var(--spark-table-outline-border-spacing);
    border-collapse: collapse;
}
.spark-table-minimal {
    border-bottom: 0;
}
.spark-table-head {
    color: var(--spark-table-head-color);
    box-shadow: inset var(--spark-table-box-shadow-x) var(--spark-table-box-shadow-y)
        var(--spark-table-box-shadow-blur-radius) var(--spark-table-head-normal-border);
    line-height: var(--spark-table-head-text-line-height);
    padding-block: var(--spark-table-head-padding-block);
    padding-inline: var(--spark-table-head-padding-inline);
    background-color: var(--spark-table-head-background-color);
}
.spark-table-head-cell {
    box-sizing: border-box;
    text-align: start;
}
.spark-table-head-sorted {
    color: var(--spark-table-row-sort-arrow-color-hover);
}
.spark-table-cell-align-center {
    text-align: center;
}
.spark-table-cell-align-end {
    text-align: end;
}
.spark-table-cell-align-start {
    text-align: start;
}
.spark-table-cell {
    block-size: var(--spark-table-cell-min-block-size);
    box-sizing: border-box;
    line-height: var(--spark-table-cell-text-line-height);
    padding-inline: var(--spark-table-cell-padding-inline);
}
.spark-table-row {
    color: var(--spark-table-row-text-color);
    cursor: pointer;
    position: relative;
    box-shadow: inset var(--spark-table-box-shadow-x) var(--spark-table-box-shadow-y)
        var(--spark-table-box-shadow-blur-radius) var(--spark-table-row-normal-border);
    background-color: var(--spark-table-row-normal-background-color);
}
.spark-table-rows-select {
    border-radius: var(--spark-table-rows-select-border-radius);
}
.spark-table-rows-select-checkbox {
    margin: var(--spark-table-row-select-checkbox-block-size)
        var(--spark-table-row-select-checkbox-inline-size);
    accent-color: var(--spark-table-row-select-checkbox-color);
    border-radius: var(--spark-table-rows-select-checkbox-border-radius);
}
.spark-table-rows-sorted {
    color: var(--spark-table-row-sort-arrow-color-hover);
}
.spark-table-rows-sub-row-item {
    width: var(--spark-table-rows-sub-row-item-width);
}
.spark-table-size-s .spark-table-head {
    font-size: var(--spark-table-s-text-size);
    block-size: var(--spark-table-s-min-block);
    padding-inline: var(--spark-table-s-cell-padding-block);
}
.spark-table-size-s .spark-table-cell {
    font-size: var(--spark-table-s-text-size);
    block-size: var(--spark-table-s-min-block);
    padding-inline: var(--spark-table-s-cell-padding-block);
}
.spark-table-size-s .spark-table-head-cell {
    font-size: var(--spark-table-s-text-size);
    block-size: var(--spark-table-s-min-block);
    padding-inline: var(--spark-table-s-cell-padding-block);
}
.spark-table-size-s.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-s.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-s-sort-padding-block);
}
.spark-table-size-s.spark-table-minimal .active-sort {
    margin: var(--spark-table-s-sort-margin-block) 0;
    padding: var(--spark-table-s-sort-padding-block);
}
.spark-table-size-m .spark-table-head {
    font-size: var(--spark-table-m-text-size);
    block-size: var(--spark-table-m-min-block);
    padding-inline: var(--spark-table-m-cell-padding-block);
}
.spark-table-size-m .spark-table-cell {
    font-size: var(--spark-table-m-text-size);
    block-size: var(--spark-table-m-min-block);
    padding-inline: var(--spark-table-m-cell-padding-block);
}
.spark-table-size-m .spark-table-head-cell {
    font-size: var(--spark-table-m-text-size);
    block-size: var(--spark-table-m-min-block);
    padding-inline: var(--spark-table-m-cell-padding-block);
}
.spark-table-size-m.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-m.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-m-sort-padding-block);
}
.spark-table-size-m.spark-table-minimal .active-sort {
    margin: var(--spark-table-m-sort-margin-block) 0;
    padding: var(--spark-table-m-sort-padding-block);
}
.spark-table-size-l .spark-table-head {
    font-size: var(--spark-table-l-text-size);
    block-size: var(--spark-table-l-min-block);
    padding-inline: var(--spark-table-l-cell-padding-block);
}
.spark-table-size-l .spark-table-cell {
    font-size: var(--spark-table-l-text-size);
    block-size: var(--spark-table-l-min-block);
    padding-inline: var(--spark-table-l-cell-padding-block);
}
.spark-table-size-l .spark-table-head-cell {
    font-size: var(--spark-table-l-text-size);
    block-size: var(--spark-table-l-min-block);
    padding-inline: var(--spark-table-l-cell-padding-block);
}
.spark-table-size-l.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-l.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-l-sort-padding-block);
}
.spark-table-size-l.spark-table-minimal .active-sort {
    margin: var(--spark-table-l-sort-margin-block) 0;
    padding: var(--spark-table-l-sort-padding-block);
}
.spark-table-size-xl .spark-table-head {
    font-size: var(--spark-table-xl-text-size);
    block-size: var(--spark-table-xl-min-block);
    padding-inline: var(--spark-table-xl-cell-padding-block);
}
.spark-table-size-xl .spark-table-cell {
    font-size: var(--spark-table-xl-text-size);
    block-size: var(--spark-table-xl-min-block);
    padding-inline: var(--spark-table-xl-cell-padding-block);
}
.spark-table-size-xl .spark-table-head-cell {
    font-size: var(--spark-table-xl-text-size);
    block-size: var(--spark-table-xl-min-block);
    padding-inline: var(--spark-table-xl-cell-padding-block);
}
.spark-table-size-xl.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-xl.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-xl-sort-padding-block);
}
.spark-table-size-xl.spark-table-minimal .active-sort {
    margin: var(--spark-table-xl-sort-margin-block) 0;
    padding: var(--spark-table-xl-sort-padding-block);
}
.spark-table-size-2xl .spark-table-head {
    font-size: var(--spark-table-2xl-text-size);
    block-size: var(--spark-table-2xl-min-block);
    padding-inline: var(--spark-table-2xl-cell-padding-block);
}
.spark-table-size-2xl .spark-table-cell {
    font-size: var(--spark-table-2xl-text-size);
    block-size: var(--spark-table-2xl-min-block);
    padding-inline: var(--spark-table-2xl-cell-padding-block);
}
.spark-table-size-2xl .spark-table-head-cell {
    font-size: var(--spark-table-2xl-text-size);
    block-size: var(--spark-table-2xl-min-block);
    padding-inline: var(--spark-table-2xl-cell-padding-block);
}
.spark-table-size-2xl.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-2xl.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-2xl-sort-padding-block);
}
.spark-table-size-2xl.spark-table-minimal .active-sort {
    margin: var(--spark-table-2xl-sort-margin-block) 0;
    padding: var(--spark-table-2xl-sort-padding-block);
}
.spark-table-size-3xl .spark-table-head {
    font-size: var(--spark-table-3xl-text-size);
    block-size: var(--spark-table-3xl-min-block);
    padding-inline: var(--spark-table-3xl-cell-padding-block);
}
.spark-table-size-3xl .spark-table-cell {
    font-size: var(--spark-table-3xl-text-size);
    block-size: var(--spark-table-3xl-min-block);
    padding-inline: var(--spark-table-3xl-cell-padding-block);
}
.spark-table-size-3xl .spark-table-head-cell {
    font-size: var(--spark-table-3xl-text-size);
    block-size: var(--spark-table-3xl-min-block);
    padding-inline: var(--spark-table-3xl-cell-padding-block);
}
.spark-table-size-3xl.spark-table-minimal .spark-table-head-cell-box,
.spark-table-size-3xl.spark-table-minimal .spark-table-cell-box {
    padding: 0 var(--spark-table-3xl-sort-padding-block);
}
.spark-table-size-3xl.spark-table-minimal .active-sort {
    margin: var(--spark-table-3xl-sort-margin-block) 0;
    padding: var(--spark-table-3xl-sort-padding-block);
}
.spark-table {
    inline-size: var(--spark-table-width);
    border-spacing: var(--spark-table-border-spacing);
    padding-bottom: var(--spark-table-padding-bottom);
}
.spark-table .spark-pagination-list {
    display: flex;
    justify-content: end;
}
.spark-table .spark-pagination-list .spark-button-content {
    font-weight: 500;
}
.spark-table .spark-pagination-list .spark-button-active .spark-button-content {
    font-weight: 600;
}
.spark-table .spark-table-row:focus-visible,
.spark-table.spark-table-rows-zebra tr:nth-child(even):focus-visible {
    outline: none;
    background: var(--spark-table-cell-background-color-focus);
}
.spark-table .spark-table-minimal .spark-table-rows-sub-row-item {
    box-shadow: 0 0 0 0.0625rem var(--spark-table-minimal-line-color);
}
.spark-table .spark-table-rows-sub-row-item table {
    width: var(--spark-table-rows-sub-row-item-width-table);
    display: var(--spark-table-rows-sub-row-item-display-table);
}
.spark-table .spark-table-rows-sub-row-item .subrow-cell {
    padding: var(--spark-table-rows-sub-row-item-padding);
}
.spark-table .spark-table-rows-selected .spark-table-cell {
    box-shadow: inset var(--spark-table-box-shadow-x) var(--spark-table-box-shadow-y)
        var(--spark-table-box-shadow-blur-radius) var(--spark-table-row-normal-border);
    background-color: var(--spark-table-row-select-background-color);
}
.spark-table .spark-table-rows-sort {
    top: var(--spark-table-row-sort-top);
    color: var(--spark-table-row-sort-arrow-color);
    display: inline-block;
    position: relative;
    font-size: var(--spark-table-row-sort-arrow-size);
    inline-size: var(--spark-table-row-sort-arrow-width);
    line-height: var(--spark-table-row-sort-line-height);
    padding-inline-start: var(--spark-table-row-sort-padding-inline-start);
}
.spark-table .spark-table-rows-sort-up,
.spark-table.spark-table-rows-sort-down {
    color: var(--spark-table-row-sort-arrow-color-hover);
    font-size: var(--spark-table-row-sort-arrow-size);
    padding-inline-start: var(--spark-table-row-sort-padding-inline-start);
}
.spark-table .spark-table-rows-sort .icon {
    line-height: 0.55;
}
.spark-table .spark-table-rows-sort input {
    inline-size: var(--spark-table-input-inline-size);
}
.spark-table.spark-table-rows-select-checkbox:hover {
    accent-color: var(--spark-table-row-select-background-color);
}
.spark-table.spark-table-rows-select-checkbox:hover:active {
    accent-color: var(--spark-table-row-select-checkbox-color);
}
.spark-table.spark-table-rows-zebra tr:nth-child(even) {
    box-shadow: inset var(--spark-table-box-shadow-x) var(--spark-table-box-shadow-y)
        var(--spark-table-box-shadow-blur-radius) rgba(43, 44, 48, 0.12);
    background-color: var(--spark-table-row-background-color-hover);
}
.spark-table.spark-table-outline .spark-table-head-cell,
.spark-table.spark-table-outline .spark-table-cell {
    border: var(--spark-table-border) solid;
    border-color: var(--spark-table-outline-border);
}
.spark-table.spark-table-outline-bold .spark-table-head-cell {
    border-block-end: var(--spark-table-border) solid var(--spark-table-outline-border);
    border-inline-end: var(--spark-table-border) solid var(--spark-table-outline-border);
    border-inline-start: var(--spark-table-border) solid var(--spark-table-outline-border);
}
.spark-table.spark-table-outline-bold .spark-table-cell {
    border-inline-end: var(--spark-table-border) solid var(--spark-table-outline-border);
    border-block-start: var(--spark-table-border) solid var(--spark-table-outline-border);
    border-inline-start: var(--spark-table-border) solid var(--spark-table-outline-border);
}
.spark-table.spark-table-outline-bold .spark-table-cell:nth-child(1),
.spark-table.spark-table-outline-bold .spark-table-head-cell:nth-child(1) {
    border-inline-start: var(--spark-table-border) solid var(--spark-table-outline-bold-border);
}
.spark-table.spark-table-outline-bold .spark-table-cell:nth-last-child(odd),
.spark-table.spark-table-outline-bold .spark-table-head-cell:nth-last-child(odd) {
    border-inline-end: var(--spark-table-border) solid var(--spark-table-outline-bold-border);
}
.spark-table.spark-table-outline-bold .spark-table-head tr:nth-child(1) {
    border-block-start: var(--spark-table-border) solid var(--spark-table-outline-bold-border);
}
.spark-table.spark-table-outline-bold .spark-table-row:nth-last-child(1) {
    border-block-end: var(--spark-table-border) solid var(--spark-table-outline-bold-border);
}
.spark-table.spark-table-minimal .spark-table-row,
.spark-table.spark-table-minimal .spark-table-head {
    border: solid 0.25rem var(--spark-table-normal-border);
    box-shadow: 0 0 0 0.0625rem var(--spark-table-minimal-line-color);
}
.spark-table.spark-table-minimal .spark-table-head-cell-box-sort {
    width: max-content;
}
.spark-table.spark-table-minimal .spark-pagination-list .spark-button {
    background: white;
    border-color: var(--spark-table-normal-border);
}
.spark-table.spark-table-minimal .spark-table-head-cell-box {
    width: auto;
}
.spark-table.spark-table-minimal .spark-table-head-cell-box-sort:hover {
    background: var(--spark-table-minimal-background-color-hover);
}
.spark-table.spark-table-minimal .spark-table-head-cell {
    background: white;
    font-weight: 500;
    border-bottom: solid 0.0625rem var(--spark-table-normal-border);
}
.spark-table.spark-table-rows-sort .caret-up-select,
.spark-table.spark-table-rows-sort .caret-down-select {
    color: var(--spark-table-minimal-link-color);
}
.spark-table.spark-table-minimal .spark-table-row:hover {
    background-color: var(--spark-table-minimal-background-color-row-hover);
}
.spark-table.spark-table-size-s
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line,
.spark-table.spark-table-size-m
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line {
    display: none;
}
.spark-table.spark-table-size-l
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line,
.spark-table.spark-table-size-xl
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line,
.spark-table.spark-table-size-2xl
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line,
.spark-table.spark-table-size-3xl
    .spark-table-body
    .spark-table-row
    .spark-table-cell
    .spark-table-cell-second-line {
    display: block;
}

/* ---- components/table/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-table-width: 100%;
    --spark-table-border-spacing: 0rem;
    --spark-table-outline-border-width: 0.0625rem;
    --spark-table-outline-border-spacing: 0.0625rem;
    --spark-table-box-shadow-x: 0rem;
    --spark-table-box-shadow-y: -0.0625rem;
    --spark-table-box-shadow-blur-radius: 0rem;
    --spark-table-head-cell-min-inline-size: 13.75rem;
    --spark-table-head-text-size: 0.875rem;
    --spark-table-head-text-line-height: 1.125rem;
    --spark-table-head-min-block-size: 2rem;
    --spark-table-head-padding-inline: 0.5rem;
    --spark-table-head-padding-block: 0.4375rem;
    --spark-table-row-sort-arrow-size: 0.75rem;
    --spark-table-row-sort-arrow-width: 0.9375rem;
    --spark-table-cell-min-block-size: 2rem;
    --spark-table-cell-padding-inline: 0.5rem;
    --spark-table-cell-padding-block: 0.4375rem;
    --spark-table-cell-text-line-height: 1.125rem;
    --spark-table-cell-text-size: 0.875rem;
    --spark-table-border: 0.0625rem;
    --spark-table-padding-bottom: 0.625rem;
    --spark-table-rows-sort-up-padding-left: 0.1875rem;
    --spark-table-rows-sort-down-padding-left: 0.1875rem;
    --spark-table-rows-select-border-radius: 0rem;
    --spark-table-rows-select-checkbox-border-radius: 0rem;
    --spark-table-row-sort-padding-inline-start: 0.1875rem;
    --spark-table-row-select-checkbox-inline-size: 0rem;
    --spark-table-row-select-checkbox-block-size: 0.1875rem;
    --spark-table-input-inline-size: 0.625rem;
    --spark-table-rows-sub-row-item-padding: 1.25rem;
    --spark-table-rows-sub-row-item-width: 100%;
    --spark-table-rows-sub-row-item-display: block;
    --spark-table-rows-sub-row-item-width-table: 100%;
    --spark-table-rows-sub-row-item-display-table: table;
    --spark-table-rows-sub-row-box-sizing: border-box;
    --spark-table-row-sort-line-height: 0.4375rem;
    --spark-table-row-sort-top: 0.25rem;
    --spark-table-s-text-size: 0.75rem;
    --spark-table-s-min-block: 1.5rem;
    --spark-table-s-head-padding-block: 0.1875rem;
    --spark-table-s-cell-padding-block: 0.1875rem;
    --spark-table-s-sort-padding-block: 0.1875rem;
    --spark-table-s-sort-margin-block: 0.125rem;
    --spark-table-m-text-size: 0.875rem;
    --spark-table-m-min-block: 2rem;
    --spark-table-m-head-padding-block: 0.5rem;
    --spark-table-m-cell-padding-block: 0.5rem;
    --spark-table-m-sort-padding-block: 0.3125rem;
    --spark-table-m-sort-margin-block: 0.1875rem;
    --spark-table-l-text-size: 0.875rem;
    --spark-table-l-min-block: 2.5rem;
    --spark-table-l-head-padding-block: 0.9375rem;
    --spark-table-l-cell-padding-block: 0.9375rem;
    --spark-table-l-sort-padding-block: 0.5rem;
    --spark-table-l-sort-margin-block: 0.1875rem;
    --spark-table-xl-text-size: 0.875rem;
    --spark-table-xl-min-block: 3rem;
    --spark-table-xl-head-padding-block: 1.25rem;
    --spark-table-xl-cell-padding-block: 1.25rem;
    --spark-table-xl-sort-padding-block: 0.625rem;
    --spark-table-xl-sort-margin-block: 0.1875rem;
    --spark-table-2xl-text-size: 0.875rem;
    --spark-table-2xl-min-block: 3.5rem;
    --spark-table-2xl-head-padding-block: 1.5625rem;
    --spark-table-2xl-cell-padding-block: 1.5625rem;
    --spark-table-2xl-sort-padding-block: 0.75rem;
    --spark-table-2xl-sort-margin-block: 0.1875rem;
    --spark-table-3xl-text-size: 0.875rem;
    --spark-table-3xl-min-block: 4rem;
    --spark-table-3xl-head-padding-block: 1.875rem;
    --spark-table-3xl-cell-padding-block: 1.875rem;
    --spark-table-3xl-sort-padding-block: 0.9375rem;
    --spark-table-3xl-sort-margin-block: 0.1875rem;
}

/* ---- components/table/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-table-head-background-color: var(--spark-color-theme-light-gray75, #f9f9f9);
    --spark-table-row-normal-background-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-table-row-background-color-hover: rgba(43, 44, 48, 0.03);
    --spark-table-row-sort-arrow-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-hover: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-up: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-down: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-zebra-background-color: rgba(43, 44, 48, 0.02);
    --spark-table-row-select-background-color: rgba(226, 226, 228, 1);
    --spark-table-row-select-checkbox-color: var(--spark-color-classic-blue, #0054ae);
    --spark-table-head-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-table-row-normal-border: rgba(43, 44, 48, 0.12);
    --spark-table-head-normal-border: rgba(43, 44, 48, 0.34);
    --spark-table-row-background-bolor-hover: rgba(43, 44, 48, 0.03);
    --spark-table-normal-border: rgba(43, 44, 48, 0.12);
    --spark-table-outline-border: rgba(43, 44, 48, 0.12);
    --spark-table-outline-bold-border: rgba(43, 44, 48, 0.34);
    --spark-table-cell-zebra-background-color: rgba(43, 44, 48, 0.02);
    --spark-table-cell-background-color-focus: rgba(0, 153, 236, 0.3);
    --spark-table-minimal-link-color: var(--spark-color-classic-blue, #0054ae);
    --spark-table-minimal-background-color-row-hover: rgba(244, 245, 245, 1);
    --spark-table-minimal-background-color-hover: rgba(233, 234, 235, 1);
    --spark-table-minimal-line-color: rgba(226, 226, 228, 1);
    --spark-table-min-link-active: rgba(0, 153, 236, 1);
    --spark-table-row-text-color: var(--spark-color-theme-dark-gray50, #242528);
}

/* ---- components/table/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-table-head-background-color: var(--spark-color-theme-dark-gray75, #2e2f32);
    --spark-table-row-normal-background-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-table-row-background-color-hover: rgba(255, 255, 255, 0.06);
    --spark-table-row-sort-arrow-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-hover: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-up: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-sort-arrow-color-down: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-table-row-zebra-background-color: rgba(255, 255, 255, 0.02);
    --spark-table-row-select-background-color: rgba(226, 226, 228, 1);
    --spark-table-row-select-checkbox-color: var(--spark-color-classic-blue, #0054ae);
    --spark-table-head-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-table-row-normal-border: rgba(255, 255, 255, 0.12);
    --spark-table-head-normal-border: rgba(255, 255, 255, 0.34);
    --spark-table-row-background-bolor-hover: rgba(255, 255, 255, 0.06);
    --spark-table-normal-border: rgba(43, 44, 48, 0.12);
    --spark-table-outline-border: rgba(255, 255, 255, 0.12);
    --spark-table-outline-bold-border: rgba(255, 255, 255, 0.34);
    --spark-table-cell-zebra-background-color: rgba(255, 255, 255, 0.02);
    --spark-table-cell-background-color-focus: rgba(0, 153, 236, 0.3);
    --spark-table-minimal-link-color: var(--spark-color-classic-blue, #0054ae);
    --spark-table-minimal-background-color-row-hover: rgba(244, 245, 245, 1);
    --spark-table-minimal-background-color-hover: rgba(233, 234, 235, 1);
    --spark-table-minimal-line-color: rgba(226, 226, 228, 1);
    --spark-table-min-link-active: rgba(0, 153, 236, 1);
    --spark-table-row-text-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-table-normal-norder: rgba(255, 255, 255, 0.12);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/tabs/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-tabs-tab {
    border: none;
    cursor: pointer;
    display: flex;
    position: relative;
    background: transparent;
    align-items: center;
    font-weight: var(--spark-tabs-font-weight);
    justify-content: center;
    max-inline-size: var(--spark-tabs-tab-max-with);
    text-decoration: none;
}
.spark-tabs-tab-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.spark-tabs-disabled {
    color: var(--spark-tabs-color-disabled);
    cursor: initial;
}
.spark-tabs-icon {
    margin-inline-end: var(--spark-tabs-icon-gap);
}
.spark-tabs-close {
    margin-inline-start: var(--spark-tabs-icon-gap);
}
.spark-tabs-scrollbar {
    padding: var(--spark-tabs-scrollbar-padding);
}
.spark-tabs-size-l .spark-tabs-tab {
    font-size: var(--spark-tabs-size-l-font-size);
    block-size: var(--spark-tabs-size-l-block-size);
}
.spark-tabs-size-l .spark-tabs-tab.spark-tabs-icon-only .spark-button-start-slot {
    padding-inline: var(--spark-tabs-block-l-icon-only-gap);
}
.spark-tabs-size-l.spark-tabs-ghost .spark-tabs-tab {
    padding-inline: var(--spark-tabs-ghost-l-padding-inline);
}
.spark-tabs-size-l.spark-tabs-ghost .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-ghost-gap);
}
.spark-tabs-size-l.spark-tabs-ghost .spark-tabs-active:after {
    left: var(--spark-tabs-ghost-l-padding-inline);
    right: var(--spark-tabs-ghost-l-padding-inline);
}
.spark-tabs-size-l.spark-tabs-block .spark-tabs-tab {
    align-items: center;
}
.spark-tabs-size-l.spark-tabs-block .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-block-l-gap);
}
.spark-tabs-size-m .spark-tabs-tab {
    font-size: var(--spark-tabs-size-m-font-size);
    block-size: var(--spark-tabs-size-m-block-size);
}
.spark-tabs-size-m .spark-tabs-tab.spark-tabs-icon-only .spark-button-start-slot {
    padding-inline: var(--spark-tabs-block-m-icon-only-gap);
}
.spark-tabs-size-m.spark-tabs-ghost .spark-tabs-tab {
    padding-inline: var(--spark-tabs-ghost-m-padding-inline);
}
.spark-tabs-size-m.spark-tabs-ghost .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-ghost-gap);
}
.spark-tabs-size-m.spark-tabs-ghost .spark-tabs-active:after {
    left: var(--spark-tabs-ghost-m-padding-inline);
    right: var(--spark-tabs-ghost-m-padding-inline);
}
.spark-tabs-size-m.spark-tabs-block .spark-tabs-tab {
    align-items: center;
}
.spark-tabs-size-m.spark-tabs-block .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-block-m-gap);
}
.spark-tabs-size-s .spark-tabs-tab {
    font-size: var(--spark-tabs-size-s-font-size);
    block-size: var(--spark-tabs-size-s-block-size);
}
.spark-tabs-size-s .spark-tabs-tab.spark-tabs-icon-only .spark-button-start-slot {
    padding-inline: var(--spark-tabs-block-s-icon-only-gap);
}
.spark-tabs-size-s.spark-tabs-ghost .spark-tabs-tab {
    padding-inline: var(--spark-tabs-ghost-s-padding-inline);
}
.spark-tabs-size-s.spark-tabs-ghost .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-ghost-gap);
}
.spark-tabs-size-s.spark-tabs-ghost .spark-tabs-active:after {
    left: var(--spark-tabs-ghost-s-padding-inline);
    right: var(--spark-tabs-ghost-s-padding-inline);
}
.spark-tabs-size-s.spark-tabs-block .spark-tabs-tab {
    align-items: center;
}
.spark-tabs-size-s.spark-tabs-block .spark-tabs-tab + .spark-tabs-tab {
    margin-inline-start: var(--spark-tabs-block-s-gap);
}
.spark-tabs {
    display: flex;
    min-inline-size: max-content;
}
.spark-tabs .spark-tabs-tab .spark-button-content {
    color: var(--spark-tabs-color);
}
.spark-tabs .spark-tabs-tab .spark-button-content .spark-badge {
    margin-inline-start: var(--spark-tabs-badge-start);
}
.spark-tabs .spark-tabs-tab .spark-button-start-slot,
.spark-tabs .spark-tabs-tab .spark-button-end-slot {
    color: var(--spark-tabs-color);
}
.spark-tabs.spark-tabs-block {
    background: var(--spark-tabs-color-background);
    box-shadow: var(--spark-tabs-box-shadow-x) var(--spark-tabs-block-box-shadow-y)
        var(--spark-tabs-box-shadow-blur-radius) var(--spark-tabs-box-shadow-spread-radius)
        var(--spark-tabs-color-active-background);
    padding-block-start: var(--spark-tabs-block-padding-gap);
    padding-inline-start: var(--spark-tabs-block-padding-gap);
}
.spark-tabs.spark-tabs-ghost {
    box-shadow: var(--spark-tabs-box-shadow-x) var(--spark-tabs-box-shadow-y)
        var(--spark-tabs-box-shadow-blur-radius) var(--spark-tabs-box-shadow-spread-radius)
        var(--spark-tabs-color-ghost-border);
}
.spark-tabs.spark-tabs-ghost .spark-tabs-active .spark-button-start-slot,
.spark-tabs.spark-tabs-ghost .spark-tabs-active .spark-button-end-slot,
.spark-tabs.spark-tabs-ghost .spark-tabs-active .spark-button-content {
    color: var(--spark-tabs-color-active);
}
.spark-tabs.spark-tabs-ghost .spark-tabs-active:after {
    content: '';
    position: absolute;
    block-size: var(--spark-tabs-active-border-thin);
    inset-block-end: var(--spark-tabs-inset-block-end);
    background-color: var(--spark-tabs-color-active-border);
    margin-block-end: var(--spark-tabs-active-margin-end);
}
.spark-tabs.spark-tabs-ghost .spark-tabs-disabled:after {
    background-color: var(--spark-tabs-color-disabled-border);
}
.spark-tabs.spark-tabs-block .spark-tabs-active {
    color: var(--spark-tabs-color-active);
    box-shadow: inset var(--spark-tabs-box-shadow-x) var(--spark-tabs-active-border-thin)
        var(--spark-tabs-box-shadow-blur-radius) var(--spark-tabs-box-shadow-spread-radius)
        var(--spark-tabs-color-active-border) !important;
    background-color: var(--spark-tabs-color-active-background);
}
.spark-tabs.spark-tabs-block .spark-tabs-active .spark-button-start-slot,
.spark-tabs.spark-tabs-block .spark-tabs-active .spark-button-end-slot,
.spark-tabs.spark-tabs-block .spark-tabs-active .spark-button-content {
    color: var(--spark-tabs-color-active);
}
.spark-tabs.spark-tabs-block .spark-tabs-disabled {
    background-color: var(--spark-tabs-color-background);
}
.spark-tabs.spark-tabs-block .spark-tabs-disabled.spark-tabs-active {
    box-shadow: inset var(--spark-tabs-box-shadow-x) var(--spark-tabs-active-border-thin)
        var(--spark-tabs-box-shadow-blur-radius) var(--spark-tabs-box-shadow-spread-radius)
        var(--spark-tabs-color-disabled-border);
    background-color: var(--spark-tabs-color-disabled-background);
}
.spark-tabs .spark-tabs-tab:not(.spark-tabs-disabled):not(.spark-tabs-active):hover {
    background-color: var(--spark-tabs-color-hover-background);
}
.spark-tabs .spark-tabs-tab:not(.spark-tabs-disabled):not(.spark-tabs-active):focus {
    background-color: var(--spark-tabs-color-hover-background);
}

/* ---- components/tabs/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-tabs-font-weight: 500;
    --spark-tabs-active-border-thin: 0.125rem;
    --spark-tabs-active-margin-end: 0.0625rem;
    --spark-tabs-tab-max-with: 25rem;
    --spark-tabs-icon-gap: 0.25rem;
    --spark-tabs-badge-gap: 0.25rem;
    --spark-tabs-badge-start: 0.25rem;
    --spark-tabs-zero-gap: 0rem;
    --spark-tabs-box-shadow-x: 0rem;
    --spark-tabs-box-shadow-blur-radius: 0rem;
    --spark-tabs-box-shadow-spread-radius: 0rem;
    --spark-tabs-box-shadow-y: 0.0625rem;
    --spark-tabs-block-box-shadow-y: 0.125rem;
    --spark-tabs-inset-block-end: -0.0625rem;
    --spark-tabs-box-shadow-zero: 0rem;
    --spark-tabs-scrollbar-padding: 0rem;
    --spark-tabs-size-l-block-size: auto;
    --spark-tabs-size-l-font-size: 1rem;
    --spark-tabs-size-l-line-height: 1.125rem;
    --spark-tabs-size-m-block-size: auto;
    --spark-tabs-size-m-font-size: 0.875rem;
    --spark-tabs-size-s-block-size: auto;
    --spark-tabs-size-s-font-size: 0.75rem;
    --spark-tabs-block-padding-gap: 0.25rem;
    --spark-tabs-block-l-icon-only-gap: 0rem;
    --spark-tabs-block-l-icon-padding-end: 0.5rem;
    --spark-tabs-block-l-padding-inline: 1rem;
    --spark-tabs-block-l-gap: 0.25rem;
    --spark-tabs-block-l-gap-thin: 0rem;
    --spark-tabs-block-l-inverse-gap: -0.25rem;
    --spark-tabs-block-m-icon-only-gap: 0rem;
    --spark-tabs-block-m-icon-padding-end: 0rem;
    --spark-tabs-block-m-padding-inline: 0.75rem;
    --spark-tabs-block-m-gap: 0.25rem;
    --spark-tabs-block-m-gap-thin: 0.0625rem;
    --spark-tabs-block-m-inverse-gap: -0.25rem;
    --spark-tabs-block-s-icon-only-gap: 0rem;
    --spark-tabs-block-s-icon-padding-end: 0rem;
    --spark-tabs-block-s-padding-inline: 0.5rem;
    --spark-tabs-block-s-gap: 0.125rem;
    --spark-tabs-block-s-gap-thin: 0.125rem;
    --spark-tabs-block-s-inverse-gap: -0.125rem;
    --spark-tabs-ghost-gap: 0.0625rem;
    --spark-tabs-ghost-l-padding-inline: 0.75rem;
    --spark-tabs-ghost-m-padding-inline: 0.5rem;
    --spark-tabs-ghost-s-padding-inline: 0.375rem;
}

/* ---- components/tabs/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-tabs-color: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-tabs-color-active: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-tabs-color-active-border: var(--spark-color-classic-blue, #0054ae);
    --spark-tabs-color-active-background: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tabs-color-disabled: var(--spark-color-theme-light-gray600, #8b8e97);
    --spark-tabs-color-disabled-border: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-tabs-color-disabled-background: var(--spark-color-theme-light-gray100, #f4f5f5);
    --spark-tabs-color-background: var(--spark-color-theme-light-gray100, #f4f5f5);
    --spark-tabs-color-ghost-border: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-tabs-color-hover-background: var(--spark-color-theme-light-gray200, #e9eaeb);
}

/* ---- components/tabs/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-tabs-color: var(--spark-color-theme-dark-gray700, #b7b9be);
    --spark-tabs-color-active: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-tabs-color-active-border: var(--spark-color-energy-blue, #00c7fd);
    --spark-tabs-color-active-background: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-tabs-color-disabled: var(--spark-color-theme-dark-gray600, #8e9099);
    --spark-tabs-color-disabled-border: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-tabs-color-disabled-background: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-tabs-color-background: var(--spark-color-theme-dark-gray50, #242528);
    --spark-tabs-color-ghost-border: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-tabs-color-hover-background: var(--spark-color-theme-dark-gray200, #3c3e42);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/tag/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-tag-button-wrapper {
    border: none;
    cursor: pointer;
    margin: var(--spark-tag-button-wrapper-margin);
    display: flex;
    outline: var(--spark-tag-button-wrapper-outline);
    padding: var(--spark-tag-button-wrapper-padding);
    background: transparent;
    text-decoration: none;
}
.spark-tag-theme-none.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-classic.spark-tag-action {
    background: var(--spark-tag-theme-classic-color);
}
.spark-tag-theme-classic.spark-tag .spark-icon {
    color: var(--spark-tag-theme-classic-color);
}
.spark-tag-theme-classic.spark-tag-action:hover,
.spark-tag-theme-classic.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-classic-hover);
}
.spark-tag-theme-classic.spark-tag-action:active {
    background: var(--spark-tag-theme-classic-active);
}
.spark-tag-theme-classic.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-geode.spark-tag-action {
    background: var(--spark-tag-theme-geode-color);
}
.spark-tag-theme-geode.spark-tag .spark-icon {
    color: var(--spark-tag-theme-geode-color);
}
.spark-tag-theme-geode.spark-tag-action:hover,
.spark-tag-theme-geode.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-geode-hover);
}
.spark-tag-theme-geode.spark-tag-action:active {
    background: var(--spark-tag-theme-geode-active);
}
.spark-tag-theme-geode.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-moss.spark-tag-action {
    background: var(--spark-tag-theme-moss-color);
}
.spark-tag-theme-moss.spark-tag .spark-icon {
    color: var(--spark-tag-theme-moss-color);
}
.spark-tag-theme-moss.spark-tag-action:hover,
.spark-tag-theme-moss.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-moss-hover);
}
.spark-tag-theme-moss.spark-tag-action:active {
    background: var(--spark-tag-theme-moss-active);
}
.spark-tag-theme-moss.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-rust.spark-tag-action {
    background: var(--spark-tag-theme-rust-color);
}
.spark-tag-theme-rust.spark-tag .spark-icon {
    color: var(--spark-tag-theme-rust-color);
}
.spark-tag-theme-rust.spark-tag-action:hover,
.spark-tag-theme-rust.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-rust-hover);
}
.spark-tag-theme-rust.spark-tag-action:active {
    background: var(--spark-tag-theme-rust-active);
}
.spark-tag-theme-rust.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-coral.spark-tag-action {
    background: var(--spark-tag-theme-coral-color);
}
.spark-tag-theme-coral.spark-tag .spark-icon {
    color: var(--spark-tag-theme-coral-color);
}
.spark-tag-theme-coral.spark-tag-action:hover,
.spark-tag-theme-coral.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-coral-hover);
}
.spark-tag-theme-coral.spark-tag-action:active {
    background: var(--spark-tag-theme-coral-active);
}
.spark-tag-theme-coral.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-theme-cobalt.spark-tag-action {
    background: var(--spark-tag-theme-cobalt-color);
}
.spark-tag-theme-cobalt.spark-tag .spark-icon {
    color: var(--spark-tag-theme-cobalt-color);
}
.spark-tag-theme-cobalt.spark-tag-action:hover,
.spark-tag-theme-cobalt.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-cobalt-hover);
}
.spark-tag-theme-cobalt.spark-tag-action:active {
    background: var(--spark-tag-theme-cobalt-active);
}
.spark-tag-theme-cobalt.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-size-small.spark-tag {
    gap: var(--spark-tag-size-small-label-gap);
    padding: var(--spark-tag-size-small-padding);
    font-size: var(--spark-tag-size-small-font-size);
    block-size: var(--spark-tag-size-small-block-size);
    line-height: var(--spark-tag-size-small-line-height);
}
.spark-tag-size-small.spark-tag .spark-icon {
    font-size: var(--spark-tag-size-small-icon-font-size);
}
.spark-tag-size-large.spark-tag {
    gap: var(--spark-tag-size-large-label-gap);
    padding: var(--spark-tag-size-large-padding);
    font-size: var(--spark-tag-size-large-font-size);
    block-size: var(--spark-tag-size-large-block-size);
    line-height: var(--spark-tag-size-large-line-height);
}
.spark-tag-size-large.spark-tag .spark-icon {
    font-size: var(--spark-tag-size-large-icon-font-size);
}
.spark-tag-rounding-semi-round {
    border-radius: var(--spark-tag-rounding-semi-round-border-radius);
}
.spark-tag-rounding-fully-round {
    border-radius: var(--spark-tag-rounding-fully-round-border-radius);
}
.spark-tag-action {
    color: var(--spark-tag-variant-action-text-color);
    background: var(--spark-tag-theme-classic-color);
}
.spark-tag-action.spark-tag .spark-icon {
    color: var(--spark-tag-variant-action-text-color);
}
.spark-tag-action:hover {
    background: var(--spark-tag-theme-classic-hover);
}
.spark-tag-action:active {
    background: var(--spark-tag-theme-classic-active);
}
.spark-tag-action:focus-visible {
    background: var(--spark-tag-theme-classic-hover);
}
.spark-tag-primary {
    border: var(--spark-tag-border) solid var(--spark-tag-variant-primary-border-color);
}
.spark-tag-secondary {
    border: var(--spark-tag-border) solid var(--spark-tag-variant-secondary-border-color);
}
.spark-tag-secondary.spark-tag-theme-none.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            undefined !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-shadow:focus-visible {
    color: var(--spark-tag-focus-border-color);
    background: var(--spark-tag-focus-background-color);
}
.spark-tag-secondary.spark-tag-shadow.is-disabled {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
        var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
        var(--spark-tag-disabled-background-color) !important;
}
.spark-tag-secondary.spark-tag-theme-classic.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-classic-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-classic .spark-icon,
.spark-tag-secondary.spark-tag-classic:focus-visible .spark-icon {
    color: var(--spark-tag-theme-classic-color);
}
.spark-tag-secondary.spark-tag-theme-geode.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-geode-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-geode .spark-icon,
.spark-tag-secondary.spark-tag-geode:focus-visible .spark-icon {
    color: var(--spark-tag-theme-geode-color);
}
.spark-tag-secondary.spark-tag-theme-moss.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-moss-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-moss .spark-icon,
.spark-tag-secondary.spark-tag-moss:focus-visible .spark-icon {
    color: var(--spark-tag-theme-moss-color);
}
.spark-tag-secondary.spark-tag-theme-rust.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-rust-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-rust .spark-icon,
.spark-tag-secondary.spark-tag-rust:focus-visible .spark-icon {
    color: var(--spark-tag-theme-rust-color);
}
.spark-tag-secondary.spark-tag-theme-coral.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-coral-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-coral .spark-icon,
.spark-tag-secondary.spark-tag-coral:focus-visible .spark-icon {
    color: var(--spark-tag-theme-coral-color);
}
.spark-tag-secondary.spark-tag-theme-cobalt.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            var(--spark-tag-variant-secondary-border-color),
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-cobalt-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-secondary.spark-tag-cobalt .spark-icon,
.spark-tag-secondary.spark-tag-cobalt:focus-visible .spark-icon {
    color: var(--spark-tag-theme-cobalt-color);
}
.spark-tag-ghost.spark-tag.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-text-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-none.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            undefined !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-classic.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-classic-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-geode.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-geode-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-moss.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-moss-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-rust.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-rust-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-coral.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-coral-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag-ghost.spark-tag-theme-cobalt.spark-tag-shadow {
    box-shadow: inset var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-one)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-one)
            transparent,
        var(--spark-tag-box-shadow-x) var(--spark-tag-box-shadow-y-two)
            var(--spark-tag-box-shadow-blur-radius) var(--spark-tag-box-shadow-spread-radius-two)
            var(--spark-tag-theme-cobalt-color) !important;
    border-radius: var(--spark-tag-border-radius);
}
.spark-tag {
    gap: var(--spark-tag-label-gap);
    cursor: default;
    display: inline-flex;
    font-size: var(--spark-tag-font-size);
    block-size: var(--spark-tag-block-size);
    align-items: center;
    line-height: var(--spark-tag-line-height);
    flex-direction: row;
    padding-inline: var(--spark-tag-padding);
    vertical-align: middle;
}
.spark-tag .spark-icon {
    color: var(--spark-tag-text-color);
    cursor: pointer;
    line-height: var(--spark-tag-line-height);
}
.spark-tag.is-disabled {
    pointer-events: none;
}
.spark-tag-primary,
.spark-tag-secondary,
.spark-tag-ghost {
    color: var(--spark-tag-text-color);
    background: var(--spark-tag-background-color);
}
.spark-tag.is-disabled,
.spark-tag.is-disabled .spark-icon {
    color: var(--spark-tag-disabled-text-color) !important;
    background: var(--spark-tag-disabled-background-color);
    box-shadow: none !important;
    border-color: var(--spark-tag-disabled-background-color);
}
.spark-tag-primary .spark-icon,
.spark-tag-secondary .spark-icon,
.spark-tag-ghost .spark-icon {
    color: var(--spark-tag-text-color);
}
.spark-tag-primary:hover,
.spark-tag-secondary:hover,
.spark-tag-ghost:hover {
    background: var(--spark-tag-hover-color);
}
.spark-tag-primary:active,
.spark-tag-secondary:active,
.spark-tag-ghost:active {
    background: var(--spark-tag-active-color);
}
.spark-tag-primary:focus-visible,
.spark-tag-secondary:focus-visible,
.spark-tag-ghost:focus-visible {
    color: var(--spark-tag-theme-classic-hover);
    background-color: var(--spark-tag-focus-background-color);
}
.spark-tag-primary:focus-visible .spark-icon,
.spark-tag-secondary:focus-visible .spark-icon,
.spark-tag-ghost:focus-visible .spark-icon {
    color: var(--spark-tag-theme-classic-hover);
}

/* ---- components/tag/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-tag-padding: 0.5rem;
    --spark-tag-label-gap: 0.25rem;
    --spark-tag-font-size: 0.75rem;
    --spark-tag-line-height: 0.9375rem;
    --spark-tag-block-size: 1.5rem;
    --spark-tag-button-wrapper-outline: 0rem;
    --spark-tag-button-wrapper-padding: 0rem;
    --spark-tag-button-wrapper-margin: 0rem;
    --spark-tag-border: 0.0625rem;
    --spark-tag-box-shadow-x: 0rem;
    --spark-tag-box-shadow-y-one: 0rem;
    --spark-tag-box-shadow-blur-radius: 0rem;
    --spark-tag-box-shadow-spread-radius-one: 0.0625rem;
    --spark-tag-box-shadow-y-two: 0.0625rem;
    --spark-tag-box-shadow-spread-radius-two: 0rem;
    --spark-tag-border-radius: 0rem;
    --spark-tag-action-inline-size: 15rem;
    --spark-tag-action-min-inline-size: 3rem;
    --spark-tag-size-small-padding: 0.25rem;
    --spark-tag-size-small-label-gap: 0.125rem;
    --spark-tag-size-small-block-size: 1rem;
    --spark-tag-size-small-font-size: 0.6875rem;
    --spark-tag-size-small-line-height: 0.875rem;
    --spark-tag-size-small-icon-font-size: 0.8125rem;
    --spark-tag-size-large-padding: 0.5rem;
    --spark-tag-size-large-label-gap: 0.25rem;
    --spark-tag-size-large-block-size: 1.5rem;
    --spark-tag-size-large-font-size: 0.75rem;
    --spark-tag-size-large-line-height: 1rem;
    --spark-tag-size-large-icon-font-size: 0.875rem;
    --spark-tag-rounding-semi-round-border-radius: 0.25rem;
    --spark-tag-rounding-fully-round-border-radius: 0.75rem;
}

/* ---- components/tag/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-tag-close-icon-color: var(--spark-color-theme-light-gray600, #8b8e97);
    --spark-tag-background-color: var(--spark-color-transparent, transparent);
    --spark-tag-text-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-tag-hover-color: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-tag-active-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-tag-focus-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tag-focus-background-color: var(--spark-color-transparent, transparent);
    --spark-tag-focus-border-color: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-tag-disabled-background-color: var(--spark-color-theme-light-gray200, #e9eaeb);
    --spark-tag-disabled-text-color: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-tag-variant-action-text-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tag-variant-primary-border-color: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-tag-variant-secondary-border-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-tag-theme-classic-color: var(--spark-color-classic-blue, #0054ae);
    --spark-tag-theme-classic-hover: var(--spark-color-classic-blue-shade1, #00377c);
    --spark-tag-theme-classic-active: var(--spark-color-classic-blue-shade2, #001e50);
    --spark-tag-theme-coral-color: var(--spark-color-coral, #ff5662);
    --spark-tag-theme-coral-hover: var(--spark-color-coral-tint1, #ff848a);
    --spark-tag-theme-coral-active: var(--spark-color-coral-shade1, #c81326);
    --spark-tag-theme-geode-color: var(--spark-color-geode, #8f5da2);
    --spark-tag-theme-geode-hover: var(--spark-color-geode-tint1, #cc94da);
    --spark-tag-theme-geode-active: var(--spark-color-geode-shade1, #653171);
    --spark-tag-theme-moss-color: var(--spark-color-moss, #8bae46);
    --spark-tag-theme-moss-hover: var(--spark-color-moss-shade1, #708541);
    --spark-tag-theme-moss-active: var(--spark-color-moss-shade2, #515a3d);
    --spark-tag-theme-rust-color: var(--spark-color-rust, #e96115);
    --spark-tag-theme-rust-hover: var(--spark-color-rust-tint1, #ff8f51);
    --spark-tag-theme-rust-active: var(--spark-color-rust-shade1, #b24501);
    --spark-tag-theme-cobalt-color: var(--spark-color-cobalt, #1e2eb8);
    --spark-tag-theme-cobalt-hover: var(--spark-color-cobalt-tint1, #5b69ff);
    --spark-tag-theme-cobalt-active: var(--spark-color-cobalt-shade1, #000f8a);
}

/* ---- components/tag/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-tag-close-icon-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tag-background-color: var(--spark-color-transparent, transparent);
    --spark-tag-text-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tag-hover-color: #3c3e42;
    --spark-tag-active-color: #585a62;
    --spark-tag-focus-color: #ffffff;
    --spark-tag-focus-background-color: var(--spark-color-transparent, transparent);
    --spark-tag-focus-border-color: #00c7fd;
    --spark-tag-disabled-background-color: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-tag-disabled-text-color: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-tag-variant-action-text-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-tag-variant-action-background-color: var(--spark-color-energy-blue, #00c7fd);
    --spark-tag-variant-action-hover-background-color: var(
        --spark-color-energy-blue-shade1,
        #0095ca
    );
    --spark-tag-variant-action-active-background-color: var(
        --spark-color-energy-blue-shade2,
        #005b85
    );
    --spark-tag-variant-action-focus-background-color: var(
        --spark-color-energy-blue-shade1,
        #0095ca
    );
    --spark-tag-variant-primary-border-color: #b7b9be;
    --spark-tag-variant-secondary-border-color: #585a62;
    --spark-tag-theme-classic-color: #00c7fd;
    --spark-tag-theme-classic-hover: var(--spark-color-energy-blue-shade1, #0095ca);
    --spark-tag-theme-classic-active: var(--spark-color-energy-blue-shade2, #005b85);
    --spark-tag-theme-coral-color: #ff848a;
    --spark-tag-theme-coral-hover: var(--spark-color-coral, #ff5662);
    --spark-tag-theme-coral-active: var(--spark-color-coral-shade1, #c81326);
    --spark-tag-theme-geode-color: #cc94da;
    --spark-tag-theme-geode-hover: var(--spark-color-geode, #8f5da2);
    --spark-tag-theme-geode-active: var(--spark-color-geode-shade1, #653171);
    --spark-tag-theme-moss-color: #b1d272;
    --spark-tag-theme-moss-hover: var(--spark-color-moss, #8bae46);
    --spark-tag-theme-moss-active: var(--spark-color-moss-shade1, #708541);
    --spark-tag-theme-rust-color: #ff8f51;
    --spark-tag-theme-rust-hover: var(--spark-color-rust, #e96115);
    --spark-tag-theme-rust-active: var(--spark-color-rust-shade1, #b24501);
    --spark-tag-theme-cobalt-color: #5b69ff;
    --spark-tag-theme-cobalt-hover: var(--spark-color-cobalt, #1e2eb8);
    --spark-tag-theme-cobalt-active: var(--spark-color-cobalt-shade1, #000f8a);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/text-field/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-text-field-error-message {
    gap: var(--spark-text-field-label-invalid-space-gap);
    color: var(--spark-text-field-color-invalid);
    display: flex;
    align-items: center;
}
.spark-text-field-error-message .spark-icon {
    color: var(--spark-text-field-color-invalid);
}
.spark-text-field-container {
    gap: var(--spark-text-field-label-space-gap);
    display: flex;
    flex-direction: column;
}
.spark-text-field-size-l {
    max-block-size: var(--spark-text-field-interior-button-size-l-input-block-size);
}
.spark-text-field-size-l.spark-text-field-quiet {
    margin-inline: var(--spark-text-field-quiet-margin-inline);
}
.spark-text-field-size-l:not(.spark-text-field-quiet) [class^='spark-icon'] {
    margin-block: var(--spark-text-field-status-icon-l-margin-block-size);
    margin-inline: var(--spark-text-field-status-icon-l-margin-inline-size);
}
.spark-text-field-size-l:not(.spark-text-field-quiet)
    .spark-text-field-start-slot
    [class^='spark-icon'] {
    margin-block: var(--spark-text-field-start-icon-large-margin-block-size);
    margin-inline: var(--spark-text-field-start-icon-large-margin-inline-size);
}
.spark-text-field-size-l .spark-text-field-interior-button.spark-button.spark-button-icon-only {
    color: var(--spark-text-field-interior-button-color);
    padding: var(--spark-text-field-interior-button-size-l-padding) !important;
    block-size: var(--spark-text-field-interior-button-size-l-block-size);
    box-sizing: border-box;
    align-items: center;
    inline-size: var(--spark-text-field-interior-button-size-l-inline-size);
    margin-block: auto;
    min-block-size: var(--spark-text-field-interior-button-size-l-block-size);
    justify-content: center;
    min-inline-size: var(--spark-text-field-interior-button-size-l-inline-size);
    inset-inline-end: var(--spark-text-field-interior-button-size-l-inset-inline-end);
}
.spark-text-field-size-l
    .spark-text-field-interior-button.spark-button.spark-button-icon-only
    .spark-button-content {
    block-size: var(--spark-text-field-interior-button-size-l-block-size);
    inline-size: var(--spark-text-field-interior-button-size-l-inline-size);
    min-block-size: var(--spark-text-field-interior-button-size-l-block-size);
    min-inline-size: var(--spark-text-field-interior-button-size-l-inline-size);
}
.spark-text-field-size-l
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus {
    color: var(--spark-text-field-interior-button-focus-color);
    background-color: var(--spark-text-field-interior-button-focus-backround-color);
}
.spark-text-field-size-l
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus-visible {
    outline: none;
    box-shadow: none;
}
.spark-text-field-size-l.spark-text-field-quiet
    .spark-text-field-interior-button-presence
    > .spark-icon {
    margin-inline-end: var(--spark-text-field-interior-button-size-l-margin-inline-end);
}
.spark-text-field-size-m {
    max-block-size: var(--spark-text-field-interior-button-size-m-input-block-size);
}
.spark-text-field-size-m.spark-text-field-quiet {
    margin-inline: var(--spark-text-field-quiet-margin-inline);
}
.spark-text-field-size-m:not(.spark-text-field-quiet) [class^='spark-icon'] {
    margin-block: var(--spark-text-field-status-icon-m-margin-block-size);
    margin-inline: var(--spark-text-field-status-icon-m-margin-inline-size);
}
.spark-text-field-size-m:not(.spark-text-field-quiet)
    .spark-text-field-start-slot
    [class^='spark-icon'] {
    margin-block: var(--spark-text-field-start-icon-medium-margin-block-size);
    margin-inline: var(--spark-text-field-start-icon-medium-margin-inline-size);
}
.spark-text-field-size-m .spark-text-field-interior-button.spark-button.spark-button-icon-only {
    color: var(--spark-text-field-interior-button-color);
    padding: var(--spark-text-field-interior-button-size-m-padding) !important;
    block-size: var(--spark-text-field-interior-button-size-m-block-size);
    box-sizing: border-box;
    align-items: center;
    inline-size: var(--spark-text-field-interior-button-size-m-inline-size);
    margin-block: auto;
    min-block-size: var(--spark-text-field-interior-button-size-m-block-size);
    justify-content: center;
    min-inline-size: var(--spark-text-field-interior-button-size-m-inline-size);
    inset-inline-end: var(--spark-text-field-interior-button-size-m-inset-inline-end);
}
.spark-text-field-size-m
    .spark-text-field-interior-button.spark-button.spark-button-icon-only
    .spark-button-content {
    block-size: var(--spark-text-field-interior-button-size-m-block-size);
    inline-size: var(--spark-text-field-interior-button-size-m-inline-size);
    min-block-size: var(--spark-text-field-interior-button-size-m-block-size);
    min-inline-size: var(--spark-text-field-interior-button-size-m-inline-size);
}
.spark-text-field-size-m
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus {
    color: var(--spark-text-field-interior-button-focus-color);
    background-color: var(--spark-text-field-interior-button-focus-backround-color);
}
.spark-text-field-size-m
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus-visible {
    outline: none;
    box-shadow: none;
}
.spark-text-field-size-m.spark-text-field-quiet
    .spark-text-field-interior-button-presence
    > .spark-icon {
    margin-inline-end: var(--spark-text-field-interior-button-size-m-margin-inline-end);
}
.spark-text-field-size-s {
    max-block-size: var(--spark-text-field-interior-button-size-s-input-block-size);
}
.spark-text-field-size-s.spark-text-field-quiet {
    margin-inline: var(--spark-text-field-quiet-margin-inline);
}
.spark-text-field-size-s:not(.spark-text-field-quiet) [class^='spark-icon'] {
    margin-block: var(--spark-text-field-status-icon-s-margin-block-size);
    margin-inline: var(--spark-text-field-status-icon-s-margin-inline-size);
}
.spark-text-field-size-s:not(.spark-text-field-quiet)
    .spark-text-field-start-slot
    [class^='spark-icon'] {
    margin-block: var(--spark-text-field-start-icon-small-margin-block-size);
    margin-inline: var(--spark-text-field-start-icon-small-margin-inline-size);
}
.spark-text-field-size-s .spark-text-field-interior-button.spark-button.spark-button-icon-only {
    color: var(--spark-text-field-interior-button-color);
    padding: var(--spark-text-field-interior-button-size-s-padding) !important;
    block-size: var(--spark-text-field-interior-button-size-s-block-size);
    box-sizing: border-box;
    align-items: center;
    inline-size: var(--spark-text-field-interior-button-size-s-inline-size);
    margin-block: auto;
    min-block-size: var(--spark-text-field-interior-button-size-s-block-size);
    justify-content: center;
    min-inline-size: var(--spark-text-field-interior-button-size-s-inline-size);
    inset-inline-end: var(--spark-text-field-interior-button-size-s-inset-inline-end);
}
.spark-text-field-size-s
    .spark-text-field-interior-button.spark-button.spark-button-icon-only
    .spark-button-content {
    block-size: var(--spark-text-field-interior-button-size-s-block-size);
    inline-size: var(--spark-text-field-interior-button-size-s-inline-size);
    min-block-size: var(--spark-text-field-interior-button-size-s-block-size);
    min-inline-size: var(--spark-text-field-interior-button-size-s-inline-size);
}
.spark-text-field-size-s
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus {
    color: var(--spark-text-field-interior-button-focus-color);
    background-color: var(--spark-text-field-interior-button-focus-backround-color);
}
.spark-text-field-size-s
    .spark-text-field-interior-button.spark-button.spark-button-icon-only:focus-visible {
    outline: none;
    box-shadow: none;
}
.spark-text-field-size-s.spark-text-field-quiet
    .spark-text-field-interior-button-presence
    > .spark-icon {
    margin-inline-end: var(--spark-text-field-interior-button-size-s-margin-inline-end);
}
.spark-text-field-focus-border {
    outline: var(--spark-text-field-focus-outline-width) solid
        var(--spark-text-field-focus-outline-color) !important;
}
.spark-text-field-message {
    color: var(--spark-text-field-color);
    display: block;
    line-height: var(--spark-text-field-line-height);
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-end-slot-2x .spark-input-size-s {
    padding-inline-end: calc(
        var(--spark-text-field-quiet-small-slot-size) +
            var(--spark-text-field-quiet-small-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-quiet-small-slot-size) +
            var(--spark-text-field-quiet-small-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-end-slot-1x .spark-input-size-s {
    padding-inline-end: var(--spark-text-field-quiet-small-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-small-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-start-slot-1x .spark-input-size-s {
    padding-inline-start: var(--spark-text-field-quiet-small-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-s.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-small-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-end-slot-2x .spark-input-size-m {
    padding-inline-end: calc(
        var(--spark-text-field-quiet-medium-slot-size) +
            var(--spark-text-field-quiet-medium-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-quiet-medium-slot-size) +
            var(--spark-text-field-quiet-medium-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-end-slot-1x .spark-input-size-m {
    padding-inline-end: var(--spark-text-field-quiet-medium-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-medium-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-start-slot-1x .spark-input-size-m {
    padding-inline-start: var(--spark-text-field-quiet-medium-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-m.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-medium-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-end-slot-2x .spark-input-size-l {
    padding-inline-end: calc(
        var(--spark-text-field-quiet-large-slot-size) +
            var(--spark-text-field-quiet-large-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-quiet-large-slot-size) +
            var(--spark-text-field-quiet-large-slot-size)
    );
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-end-slot-1x .spark-input-size-l {
    padding-inline-end: var(--spark-text-field-quiet-large-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-large-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-start-slot-1x .spark-input-size-l {
    padding-inline-start: var(--spark-text-field-quiet-large-slot-size);
}
.spark-text-field-quiet.spark-text-field-size-l.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-quiet-large-slot-size);
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-end-slot-2x .spark-input-size-s {
    padding-inline-end: calc(
        var(--spark-text-field-outline-small-slot-size) +
            var(--spark-text-field-outline-small-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-outline-small-slot-size) +
            var(--spark-text-field-outline-small-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-end-slot-1x .spark-input-size-s {
    padding-inline-end: var(--spark-text-field-outline-small-slot-size);
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-small-slot-size);
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-start-slot-1x
    .spark-input-size-s {
    padding-inline-start: var(--spark-text-field-outline-small-slot-size);
}
.spark-text-field-outline.spark-text-field-size-s.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-small-slot-size);
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-end-slot-2x .spark-input-size-m {
    padding-inline-end: calc(
        var(--spark-text-field-outline-medium-slot-size) +
            var(--spark-text-field-outline-medium-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-outline-medium-slot-size) +
            var(--spark-text-field-outline-medium-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-end-slot-1x .spark-input-size-m {
    padding-inline-end: var(--spark-text-field-outline-medium-slot-size);
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-medium-slot-size);
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-start-slot-1x
    .spark-input-size-m {
    padding-inline-start: var(--spark-text-field-outline-medium-slot-size);
}
.spark-text-field-outline.spark-text-field-size-m.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-medium-slot-size);
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-end-slot-2x .spark-input-size-l {
    padding-inline-end: calc(
        var(--spark-text-field-outline-large-slot-size) +
            var(--spark-text-field-outline-large-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-end-slot-2x
    .spark-text-field-start-slot {
    inline-size: calc(
        var(--spark-text-field-outline-large-slot-size) +
            var(--spark-text-field-outline-large-slot-size)
    );
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-end-slot-1x .spark-input-size-l {
    padding-inline-end: var(--spark-text-field-outline-large-slot-size);
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-end-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-large-slot-size);
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-start-slot-1x
    .spark-input-size-l {
    padding-inline-start: var(--spark-text-field-outline-large-slot-size);
}
.spark-text-field-outline.spark-text-field-size-l.spark-text-field-start-slot-1x
    .spark-text-field-start-slot {
    inline-size: var(--spark-text-field-outline-large-slot-size);
}
.spark-text-field {
    color: var(--spark-text-field-color);
    display: flex;
    position: relative;
    box-sizing: border-box;
}
.spark-text-field [class^='spark-icon'] + [class^='spark-icon'] {
    margin-inline-start: var(--spark-text-field-margin-inline-start);
}
.spark-text-field .spark-input {
    inline-size: var(--spark-text-field-input-inline-size);
    text-overflow: ellipsis;
}
.spark-text-field .is-valid .spark-icon.check {
    color: var(--spark-text-field-color-valid);
}
.spark-text-field .is-invalid .spark-icon.cross {
    color: var(--spark-text-field-color-invalid);
}
.spark-text-field.spark-text-field-is-disabled {
    color: var(--spark-text-field-color-disabled);
}
.spark-text-field.spark-text-field-is-disabled .spark-text-field-start-slot .spark-icon {
    color: var(--spark-text-field-color-disabled-icon);
}
.spark-text-field .spark-text-field-start-slot,
.spark-text-field .spark-text-field-end-slot {
    display: flex;
    position: absolute;
    align-items: center;
    inset-block-end: var(--spark-text-field-slot-inset-block-end);
    inset-block-start: var(--spark-text-field-slot-inset-block-start);
}
.spark-text-field .spark-text-field-start-slot {
    justify-content: flex-start;
    inset-inline-start: var(--spark-text-field-inset-inline-start);
}
.spark-text-field .spark-text-field-end-slot {
    justify-content: flex-end;
    inset-inline-end: var(--spark-text-field-inset-inline-end);
}
.spark-text-field
    .spark-text-field-end-slot.spark-text-field-interior-button.spark-button.spark-button-icon-only {
    position: absolute !important;
}
.spark-text-field:hover:not(.spark-icon) {
    color: var(--spark-text-field-color-hover);
}
.spark-text-field .spark-text-field-end-slot.spark-text-field-interior-button-presence .spark-icon {
    transform: translate(
        var(--spark-text-field-icon-end-slot-translate-x),
        var(--spark-text-field-icon-end-slot-translate-y)
    ) !important;
}
.spark-text-field .spark-text-field-start-slot .spark-icon {
    color: var(--spark-text-field-colo-start-icon);
    transform: translateY(calc(var(--spark-text-field-icon-start-slot-translate-y))) !important;
}
.spark-text-field .spark-text-field-start-slot button,
.spark-text-field .spark-text-field-end-slot button {
    color: inherit;
    border: none;
    cursor: pointer;
    outline: none !important;
    padding: var(--spark-text-field-slot-button-padding);
    background: var(--spark-text-field-transparent);
}
.spark-text-field .spark-text-field-start-slot .split,
.spark-text-field .spark-text-field-end-slot .split {
    block-size: var(--spark-text-field-split-block-size);
    border-inline-end: var(--spark-text-field-border-inline-end) solid
        var(--spark-text-field-split-color);
}
.spark-text-field.spark-text-field-is-disabled + .spark-text-field-message {
    color: var(--spark-text-field-color-disabled);
}

/* ---- components/text-field/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-text-field {
        --spark-input-color: FieldText;
        --spark-input-bg-color-outline: Field;
        --spark-input-color-placeholder: GrayText;
    }
}

/* ---- components/text-field/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-text-field-inline-size: 1.25rem;
    --spark-text-field-block-size: 100%;
    --spark-text-field-input-inline-size: 100%;
    --spark-text-field-margin-inline-start: 0rem;
    --spark-text-field-line-height: 0.875rem;
    --spark-text-field-label-space-gap: 0.25rem;
    --spark-text-field-label-invalid-space-gap: 0.5rem;
    --spark-text-field-start-icon-large-margin-inline-size: 0.75rem;
    --spark-text-field-start-icon-medium-margin-inline-size: 0.5rem;
    --spark-text-field-start-icon-small-margin-inline-size: 0.25rem;
    --spark-text-field-start-icon-large-margin-block-size: 0.625rem;
    --spark-text-field-start-icon-medium-margin-block-size: 0.5rem;
    --spark-text-field-start-icon-small-margin-block-size: 0.3125rem;
    --spark-text-field-split-block-size: 1em;
    --spark-text-field-slot-inset-block-start: 0rem;
    --spark-text-field-slot-inset-block-end: 0rem;
    --spark-text-field-slot-button-padding: 0rem;
    --spark-text-field-border-inline-end: 0.0625rem;
    --spark-text-field-inset-inline-start: 0rem;
    --spark-text-field-inset-inline-end: 0rem;
    --spark-text-field-icon-end-slot-translate-x: -1.5rem;
    --spark-text-field-icon-end-slot-translate-y: 0rem;
    --spark-text-field-icon-start-slot-translate-y: 0rem;
    --spark-text-field-status-icon-l-margin-inline-size: 1.25rem;
    --spark-text-field-status-icon-l-margin-block-size: 0.625rem;
    --spark-text-field-status-icon-m-margin-inline-size: 0.75rem;
    --spark-text-field-status-icon-m-margin-block-size: 0.5rem;
    --spark-text-field-status-icon-s-margin-inline-size: 0.25rem;
    --spark-text-field-status-icon-s-margin-block-size: 0.3125rem;
    --spark-text-field-quiet-large-slot-size: 2.25rem;
    --spark-text-field-quiet-medium-slot-size: 2rem;
    --spark-text-field-quiet-small-slot-size: 1.5rem;
    --spark-text-field-quiet-margin-inline: 0rem;
    --spark-text-field-outline-large-slot-size: 2.25rem;
    --spark-text-field-outline-medium-slot-size: 2rem;
    --spark-text-field-outline-small-slot-size: 1.5rem;
    --spark-text-field-interior-button-size-l-inline-size: 2rem;
    --spark-text-field-interior-button-size-l-block-size: 2rem;
    --spark-text-field-interior-button-size-l-input-block-size: 2.5rem;
    --spark-text-field-interior-button-size-l-margin-inline-end: 1.25rem;
    --spark-text-field-interior-button-size-l-padding: 0rem;
    --spark-text-field-interior-button-size-l-inset-inline-end: 0.25rem;
    --spark-text-field-interior-button-size-m-inline-size: 1.5rem;
    --spark-text-field-interior-button-size-m-block-size: 1.5rem;
    --spark-text-field-interior-button-size-m-input-block-size: 2rem;
    --spark-text-field-interior-button-size-m-margin-inline-end: 0.75rem;
    --spark-text-field-interior-button-size-m-padding: 0rem;
    --spark-text-field-interior-button-size-m-inset-inline-end: 0.25rem;
    --spark-text-field-interior-button-size-s-inline-size: 1.25rem;
    --spark-text-field-interior-button-size-s-block-size: 1.25rem;
    --spark-text-field-interior-button-size-s-input-block-size: 1.5rem;
    --spark-text-field-interior-button-size-s-margin-inline-end: 0rem;
    --spark-text-field-interior-button-size-s-padding: 0rem;
    --spark-text-field-interior-button-size-s-inset-inline-end: 0.125rem;
    --spark-text-field-container-l: 2.5rem;
    --spark-text-field-container-m: 2rem;
    --spark-text-field-container-s: 1.5rem;
    --spark-text-field-focus-outline-width: 0.1875rem;
}

/* ---- components/text-field/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-text-field-transparent: var(--spark-color-transparent, transparent);
    --spark-text-field-color: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-text-field-color-hover: var(--spark-color-theme-light-gray800, #494b51);
    --spark-text-field-color-valid: var(--spark-color-moss-shade1, #708541);
    --spark-text-field-color-invalid: var(--spark-input-color-invalid, #c81326);
    --spark-text-field-color-disabled: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-text-field-colo-start-icon: var(--spark-color-theme-light-gray800, #494b51);
    --spark-text-field-color-action-icon: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-text-field-color-disabled-icon: var(--spark-input-color-disabled, #b2b3b9);
    --spark-text-field-border-color: var(--spark-input-border-color, #8b8e97);
    --spark-text-field-split-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-text-field-interior-button-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-text-field-interior-button-focus-backround-color: var(
        --spark-color-classic-blue-shade1,
        #00377c
    );
    --spark-text-field-interior-button-focus-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-text-field-focus-outline-color: var(--spark-color-classic-blue-shade1, #00377c);
}

/* ---- components/text-field/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-text-field-transparent: var(--spark-color-transparent, transparent);
    --spark-text-field-color: var(--spark-color-theme-dark-gray700, #b7b9be);
    --spark-text-field-color-hover: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-text-field-color-valid: var(--spark-color-moss-shade1, #708541);
    --spark-text-field-color-invalid: var(--spark-input-color-invalid, #ff848a);
    --spark-text-field-color-disabled: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-text-field-colo-start-icon: var(--spark-color-theme-dark-gray800, #e3e3e5);
    --spark-text-field-color-action-icon: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-text-field-color-disabled-icon: var(--spark-input-color-disabled, #b2b3b9);
    --spark-text-field-border-color: var(--spark-input-border-color, #8b8e97);
    --spark-text-field-split-color: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-text-field-interior-button-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-text-field-interior-button-focus-backround-color: #00c7fd;
    --spark-text-field-interior-button-focus-color: var(--spark-color-theme-dark-gray50, #242528);
    --spark-text-field-focus-outline-color: #6ddcff;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/toast/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-toast {
    margin: var(--spark-toast-margin);
    overflow: hidden;
    position: fixed;
}
.spark-toast.spark-toast-placement-top-left {
    top: var(--spark-toast-default-placement);
    left: var(--spark-toast-default-placement);
}
.spark-toast.spark-toast-placement-top-center {
    top: var(--spark-toast-default-placement);
    left: var(--spark-toast-middle);
    transform: translateX(calc(-1 * var(--spark-toast-middle)));
}
.spark-toast.spark-toast-placement-top-right {
    top: var(--spark-toast-default-placement);
    right: var(--spark-toast-default-placement);
}
.spark-toast.spark-toast-placement-bottom-right {
    right: var(--spark-toast-default-placement);
    bottom: var(--spark-toast-default-placement);
}
.spark-toast.spark-toast-placement-bottom-center {
    left: var(--spark-toast-middle);
    bottom: var(--spark-toast-default-placement);
    transform: translateX(calc(-1 * var(--spark-toast-middle)));
}
.spark-toast.spark-toast-placement-bottom-left {
    left: var(--spark-toast-default-placement);
    bottom: var(--spark-toast-default-placement);
}
.spark-toast .spark-toast-content {
    display: flex;
    padding: var(--spark-toast-padding-block-size) var(--spark-toast-padding-inline);
    transition: transform var(--spark-toast-animation-speed) ease-in-out;
    align-items: center;
    justify-content: space-between;
}
.spark-toast .spark-toast-content.spark-toast-content-state-default {
    border: var(--spark-toast-border) solid var(--spark-toast-state-default);
}
.spark-toast .spark-toast-content.spark-toast-content-state-danger {
    background-color: var(--spark-toast-state-danger);
}
.spark-toast .spark-toast-content.spark-toast-content-state-info {
    background-color: var(--spark-toast-state-info);
}
.spark-toast .spark-toast-content.spark-toast-content-state-success {
    background-color: var(--spark-toast-state-success);
}
.spark-toast .spark-toast-content.spark-toast-content-state-warning {
    background-color: var(--spark-toast-state-warning);
}
.spark-toast .spark-toast-content.spark-toast-content-visibility-hide {
    transform: translateY(var(--spark-toast-translate-y));
}
.spark-toast .spark-toast-content.spark-toast-content-visibility-show {
    transform: translateY(0);
}
.spark-toast .spark-toast-content .spark-toast-content-message {
    margin: var(--spark-toast-default-message-margin);
    overflow: hidden;
    max-width: var(--spark-toast-max-width);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.spark-toast .spark-toast-content .spark-toast-content-action {
    transition: transform var(--spark-toast-animation-speed) ease-in-out;
    background-color: transparent;
}
.spark-toast .spark-toast-content .spark-toast-content-action .spark-icon {
    color: var(--spark-toast-icon-color);
}
.spark-toast .spark-toast-content .spark-toast-content-action:hover {
    transform: scale(1.2);
}

/* ---- components/toast/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-toast-padding-block-size: 0.5rem;
    --spark-toast-padding-inline: 1rem;
    --spark-toast-margin: 1rem;
    --spark-toast-animation-speed: 0.2s;
    --spark-toast-middle: 50%;
    --spark-toast-translate-y: 3rem;
    --spark-toast-max-width: 50vw;
    --spark-toast-default-placement: 0;
    --spark-toast-default-message-margin: 0;
    --spark-toast-border: 0.1rem;
}

/* ---- components/toast/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-toast-icon-color: var(
        --spark-button-monochrome-ghost-color,
        var(--spark-color-monochrome-theme-light-gray900)
    );
    --spark-toast-state-default: var(--spark-color-carbon-tint2, #e9e9e9);
    --spark-toast-state-danger: var(--spark-color-coral, #ff5662);
    --spark-toast-state-success: var(--spark-color-moss, #8bae46);
    --spark-toast-state-info: var(--spark-color-energy-blue, #00c7fd);
    --spark-toast-state-warning: var(--spark-color-daisy, #fec91b);
}

/* ---- components/toast/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-toast-icon-color: var(
        --spark-button-monochrome-ghost-color,
        var(--spark-color-monochrome-theme-dark-gray900)
    );
    --spark-toast-state-default: #e9e9e9;
    --spark-toast-state-danger: #ff5662;
    --spark-toast-state-success: #8bae46;
    --spark-toast-state-info: #00c7fd;
    --spark-toast-state-warning: #fec91b;
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/toggle-button/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-toggle-button-clicked-ghost {
    color: var(--spark-toggle-button-ghost-color);
    border-color: var(--spark-toggle-button-ghost-border-color);
    background-color: var(--spark-toggle-button-ghost-bg-color);
}

/* ---- components/toggle-button/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-toggle-button-ghost-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-toggle-button-ghost-bg-color: var(--spark-color-theme-light-gray400, #c9cace);
    --spark-toggle-button-ghost-border-color: var(--spark-color-transparent, transparent);
}

/* ---- components/toggle-button/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-toggle-button-ghost-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-toggle-button-ghost-bg-color: var(--spark-color-theme-dark-gray400, #585a62);
    --spark-toggle-button-ghost-border-color: var(--spark-color-transparent, transparent);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/toggle-switch/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-toggle-switch {
    box-sizing: border-box;
}
.spark-toggle-switch .spark-toggle-switch-wrapper {
    display: flex !important;
    box-sizing: border-box;
    align-items: center;
    inline-size: fit-content !important;
}
.spark-toggle-switch.spark-toggle-switch-helper-text {
    gap: var(--spark-toggle-switch-helper-text-gap);
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
}
.spark-toggle-switch input {
    border: none;
    cursor: pointer;
    margin: var(--spark-toggle-switch-margin);
    opacity: var(--spark-toggle-switch-opacity);
    outline: none;
    padding: var(--spark-toggle-switch-padding);
    block-size: var(--spark-toggle-switch-block-size);
    inline-size: var(--spark-toggle-switch-inline-size);
}
.spark-toggle-switch .spark-toggle-switch-selector {
    cursor: pointer;
    display: flex;
    background: var(--spark-toggle-switch-color-transparent);
    box-sizing: border-box;
    align-items: center;
    border-block: var(--spark-toggle-switch-border-width) solid
        var(--spark-toggle-switch-background-color-off);
    border-inline: var(--spark-toggle-switch-border-width) solid
        var(--spark-toggle-switch-background-color-off);
}
.spark-toggle-switch input:checked + .spark-toggle-switch-selector {
    background: var(--spark-toggle-switch-background-color-on);
    border-block-color: var(--spark-toggle-switch-background-color-on);
    border-inline-color: var(--spark-toggle-switch-background-color-on);
}
.spark-toggle-switch .spark-toggle-switch-size-l {
    font-size: var(--spark-toggle-switch-size-l-font-size);
}
.spark-toggle-switch .spark-toggle-switch-size-m {
    font-size: var(--spark-toggle-switch-size-m-font-size);
}
.spark-toggle-switch .spark-toggle-switch-size-s {
    font-size: var(--spark-toggle-switch-size-s-font-size);
}
.spark-toggle-switch .spark-toggle-switch-size-s .spark-toggle-switch-selector {
    padding: var(--spark-toggle-switch-size-s-padding);
    block-size: var(--spark-toggle-switch-size-s-block-size);
    inline-size: var(--spark-toggle-switch-size-s-inline-size);
    border-radius: var(--spark-toggle-switch-size-s-border-radius);
    margin-inline-end: var(--spark-toggle-switch-size-s-gap);
}
.spark-toggle-switch
    .spark-toggle-switch-size-s
    input:checked
    + .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-s-selector-active);
    inline-size: var(--spark-toggle-switch-size-s-selector-active);
}
.spark-toggle-switch
    .spark-toggle-switch-size-s.spark-toggle-switch-label-alignment-end
    .spark-toggle-switch-selector {
    margin-inline-end: initial;
    margin-inline-start: var(--spark-toggle-switch-size-s-gap);
}
.spark-toggle-switch .spark-toggle-switch-size-s .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-s-selector);
    inline-size: var(--spark-toggle-switch-size-s-selector);
}
.spark-toggle-switch .spark-toggle-switch-size-m .spark-toggle-switch-selector {
    padding: var(--spark-toggle-switch-size-m-padding);
    block-size: var(--spark-toggle-switch-size-m-block-size);
    inline-size: var(--spark-toggle-switch-size-m-inline-size);
    border-radius: var(--spark-toggle-switch-size-m-border-radius);
    margin-inline-end: var(--spark-toggle-switch-size-m-gap);
}
.spark-toggle-switch
    .spark-toggle-switch-size-m
    input:checked
    + .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-m-selector-active);
    inline-size: var(--spark-toggle-switch-size-m-selector-active);
}
.spark-toggle-switch
    .spark-toggle-switch-size-m.spark-toggle-switch-label-alignment-end
    .spark-toggle-switch-selector {
    margin-inline-end: initial;
    margin-inline-start: var(--spark-toggle-switch-size-m-gap);
}
.spark-toggle-switch .spark-toggle-switch-size-m .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-m-selector);
    inline-size: var(--spark-toggle-switch-size-m-selector);
}
.spark-toggle-switch .spark-toggle-switch-size-l .spark-toggle-switch-selector {
    padding: var(--spark-toggle-switch-size-l-padding);
    block-size: var(--spark-toggle-switch-size-l-block-size);
    inline-size: var(--spark-toggle-switch-size-l-inline-size);
    border-radius: var(--spark-toggle-switch-size-l-border-radius);
    margin-inline-end: var(--spark-toggle-switch-size-l-gap);
}
.spark-toggle-switch
    .spark-toggle-switch-size-l
    input:checked
    + .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-l-selector-active);
    inline-size: var(--spark-toggle-switch-size-l-selector-active);
}
.spark-toggle-switch
    .spark-toggle-switch-size-l.spark-toggle-switch-label-alignment-end
    .spark-toggle-switch-selector {
    margin-inline-end: initial;
    margin-inline-start: var(--spark-toggle-switch-size-l-gap);
}
.spark-toggle-switch .spark-toggle-switch-size-l .spark-toggle-switch-selector:after {
    block-size: var(--spark-toggle-switch-size-l-selector);
    inline-size: var(--spark-toggle-switch-size-l-selector);
}
.spark-toggle-switch input.spark-toggle-switch-is-invalid + .spark-toggle-switch-selector {
    border-block-color: var(--spark-toggle-switch-background-color-invalid);
    border-inline-color: var(--spark-toggle-switch-background-color-invalid);
}
.spark-toggle-switch input.spark-toggle-switch-is-invalid:checked + .spark-toggle-switch-selector {
    background: var(--spark-toggle-switch-background-color-invalid);
    border-block-color: var(--spark-toggle-switch-background-color-invalid);
    border-inline-color: var(--spark-toggle-switch-background-color-invalid);
}
.spark-toggle-switch
    input.spark-toggle-switch-is-invalid:checked
    + .spark-toggle-switch-selector:after {
    background: var(--spark-toggle-switch-selector-color-on);
}
.spark-toggle-switch input.spark-toggle-switch-is-invalid + .spark-toggle-switch-selector:after {
    background: var(--spark-toggle-switch-background-color-invalid);
}
.spark-toggle-switch input:checked + .spark-toggle-switch-selector:after {
    background: var(--spark-toggle-switch-selector-color-on);
    border-radius: 100%;
    margin-inline-start: auto;
}
.spark-toggle-switch .spark-toggle-switch-selector:after {
    content: '';
    display: block;
    background: var(--spark-toggle-switch-selector-color-off);
    border-radius: 100%;
}
.spark-toggle-switch .spark-toggle-switch-wrapper.spark-toggle-switch-is-disabled {
    color: var(--spark-toggle-switch-background-color-disabled);
}
.spark-toggle-switch .spark-toggle-switch-wrapper.spark-toggle-switch-label-alignment-end {
    flex-direction: row-reverse;
}
.spark-toggle-switch
    .spark-toggle-switch-wrapper.spark-toggle-switch-label-alignment-end
    .spark-fieldlabel {
    min-inline-size: var(--spark-toggle-switch-min-inline-size-label-start);
}
.spark-toggle-switch
    .spark-toggle-switch-wrapper.spark-toggle-switch-is-disabled
    input:disabled
    + .spark-toggle-switch-selector {
    cursor: initial;
    border-block-color: var(--spark-toggle-switch-background-color-disabled);
    border-inline-color: var(--spark-toggle-switch-background-color-disabled);
}
.spark-toggle-switch
    .spark-toggle-switch-wrapper.spark-toggle-switch-is-disabled
    input:disabled:checked
    + .spark-toggle-switch-selector {
    background: var(--spark-toggle-switch-background-color-disabled);
    border-block-color: var(--spark-toggle-switch-background-color-disabled);
    border-inline-color: var(--spark-toggle-switch-background-color-disabled);
}
.spark-toggle-switch
    .spark-toggle-switch-wrapper.spark-toggle-switch-is-disabled
    input:disabled:checked
    + .spark-toggle-switch-selector:after {
    background: var(--spark-toggle-switch-selector-color-on);
}
.spark-toggle-switch
    .spark-toggle-switch-wrapper.spark-toggle-switch-is-disabled
    input:disabled
    + .spark-toggle-switch-selector:after {
    background: var(--spark-toggle-switch-selector-color-disabled);
}

/* ---- components/toggle-switch/media-queries.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

@media screen and (forced-colors: active) {
    .spark-toggle-switch {
        --spark-toggle-switch-selector-color-off: ButtonBorder;
        --spark-toggle-switch-background-color-on: Highlight;
        --spark-toggle-switch-background-color-off: ButtonBorder;
        --spark-toggle-switch-selector-color-disabled: GrayText;
        --spark-toggle-switch-background-color-invalid: ButtonBorder;
        --spark-toggle-switch-background-color-disabled: GrayText;
    }
    .spark-toggle-switch
        input.spark-toggle-switch-is-invalid:checked
        + .spark-toggle-switch-selector {
        background: Highlight;
        border-block-color: Highlight;
        border-inline-color: Highlight;
    }
    .spark-toggle-switch
        input.spark-toggle-switch-is-invalid:checked
        + .spark-toggle-switch-selector:after {
        background: Canvas;
    }
}

/* ---- components/toggle-switch/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-toggle-switch-opacity: 0;
    --spark-toggle-switch-padding: 0rem;
    --spark-toggle-switch-margin: 0rem;
    --spark-toggle-switch-inline-size: 0rem;
    --spark-toggle-switch-block-size: 0rem;
    --spark-toggle-switch-border-width: 0.0625rem;
    --spark-toggle-switch-min-inline-size-label-start: 5rem;
    --spark-toggle-switch-helper-text-gap: 0.5rem;
    --spark-toggle-switch-size-l-selector: 0.625rem;
    --spark-toggle-switch-size-l-selector-active: 0.75rem;
    --spark-toggle-switch-size-l-block-size: 1.125rem;
    --spark-toggle-switch-size-l-inline-size: 2rem;
    --spark-toggle-switch-size-l-font-size: 1rem;
    --spark-toggle-switch-size-l-padding: 0.1875rem;
    --spark-toggle-switch-size-l-border-radius: 1rem;
    --spark-toggle-switch-size-l-gap: 0.5rem;
    --spark-toggle-switch-size-m-selector: 0.5rem;
    --spark-toggle-switch-size-m-selector-active: 0.625rem;
    --spark-toggle-switch-size-m-block-size: 0.875rem;
    --spark-toggle-switch-size-m-inline-size: 1.5rem;
    --spark-toggle-switch-size-m-font-size: 0.875rem;
    --spark-toggle-switch-size-m-padding: 0.125rem;
    --spark-toggle-switch-size-m-border-radius: 0.75rem;
    --spark-toggle-switch-size-m-gap: 0.375rem;
    --spark-toggle-switch-size-s-selector: 0.375rem;
    --spark-toggle-switch-size-s-selector-active: 0.5rem;
    --spark-toggle-switch-size-s-block-size: 0.75rem;
    --spark-toggle-switch-size-s-inline-size: 1.25rem;
    --spark-toggle-switch-size-s-font-size: 0.75rem;
    --spark-toggle-switch-size-s-padding: 0.125rem;
    --spark-toggle-switch-size-s-border-radius: 0.5rem;
    --spark-toggle-switch-size-s-gap: 0.25rem;
}

/* ---- components/toggle-switch/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-toggle-switch-background-color-on: var(--spark-color-classic-blue, #0054ae);
    --spark-toggle-switch-background-color-off: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-toggle-switch-background-color-disabled: var(
        --spark-color-theme-light-gray500,
        #b2b3b9
    );
    --spark-toggle-switch-background-color-invalid: var(--spark-color-coral-shade1, #c81326);
    --spark-toggle-switch-color-transparent: var(--spark-color-transparent, transparent);
    --spark-toggle-switch-selector-color-off: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-toggle-switch-selector-color-on: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-toggle-switch-selector-color-disabled: var(--spark-color-theme-light-gray500, #b2b3b9);
}

/* ---- components/toggle-switch/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-toggle-switch-background-color-on: var(--spark-color-energy-blue, #00c7fd);
    --spark-toggle-switch-background-color-off: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-toggle-switch-background-color-disabled: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-toggle-switch-background-color-invalid: var(--spark-color-coral-tint1, #ff848a);
    --spark-toggle-switch-color-transparent: var(--spark-color-transparent, transparent);
    --spark-toggle-switch-selector-color-off: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-toggle-switch-selector-color-on: var(--spark-color-theme-dark-gray50, #242528);
    --spark-toggle-switch-selector-color-disabled: var(--spark-color-theme-dark-gray500, #6b6e76);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/tooltip/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-tooltip-tip {
    color: var(--spark-tooltip-tip-color);
    position: absolute;
    block-size: var(--spark-tooltip-tip-block-size);
    inline-size: var(--spark-tooltip-tip-inline-size);
    border-style: solid;
    border-width: var(--spark-tooltip-tip-border-width);
    border-block-end-color: transparent;
    border-inline-end-color: transparent;
    border-inline-start-color: transparent;
}
.spark-tooltip-toggle {
    width: fit-content;
    display: flex;
    position: relative;
}
.spark-tooltip-size-m {
    padding: var(--spark-tooltip-m-padding-top-bottom) var(--spark-tooltip-m-padding-right-left);
}
.spark-tooltip-size-m .spark-tooltip-label {
    width: max-content;
    display: flex;
    font-size: var(--spark-tooltip-m-font-size);
    font-weight: var(--spark-tooltip-m-label-font-weight);
    line-height: var(--spark-tooltip-m-label-line-height);
}
.spark-tooltip-size-m.spark-tooltip-top .spark-tooltip-tip {
    inset-block-start: 100%;
    margin-inline-start: calc(50% - var(--spark-tooltip-m-gap-size));
}
.spark-tooltip-size-m.spark-tooltip-bottom .spark-tooltip-tip {
    margin-inline-start: calc(50% - var(--spark-tooltip-m-gap-size));
}
.spark-tooltip-size-m.spark-tooltip-bottom.spark-tooltip-left .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-m-gap-size));
}
.spark-tooltip-size-m.spark-tooltip-top.spark-tooltip-left .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-m-gap-size));
}
.spark-tooltip-size-m.spark-tooltip-top.spark-tooltip-right .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-m-gap-size));
}
.spark-tooltip-size-m .spark-icon {
    line-height: var(--spark-tooltip-m-icon-line-height);
    margin-inline-end: var(--spark-tooltip-margin-inline-end);
}
.spark-tooltip-size-s {
    padding: var(--spark-tooltip-s-padding-top-bottom) var(--spark-tooltip-s-padding-right-left);
}
.spark-tooltip-size-s .spark-tooltip-label {
    width: max-content;
    display: flex;
    font-size: var(--spark-tooltip-s-font-size);
    font-weight: var(--spark-tooltip-s-label-font-weight);
    line-height: var(--spark-tooltip-s-label-line-height);
}
.spark-tooltip-size-s.spark-tooltip-top .spark-tooltip-tip {
    inset-block-start: 100%;
    margin-inline-start: calc(50% - var(--spark-tooltip-s-gap-size));
}
.spark-tooltip-size-s.spark-tooltip-bottom .spark-tooltip-tip {
    margin-inline-start: calc(50% - var(--spark-tooltip-s-gap-size));
}
.spark-tooltip-size-s.spark-tooltip-bottom.spark-tooltip-left .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-s-gap-size));
}
.spark-tooltip-size-s.spark-tooltip-top.spark-tooltip-left .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-s-gap-size));
}
.spark-tooltip-size-s.spark-tooltip-top.spark-tooltip-right .spark-tooltip-tip {
    margin-inline-start: calc(-1 * var(--spark-tooltip-s-gap-size));
}
.spark-tooltip-size-s .spark-icon {
    line-height: var(--spark-tooltip-s-icon-line-height);
    margin-inline-end: var(--spark-tooltip-margin-inline-end);
}
.spark-tooltip {
    top: var(--spark-tooltip-top);
    left: var(--spark-tooltip-left);
    color: var(--spark-tooltip-color);
    display: inline-flex !important;
    z-index: var(--spark-tooltip-z-index);
    position: absolute;
    box-sizing: border-box;
    visibility: visible;
    word-break: break-word;
    align-items: flex-start;
    inline-size: auto;
    flex-direction: row;
    pointer-events: auto;
    vertical-align: top;
    max-inline-size: var(--spark-tooltip-max-inline-size);
    background-color: var(--spark-tooltip-background-color);
    inset-block-start: var(--spark-tooltip-inset-block-start);
    inset-inline-start: var(--spark-tooltip-inset-inline-start);
}
.spark-tooltip.spark-tooltip-top .spark-tooltip-tip {
    inset-block-start: 100%;
}
.spark-tooltip.spark-tooltip-right-side .spark-tooltip-tip {
    transform: rotate(90deg);
    inset-block-end: calc(50% - var(--spark-tooltip-mid-tooltip-size));
    inset-inline-end: 100%;
}
.spark-tooltip.spark-tooltip-bottom .spark-tooltip-tip {
    transform: rotate(-180deg);
    inset-block-end: 100%;
}
.spark-tooltip.spark-tooltip-left-side .spark-tooltip-tip {
    transform: rotate(-90deg);
    inset-block-end: calc(50% - var(--spark-tooltip-mid-tooltip-size));
    inset-inline-start: 100%;
}
.spark-tooltip.spark-tooltip-bottom.spark-tooltip-left .spark-tooltip-tip {
    transform: rotate(-180deg);
    inset-inline-start: 100%;
}
.spark-tooltip.spark-tooltip-bottom.spark-tooltip-right .spark-tooltip-tip {
    transform: rotate(-180deg);
    inset-inline-start: 0%;
    margin-inline-start: var(--spark-tooltip-tip-margin-inline-start);
}
.spark-tooltip.spark-tooltip-top.spark-tooltip-left .spark-tooltip-tip {
    transform: rotate(0deg);
    inset-inline-start: 100%;
}
.spark-tooltip.spark-tooltip-top.spark-tooltip-right .spark-tooltip-tip {
    transform: rotate(0deg);
    inset-inline-start: 0%;
    margin-inline-start: var(--spark-tooltip-tip-margin-inline-start);
}
.spark-tooltip.spark-tooltip-right.spark-tooltip-end .spark-tooltip-tip {
    transform: rotate(90deg);
    inset-block-end: var(--spark-tooltip-tip-inset-block-end);
    inset-inline-end: 100%;
}
.spark-tooltip.spark-tooltip-right.spark-tooltip-start .spark-tooltip-tip {
    transform: rotate(90deg);
    inset-inline-end: 100%;
    inset-block-start: var(--spark-tooltip-tip-inset-block-start);
}
.spark-tooltip.spark-tooltip-left.spark-tooltip-end .spark-tooltip-tip {
    transform: rotate(-90deg);
    inset-block-end: var(--spark-tooltip-tip-inset-block-end);
    inset-inline-start: 100%;
}
.spark-tooltip.spark-tooltip-left.spark-tooltip-start .spark-tooltip-tip {
    transform: rotate(-90deg);
    inset-block-start: var(--spark-tooltip-tip-inset-block-start);
    inset-inline-start: 100%;
}

/* ---- components/tooltip/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-tooltip-inset-inline-start: 0rem;
    --spark-tooltip-inset-block-start: 0rem;
    --spark-tooltip-z-index: 999;
    --spark-tooltip-top: 0rem;
    --spark-tooltip-left: 0rem;
    --spark-tooltip-tip-block-size: 0rem;
    --spark-tooltip-tip-inline-size: 0rem;
    --spark-tooltip-tip-border-width: 0.3125rem;
    --spark-tooltip-margin-inline-end: 0.5rem;
    --spark-tooltip-gap-size: 1.125rem;
    --spark-tooltip-inset-block-end: 0.75rem;
    --spark-tooltip-tip-margin-inline-start: 0.25rem;
    --spark-tooltip-tip-inset-block-start: 0.25rem;
    --spark-tooltip-tip-inset-block-end: 0.25rem;
    --spark-tooltip-max-inline-size: 30ch;
    --spark-tooltip-mid-tooltip-size: 0.3125rem;
    --spark-tooltip-m-font-size: 0.75rem;
    --spark-tooltip-m-label-font-weight: 400;
    --spark-tooltip-m-label-line-height: 1rem;
    --spark-tooltip-m-icon-line-height: 1rem;
    --spark-tooltip-m-padding-top-bottom: 0.5rem;
    --spark-tooltip-m-padding-right-left: 0.75rem;
    --spark-tooltip-m-gap-size: 1.0625rem;
    --spark-tooltip-m-tooltip-gap: 0.5rem;
    --spark-tooltip-m-diff-size-gap: 0rem;
    --spark-tooltip-s-font-size: 0.6875rem;
    --spark-tooltip-s-label-font-weight: 400;
    --spark-tooltip-s-label-line-height: 1rem;
    --spark-tooltip-s-icon-line-height: 1rem;
    --spark-tooltip-s-padding-top-bottom: 0.25rem;
    --spark-tooltip-s-padding-right-left: 0.5rem;
    --spark-tooltip-s-gap-size: 0.8125rem;
    --spark-tooltip-s-tooltip-gap: 0.8125rem;
    --spark-tooltip-s-diff-size-gap: 0.25rem;
}

/* ---- components/tooltip/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-tooltip-background-color: var(--spark-color-theme-dark-gray200, #3c3e42);
    --spark-tooltip-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-tooltip-tip-color: var(--spark-color-theme-dark-gray200, #3c3e42);
}

/* ---- components/tooltip/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-tooltip-background-color: var(--spark-color-theme-dark-gray900, #ffffff);
    --spark-tooltip-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-tooltip-tip-color: var(--spark-color-theme-dark-gray900, #ffffff);
}

/* ---- components/typography/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-font-25 {
    font-size: var(--spark-font-size-25);
    font-family: var(--spark-font-intel-one-text);
    font-weight: normal;
    line-height: var(--spark-line-height-text);
    letter-spacing: var(--spark-letter-spacing-small);
}
.spark-font-50 {
    font-size: var(--spark-font-size-50);
    font-family: var(--spark-font-intel-one-text);
    font-weight: normal;
    line-height: var(--spark-line-height-text);
    letter-spacing: var(--spark-letter-spacing-small);
}
.spark-font-75 {
    font-size: var(--spark-font-size-75);
    font-family: var(--spark-font-intel-one-text);
    font-weight: normal;
    line-height: var(--spark-line-height-text);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-100 {
    font-size: var(--spark-font-size-100);
    font-family: var(--spark-font-intel-one-text);
    font-weight: normal;
    line-height: var(--spark-line-height-text);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-200 {
    font-size: var(--spark-font-size-200);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-300 {
    font-size: var(--spark-font-size-300);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-350 {
    font-size: var(--spark-font-size-350);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-400 {
    font-size: var(--spark-font-size-400);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-500 {
    font-size: var(--spark-font-size-500);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-600 {
    font-size: var(--spark-font-size-600);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}
.spark-font-700 {
    font-size: var(--spark-font-size-700);
    font-family: var(--spark-font-intel-one-display);
    font-weight: normal;
    line-height: var(--spark-line-height-heading);
    letter-spacing: var(--spark-letter-spacing-zero);
}

/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/
/* ---- components/upload/style.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

.spark-upload-header {
    color: var(--spark-upload-header-color);
    display: grid;
}
.spark-upload-button {
    overflow: hidden;
    position: relative;
}
.spark-upload-drag-and-drop {
    flex: none;
    border: var(--spark-upload-border) solid var(--spark-upload-drag-and-drop-body-border-color);
    display: flex;
    background: var(--spark-upload-drag-and-drop-body-background-color);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.spark-upload-size-l {
    min-block-size: var(--spark-upload-l-min-block-size);
    min-inline-size: var(--spark-upload-l-min-inline-size);
}
.spark-upload-size-l .spark-upload-header {
    margin-block-end: var(--spark-upload-l-header-margin-block-end);
}
.spark-upload-size-l .spark-upload-button {
    margin-block-end: var(--spark-upload-l-header-margin-block-end);
}
.spark-upload-size-l .spark-upload-drag-and-drop {
    min-block-size: var(--spark-upload-l-drag-and-drop-min-block-size);
    margin-block-end: var(--spark-upload-l-drag-and-drop-margin-block-end);
}
.spark-upload-size-l .spark-upload-drag-and-drop .can-drop {
    border: var(--spark-upload-dashed-border) dashed var(--spark-upload-can-drop-border-color);
    position: absolute;
    background: var(--spark-upload-can-drop-background);
    min-block-size: var(--spark-upload-l-drag-and-drop-min-block-size);
    min-inline-size: var(--spark-upload-l-min-inline-size);
    margin-block-start: var(--spark-upload-l-margin-block-start);
}
.spark-upload-size-l .spark-upload-files {
    inline-size: var(--spark-upload-l-files-inline-size);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-item {
    block-size: var(--spark-upload-l-files-block-size);
    inline-size: var(--spark-upload-l-files-inline-size);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-error {
    block-size: var(--spark-upload-l-files-block-size);
    inline-size: var(--spark-upload-l-files-inline-size);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-error span,
.spark-upload-size-l .spark-upload-files .spark-upload-files-item span {
    line-height: var(--spark-upload-l-files-block-size);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-item .file-text {
    block-size: var(--spark-upload-l-files-block-size);
    line-height: var(--spark-upload-l-files-line-height);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-item .start-slot {
    font-size: var(--spark-upload-l-font-size);
    inline-size: var(--spark-upload-l-files-icon-inline-size);
    line-height: var(--spark-upload-l-files-line-height);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-item .start-slot button {
    padding: var(--spark-upload-padding);
    block-size: var(--spark-upload-l-files-block-size);
    inline-size: var(--spark-upload-l-files-icon-inline-size);
}
.spark-upload-size-l .spark-upload-files .spark-upload-files-item .start-slot .spark-icon {
    block-size: var(--spark-upload-l-files-block-size);
    inline-size: var(--spark-upload-l-files-icon-inline-size);
    line-height: var(--spark-upload-l-files-line-height);
}
.spark-upload-size-m {
    min-block-size: var(--spark-upload-m-min-block-size);
    min-inline-size: var(--spark-upload-m-min-inline-size);
}
.spark-upload-size-m .spark-upload-header {
    margin-block-end: var(--spark-upload-m-header-margin-block-end);
}
.spark-upload-size-m .spark-upload-button {
    margin-block-end: var(--spark-upload-m-header-margin-block-end);
}
.spark-upload-size-m .spark-upload-drag-and-drop {
    min-block-size: var(--spark-upload-m-drag-and-drop-min-block-size);
    margin-block-end: var(--spark-upload-m-drag-and-drop-margin-block-end);
}
.spark-upload-size-m .spark-upload-drag-and-drop .can-drop {
    border: var(--spark-upload-dashed-border) dashed var(--spark-upload-can-drop-border-color);
    position: absolute;
    background: var(--spark-upload-can-drop-background);
    min-block-size: var(--spark-upload-m-drag-and-drop-min-block-size);
    min-inline-size: var(--spark-upload-m-min-inline-size);
    margin-block-start: var(--spark-upload-m-margin-block-start);
}
.spark-upload-size-m .spark-upload-files {
    inline-size: var(--spark-upload-m-files-inline-size);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-item {
    block-size: var(--spark-upload-m-files-block-size);
    inline-size: var(--spark-upload-m-files-inline-size);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-error {
    block-size: var(--spark-upload-m-files-block-size);
    inline-size: var(--spark-upload-m-files-inline-size);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-error span,
.spark-upload-size-m .spark-upload-files .spark-upload-files-item span {
    line-height: var(--spark-upload-m-files-block-size);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-item .file-text {
    block-size: var(--spark-upload-m-files-block-size);
    line-height: var(--spark-upload-m-files-line-height);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-item .start-slot {
    font-size: var(--spark-upload-m-font-size);
    inline-size: var(--spark-upload-m-files-icon-inline-size);
    line-height: var(--spark-upload-m-files-line-height);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-item .start-slot button {
    padding: var(--spark-upload-padding);
    block-size: var(--spark-upload-m-files-block-size);
    inline-size: var(--spark-upload-m-files-icon-inline-size);
}
.spark-upload-size-m .spark-upload-files .spark-upload-files-item .start-slot .spark-icon {
    block-size: var(--spark-upload-m-files-block-size);
    inline-size: var(--spark-upload-m-files-icon-inline-size);
    line-height: var(--spark-upload-m-files-line-height);
}
.spark-upload-size-s {
    min-block-size: var(--spark-upload-s-min-block-size);
    min-inline-size: var(--spark-upload-s-min-inline-size);
}
.spark-upload-size-s .spark-upload-header {
    margin-block-end: var(--spark-upload-s-header-margin-block-end);
}
.spark-upload-size-s .spark-upload-button {
    margin-block-end: var(--spark-upload-s-header-margin-block-end);
}
.spark-upload-size-s .spark-upload-drag-and-drop {
    min-block-size: var(--spark-upload-s-drag-and-drop-min-block-size);
    margin-block-end: var(--spark-upload-s-drag-and-drop-margin-block-end);
}
.spark-upload-size-s .spark-upload-drag-and-drop .can-drop {
    border: var(--spark-upload-dashed-border) dashed var(--spark-upload-can-drop-border-color);
    position: absolute;
    background: var(--spark-upload-can-drop-background);
    min-block-size: var(--spark-upload-s-drag-and-drop-min-block-size);
    min-inline-size: var(--spark-upload-s-min-inline-size);
    margin-block-start: var(--spark-upload-s-margin-block-start);
}
.spark-upload-size-s .spark-upload-files {
    inline-size: var(--spark-upload-s-files-inline-size);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-item {
    block-size: var(--spark-upload-s-files-block-size);
    inline-size: var(--spark-upload-s-files-inline-size);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-error {
    block-size: var(--spark-upload-s-files-block-size);
    inline-size: var(--spark-upload-s-files-inline-size);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-error span,
.spark-upload-size-s .spark-upload-files .spark-upload-files-item span {
    line-height: var(--spark-upload-s-files-block-size);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-item .file-text {
    block-size: var(--spark-upload-s-files-block-size);
    line-height: var(--spark-upload-s-files-line-height);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-item .start-slot {
    font-size: var(--spark-upload-s-font-size);
    inline-size: var(--spark-upload-s-files-icon-inline-size);
    line-height: var(--spark-upload-s-files-line-height);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-item .start-slot button {
    padding: var(--spark-upload-padding);
    block-size: var(--spark-upload-s-files-block-size);
    inline-size: var(--spark-upload-s-files-icon-inline-size);
}
.spark-upload-size-s .spark-upload-files .spark-upload-files-item .start-slot .spark-icon {
    block-size: var(--spark-upload-s-files-block-size);
    inline-size: var(--spark-upload-s-files-icon-inline-size);
    line-height: var(--spark-upload-s-files-line-height);
}
.spark-upload {
    inline-size: var(--spark-upload-inline-size);
}
.spark-upload .spark-upload-drag-and-drop .spark-upload-drag-and-drop-body {
    text-align: center;
    margin-inline: auto;
}
.spark-upload .spark-upload-drag-and-drop .spark-upload-drag-and-drop-body button {
    margin: auto;
}
.spark-upload .spark-upload-drag-and-drop .spark-upload-drag-and-drop-body span {
    display: block;
}
.spark-upload .spark-upload-drag-and-drop .spark-upload-drag-and-drop-body .spark-icon {
    margin-inline: auto;
}
.spark-upload
    .spark-upload-drag-and-drop
    .spark-upload-drag-and-drop-body
    .spark-upload-drag-and-drop-text {
    color: var(--spark-upload-drag-and-drop-text-color);
    font-weight: var(--spark-upload-font-weight);
    margin-block-end: var(--spark-upload-margin-block-end);
}
.spark-upload .spark-upload-drag-and-drop .spark-upload-drag-and-drop-body .spark-icon-status {
    color: var(--spark-upload-drag-and-drop-body-icon);
}
.spark-upload .spark-upload-files .spark-upload-files-item {
    display: inline-flex;
    background-color: var(--spark-upload-files-background-color);
    margin-block-start: var(--spark-upload-margin-block-start);
}
.spark-upload .spark-upload-files .spark-upload-files-error {
    color: var(--spark-upload-files-error-color);
    display: inline-flex;
    background-color: var(--spark-upload-files-error-background-color);
    padding-inline-start: var(--spark-upload-error-padding-inline-start);
}
.spark-upload .spark-upload-files .spark-upload-files-item .file-text {
    overflow: hidden;
    inline-size: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-inline-end: var(--spark-upload-padding-inline-end);
    padding-inline-start: var(--spark-upload-padding-inline-start);
}
.spark-upload .spark-upload-files .spark-upload-files-item .start-slot .spark-icon {
    text-align: center;
}

/* ---- components/upload/properties.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root {
    --spark-upload-border: 0.0625rem;
    --spark-upload-margin-block-end: 0.25rem;
    --spark-upload-font-weight: 500;
    --spark-upload-margin-block-start: 0.0625rem;
    --spark-upload-inline-size: 17.5rem;
    --spark-upload-error-padding-inline-start: 1.75rem;
    --spark-upload-padding-inline-start: 0.125rem;
    --spark-upload-padding-inline-end: 0.5rem;
    --spark-upload-dashed-border: 0.25rem;
    --spark-upload-padding: 0rem;
    --spark-upload-l-font-size: 1rem;
    --spark-upload-l-min-inline-size: 26.625rem;
    --spark-upload-l-min-block-size: 6.75rem;
    --spark-upload-l-header-margin-block-end: 0.5rem;
    --spark-upload-l-drag-and-drop-min-block-size: 16.75rem;
    --spark-upload-l-drag-and-drop-size-icon-size: 2rem;
    --spark-upload-l-files-inline-size: 22rem;
    --spark-upload-l-files-icon-inline-size: 1.875rem;
    --spark-upload-l-files-block-size: 1.875rem;
    --spark-upload-l-files-line-height: 1.875rem;
    --spark-upload-l-drag-and-drop-margin-block-end: 1.5rem;
    --spark-upload-l-margin-block-start: 1.5rem;
    --spark-upload-m-font-size: 0.875rem;
    --spark-upload-m-min-inline-size: 22.25rem;
    --spark-upload-m-min-block-size: 5.375rem;
    --spark-upload-m-header-margin-block-end: 1rem;
    --spark-upload-m-drag-and-drop-min-block-size: 16.125rem;
    --spark-upload-m-drag-and-drop-size-icon-size: 1.3125rem;
    --spark-upload-m-files-inline-size: 22.25rem;
    --spark-upload-m-files-icon-inline-size: 1.625rem;
    --spark-upload-m-files-block-size: 1.625rem;
    --spark-upload-m-files-line-height: 1.625rem;
    --spark-upload-m-drag-and-drop-margin-block-end: 1rem;
    --spark-upload-m-margin-block-start: 0.9375rem;
    --spark-upload-s-font-size: 0.75rem;
    --spark-upload-s-min-inline-size: 17.5rem;
    --spark-upload-s-min-block-size: 4.125rem;
    --spark-upload-s-header-margin-block-end: 0.5rem;
    --spark-upload-s-drag-and-drop-min-block-size: 10.875rem;
    --spark-upload-s-drag-and-drop-size-icon-size: 1rem;
    --spark-upload-s-files-inline-size: 17.5rem;
    --spark-upload-s-files-icon-inline-size: 1.625rem;
    --spark-upload-s-files-block-size: 1.5rem;
    --spark-upload-s-files-line-height: 1.5rem;
    --spark-upload-s-drag-and-drop-margin-block-end: 0.5rem;
    --spark-upload-s-margin-block-start: 0.5rem;
}

/* ---- components/upload/mode-light.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

:root,
[data-theme='light'] {
    --spark-upload-header-color: var(--spark-color-theme-light-gray900, #2b2c30);
    --spark-upload-drag-and-drop-text-color: var(--spark-color-theme-light-gray700, #6a6d75);
    --spark-upload-drag-and-drop-body-icon: var(--spark-color-theme-light-gray500, #b2b3b9);
    --spark-upload-drag-and-drop-body-border-color: rgba(0, 0, 0, 0.12);
    --spark-upload-drag-and-drop-body-background-color: rgba(255, 255, 255, 0.12);
    --spark-upload-files-error-background-color: var(--spark-color-coral-shade1, #c81326);
    --spark-upload-files-error-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-upload-files-background-color: rgba(0, 0, 0, 0.02);
    --spark-upload-can-drop-border-color: var(--spark-color-classic-blue, #0054ae);
    --spark-upload-can-drop-background: rgba(0, 199, 253, 0.06);
    --spark-upload-icon-success: var(--spark-color-moss-tint1, #b1d272);
}

/* ---- components/upload/mode-dark.css ---- */
/* Do not edit this file manually! This file is generated automatically from the @spark-design/tokens package.*/

[data-theme='dark'] {
    --spark-upload-header-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-upload-drag-and-drop-text-color: var(--spark-color-theme-dark-gray700, #b7b9be);
    --spark-upload-drag-and-drop-body-icon: var(--spark-color-theme-dark-gray500, #6b6e76);
    --spark-upload-drag-and-drop-body-border-color: rgba(255, 255, 255, 0.12);
    --spark-upload-drag-and-drop-body-background-color: rgba(0, 0, 0, 0.12);
    --spark-upload-files-error-background-color: var(--spark-color-coral-shade1, #c81326);
    --spark-upload-files-error-color: var(--spark-color-theme-light-gray50, #ffffff);
    --spark-upload-files-background-color: rgba(255, 255, 255, 0.02);
    --spark-upload-can-drop-border-color: var(--spark-color-classic-blue, #0054ae);
    --spark-upload-can-drop-background: rgba(0, 199, 253, 0.06);
    --spark-upload-icon-success: var(--spark-color-moss-tint1, #b1d272);
}