/* Figma Variables Export */ /* Generated on 2026-03-31T16:19:15.057Z */ /* All Modes */ /* Mode: Dark */ [data-mode*="Dark"] { --accordion-background: var(--background-global-paper2); --accordion-bordercoloractive: var(--border-active); --accordion-bordercolorresting: var(--border-light); --accordion-fontcolor: var(--text-main); --background-be-default: var(--background-dark-be-background); --background-global-default: var(--background-dark-global-background); --background-global-overlay: var(--background-dark-global-overlay); --background-global-paper1: var(--background-dark-global-paper1); --background-global-paper2: var(--background-dark-global-paper2); --background-global-paper3: var(--background-dark-global-paper3); --border-active: var(--colors-primitives-grey-scale-black-50); --border-activeondark: var(--colors-primitives-grey-scale-black-70); --border-default: var(--colors-primitives-grey-scale-black-70); --border-defaultondark: var(--colors-primitives-grey-scale-black-70); --border-disabled: var(--colors-primitives-grey-scale-black-80); --border-disabledondark: var(--colors-primitives-grey-scale-black-70); --border-error: var(--brand-error-brand); --border-light: var(--colors-primitives-grey-scale-black-85); --brand-error-brand: var(--colors-brand-error-dark-mode-brand); --brand-error-brandhover: var(--colors-brand-error-dark-mode-brandhover); --brand-error-brandlight: var(--colors-brand-error-dark-mode-brandlight); --brand-error-brandlighthover: var(--colors-brand-error-dark-mode-brandlighthover); --brand-error-onbrand: var(--colors-brand-error-dark-mode-onbrand); --brand-error-onbrandlight: var(--colors-brand-error-dark-mode-onbrandlight); --brand-neutral-brand: var(--colors-brand-neutral-dark-mode-brand); --brand-neutral-brandhover: var(--colors-brand-neutral-dark-mode-brandhover); --brand-neutral-brandlight: var(--colors-brand-neutral-dark-mode-brandlight); --brand-neutral-brandlighthover: var(--colors-brand-neutral-dark-mode-brandlighthover); --brand-neutral-onbrand: var(--colors-brand-neutral-dark-mode-onbrand); --brand-neutral-onbrandlight: var(--colors-brand-neutral-dark-mode-onbrandlight); --brand-primary-brand: var(--colors-brand-primary-dark-mode-brand); --brand-primary-brandhover: var(--colors-brand-primary-dark-mode-brandhover); --brand-primary-brandlight: var(--colors-brand-primary-dark-mode-brandlight); --brand-primary-brandlighthover: var(--colors-brand-primary-dark-mode-brandlighthover); --brand-primary-onbrand: var(--colors-brand-primary-dark-mode-onbrand); --brand-primary-onbrandlight: var(--colors-brand-primary-dark-mode-onbrandlight); --brand-secondary-brand: var(--colors-brand-secondary-dark-mode-brand); --brand-secondary-brandhover: var(--colors-brand-secondary-dark-mode-brandhover); --brand-secondary-brandlight: var(--colors-brand-secondary-dark-mode-brandlight); --brand-secondary-brandlighthover: var(--colors-brand-secondary-dark-mode-brandlighthover); --brand-secondary-onbrand: var(--colors-brand-secondary-dark-mode-onbrand); --brand-secondary-onbrandlight: var(--colors-brand-secondary-dark-mode-onbrandlight); --brand-success-brand: var(--colors-brand-success-dark-mode-brand); --brand-success-brandhover: var(--colors-brand-success-dark-mode-brandhover); --brand-success-brandlight: var(--colors-brand-success-dark-mode-brandlight); --brand-success-brandlighthover: var(--colors-brand-success-dark-mode-brandlighthover); --brand-success-onbrand: var(--colors-brand-success-dark-mode-onbrand); --brand-success-onbrandlight: var(--colors-brand-success-dark-mode-onbrandlight); --brand-warning-brand: var(--colors-brand-warning-dark-mode-brand); --brand-warning-brandhover: var(--colors-brand-warning-dark-mode-brandhover); --brand-warning-brandlight: var(--colors-brand-warning-dark-mode-brandlight); --brand-warning-brandlighthover: var(--colors-brand-warning-dark-mode-brandlighthover); --brand-warning-onbrand: var(--colors-brand-warning-dark-mode-onbrand); --brand-warning-onbrandlight: var(--colors-brand-warning-dark-mode-onbrandlight); --button-disabled-high-focused-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-high-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-focused-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-high-hover-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-hover-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-high-loading-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-high-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-loading-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-high-pressed-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-pressed-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-high-resting-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-resting-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-focused-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-hover-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-loading-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-pressed-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-resting-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-focused-background: var(--colors-primitives-grey-scale-black-80); --button-disabled-medium-low-focused-border-color: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-focused-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-hover-border-color: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-hover-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-loading-border-color: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-loading-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-pressed-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-resting-border-color: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-low-resting-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-focused-background: var(--colors-primitives-grey-scale-black-85); --button-disabled-medium-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-focused-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-hover-background: var(--colors-primitives-grey-scale-black-85); --button-disabled-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-hover-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-loading-background: var(--colors-primitives-grey-scale-black-85); --button-disabled-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-loading-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-pressed-background: var(--colors-primitives-grey-scale-black-85); --button-disabled-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-pressed-foreground: var(--colors-primitives-grey-scale-black-60); --button-disabled-medium-resting-background: var(--colors-primitives-grey-scale-black-85); --button-disabled-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-resting-foreground: var(--colors-primitives-grey-scale-black-60); --button-error-high-focused-background: var(--brand-error-brandhover); --button-error-high-focused-border-color: var(--brand-error-brand); --button-error-high-focused-foreground: var(--brand-error-onbrand); --button-error-high-hover-background: var(--brand-error-brandhover); --button-error-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-hover-foreground: var(--brand-error-onbrand); --button-error-high-loading-background: var(--brand-error-brandhover); --button-error-high-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-loading-foreground: var(--brand-error-onbrand); --button-error-high-pressed-background: var(--brand-error-brandhover); --button-error-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-pressed-foreground: var(--brand-error-onbrand); --button-error-high-resting-background: var(--brand-error-brand); --button-error-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-resting-foreground: var(--brand-error-onbrand); --button-error-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-focused-border-color: var(--brand-error-brand); --button-error-low-focused-foreground: var(--brand-error-brandhover); --button-error-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-hover-foreground: var(--brand-error-brandhover); --button-error-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-loading-foreground: var(--brand-error-brandhover); --button-error-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-pressed-foreground: var(--brand-error-brandhover); --button-error-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-resting-foreground: var(--brand-error-brand); --button-error-medium-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-focused-border-color: var(--brand-error-brandhover); --button-error-medium-low-focused-foreground: var(--brand-error-brandhover); --button-error-medium-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-hover-border-color: var(--brand-error-brandhover); --button-error-medium-low-hover-foreground: var(--brand-error-brandhover); --button-error-medium-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-loading-border-color: var(--brand-error-brandhover); --button-error-medium-low-loading-foreground: var(--brand-error-brandhover); --button-error-medium-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-pressed-border-color: var(--brand-error-brandhover); --button-error-medium-low-pressed-foreground: var(--brand-error-brandhover); --button-error-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-resting-border-color: var(--brand-error-brand); --button-error-medium-low-resting-foreground: var(--brand-error-brand); --button-error-medium-focused-background: var(--brand-error-brandlighthover); --button-error-medium-focused-border-color: var(--brand-error-brand); --button-error-medium-focused-foreground: var(--brand-error-onbrandlight); --button-error-medium-hover-background: var(--brand-error-brandlighthover); --button-error-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-hover-foreground: var(--brand-error-onbrandlight); --button-error-medium-loading-background: var(--brand-error-brandlighthover); --button-error-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-loading-foreground: var(--brand-error-brand); --button-error-medium-pressed-background: var(--brand-error-brandlighthover); --button-error-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-pressed-foreground: var(--brand-error-onbrandlight); --button-error-medium-resting-background: var(--brand-error-brandlight); --button-error-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-resting-foreground: var(--brand-error-onbrandlight); --button-neutral-high-focused-background: var(--brand-neutral-brandhover); --button-neutral-high-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-high-focused-foreground: var(--brand-neutral-onbrand); --button-neutral-high-hover-background: var(--brand-neutral-brand); --button-neutral-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-hover-foreground: var(--brand-neutral-onbrand); --button-neutral-high-loading-background: var(--brand-neutral-brandhover); --button-neutral-high-loading-border-color: var(--brand-neutral-brandhover); --button-neutral-high-loading-foreground: var(--brand-neutral-onbrand); --button-neutral-high-pressed-background: var(--brand-neutral-brand); --button-neutral-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-pressed-foreground: var(--brand-neutral-onbrand); --button-neutral-high-resting-background: var(--brand-neutral-brand); --button-neutral-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-resting-foreground: var(--brand-neutral-onbrand); --button-neutral-low-focused-background: var(--brand-neutral-brandhover); --button-neutral-low-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-low-focused-foreground: var(--brand-neutral-onbrand); --button-neutral-low-hover-background: var(--brand-neutral-brand); --button-neutral-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-hover-foreground: var(--brand-neutral-onbrand); --button-neutral-low-loading-background: var(--brand-neutral-brandhover); --button-neutral-low-loading-border-color: var(--brand-neutral-brandhover); --button-neutral-low-loading-foreground: var(--brand-neutral-onbrand); --button-neutral-low-pressed-background: var(--brand-neutral-brand); --button-neutral-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-pressed-foreground: var(--brand-neutral-onbrand); --button-neutral-low-resting-background: var(--brand-neutral-brand); --button-neutral-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-resting-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-low-focused-background: var(--brand-neutral-brandhover); --button-neutral-medium-low-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-medium-low-focused-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-low-hover-background: var(--brand-neutral-brand); --button-neutral-medium-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-low-hover-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-low-loading-background: var(--brand-neutral-brandhover); --button-neutral-medium-low-loading-border-color: var(--brand-neutral-brandhover); --button-neutral-medium-low-loading-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-low-pressed-background: var(--brand-neutral-brand); --button-neutral-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-low-pressed-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-low-resting-background: var(--brand-neutral-brand); --button-neutral-medium-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-low-resting-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-focused-background: var(--brand-neutral-brandhover); --button-neutral-medium-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-medium-focused-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-hover-background: var(--brand-neutral-brand); --button-neutral-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-hover-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-loading-background: var(--brand-neutral-brandhover); --button-neutral-medium-loading-border-color: var(--brand-neutral-brandhover); --button-neutral-medium-loading-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-pressed-background: var(--brand-neutral-brand); --button-neutral-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-pressed-foreground: var(--brand-neutral-onbrand); --button-neutral-medium-resting-background: var(--brand-neutral-brand); --button-neutral-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-resting-foreground: var(--brand-neutral-onbrand); --button-primary-high-focused-background: var(--brand-primary-brandhover); --button-primary-high-focused-border-color: var(--brand-primary-brandhover); --button-primary-high-focused-foreground: var(--brand-primary-onbrand); --button-primary-high-hover-background: var(--brand-primary-brand); --button-primary-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-hover-foreground: var(--brand-primary-onbrand); --button-primary-high-loading-background: var(--brand-primary-brandhover); --button-primary-high-loading-border-color: var(--brand-primary-brandhover); --button-primary-high-loading-foreground: var(--brand-primary-onbrand); --button-primary-high-pressed-background: var(--brand-primary-brand); --button-primary-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-pressed-foreground: var(--brand-primary-onbrand); --button-primary-high-resting-background: var(--brand-primary-brand); --button-primary-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-resting-foreground: var(--brand-primary-onbrand); --button-primary-low-focused-background: var(--brand-primary-brandhover); --button-primary-low-focused-border-color: var(--brand-primary-brandhover); --button-primary-low-focused-foreground: var(--brand-primary-onbrand); --button-primary-low-hover-background: var(--brand-primary-brand); --button-primary-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-low-hover-foreground: var(--brand-primary-onbrand); --button-primary-low-loading-background: var(--brand-primary-brandhover); --button-primary-low-loading-border-color: var(--brand-primary-brandhover); --button-primary-low-loading-foreground: var(--brand-primary-onbrand); --button-primary-low-pressed-background: var(--brand-primary-brand); --button-primary-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-low-pressed-foreground: var(--brand-primary-onbrand); --button-primary-low-resting-background: var(--brand-primary-brand); --button-primary-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-low-resting-foreground: var(--brand-primary-onbrand); --button-primary-medium-low-focused-background: var(--brand-primary-brandhover); --button-primary-medium-low-focused-border-color: var(--brand-primary-brandhover); --button-primary-medium-low-focused-foreground: var(--brand-primary-onbrand); --button-primary-medium-low-hover-background: var(--brand-primary-brand); --button-primary-medium-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-low-hover-foreground: var(--brand-primary-onbrand); --button-primary-medium-low-loading-background: var(--brand-primary-brandhover); --button-primary-medium-low-loading-border-color: var(--brand-primary-brandhover); --button-primary-medium-low-loading-foreground: var(--brand-primary-onbrand); --button-primary-medium-low-pressed-background: var(--brand-primary-brand); --button-primary-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-low-pressed-foreground: var(--brand-primary-onbrand); --button-primary-medium-low-resting-background: var(--brand-primary-brand); --button-primary-medium-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-low-resting-foreground: var(--brand-primary-onbrand); --button-primary-medium-focused-background: var(--brand-primary-brandhover); --button-primary-medium-focused-border-color: var(--brand-primary-brandhover); --button-primary-medium-focused-foreground: var(--brand-primary-onbrand); --button-primary-medium-hover-background: var(--brand-primary-brand); --button-primary-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-hover-foreground: var(--brand-primary-onbrand); --button-primary-medium-loading-background: var(--brand-primary-brandhover); --button-primary-medium-loading-border-color: var(--brand-primary-brandhover); --button-primary-medium-loading-foreground: var(--brand-primary-onbrand); --button-primary-medium-pressed-background: var(--brand-primary-brand); --button-primary-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-pressed-foreground: var(--brand-primary-onbrand); --button-primary-medium-resting-background: var(--brand-primary-brand); --button-primary-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-resting-foreground: var(--brand-primary-onbrand); --button-secondary-high-focused-background: var(--brand-secondary-brandhover); --button-secondary-high-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-high-focused-foreground: var(--brand-secondary-onbrand); --button-secondary-high-hover-background: var(--brand-secondary-brand); --button-secondary-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-hover-foreground: var(--brand-secondary-onbrand); --button-secondary-high-loading-background: var(--brand-secondary-brandhover); --button-secondary-high-loading-border-color: var(--brand-secondary-brandhover); --button-secondary-high-loading-foreground: var(--brand-secondary-onbrand); --button-secondary-high-pressed-background: var(--brand-secondary-brand); --button-secondary-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-pressed-foreground: var(--brand-secondary-onbrand); --button-secondary-high-resting-background: var(--brand-secondary-brand); --button-secondary-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-resting-foreground: var(--brand-secondary-onbrand); --button-secondary-low-focused-background: var(--brand-secondary-brandhover); --button-secondary-low-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-low-focused-foreground: var(--brand-secondary-onbrand); --button-secondary-low-hover-background: var(--brand-secondary-brand); --button-secondary-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-hover-foreground: var(--brand-secondary-onbrand); --button-secondary-low-loading-background: var(--brand-secondary-brandhover); --button-secondary-low-loading-border-color: var(--brand-secondary-brandhover); --button-secondary-low-loading-foreground: var(--brand-secondary-onbrand); --button-secondary-low-pressed-background: var(--brand-secondary-brand); --button-secondary-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-pressed-foreground: var(--brand-secondary-onbrand); --button-secondary-low-resting-background: var(--brand-secondary-brand); --button-secondary-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-resting-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-low-focused-background: var(--brand-secondary-brandhover); --button-secondary-medium-low-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-medium-low-focused-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-low-hover-background: var(--brand-secondary-brand); --button-secondary-medium-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-low-hover-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-low-loading-background: var(--brand-secondary-brandhover); --button-secondary-medium-low-loading-border-color: var(--brand-secondary-brandhover); --button-secondary-medium-low-loading-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-low-pressed-background: var(--brand-secondary-brand); --button-secondary-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-low-pressed-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-low-resting-background: var(--brand-secondary-brand); --button-secondary-medium-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-low-resting-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-focused-background: var(--brand-secondary-brandhover); --button-secondary-medium-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-medium-focused-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-hover-background: var(--brand-secondary-brand); --button-secondary-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-hover-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-loading-background: var(--brand-secondary-brandhover); --button-secondary-medium-loading-border-color: var(--brand-secondary-brandhover); --button-secondary-medium-loading-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-pressed-background: var(--brand-secondary-brand); --button-secondary-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-pressed-foreground: var(--brand-secondary-onbrand); --button-secondary-medium-resting-background: var(--brand-secondary-brand); --button-secondary-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-resting-foreground: var(--brand-secondary-onbrand); --button-success-high-focused-background: var(--brand-success-brandhover); --button-success-high-focused-border-color: var(--brand-success-brand); --button-success-high-focused-foreground: var(--brand-success-onbrand); --button-success-high-hover-background: var(--brand-success-brandhover); --button-success-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-hover-foreground: var(--brand-success-onbrand); --button-success-high-loading-background: var(--brand-success-brandhover); --button-success-high-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-loading-foreground: var(--brand-success-onbrand); --button-success-high-pressed-background: var(--brand-success-brandhover); --button-success-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-pressed-foreground: var(--brand-success-onbrand); --button-success-high-resting-background: var(--brand-success-brand); --button-success-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-resting-foreground: var(--brand-success-onbrand); --button-success-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-focused-border-color: var(--brand-success-brandhover); --button-success-low-focused-foreground: var(--brand-success-brandhover); --button-success-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-hover-foreground: var(--brand-success-brandhover); --button-success-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-loading-foreground: var(--brand-success-brandhover); --button-success-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-pressed-foreground: var(--brand-success-brandhover); --button-success-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-resting-foreground: var(--brand-success-brand); --button-success-medium-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-focused-border-color: var(--brand-success-brandhover); --button-success-medium-low-focused-foreground: var(--brand-success-brandhover); --button-success-medium-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-hover-border-color: var(--brand-success-brandhover); --button-success-medium-low-hover-foreground: var(--brand-success-brandhover); --button-success-medium-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-loading-border-color: var(--brand-success-brandhover); --button-success-medium-low-loading-foreground: var(--brand-success-brandhover); --button-success-medium-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-pressed-border-color: var(--brand-success-brandhover); --button-success-medium-low-pressed-foreground: var(--brand-success-brandhover); --button-success-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-resting-border-color: var(--brand-success-brand); --button-success-medium-low-resting-foreground: var(--brand-success-brand); --button-success-medium-focused-background: var(--brand-success-brandlighthover); --button-success-medium-focused-border-color: var(--brand-success-brand); --button-success-medium-focused-foreground: var(--brand-success-onbrandlight); --button-success-medium-hover-background: var(--brand-success-brandlighthover); --button-success-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-hover-foreground: var(--brand-success-onbrandlight); --button-success-medium-loading-background: var(--brand-success-brandlight); --button-success-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-loading-foreground: var(--brand-success-brand); --button-success-medium-pressed-background: var(--brand-success-brandlighthover); --button-success-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-pressed-foreground: var(--brand-success-onbrandlight); --button-success-medium-resting-background: var(--brand-success-brandlight); --button-success-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-resting-foreground: var(--brand-success-onbrandlight); --button-warning-high-focused-background: var(--brand-warning-brandhover); --button-warning-high-focused-border-color: var(--brand-warning-brand); --button-warning-high-focused-foreground: var(--brand-warning-onbrand); --button-warning-high-hover-background: var(--brand-warning-brandhover); --button-warning-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-hover-foreground: var(--brand-warning-onbrand); --button-warning-high-loading-background: var(--brand-warning-brandhover); --button-warning-high-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-loading-foreground: var(--brand-warning-onbrandlight); --button-warning-high-pressed-background: var(--brand-warning-brandhover); --button-warning-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-pressed-foreground: var(--brand-warning-onbrand); --button-warning-high-resting-background: var(--brand-warning-brand); --button-warning-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-resting-foreground: var(--brand-warning-onbrand); --button-warning-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-focused-border-color: var(--brand-warning-brand); --button-warning-low-focused-foreground: var(--brand-warning-brandhover); --button-warning-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-hover-foreground: var(--brand-warning-brandhover); --button-warning-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-loading-foreground: var(--brand-warning-brandhover); --button-warning-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-pressed-foreground: var(--brand-warning-brandhover); --button-warning-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-resting-foreground: var(--brand-warning-brand); --button-warning-medium-low-focused-background: var(--brand-warning-brandlight); --button-warning-medium-low-focused-border-color: var(--brand-warning-brandhover); --button-warning-medium-low-focused-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-hover-background: var(--brand-warning-brandlight); --button-warning-medium-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-low-hover-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-low-loading-border-color: var(--brand-warning-brandhover); --button-warning-medium-low-loading-foreground: var(--brand-warning-brandhover); --button-warning-medium-low-pressed-background: var(--brand-warning-brandlight); --button-warning-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-low-pressed-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-low-resting-border-color: var(--brand-warning-brand); --button-warning-medium-low-resting-foreground: var(--brand-warning-brand); --button-warning-medium-focused-background: var(--brand-warning-brandlighthover); --button-warning-medium-focused-border-color: var(--brand-warning-brandhover); --button-warning-medium-focused-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-hover-background: var(--brand-warning-brandlighthover); --button-warning-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-hover-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-loading-background: var(--brand-warning-brandlighthover); --button-warning-medium-loading-border-color: var(--brand-warning-brandhover); --button-warning-medium-loading-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-pressed-background: var(--brand-warning-brandlighthover); --button-warning-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-pressed-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-resting-background: var(--brand-warning-brandlight); --button-warning-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-resting-foreground: var(--brand-warning-onbrandlight); --card-important-background: var(--colors-primitives-grey-scale-transparent); --card-important-border-color: var(--colors-brand-secondary-dark-mode-brand); --card-important-subtitle: var(--text-secondary); --card-important-title: var(--text-main); --card-transparent-background: var(--colors-primitives-grey-scale-transparent); --card-transparent-border-color: var(--border-light); --card-transparent-subtitle: var(--text-secondary); --card-transparent-title: var(--text-main); --card-white-background: var(--background-global-paper1); --card-white-border-color: var(--border-light); --card-white-subtitle: var(--text-secondary); --card-white-title: var(--text-main); --chip-active-background: var(--background-global-paper1); --chip-active-border-color: var(--brand-secondary-brand); --chip-active-foreground: var(--brand-secondary-brand); --chip-hover-background: var(--colors-primitives-grey-scale-black-80); --chip-hover-border-color: var(--brand-secondary-brand); --chip-hover-foreground: var(--brand-secondary-brandhover); --chip-resting-background: var(--background-global-paper1); --chip-resting-border-color: var(--colors-primitives-grey-scale-transparent); --chip-resting-foreground: var(--brand-secondary-brand); --divider-background: var(--colors-primitives-grey-scale-black-80); --google-snippet-foreground: #b0aaf9; --label-default-background: var(--colors-primitives-grey-scale-transparent); --label-default-border-color: var(--border-default); --label-default-foreground: var(--text-secondary); --label-error-background: var(--colors-primitives-grey-scale-transparent); --label-error-border-color: var(--colors-brand-error-dark-mode-brand); --label-error-foreground: var(--colors-brand-error-dark-mode-brand); --label-success-background: var(--colors-primitives-grey-scale-transparent); --label-success-border-color: var(--colors-brand-success-dark-mode-brand); --label-success-foreground: var(--colors-brand-success-dark-mode-brand); --label-warning-background: var(--colors-primitives-grey-scale-transparent); --label-warning-border-color: var(--colors-brand-warning-dark-mode-brand); --label-warning-foreground: var(--colors-brand-warning-dark-mode-brand); --text-editor-active-background: var(--background-global-default); --text-editor-active-foreground: var(--text-main); --text-editor-disabled-background: var(--colors-primitives-grey-scale-black-95); --text-editor-disabled-foreground: var(--text-disabled); --text-disabled: var(--colors-primitives-grey-scale-black-50); --text-main: var(--colors-primitives-grey-scale-black-0); --text-secondary: var(--colors-primitives-grey-scale-black-30); --toggle-off-default-background: var(--colors-primitives-grey-scale-black-80); --toggle-off-default-foreground: var(--colors-primitives-grey-scale-black-10); --toggle-off-disabled-background: var(--colors-primitives-grey-scale-black-85); --toggle-off-disabled-foreground: var(--colors-primitives-grey-scale-black-60); --toggle-on-default-background: var(--brand-secondary-brand); --toggle-on-default-foreground: var(--brand-secondary-onbrand); --toggle-on-disabled-background: var(--colors-primitives-grey-scale-black-85); --toggle-on-disabled-foreground: var(--colors-primitives-grey-scale-black-60); --accordion-borderwidth: 1px; --button-disabled-high-focused-border-width: ; --button-disabled-high-hover-border-width: ; --button-disabled-high-loading-border-width: ; --button-disabled-high-pressed-border-width: ; --button-disabled-high-resting-border-width: ; --button-disabled-low-focused-border-width: ; --button-disabled-low-hover-border-width: ; --button-disabled-low-loading-border-width: ; --button-disabled-low-pressed-border-width: ; --button-disabled-low-resting-border-width: ; --button-disabled-medium-low-focused-border-width: 1px; --button-disabled-medium-low-hover-border-width: 1px; --button-disabled-medium-low-loading-border-width: 1px; --button-disabled-medium-low-pressed-border-width: 1px; --button-disabled-medium-low-resting-border-width: 1px; --button-disabled-medium-focused-border-width: ; --button-disabled-medium-hover-border-width: ; --button-disabled-medium-loading-border-width: ; --button-disabled-medium-pressed-border-width: ; --button-disabled-medium-resting-border-width: ; --button-error-high-focused-border-width: 1px; --button-error-high-hover-border-width: ; --button-error-high-loading-border-width: ; --button-error-high-pressed-border-width: ; --button-error-high-resting-border-width: ; --button-error-low-focused-border-width: 1px; --button-error-low-hover-border-width: ; --button-error-low-loading-border-width: ; --button-error-low-pressed-border-width: ; --button-error-low-resting-border-width: ; --button-error-medium-low-focused-border-width: 1px; --button-error-medium-low-hover-border-width: 1px; --button-error-medium-low-loading-border-width: 1px; --button-error-medium-low-pressed-border-width: 1px; --button-error-medium-low-resting-border-width: 1px; --button-error-medium-focused-border-width: 1px; --button-error-medium-hover-border-width: ; --button-error-medium-loading-border-width: ; --button-error-medium-pressed-border-width: ; --button-error-medium-resting-border-width: ; --button-neutral-high-focused-border-width: 1px; --button-neutral-high-hover-border-width: ; --button-neutral-high-loading-border-width: ; --button-neutral-high-pressed-border-width: ; --button-neutral-high-resting-border-width: ; --button-neutral-low-focused-border-width: 1px; --button-neutral-low-hover-border-width: 1px; --button-neutral-low-loading-border-width: ; --button-neutral-low-pressed-border-width: ; --button-neutral-low-resting-border-width: 1px; --button-neutral-medium-low-focused-border-width: 1px; --button-neutral-medium-low-hover-border-width: 1px; --button-neutral-medium-low-loading-border-width: ; --button-neutral-medium-low-pressed-border-width: ; --button-neutral-medium-low-resting-border-width: 1px; --button-neutral-medium-focused-border-width: 1px; --button-neutral-medium-hover-border-width: ; --button-neutral-medium-loading-border-width: ; --button-neutral-medium-pressed-border-width: ; --button-neutral-medium-resting-border-width: ; --button-primary-high-focused-border-width: 1px; --button-primary-high-hover-border-width: ; --button-primary-high-loading-border-width: ; --button-primary-high-pressed-border-width: ; --button-primary-high-resting-border-width: ; --button-primary-low-focused-border-width: 1px; --button-primary-low-hover-border-width: 1px; --button-primary-low-loading-border-width: ; --button-primary-low-pressed-border-width: ; --button-primary-low-resting-border-width: 1px; --button-primary-medium-low-focused-border-width: 1px; --button-primary-medium-low-hover-border-width: 1px; --button-primary-medium-low-loading-border-width: ; --button-primary-medium-low-pressed-border-width: ; --button-primary-medium-low-resting-border-width: 1px; --button-primary-medium-focused-border-width: 1px; --button-primary-medium-hover-border-width: ; --button-primary-medium-loading-border-width: ; --button-primary-medium-pressed-border-width: ; --button-primary-medium-resting-border-width: ; --button-secondary-high-focused-border-width: 1px; --button-secondary-high-hover-border-width: ; --button-secondary-high-loading-border-width: ; --button-secondary-high-pressed-border-width: ; --button-secondary-high-resting-border-width: ; --button-secondary-low-focused-border-width: 1px; --button-secondary-low-hover-border-width: 1px; --button-secondary-low-loading-border-width: ; --button-secondary-low-pressed-border-width: ; --button-secondary-low-resting-border-width: 1px; --button-secondary-medium-low-focused-border-width: 1px; --button-secondary-medium-low-hover-border-width: 1px; --button-secondary-medium-low-loading-border-width: ; --button-secondary-medium-low-pressed-border-width: ; --button-secondary-medium-low-resting-border-width: 1px; --button-secondary-medium-focused-border-width: 1px; --button-secondary-medium-hover-border-width: ; --button-secondary-medium-loading-border-width: ; --button-secondary-medium-pressed-border-width: ; --button-secondary-medium-resting-border-width: ; --button-success-high-focused-border-width: 1px; --button-success-high-hover-border-width: ; --button-success-high-loading-border-width: ; --button-success-high-pressed-border-width: ; --button-success-high-resting-border-width: ; --button-success-low-focused-border-width: 1px; --button-success-low-hover-border-width: ; --button-success-low-loading-border-width: ; --button-success-low-pressed-border-width: ; --button-success-low-resting-border-width: ; --button-success-medium-low-focused-border-width: 1px; --button-success-medium-low-hover-border-width: 1px; --button-success-medium-low-loading-border-width: 1px; --button-success-medium-low-pressed-border-width: 1px; --button-success-medium-low-resting-border-width: 1px; --button-success-medium-focused-border-width: 1px; --button-success-medium-hover-border-width: ; --button-success-medium-loading-border-width: ; --button-success-medium-pressed-border-width: ; --button-success-medium-resting-border-width: ; --button-warning-high-focused-border-width: 1px; --button-warning-high-hover-border-width: ; --button-warning-high-loading-border-width: ; --button-warning-high-pressed-border-width: ; --button-warning-high-resting-border-width: ; --button-warning-low-focused-border-width: 1px; --button-warning-low-hover-border-width: ; --button-warning-low-loading-border-width: ; --button-warning-low-pressed-border-width: ; --button-warning-low-resting-border-width: ; --button-warning-medium-low-focused-border-width: 1px; --button-warning-medium-low-hover-border-width: ; --button-warning-medium-low-loading-border-width: 1px; --button-warning-medium-low-pressed-border-width: ; --button-warning-medium-low-resting-border-width: 1px; --button-warning-medium-focused-border-width: 1px; --button-warning-medium-hover-border-width: ; --button-warning-medium-loading-border-width: ; --button-warning-medium-pressed-border-width: ; --button-warning-medium-resting-border-width: ; --card-important-border-width: 1px; --card-transparent-border-width: 1px; --card-white-border-width: 1px; --chip-active-border-width: 1px; --chip-hover-border-width: ; --chip-resting-border-width: ; --label-default-border-width: 1px; --label-error-border-width: 1px; --label-success-border-width: 1px; --label-warning-border-width: 1px; --mode: "Dark"; } /* Mode: Desktop */ [data-mode*="Desktop"] { --be---page-navigation-width: 200px; --be---page-padding-bottom: var(--spacing-2xl---desktop); --be---page-padding-left: var(--spacing-2xl---desktop); --be---page-padding-right: var(--spacing-2xl---desktop); --be---page-padding-top: var(--spacing-2xl---desktop); --be---page-page-min-height: 982px; --be---page-spacing: var(--spacing-xl---desktop); --button-large-corner-radius: var(--button-size-large-corner-radius---desktop); --button-large-font-line-height: var(--button-size-large-font-line-height---desktop); --button-large-font-size: var(--button-size-large-font-size---desktop); --button-large-font-weight: var(--button-size-large-font-weight---desktop); --button-large-icon: var(--button-size-large-font-size---desktop); --button-large-paddingbottom: var(--button-size-large-paddingbottom---desktop); --button-large-paddingleft: var(--button-size-large-paddingleft---desktop); --button-large-paddingright: var(--button-size-large-paddingright---desktop); --button-large-paddingtop: var(--button-size-large-paddingtop---desktop); --button-large-spacing: var(--button-size-large-spacing---desktop); --button-medium-corner-radius: var(--button-size-medium-corner-radius---desktop); --button-medium-font-line-height: var(--button-size-medium-font-line-height---desktop); --button-medium-font-size: var(--button-size-medium-font-size---desktop); --button-medium-font-weight: var(--button-size-medium-font-weight---desktop); --button-medium-icon: var(--button-size-medium-font-size---desktop); --button-medium-paddingbottom: var(--button-size-medium-paddingbottom---desktop); --button-medium-paddingleft: var(--button-size-medium-paddingleft---desktop); --button-medium-paddingright: var(--button-size-medium-paddingright---desktop); --button-medium-paddingtop: var(--button-size-medium-paddingtop---desktop); --button-medium-spacing: var(--button-size-medium-spacing---desktop); --button-small-corner-radius: var(--button-size-small-corner-radius---desktop); --button-small-font-line-height: var(--button-size-small-font-line-height---desktop); --button-small-font-size: var(--button-size-small-font-size---desktop); --button-small-font-weight: var(--button-size-small-font-weight---desktop); --button-small-icon: var(--button-size-small-font-size---desktop); --button-small-paddingbottom: var(--button-size-small-paddingbottom---desktop); --button-small-paddingleft: var(--button-size-small-paddingleft---desktop); --button-small-paddingright: var(--button-size-small-paddingright---desktop); --button-small-paddingtop: var(--button-size-small-paddingtop---desktop); --button-small-spacing: var(--button-size-small-spacing---desktop); --chip-corner-radius: var(--corner-radius-rounded); --chip-paddingbottom: var(--spacing-m---desktop); --chip-paddingleft: var(--spacing-xl---desktop); --chip-paddingright: var(--spacing-xl---desktop); --chip-paddingtop: var(--spacing-m---desktop); --chip-spacing: var(--spacing-xs---desktop); --corner-radius-0: var(--corner-radius-0); --corner-radius-2xl: var(--corner-radius-2xl); --corner-radius-2xs: var(--corner-radius-2xs); --corner-radius-l: var(--corner-radius-l); --corner-radius-m: var(--corner-radius-m); --corner-radius-s: var(--corner-radius-s); --corner-radius-xl: var(--corner-radius-xl); --corner-radius-xs: var(--corner-radius-xs); --corner-radius-rounded: var(--corner-radius-rounded); --drag-handle-padding: var(--spacing-xs---desktop); --dropdown-item-font-line-height: var(--typography-body-size-medium); --dropdown-item-font-size: var(--typography-body-size-medium); --dropdown-item-font-weight: var(--typography-body-weight-medium); --dropdown-item-corner-radius: var(--corner-radius-s); --dropdown-item-icon: var(--typography-body-size-medium); --dropdown-item-paddingbottom: var(--spacing-s---desktop); --dropdown-item-paddingleft: var(--spacing-s---desktop); --dropdown-item-paddingright: var(--spacing-s---desktop); --dropdown-item-paddingtop: var(--spacing-s---desktop); --dropdown-item-spacing: var(--spacing-s---desktop); --dropdown-list-corner-radius: var(--corner-radius-m); --dropdown-list-padding: var(--spacing-s---desktop); --dropdown-list-spacing: var(--spacing-xs---desktop); --filter-borderradius: var(--corner-radius-s); --filter-borderwidth: 1px; --filter-icon: var(--typography-body-size-small); --filter-paddingbottom: var(--spacing-xs---desktop); --filter-paddingleft: var(--spacing-s---desktop); --filter-paddingright: var(--spacing-s---desktop); --filter-paddingtop: var(--spacing-xs---desktop); --filter-spacing: var(--spacing-xs---desktop); --icon-button-large-corner-radius: var(--icon-button-size-large-corner-radius---desktop); --icon-button-large-icon: var(--icon-button-size-large-icon---desktop); --icon-button-large-padding: var(--icon-button-size-large-padding---desktop); --icon-button-medium-corner-radius: var(--icon-button-size-medium-corner-radius---desktop); --icon-button-medium-icon: var(--icon-button-size-medium-icon---desktop); --icon-button-medium-padding: var(--icon-button-size-medium-padding---desktop); --icon-button-small-corner-radius: var(--icon-button-size-small-corner-radius---desktop); --icon-button-small-icon: var(--icon-button-size-small-icon---desktop); --icon-button-small-padding: var(--icon-button-size-small-padding---desktop); --label-border-radius: var(--corner-radius-xs); --label-font-line-height: var(--typography-label-line-height-small); --label-font-size: var(--typography-label-size-small); --label-font-weight: var(--typography-label-weight-small); --label-icon-size: var(--typography-label-size-small); --label-min-height: 18px; --label-padding-bottom: var(--spacing-xs---desktop); --label-padding-left: var(--spacing-xs---desktop); --label-padding-right: var(--spacing-xs---desktop); --label-padding-top: var(--spacing-xs---desktop); --label-spacing: var(--spacing-xs---desktop); --menu-label-borderradius: var(--corner-radius-xs); --menu-label-borderwidth: ; --menu-label-paddingleft: var(--spacing-m---desktop); --menu-label-paddingright: var(--spacing-s---desktop); --menu-label-paddingvertical: var(--spacing-s---desktop); --menu-label-spacing: var(--spacing-xs---desktop); --spacing-0: var(--spacing-0---desktop); --spacing-2xl: var(--spacing-2xl---desktop); --spacing-3xl: var(--spacing-3xl---desktop); --spacing-4xl: var(--spacing-4xl---desktop); --spacing-5xl: var(--spacing-5xl---desktop); --spacing-6xl: var(--spacing-6xl---desktop); --spacing-7xl: var(--spacing-7xl---desktop); --spacing-8xl: var(--spacing-8xl---desktop); --spacing-l: var(--spacing-l---desktop); --spacing-m: var(--spacing-m---desktop); --spacing-s: var(--spacing-s---desktop); --spacing-xl: var(--spacing-xl---desktop); --spacing-xs: var(--spacing-xs---desktop); --typography-body-line-height-large: 24px; --typography-body-line-height-medium: 22px; --typography-body-line-height-small: 16px; --typography-body-size-large: 18px; --typography-body-size-medium: 16px; --typography-body-size-small: 14px; --typography-body-weight-large: 400; --typography-body-weight-medium: 400; --typography-body-weight-small: 300; --typography-button-lineheight-large: 18px; --typography-button-lineheight-medium: 16px; --typography-button-lineheight-small: 12px; --typography-button-size-large: 20px; --typography-button-size-medium: 16px; --typography-button-size-small: 14px; --typography-button-weight-large: 600; --typography-button-weight-medium: 600; --typography-button-weight-small: 600; --typography-heading-line-height-medium: var(--typography-heading-medium-line-height---desktop); --typography-heading-size-medium: var(--typography-heading-medium-size---desktop); --typography-heading-weight-medium: var(--typography-heading-medium-weight---desktop); --typography-title-line-height-large: var(--typography-title-large-line-height---desktop); --typography-title-line-height-medium: var(--typography-title-medium-line-height---desktop); --typography-title-line-height-small: var(--typography-title-small-line-height---desktop); --typography-title-size-large: var(--typography-title-large-size---desktop); --typography-title-size-medium: var(--typography-title-medium-size---desktop); --typography-title-size-small: var(--typography-title-small-size---desktop); --typography-title-weight-large: var(--typography-title-large-weight---desktop); --typography-title-weight-medium: var(--typography-title-medium-weight---desktop); --typography-title-weight-small: var(--typography-title-small-weight---desktop); --typography-label-line-height-large: 11px; --typography-label-line-height-medium: 12px; --typography-label-line-height-small: 7px; --typography-label-size-large: 12px; --typography-label-size-medium: 12px; --typography-label-size-small: 10px; --typography-label-weight-large: 400; --typography-label-weight-medium: 400; --typography-label-weight-small: 500; --wl---page-horizontal-gap: var(--spacing-l---desktop); --wl---page-page-container: 1200px; --wl---page-sidebar-maxwidth: 283px; --wl---page-vertical-gap: var(--spacing-l---desktop); --wl---page-padding-bottom: var(--spacing-l---desktop); --wl---page-padding-left: var(--spacing-0---desktop); --wl---page-padding-right: var(--spacing-0---desktop); --wl---page-padding-top: var(--spacing-2xl---desktop); --device: "Desktop"; --dropdown-item-font: var(--typography-font-family-font-2); --label-font-family: var(--typography-font-family-font-2); --be---page-overlay: var(--background-global-overlay); --menu-label-background: var(--colors-primitives-grey-scale-transparent); --menu-label-backgroundactive: var(--colors-primitives-grey-scale-transparent); --menu-label-backgroundhover: var(--brand-primary-brandlight); --menu-label-bordercolor: var(--colors-primitives-grey-scale-transparent); --menu-label-foreground: var(--text-main); --menu-label-foregroundactive: var(--brand-primary-brand); --menu-label-foregroundhover: var(--brand-primary-brand); --wl---page-overlay: var(--background-global-overlay); } /* Mode: Light */ [data-mode*="Light"] { --accordion-background: var(--background-global-paper2); --accordion-bordercoloractive: var(--border-active); --accordion-bordercolorresting: var(--border-light); --accordion-fontcolor: var(--text-main); --background-be-default: var(--background-light-be-background); --background-global-default: var(--background-light-global-background); --background-global-overlay: var(--background-light-global-overlay); --background-global-paper1: var(--background-light-global-paper1); --background-global-paper2: var(--background-light-global-paper2); --background-global-paper3: var(--background-light-global-paper3); --border-active: var(--colors-primitives-grey-scale-black-50); --border-activeondark: var(--colors-primitives-grey-scale-black-0); --border-default: var(--colors-primitives-grey-scale-black-10); --border-defaultondark: var(--colors-primitives-grey-scale-black-70); --border-disabled: var(--colors-primitives-grey-scale-black-5); --border-disabledondark: var(--colors-primitives-grey-scale-black-50); --border-error: var(--brand-error-brand); --border-light: var(--colors-primitives-grey-scale-black-5); --brand-error-brand: var(--colors-brand-error-light-mode-brand); --brand-error-brandhover: var(--colors-brand-error-light-mode-brandhover); --brand-error-brandlight: var(--colors-brand-error-light-mode-brandlight); --brand-error-brandlighthover: var(--colors-brand-error-light-mode-brandlighthover); --brand-error-onbrand: var(--colors-brand-error-light-mode-onbrand); --brand-error-onbrandlight: var(--colors-brand-error-light-mode-onbrandlight); --brand-neutral-brand: var(--colors-brand-neutral-light-mode-brand); --brand-neutral-brandhover: var(--colors-brand-neutral-light-mode-brandhover); --brand-neutral-brandlight: var(--colors-brand-neutral-light-mode-brandlight); --brand-neutral-brandlighthover: var(--colors-brand-neutral-light-mode-brandlighthover); --brand-neutral-onbrand: var(--colors-brand-neutral-light-mode-onbrand); --brand-neutral-onbrandlight: var(--colors-brand-neutral-light-mode-onbrandlight); --brand-primary-brand: var(--colors-brand-primary-light-mode-brand); --brand-primary-brandhover: var(--colors-brand-primary-light-mode-brandhover); --brand-primary-brandlight: var(--colors-brand-primary-light-mode-brandlight); --brand-primary-brandlighthover: var(--colors-brand-primary-light-mode-brandlighthover); --brand-primary-onbrand: var(--colors-brand-primary-light-mode-onbrand); --brand-primary-onbrandlight: var(--colors-brand-primary-light-mode-onbrandlight); --brand-secondary-brand: var(--colors-brand-secondary-light-mode-brand); --brand-secondary-brandhover: var(--colors-brand-secondary-light-mode-brandhover); --brand-secondary-brandlight: var(--colors-brand-secondary-light-mode-brandlight); --brand-secondary-brandlighthover: var(--colors-brand-secondary-light-mode-brandlighthover); --brand-secondary-onbrand: var(--colors-brand-secondary-light-mode-onbrand); --brand-secondary-onbrandlight: var(--colors-brand-secondary-light-mode-onbrandlight); --brand-success-brand: var(--colors-brand-success-light-mode-brand); --brand-success-brandhover: var(--colors-brand-success-light-mode-brandhover); --brand-success-brandlight: var(--colors-brand-success-light-mode-brandlight); --brand-success-brandlighthover: var(--colors-brand-success-light-mode-brandlighthover); --brand-success-onbrand: var(--colors-brand-success-light-mode-onbrand); --brand-success-onbrandlight: var(--colors-brand-success-light-mode-onbrandlight); --brand-warning-brand: var(--colors-brand-warning-light-mode-brand); --brand-warning-brandhover: var(--colors-brand-warning-light-mode-brandhover); --brand-warning-brandlight: var(--colors-brand-warning-light-mode-brandlight); --brand-warning-brandlighthover: var(--colors-brand-warning-light-mode-brandlighthover); --brand-warning-onbrand: var(--colors-brand-warning-light-mode-onbrand); --brand-warning-onbrandlight: var(--colors-brand-warning-light-mode-onbrandlight); --button-disabled-high-focused-background: var(--colors-primitives-grey-scale-black-10); --button-disabled-high-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-focused-foreground: var(--colors-primitives-grey-scale-black-30); --button-disabled-high-hover-background: var(--colors-primitives-grey-scale-black-10); --button-disabled-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-hover-foreground: var(--colors-primitives-grey-scale-black-30); --button-disabled-high-loading-background: var(--colors-primitives-grey-scale-black-10); --button-disabled-high-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-loading-foreground: var(--colors-primitives-grey-scale-black-30); --button-disabled-high-pressed-background: var(--colors-primitives-grey-scale-black-10); --button-disabled-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-pressed-foreground: var(--colors-primitives-grey-scale-black-30); --button-disabled-high-resting-background: var(--colors-primitives-grey-scale-black-10); --button-disabled-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-high-resting-foreground: var(--colors-primitives-grey-scale-black-30); --button-disabled-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-focused-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-hover-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-loading-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-pressed-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-low-resting-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-focused-border-color: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-focused-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-hover-border-color: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-hover-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-loading-border-color: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-loading-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-pressed-border-color: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-pressed-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-low-resting-border-color: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-low-resting-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-focused-background: var(--colors-primitives-grey-scale-black-5); --button-disabled-medium-focused-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-focused-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-hover-background: var(--colors-primitives-grey-scale-black-5); --button-disabled-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-hover-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-loading-background: var(--colors-primitives-grey-scale-black-5); --button-disabled-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-loading-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-pressed-background: var(--colors-primitives-grey-scale-black-5); --button-disabled-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-pressed-foreground: var(--colors-primitives-grey-scale-black-20); --button-disabled-medium-resting-background: var(--colors-primitives-grey-scale-black-5); --button-disabled-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-disabled-medium-resting-foreground: var(--colors-primitives-grey-scale-black-20); --button-error-high-focused-background: var(--brand-error-brandhover); --button-error-high-focused-border-color: var(--brand-error-brandhover); --button-error-high-focused-foreground: var(--brand-error-onbrand); --button-error-high-hover-background: var(--brand-error-brandhover); --button-error-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-hover-foreground: var(--brand-error-onbrand); --button-error-high-loading-background: var(--brand-error-brand); --button-error-high-loading-border-color: var(--brand-error-brand); --button-error-high-loading-foreground: var(--brand-error-brandlighthover); --button-error-high-pressed-background: var(--brand-error-brandhover); --button-error-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-pressed-foreground: var(--brand-error-onbrand); --button-error-high-resting-background: var(--brand-error-brand); --button-error-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-high-resting-foreground: var(--brand-error-onbrand); --button-error-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-focused-border-color: var(--brand-error-brandhover); --button-error-low-focused-foreground: var(--brand-error-brandhover); --button-error-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-hover-border-color: var(--brand-error-brandhover); --button-error-low-hover-foreground: var(--brand-error-brandhover); --button-error-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-loading-foreground: var(--brand-error-brandlighthover); --button-error-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-low-pressed-foreground: var(--brand-error-brandhover); --button-error-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-error-low-resting-border-color: var(--brand-error-brand); --button-error-low-resting-foreground: var(--brand-error-brand); --button-error-medium-low-focused-background: var(--brand-error-brandlighthover); --button-error-medium-low-focused-border-color: var(--brand-error-brand); --button-error-medium-low-focused-foreground: var(--brand-error-brand); --button-error-medium-low-hover-background: var(--brand-error-brandlight); --button-error-medium-low-hover-border-color: var(--brand-error-brand); --button-error-medium-low-hover-foreground: var(--brand-error-brand); --button-error-medium-low-loading-background: var(--brand-error-brandlight); --button-error-medium-low-loading-border-color: var(--brand-error-brandlighthover); --button-error-medium-low-loading-foreground: var(--brand-error-brandlighthover); --button-error-medium-low-pressed-background: var(--brand-error-brandlighthover); --button-error-medium-low-pressed-border-color: var(--brand-error-brand); --button-error-medium-low-pressed-foreground: var(--brand-error-brand); --button-error-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-error-medium-low-resting-border-color: var(--brand-error-brand); --button-error-medium-low-resting-foreground: var(--brand-error-onbrandlight); --button-error-medium-focused-background: var(--brand-error-brandlighthover); --button-error-medium-focused-border-color: var(--brand-error-brand); --button-error-medium-focused-foreground: var(--brand-error-brandhover); --button-error-medium-hover-background: var(--brand-error-brandlighthover); --button-error-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-hover-foreground: var(--brand-error-brandhover); --button-error-medium-loading-background: var(--brand-error-brandlight); --button-error-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-loading-foreground: var(--brand-error-brandlighthover); --button-error-medium-pressed-background: var(--brand-error-brandlighthover); --button-error-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-pressed-foreground: var(--brand-error-onbrandlight); --button-error-medium-resting-background: var(--brand-error-brandlight); --button-error-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-error-medium-resting-foreground: var(--brand-error-onbrandlight); --button-neutral-high-focused-background: var(--brand-neutral-brandhover); --button-neutral-high-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-high-focused-foreground: var(--brand-neutral-onbrand); --button-neutral-high-hover-background: var(--brand-neutral-brandhover); --button-neutral-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-hover-foreground: var(--brand-neutral-onbrand); --button-neutral-high-loading-background: var(--brand-neutral-brand); --button-neutral-high-loading-border-color: var(--brand-neutral-brand); --button-neutral-high-loading-foreground: var(--brand-neutral-brandlighthover); --button-neutral-high-pressed-background: var(--brand-neutral-brandhover); --button-neutral-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-pressed-foreground: var(--brand-neutral-onbrand); --button-neutral-high-resting-background: var(--brand-neutral-brand); --button-neutral-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-high-resting-foreground: var(--brand-neutral-onbrand); --button-neutral-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-focused-border-color: var(--brand-neutral-brandhover); --button-neutral-low-focused-foreground: var(--brand-neutral-brandhover); --button-neutral-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-hover-border-color: var(--brand-neutral-brandhover); --button-neutral-low-hover-foreground: var(--brand-neutral-brandhover); --button-neutral-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-loading-foreground: var(--brand-neutral-brandlighthover); --button-neutral-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-pressed-foreground: var(--brand-neutral-brandhover); --button-neutral-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-low-resting-border-color: var(--brand-neutral-brand); --button-neutral-low-resting-foreground: var(--brand-neutral-brand); --button-neutral-medium-low-focused-background: var(--brand-neutral-brandlighthover); --button-neutral-medium-low-focused-border-color: var(--brand-neutral-brand); --button-neutral-medium-low-focused-foreground: var(--brand-neutral-brand); --button-neutral-medium-low-hover-background: var(--brand-neutral-brandlight); --button-neutral-medium-low-hover-border-color: var(--brand-neutral-brand); --button-neutral-medium-low-hover-foreground: var(--brand-neutral-brand); --button-neutral-medium-low-loading-background: var(--brand-neutral-brandlight); --button-neutral-medium-low-loading-border-color: var(--brand-neutral-brandlighthover); --button-neutral-medium-low-loading-foreground: var(--brand-neutral-brandlighthover); --button-neutral-medium-low-pressed-background: var(--brand-neutral-brandlighthover); --button-neutral-medium-low-pressed-border-color: var(--brand-neutral-brand); --button-neutral-medium-low-pressed-foreground: var(--brand-neutral-brand); --button-neutral-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-low-resting-border-color: var(--brand-neutral-brand); --button-neutral-medium-low-resting-foreground: var(--brand-neutral-brand); --button-neutral-medium-focused-background: var(--brand-neutral-brandlighthover); --button-neutral-medium-focused-border-color: var(--brand-neutral-brand); --button-neutral-medium-focused-foreground: var(--brand-neutral-brandhover); --button-neutral-medium-hover-background: var(--brand-neutral-brandlighthover); --button-neutral-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-hover-foreground: var(--brand-neutral-brandhover); --button-neutral-medium-loading-background: var(--brand-neutral-brandlight); --button-neutral-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-loading-foreground: var(--brand-neutral-brandlighthover); --button-neutral-medium-pressed-background: var(--brand-neutral-brandlighthover); --button-neutral-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-pressed-foreground: var(--brand-neutral-onbrandlight); --button-neutral-medium-resting-background: var(--brand-neutral-brandlight); --button-neutral-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-neutral-medium-resting-foreground: var(--brand-neutral-onbrandlight); --button-primary-high-focused-background: var(--brand-primary-brandhover); --button-primary-high-focused-border-color: var(--brand-primary-brandhover); --button-primary-high-focused-foreground: var(--brand-primary-onbrand); --button-primary-high-hover-background: var(--brand-primary-brandhover); --button-primary-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-hover-foreground: var(--brand-primary-onbrand); --button-primary-high-loading-background: var(--brand-primary-brand); --button-primary-high-loading-border-color: var(--brand-primary-brand); --button-primary-high-loading-foreground: var(--brand-primary-brandlighthover); --button-primary-high-pressed-background: var(--brand-primary-brandhover); --button-primary-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-pressed-foreground: var(--brand-primary-onbrand); --button-primary-high-resting-background: var(--brand-primary-brand); --button-primary-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-high-resting-foreground: var(--brand-primary-onbrand); --button-primary-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-primary-low-focused-border-color: var(--brand-primary-brandhover); --button-primary-low-focused-foreground: var(--brand-primary-brandhover); --button-primary-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-primary-low-hover-border-color: var(--brand-primary-brandhover); --button-primary-low-hover-foreground: var(--brand-primary-brandhover); --button-primary-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-primary-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-low-loading-foreground: var(--brand-primary-brandlighthover); --button-primary-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-primary-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-low-pressed-foreground: var(--brand-primary-brandhover); --button-primary-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-primary-low-resting-border-color: var(--brand-primary-brand); --button-primary-low-resting-foreground: var(--brand-primary-brand); --button-primary-medium-low-focused-background: var(--brand-primary-brandlighthover); --button-primary-medium-low-focused-border-color: var(--brand-primary-brand); --button-primary-medium-low-focused-foreground: var(--brand-primary-brand); --button-primary-medium-low-hover-background: var(--brand-primary-brandlight); --button-primary-medium-low-hover-border-color: var(--brand-primary-brand); --button-primary-medium-low-hover-foreground: var(--brand-primary-brand); --button-primary-medium-low-loading-background: var(--brand-primary-brandlight); --button-primary-medium-low-loading-border-color: var(--brand-primary-brandlighthover); --button-primary-medium-low-loading-foreground: var(--brand-primary-brandlighthover); --button-primary-medium-low-pressed-background: var(--brand-primary-brandlighthover); --button-primary-medium-low-pressed-border-color: var(--brand-primary-brand); --button-primary-medium-low-pressed-foreground: var(--brand-primary-brand); --button-primary-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-low-resting-border-color: var(--brand-primary-brand); --button-primary-medium-low-resting-foreground: var(--brand-primary-onbrandlight); --button-primary-medium-focused-background: var(--brand-primary-brandlighthover); --button-primary-medium-focused-border-color: var(--brand-primary-brand); --button-primary-medium-focused-foreground: var(--brand-primary-brandhover); --button-primary-medium-hover-background: var(--brand-primary-brandlighthover); --button-primary-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-hover-foreground: var(--brand-primary-brandhover); --button-primary-medium-loading-background: var(--brand-primary-brandlight); --button-primary-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-loading-foreground: var(--brand-primary-brandlighthover); --button-primary-medium-pressed-background: var(--brand-primary-brandlighthover); --button-primary-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-pressed-foreground: var(--brand-primary-onbrandlight); --button-primary-medium-resting-background: var(--brand-primary-brandlight); --button-primary-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-primary-medium-resting-foreground: var(--brand-primary-onbrandlight); --button-secondary-high-focused-background: var(--brand-secondary-brandhover); --button-secondary-high-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-high-focused-foreground: var(--brand-secondary-onbrand); --button-secondary-high-hover-background: var(--brand-secondary-brandhover); --button-secondary-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-hover-foreground: var(--brand-secondary-onbrand); --button-secondary-high-loading-background: var(--brand-secondary-brand); --button-secondary-high-loading-border-color: var(--brand-secondary-brand); --button-secondary-high-loading-foreground: var(--brand-secondary-brandlighthover); --button-secondary-high-pressed-background: var(--brand-secondary-brandhover); --button-secondary-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-pressed-foreground: var(--brand-secondary-onbrand); --button-secondary-high-resting-background: var(--brand-secondary-brand); --button-secondary-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-high-resting-foreground: var(--brand-secondary-onbrand); --button-secondary-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-focused-border-color: var(--brand-secondary-brandhover); --button-secondary-low-focused-foreground: var(--brand-secondary-brandhover); --button-secondary-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-hover-border-color: var(--brand-secondary-brandhover); --button-secondary-low-hover-foreground: var(--brand-secondary-brandhover); --button-secondary-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-loading-foreground: var(--brand-secondary-brandlighthover); --button-secondary-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-pressed-foreground: var(--brand-secondary-brandhover); --button-secondary-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-low-resting-border-color: var(--brand-secondary-brand); --button-secondary-low-resting-foreground: var(--brand-secondary-brand); --button-secondary-medium-low-focused-background: var(--brand-secondary-brandlighthover); --button-secondary-medium-low-focused-border-color: var(--brand-secondary-brand); --button-secondary-medium-low-focused-foreground: var(--brand-secondary-brand); --button-secondary-medium-low-hover-background: var(--brand-secondary-brandlight); --button-secondary-medium-low-hover-border-color: var(--brand-secondary-brand); --button-secondary-medium-low-hover-foreground: var(--brand-secondary-brand); --button-secondary-medium-low-loading-background: var(--brand-secondary-brandlight); --button-secondary-medium-low-loading-border-color: var(--brand-secondary-brandlighthover); --button-secondary-medium-low-loading-foreground: var(--brand-secondary-brandlighthover); --button-secondary-medium-low-pressed-background: var(--brand-secondary-brandlighthover); --button-secondary-medium-low-pressed-border-color: var(--brand-secondary-brand); --button-secondary-medium-low-pressed-foreground: var(--brand-secondary-brand); --button-secondary-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-low-resting-border-color: var(--brand-secondary-brand); --button-secondary-medium-low-resting-foreground: var(--brand-secondary-onbrandlight); --button-secondary-medium-focused-background: var(--brand-secondary-brandlighthover); --button-secondary-medium-focused-border-color: var(--brand-secondary-brand); --button-secondary-medium-focused-foreground: var(--brand-secondary-brandhover); --button-secondary-medium-hover-background: var(--brand-secondary-brandlighthover); --button-secondary-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-hover-foreground: var(--brand-secondary-brandhover); --button-secondary-medium-loading-background: var(--brand-secondary-brandlight); --button-secondary-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-loading-foreground: var(--brand-secondary-brandlighthover); --button-secondary-medium-pressed-background: var(--brand-secondary-brandlighthover); --button-secondary-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-pressed-foreground: var(--brand-secondary-onbrandlight); --button-secondary-medium-resting-background: var(--brand-secondary-brandlight); --button-secondary-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-secondary-medium-resting-foreground: var(--brand-secondary-onbrandlight); --button-success-high-focused-background: var(--brand-success-brandhover); --button-success-high-focused-border-color: var(--brand-success-brandhover); --button-success-high-focused-foreground: var(--brand-success-onbrand); --button-success-high-hover-background: var(--brand-success-brandhover); --button-success-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-hover-foreground: var(--brand-success-onbrand); --button-success-high-loading-background: var(--brand-success-brand); --button-success-high-loading-border-color: var(--brand-success-brand); --button-success-high-loading-foreground: var(--brand-success-brandlighthover); --button-success-high-pressed-background: var(--brand-success-brandhover); --button-success-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-pressed-foreground: var(--brand-success-onbrand); --button-success-high-resting-background: var(--brand-success-brand); --button-success-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-high-resting-foreground: var(--brand-success-onbrand); --button-success-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-focused-border-color: var(--brand-success-brandhover); --button-success-low-focused-foreground: var(--brand-success-brandhover); --button-success-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-hover-border-color: var(--brand-success-brandhover); --button-success-low-hover-foreground: var(--brand-success-brandhover); --button-success-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-loading-foreground: var(--brand-success-brandlighthover); --button-success-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-low-pressed-foreground: var(--brand-success-brandhover); --button-success-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-success-low-resting-border-color: var(--brand-success-brand); --button-success-low-resting-foreground: var(--brand-success-brand); --button-success-medium-low-focused-background: var(--brand-success-brandlighthover); --button-success-medium-low-focused-border-color: var(--brand-success-brand); --button-success-medium-low-focused-foreground: var(--brand-success-brand); --button-success-medium-low-hover-background: var(--brand-success-brandlight); --button-success-medium-low-hover-border-color: var(--brand-success-brand); --button-success-medium-low-hover-foreground: var(--brand-success-brand); --button-success-medium-low-loading-background: var(--brand-success-brandlight); --button-success-medium-low-loading-border-color: var(--brand-success-brandlighthover); --button-success-medium-low-loading-foreground: var(--brand-success-brandlighthover); --button-success-medium-low-pressed-background: var(--brand-success-brandlighthover); --button-success-medium-low-pressed-border-color: var(--brand-success-brand); --button-success-medium-low-pressed-foreground: var(--brand-success-brand); --button-success-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-success-medium-low-resting-border-color: var(--brand-success-brand); --button-success-medium-low-resting-foreground: var(--brand-success-onbrandlight); --button-success-medium-focused-background: var(--brand-success-brandlighthover); --button-success-medium-focused-border-color: var(--brand-success-brand); --button-success-medium-focused-foreground: var(--brand-success-brandhover); --button-success-medium-hover-background: var(--brand-success-brandlighthover); --button-success-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-hover-foreground: var(--brand-success-brandhover); --button-success-medium-loading-background: var(--brand-success-brandlight); --button-success-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-loading-foreground: var(--brand-success-brandlighthover); --button-success-medium-pressed-background: var(--brand-success-brandlighthover); --button-success-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-pressed-foreground: var(--brand-success-onbrandlight); --button-success-medium-resting-background: var(--brand-success-brandlight); --button-success-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-success-medium-resting-foreground: var(--brand-success-onbrandlight); --button-warning-high-focused-background: var(--brand-warning-brandhover); --button-warning-high-focused-border-color: var(--brand-warning-brandhover); --button-warning-high-focused-foreground: var(--brand-warning-onbrand); --button-warning-high-hover-background: var(--brand-warning-brandhover); --button-warning-high-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-hover-foreground: var(--brand-warning-onbrand); --button-warning-high-loading-background: var(--brand-warning-brand); --button-warning-high-loading-border-color: var(--brand-warning-brand); --button-warning-high-loading-foreground: var(--brand-warning-brandhover); --button-warning-high-pressed-background: var(--brand-warning-brandhover); --button-warning-high-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-pressed-foreground: var(--brand-warning-onbrand); --button-warning-high-resting-background: var(--brand-warning-brand); --button-warning-high-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-high-resting-foreground: var(--brand-warning-onbrand); --button-warning-low-focused-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-focused-border-color: var(--brand-warning-onbrandlight); --button-warning-low-focused-foreground: var(--brand-warning-onbrandlight); --button-warning-low-hover-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-hover-foreground: var(--brand-warning-onbrandlight); --button-warning-low-loading-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-loading-foreground: var(--brand-warning-brandhover); --button-warning-low-pressed-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-pressed-foreground: var(--brand-warning-onbrandlight); --button-warning-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-warning-low-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-low-resting-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-focused-background: var(--brand-warning-brandlighthover); --button-warning-medium-low-focused-border-color: var(--brand-warning-onbrandlight); --button-warning-medium-low-focused-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-hover-background: var(--brand-warning-brandlight); --button-warning-medium-low-hover-border-color: var(--brand-warning-onbrandlight); --button-warning-medium-low-hover-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-loading-background: var(--brand-warning-brandlight); --button-warning-medium-low-loading-border-color: var(--brand-warning-brandhover); --button-warning-medium-low-loading-foreground: var(--brand-warning-brandhover); --button-warning-medium-low-pressed-background: var(--brand-warning-brandlighthover); --button-warning-medium-low-pressed-border-color: var(--brand-warning-onbrandlight); --button-warning-medium-low-pressed-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-low-resting-background: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-low-resting-border-color: var(--brand-warning-onbrandlight); --button-warning-medium-low-resting-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-focused-background: var(--brand-warning-brandlighthover); --button-warning-medium-focused-border-color: var(--brand-warning-onbrandlight); --button-warning-medium-focused-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-hover-background: var(--brand-warning-brandlighthover); --button-warning-medium-hover-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-hover-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-loading-background: var(--brand-warning-brandlight); --button-warning-medium-loading-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-loading-foreground: var(--brand-warning-brandhover); --button-warning-medium-pressed-background: var(--brand-warning-brandlighthover); --button-warning-medium-pressed-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-pressed-foreground: var(--brand-warning-onbrandlight); --button-warning-medium-resting-background: var(--brand-warning-brandlight); --button-warning-medium-resting-border-color: var(--colors-primitives-grey-scale-transparent); --button-warning-medium-resting-foreground: var(--brand-warning-onbrandlight); --card-important-background: var(--colors-brand-secondary-light-mode-brandlight); --card-important-border-color: var(--colors-primitives-grey-scale-transparent); --card-important-subtitle: var(--text-secondary); --card-important-title: var(--text-main); --card-transparent-background: var(--colors-primitives-grey-scale-transparent); --card-transparent-border-color: var(--border-default); --card-transparent-subtitle: var(--text-secondary); --card-transparent-title: var(--text-main); --card-white-background: var(--background-global-paper1); --card-white-border-color: var(--border-light); --card-white-subtitle: var(--text-secondary); --card-white-title: var(--text-main); --chip-active-background: var(--background-global-paper1); --chip-active-border-color: var(--brand-secondary-brand); --chip-active-foreground: var(--brand-secondary-brand); --chip-hover-background: var(--brand-secondary-brandlight); --chip-hover-border-color: var(--brand-secondary-brand); --chip-hover-foreground: var(--brand-secondary-brandhover); --chip-resting-background: var(--background-global-paper1); --chip-resting-border-color: var(--colors-primitives-grey-scale-transparent); --chip-resting-foreground: var(--brand-secondary-brand); --divider-background: var(--colors-primitives-grey-scale-black-10); --google-snippet-foreground: #1a0dab; --label-default-background: var(--colors-primitives-grey-scale-black-5); --label-default-border-color: var(--colors-primitives-grey-scale-transparent); --label-default-foreground: var(--text-secondary); --label-error-background: var(--colors-brand-error-light-mode-brandlight); --label-error-border-color: var(--colors-primitives-grey-scale-transparent); --label-error-foreground: var(--colors-brand-error-light-mode-onbrandlight); --label-success-background: var(--colors-brand-success-light-mode-brandlight); --label-success-border-color: var(--colors-primitives-grey-scale-transparent); --label-success-foreground: var(--colors-brand-success-light-mode-onbrandlight); --label-warning-background: var(--colors-brand-warning-light-mode-brandlight); --label-warning-border-color: var(--colors-primitives-grey-scale-transparent); --label-warning-foreground: var(--colors-brand-warning-light-mode-onbrandlight); --text-editor-active-background: var(--background-light-global-paper1); --text-editor-active-foreground: var(--text-main); --text-editor-disabled-background: var(--colors-primitives-grey-scale-black-2); --text-editor-disabled-foreground: var(--text-disabled); --text-disabled: var(--colors-primitives-grey-scale-black-40); --text-main: var(--colors-primitives-grey-scale-black-95); --text-secondary: var(--colors-primitives-grey-scale-black-60); --toggle-off-default-background: var(--colors-primitives-grey-scale-black-20); --toggle-off-default-foreground: var(--background-light-global-paper1); --toggle-off-disabled-background: var(--colors-primitives-grey-scale-black-10); --toggle-off-disabled-foreground: var(--colors-primitives-grey-scale-black-2); --toggle-on-default-background: var(--brand-secondary-brand); --toggle-on-default-foreground: var(--brand-secondary-onbrand); --toggle-on-disabled-background: var(--brand-secondary-brandlighthover); --toggle-on-disabled-foreground: var(--colors-primitives-grey-scale-black-2); --accordion-borderwidth: 1px; --button-disabled-high-focused-border-width: ; --button-disabled-high-hover-border-width: ; --button-disabled-high-loading-border-width: ; --button-disabled-high-pressed-border-width: ; --button-disabled-high-resting-border-width: ; --button-disabled-low-focused-border-width: ; --button-disabled-low-hover-border-width: ; --button-disabled-low-loading-border-width: ; --button-disabled-low-pressed-border-width: ; --button-disabled-low-resting-border-width: ; --button-disabled-medium-low-focused-border-width: 1px; --button-disabled-medium-low-hover-border-width: 1px; --button-disabled-medium-low-loading-border-width: 1px; --button-disabled-medium-low-pressed-border-width: 1px; --button-disabled-medium-low-resting-border-width: 1px; --button-disabled-medium-focused-border-width: ; --button-disabled-medium-hover-border-width: ; --button-disabled-medium-loading-border-width: ; --button-disabled-medium-pressed-border-width: ; --button-disabled-medium-resting-border-width: ; --button-error-high-focused-border-width: 1px; --button-error-high-hover-border-width: ; --button-error-high-loading-border-width: ; --button-error-high-pressed-border-width: ; --button-error-high-resting-border-width: ; --button-error-low-focused-border-width: 1px; --button-error-low-hover-border-width: ; --button-error-low-loading-border-width: ; --button-error-low-pressed-border-width: ; --button-error-low-resting-border-width: ; --button-error-medium-low-focused-border-width: 1px; --button-error-medium-low-hover-border-width: 1px; --button-error-medium-low-loading-border-width: 1px; --button-error-medium-low-pressed-border-width: 1px; --button-error-medium-low-resting-border-width: 1px; --button-error-medium-focused-border-width: 1px; --button-error-medium-hover-border-width: ; --button-error-medium-loading-border-width: ; --button-error-medium-pressed-border-width: ; --button-error-medium-resting-border-width: ; --button-neutral-high-focused-border-width: 1px; --button-neutral-high-hover-border-width: ; --button-neutral-high-loading-border-width: ; --button-neutral-high-pressed-border-width: ; --button-neutral-high-resting-border-width: ; --button-neutral-low-focused-border-width: 1px; --button-neutral-low-hover-border-width: ; --button-neutral-low-loading-border-width: ; --button-neutral-low-pressed-border-width: ; --button-neutral-low-resting-border-width: ; --button-neutral-medium-low-focused-border-width: 1px; --button-neutral-medium-low-hover-border-width: 1px; --button-neutral-medium-low-loading-border-width: 1px; --button-neutral-medium-low-pressed-border-width: 1px; --button-neutral-medium-low-resting-border-width: 1px; --button-neutral-medium-focused-border-width: 1px; --button-neutral-medium-hover-border-width: ; --button-neutral-medium-loading-border-width: ; --button-neutral-medium-pressed-border-width: ; --button-neutral-medium-resting-border-width: ; --button-primary-high-focused-border-width: 1px; --button-primary-high-hover-border-width: ; --button-primary-high-loading-border-width: ; --button-primary-high-pressed-border-width: ; --button-primary-high-resting-border-width: ; --button-primary-low-focused-border-width: 1px; --button-primary-low-hover-border-width: ; --button-primary-low-loading-border-width: ; --button-primary-low-pressed-border-width: ; --button-primary-low-resting-border-width: ; --button-primary-medium-low-focused-border-width: 1px; --button-primary-medium-low-hover-border-width: 1px; --button-primary-medium-low-loading-border-width: 1px; --button-primary-medium-low-pressed-border-width: 1px; --button-primary-medium-low-resting-border-width: 1px; --button-primary-medium-focused-border-width: 1px; --button-primary-medium-hover-border-width: ; --button-primary-medium-loading-border-width: ; --button-primary-medium-pressed-border-width: ; --button-primary-medium-resting-border-width: ; --button-secondary-high-focused-border-width: 1px; --button-secondary-high-hover-border-width: ; --button-secondary-high-loading-border-width: ; --button-secondary-high-pressed-border-width: ; --button-secondary-high-resting-border-width: ; --button-secondary-low-focused-border-width: 1px; --button-secondary-low-hover-border-width: ; --button-secondary-low-loading-border-width: ; --button-secondary-low-pressed-border-width: ; --button-secondary-low-resting-border-width: ; --button-secondary-medium-low-focused-border-width: 1px; --button-secondary-medium-low-hover-border-width: 1px; --button-secondary-medium-low-loading-border-width: 1px; --button-secondary-medium-low-pressed-border-width: 1px; --button-secondary-medium-low-resting-border-width: 1px; --button-secondary-medium-focused-border-width: 1px; --button-secondary-medium-hover-border-width: ; --button-secondary-medium-loading-border-width: ; --button-secondary-medium-pressed-border-width: ; --button-secondary-medium-resting-border-width: ; --button-success-high-focused-border-width: 1px; --button-success-high-hover-border-width: ; --button-success-high-loading-border-width: ; --button-success-high-pressed-border-width: ; --button-success-high-resting-border-width: ; --button-success-low-focused-border-width: 1px; --button-success-low-hover-border-width: ; --button-success-low-loading-border-width: ; --button-success-low-pressed-border-width: ; --button-success-low-resting-border-width: ; --button-success-medium-low-focused-border-width: 1px; --button-success-medium-low-hover-border-width: 1px; --button-success-medium-low-loading-border-width: 1px; --button-success-medium-low-pressed-border-width: 1px; --button-success-medium-low-resting-border-width: 1px; --button-success-medium-focused-border-width: 1px; --button-success-medium-hover-border-width: ; --button-success-medium-loading-border-width: ; --button-success-medium-pressed-border-width: ; --button-success-medium-resting-border-width: ; --button-warning-high-focused-border-width: 1px; --button-warning-high-hover-border-width: ; --button-warning-high-loading-border-width: ; --button-warning-high-pressed-border-width: ; --button-warning-high-resting-border-width: ; --button-warning-low-focused-border-width: 1px; --button-warning-low-hover-border-width: ; --button-warning-low-loading-border-width: ; --button-warning-low-pressed-border-width: ; --button-warning-low-resting-border-width: ; --button-warning-medium-low-focused-border-width: 1px; --button-warning-medium-low-hover-border-width: 1px; --button-warning-medium-low-loading-border-width: 1px; --button-warning-medium-low-pressed-border-width: 1px; --button-warning-medium-low-resting-border-width: 1px; --button-warning-medium-focused-border-width: 1px; --button-warning-medium-hover-border-width: ; --button-warning-medium-loading-border-width: ; --button-warning-medium-pressed-border-width: ; --button-warning-medium-resting-border-width: ; --card-important-border-width: ; --card-transparent-border-width: 1px; --card-white-border-width: 1px; --chip-active-border-width: 1px; --chip-hover-border-width: ; --chip-resting-border-width: ; --label-default-border-width: ; --label-error-border-width: ; --label-success-border-width: ; --label-warning-border-width: ; --mode: "Light"; } /* Mode: Miticko */ [data-mode*="Miticko"] { --background-dark-be-background: var(--colors-primitives-grey-scale-black-95); --background-dark-global-background: var(--colors-primitives-grey-scale-black-95); --background-dark-global-overlay: #000000cc; --background-dark-global-paper1: var(--colors-primitives-grey-scale-black-90); --background-dark-global-paper2: var(--colors-primitives-grey-scale-black-85); --background-dark-global-paper3: var(--colors-primitives-grey-scale-black-80); --background-light-be-background: #f2f3f7; --background-light-global-background: #f2f3f7; --background-light-global-overlay: #00000066; --background-light-global-paper1: var(--colors-primitives-grey-scale-black-0); --background-light-global-paper2: var(--colors-primitives-grey-scale-black-2); --background-light-global-paper3: var(--colors-primitives-grey-scale-black-5); --colors-brand-error-dark-mode-brand: var(--colors-primitives-red-red-4); --colors-brand-error-dark-mode-brandhover: var(--colors-primitives-red-red-3); --colors-brand-error-dark-mode-brandlight: var(--colors-primitives-red-red-10); --colors-brand-error-dark-mode-brandlighthover: var(--colors-primitives-red-red-9); --colors-brand-error-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-100); --colors-brand-error-dark-mode-onbrandlight: var(--colors-primitives-red-red-2); --colors-brand-error-light-mode-brand: var(--colors-primitives-red-red-6); --colors-brand-error-light-mode-brandhover: var(--colors-primitives-red-red-7); --colors-brand-error-light-mode-brandlight: var(--colors-primitives-red-red-1); --colors-brand-error-light-mode-brandlighthover: var(--colors-primitives-red-red-2); --colors-brand-error-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-error-light-mode-onbrandlight: var(--colors-primitives-red-red-7); --colors-brand-neutral-dark-mode-brand: var(--colors-primitives-grey-scale-black-0); --colors-brand-neutral-dark-mode-brandhover: var(--colors-primitives-grey-scale-black-10); --colors-brand-neutral-dark-mode-brandlight: var(--colors-primitives-grey-scale-black-60); --colors-brand-neutral-dark-mode-brandlighthover: var(--colors-primitives-grey-scale-black-50); --colors-brand-neutral-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-100); --colors-brand-neutral-dark-mode-onbrandlight: var(--colors-primitives-grey-scale-black-0); --colors-brand-neutral-light-mode-brand: var(--colors-primitives-grey-scale-black-100); --colors-brand-neutral-light-mode-brandhover: var(--colors-primitives-grey-scale-black-80); --colors-brand-neutral-light-mode-brandlight: var(--colors-primitives-grey-scale-black-10); --colors-brand-neutral-light-mode-brandlighthover: var(--colors-primitives-grey-scale-black-20); --colors-brand-neutral-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-neutral-light-mode-onbrandlight: var(--colors-primitives-grey-scale-black-100); --colors-brand-primary-dark-mode-brand: var(--colors-primitives-a-dark-a-6); --colors-brand-primary-dark-mode-brandhover: var(--colors-primitives-a-dark-a-4); --colors-brand-primary-dark-mode-brandlight: var(--colors-primitives-a-dark-a-2); --colors-brand-primary-dark-mode-brandlighthover: var(--colors-primitives-a-dark-a-1); --colors-brand-primary-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-primary-dark-mode-onbrandlight: var(--colors-primitives-a-dark-a-6); --colors-brand-primary-light-mode-brand: var(--colors-primitives-a-light-a-6); --colors-brand-primary-light-mode-brandhover: var(--colors-primitives-a-light-a-8); --colors-brand-primary-light-mode-brandlight: var(--colors-primitives-a-light-a-1); --colors-brand-primary-light-mode-brandlighthover: var(--colors-primitives-a-light-a-2); --colors-brand-primary-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-primary-light-mode-onbrandlight: var(--colors-primitives-a-light-a-7); --colors-brand-secondary-dark-mode-brand: var(--colors-primitives-b-dark-b-5); --colors-brand-secondary-dark-mode-brandhover: var(--colors-primitives-b-dark-b-3); --colors-brand-secondary-dark-mode-brandlight: var(--colors-primitives-b-dark-b-1); --colors-brand-secondary-dark-mode-brandlighthover: var(--colors-primitives-b-dark-b-2); --colors-brand-secondary-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-secondary-dark-mode-onbrandlight: var(--colors-primitives-b-dark-b-7); --colors-brand-secondary-light-mode-brand: var(--colors-primitives-b-light-b-6); --colors-brand-secondary-light-mode-brandhover: var(--colors-primitives-b-light-b-7); --colors-brand-secondary-light-mode-brandlight: var(--colors-primitives-b-light-b-1); --colors-brand-secondary-light-mode-brandlighthover: var(--colors-primitives-b-light-b-2); --colors-brand-secondary-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-secondary-light-mode-onbrandlight: var(--colors-primitives-b-light-b-6); --colors-brand-success-dark-mode-brand: var(--colors-primitives-green-green-4); --colors-brand-success-dark-mode-brandhover: var(--colors-primitives-green-green-3); --colors-brand-success-dark-mode-brandlight: var(--colors-primitives-green-green-2); --colors-brand-success-dark-mode-brandlighthover: var(--colors-primitives-green-green-1); --colors-brand-success-dark-mode-onbrand: var(--colors-primitives-green-green-10); --colors-brand-success-dark-mode-onbrandlight: var(--colors-primitives-green-green-8); --colors-brand-success-light-mode-brand: var(--colors-primitives-green-green-7); --colors-brand-success-light-mode-brandhover: var(--colors-primitives-green-green-8); --colors-brand-success-light-mode-brandlight: var(--colors-primitives-green-green-1); --colors-brand-success-light-mode-brandlighthover: var(--colors-primitives-green-green-2); --colors-brand-success-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-success-light-mode-onbrandlight: var(--colors-primitives-green-green-7); --colors-brand-warning-dark-mode-brand: var(--colors-primitives-yellow-yellow-6); --colors-brand-warning-dark-mode-brandhover: var(--colors-primitives-yellow-yellow-3); --colors-brand-warning-dark-mode-brandlight: var(--colors-primitives-yellow-yellow-2); --colors-brand-warning-dark-mode-brandlighthover: var(--colors-primitives-yellow-yellow-4); --colors-brand-warning-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-100); --colors-brand-warning-dark-mode-onbrandlight: var(--colors-primitives-yellow-yellow-10); --colors-brand-warning-light-mode-brand: var(--colors-primitives-yellow-yellow-5); --colors-brand-warning-light-mode-brandhover: var(--colors-primitives-yellow-yellow-7); --colors-brand-warning-light-mode-brandlight: var(--colors-primitives-yellow-yellow-1); --colors-brand-warning-light-mode-brandlighthover: var(--colors-primitives-yellow-yellow-2); --colors-brand-warning-light-mode-onbrand: var(--colors-primitives-grey-scale-black-90); --colors-brand-warning-light-mode-onbrandlight: var(--colors-primitives-yellow-yellow-10); --colors-primitives-a-dark-a-1: #ffe9e2; --colors-primitives-a-dark-a-10: #3f0f00; --colors-primitives-a-dark-a-2: #ffc6b3; --colors-primitives-a-dark-a-3: #ffa080; --colors-primitives-a-dark-a-4: #ff7342; --colors-primitives-a-dark-a-5: #ec4f00; --colors-primitives-a-dark-a-6: #d24600; --colors-primitives-a-dark-a-7: #a23400; --colors-primitives-a-dark-a-8: #802700; --colors-primitives-a-dark-a-9: #5e1b00; --colors-primitives-a-light-a-1: #ffe9e2; --colors-primitives-a-light-a-10: #4f1500; --colors-primitives-a-light-a-2: #ffc8b6; --colors-primitives-a-light-a-3: #ffa486; --colors-primitives-a-light-a-4: #ff7c4f; --colors-primitives-a-light-a-5: #f55301; --colors-primitives-a-light-a-6: #d24600; --colors-primitives-a-light-a-7: #af3800; --colors-primitives-a-light-a-8: #8d2c00; --colors-primitives-a-light-a-9: #6d2000; --colors-primitives-b-dark-b-1: #eaeefa; --colors-primitives-b-dark-b-10: #060831; --colors-primitives-b-dark-b-2: #c6d1f2; --colors-primitives-b-dark-b-3: #a3b4ec; --colors-primitives-b-dark-b-4: #8197e4; --colors-primitives-b-dark-b-5: #6078dd; --colors-primitives-b-dark-b-6: #3948d3; --colors-primitives-b-dark-b-7: #2e38bc; --colors-primitives-b-dark-b-8: #1f278a; --colors-primitives-b-dark-b-9: #12175c; --colors-primitives-b-light-b-1: #eaeefa; --colors-primitives-b-light-b-10: #060831; --colors-primitives-b-light-b-2: #c6d1f2; --colors-primitives-b-light-b-3: #a3b4ec; --colors-primitives-b-light-b-4: #8197e4; --colors-primitives-b-light-b-5: #6078dd; --colors-primitives-b-light-b-6: #3948d3; --colors-primitives-b-light-b-7: #2e38bc; --colors-primitives-b-light-b-8: #1f278a; --colors-primitives-b-light-b-9: #12175c; --colors-primitives-grey-scale-transparent: #ffffff00; --colors-primitives-grey-scale-black-0: #ffffff; --colors-primitives-grey-scale-black-10: #e6e6e6; --colors-primitives-grey-scale-black-100: #000000; --colors-primitives-grey-scale-black-2: #fafafa; --colors-primitives-grey-scale-black-20: #cccccc; --colors-primitives-grey-scale-black-30: #b2b2b2; --colors-primitives-grey-scale-black-40: #999999; --colors-primitives-grey-scale-black-45: #8c8c8c; --colors-primitives-grey-scale-black-5: #f2f2f2; --colors-primitives-grey-scale-black-50: #808080; --colors-primitives-grey-scale-black-60: #666666; --colors-primitives-grey-scale-black-70: #4d4d4d; --colors-primitives-grey-scale-black-80: #333333; --colors-primitives-grey-scale-black-85: #262626; --colors-primitives-grey-scale-black-90: #1a1a1a; --colors-primitives-grey-scale-black-95: #0d0d0d; --colors-primitives-transparent-black-black-10: #0000001a; --colors-primitives-transparent-black-black-2: #00000005; --colors-primitives-transparent-black-black-20: #00000033; --colors-primitives-transparent-black-black-30: #0000004d; --colors-primitives-transparent-black-black-40: #00000066; --colors-primitives-transparent-black-black-5: #0000000d; --colors-primitives-transparent-black-black-50: #00000080; --colors-primitives-transparent-black-black-60: #00000099; --colors-primitives-transparent-black-black-70: #000000b2; --colors-primitives-transparent-black-black-80: #000000cc; --colors-primitives-transparent-black-black-90: #000000e5; --colors-primitives-transparent-black-black-95: #000000f2; --colors-primitives-green-green-1: #f2f5f2; --colors-primitives-green-green-10: #163608; --colors-primitives-green-green-2: #dee5dd; --colors-primitives-green-green-3: #b2cfae; --colors-primitives-green-green-4: #66a659; --colors-primitives-green-green-5: #55913c; --colors-primitives-green-green-6: #307911; --colors-primitives-green-green-7: #29670e; --colors-primitives-green-green-8: #22560c; --colors-primitives-green-green-9: #1b450a; --colors-primitives-red-red-1: #fae6e6; --colors-primitives-red-red-10: #5c0000; --colors-primitives-red-red-2: #f3c2c2; --colors-primitives-red-red-3: #e99191; --colors-primitives-red-red-4: #df5e5e; --colors-primitives-red-red-5: #d52e2e; --colors-primitives-red-red-6: #cc0000; --colors-primitives-red-red-7: #ad0000; --colors-primitives-red-red-8: #910000; --colors-primitives-red-red-9: #740000; --colors-primitives-yellow-yellow-1: #fdfbe6; --colors-primitives-yellow-yellow-10: #6b5e01; --colors-primitives-yellow-yellow-2: #fbf4c2; --colors-primitives-yellow-yellow-3: #f8ec92; --colors-primitives-yellow-yellow-4: #f4e360; --colors-primitives-yellow-yellow-5: #f1da30; --colors-primitives-yellow-yellow-6: #eed202; --colors-primitives-yellow-yellow-7: #cab302; --colors-primitives-yellow-yellow-8: #a99501; --colors-primitives-yellow-yellow-9: #887801; --button-font: var(--typography-font-family-font-2); --icon-button-font: var(--typography-font-family-font-2); --typography-body-font: var(--typography-font-family-font-2); --typography-button-font: var(--typography-font-family-font-2); --typography-heading-font: var(--typography-font-family-font-1); --typography-label-font: var(--typography-font-family-font-2); --typography-title-font: var(--typography-font-family-font-1); --typography-font-family-font-1: "DM Sans"; --typography-font-family-font-2: "DM Sans"; --blablablafe: "String value"; --button-size-large-corner-radius---desktop: var(--corner-radius-m); --button-size-large-corner-radius---mobile: var(--corner-radius-m); --button-size-large-font-line-height---desktop: var(--typography-button-large-line-height---desktop); --button-size-large-font-line-height---mobile: var(--typography-button-large-line-height---mobile); --button-size-large-font-size---desktop: var(--typography-button-large-size---desktop); --button-size-large-font-size---mobile: var(--typography-button-large-size---mobile); --button-size-large-font-weight---desktop: var(--typography-button-large-weight---desktop); --button-size-large-font-weight---mobile: var(--typography-button-large-weight---mobile); --button-size-large-icon---desktop: var(--typography-button-large-size---desktop); --button-size-large-icon---mobile: var(--typography-button-large-size---mobile); --button-size-large-paddingbottom---desktop: var(--spacing-l---desktop); --button-size-large-paddingbottom---mobile: var(--spacing-l---mobile); --button-size-large-paddingleft---desktop: var(--spacing-xl---desktop); --button-size-large-paddingleft---mobile: var(--spacing-xl---mobile); --button-size-large-paddingright---desktop: var(--spacing-xl---desktop); --button-size-large-paddingright---mobile: var(--spacing-xl---mobile); --button-size-large-paddingtop---desktop: var(--spacing-l---desktop); --button-size-large-paddingtop---mobile: var(--spacing-l---mobile); --button-size-large-spacing---desktop: var(--spacing-m---desktop); --button-size-large-spacing---mobile: var(--spacing-m---mobile); --button-size-medium-corner-radius---desktop: var(--corner-radius-m); --button-size-medium-corner-radius---mobile: var(--corner-radius-m); --button-size-medium-font-line-height---desktop: var(--typography-button-medium-line-height---desktop); --button-size-medium-font-line-height---mobile: var(--typography-button-medium-line-height---mobile); --button-size-medium-font-size---desktop: var(--typography-button-medium-size---desktop); --button-size-medium-font-size---mobile: var(--typography-button-medium-size---mobile); --button-size-medium-font-weight---desktop: var(--typography-button-medium-weight---desktop); --button-size-medium-font-weight---mobile: var(--typography-button-medium-weight---mobile); --button-size-medium-icon---desktop: var(--typography-button-medium-size---desktop); --button-size-medium-icon---mobile: var(--typography-button-medium-size---mobile); --button-size-medium-paddingbottom---desktop: var(--spacing-m---desktop); --button-size-medium-paddingbottom---mobile: var(--spacing-m---mobile); --button-size-medium-paddingleft---desktop: var(--spacing-l---desktop); --button-size-medium-paddingleft---mobile: var(--spacing-l---mobile); --button-size-medium-paddingright---desktop: var(--spacing-l---desktop); --button-size-medium-paddingright---mobile: var(--spacing-l---mobile); --button-size-medium-paddingtop---desktop: var(--spacing-m---desktop); --button-size-medium-paddingtop---mobile: var(--spacing-m---mobile); --button-size-medium-spacing---desktop: var(--spacing-s---desktop); --button-size-medium-spacing---mobile: var(--spacing-s----mobile); --button-size-small-corner-radius---desktop: var(--corner-radius-m); --button-size-small-corner-radius---mobile: var(--corner-radius-m); --button-size-small-font-line-height---desktop: var(--typography-button-small-line-height---desktop); --button-size-small-font-line-height---mobile: var(--typography-button-small-line-height---mobile); --button-size-small-font-size---desktop: var(--typography-button-small-size---desktop); --button-size-small-font-size---mobile: var(--typography-button-small-size---mobile); --button-size-small-font-weight---desktop: var(--typography-button-small-weight---desktop); --button-size-small-font-weight---mobile: var(--typography-button-small-weight---mobile); --button-size-small-icon---desktop: var(--typography-button-small-size---desktop); --button-size-small-icon---mobile: var(--typography-button-small-size---mobile); --button-size-small-paddingbottom---desktop: var(--spacing-s---desktop); --button-size-small-paddingbottom---mobile: var(--spacing-s----mobile); --button-size-small-paddingleft---desktop: var(--spacing-m---desktop); --button-size-small-paddingleft---mobile: var(--spacing-m---mobile); --button-size-small-paddingright---desktop: var(--spacing-m---desktop); --button-size-small-paddingright---mobile: var(--spacing-m---mobile); --button-size-small-paddingtop---desktop: var(--spacing-s---desktop); --button-size-small-paddingtop---mobile: var(--spacing-s----mobile); --button-size-small-spacing---desktop: var(--spacing-s---desktop); --button-size-small-spacing---mobile: var(--spacing-s----mobile); --corner-radius-0: ; --corner-radius-2xl: 32px; --corner-radius-2xs: 2px; --corner-radius-l: 16px; --corner-radius-m: 12px; --corner-radius-s: 8px; --corner-radius-xl: 24px; --corner-radius-xs: 4px; --corner-radius-rounded: 9999px; --icon-button-size-large-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-large-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-large-icon---desktop: var(--typography-button-large-size---desktop); --icon-button-size-large-icon---mobile: var(--typography-button-large-size---mobile); --icon-button-size-large-padding---desktop: var(--spacing-l---desktop); --icon-button-size-large-padding---mobile: var(--spacing-l---mobile); --icon-button-size-medium-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-medium-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-medium-icon---desktop: var(--typography-button-medium-size---desktop); --icon-button-size-medium-icon---mobile: var(--typography-button-medium-size---mobile); --icon-button-size-medium-padding---desktop: var(--spacing-m---desktop); --icon-button-size-medium-padding---mobile: var(--spacing-m---mobile); --icon-button-size-small-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-small-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-small-icon---desktop: var(--typography-button-small-size---desktop); --icon-button-size-small-icon---mobile: var(--typography-button-small-size---mobile); --icon-button-size-small-padding---desktop: var(--spacing-s---desktop); --icon-button-size-small-padding---mobile: var(--spacing-s----mobile); --spacing-0---desktop: ; --spacing-0---mobile: ; --spacing-2xl---desktop: 32px; --spacing-2xl---mobile: 24px; --spacing-3xl---desktop: 48px; --spacing-3xl---mobile: 32px; --spacing-4xl---desktop: 64px; --spacing-4xl---mobile: 48px; --spacing-5xl---desktop: 80px; --spacing-5xl---mobile: 64px; --spacing-6xl---desktop: 96px; --spacing-6xl---mobile: 80px; --spacing-7xl---desktop: 120px; --spacing-7xl---mobile: 96px; --spacing-8xl---desktop: 200px; --spacing-8xl---mobile: 120px; --spacing-l---desktop: 16px; --spacing-l---mobile: 12px; --spacing-m---desktop: 12px; --spacing-m---mobile: 8px; --spacing-s----mobile: 4px; --spacing-s---desktop: 8px; --spacing-xl---desktop: 24px; --spacing-xl---mobile: 16px; --spacing-xs----mobile: 4px; --spacing-xs---desktop: 4px; --typography-body-large-line-height---desktop: 24px; --typography-body-large-line-height---mobile: 24px; --typography-body-large-size---desktop: 18px; --typography-body-large-size---mobile: 18px; --typography-body-large-weight---desktop: 400; --typography-body-large-weight---mobile: 400; --typography-body-medium-line-height---desktop: 22px; --typography-body-medium-line-height---mobile: 22px; --typography-body-medium-size---desktop: 16px; --typography-body-medium-size---mobile: 16px; --typography-body-medium-weight---desktop: 400; --typography-body-medium-weight---mobile: 400; --typography-body-small-line-height---desktop: 16px; --typography-body-small-line-height---mobile: 16px; --typography-body-small-size---desktop: 14px; --typography-body-small-size---mobile: 14px; --typography-body-small-weight---desktop: 300; --typography-body-small-weight---mobile: 300; --typography-button-large-line-height---desktop: 18px; --typography-button-large-line-height---mobile: 18px; --typography-button-large-size---desktop: 20px; --typography-button-large-size---mobile: 18px; --typography-button-large-weight---desktop: 600; --typography-button-large-weight---mobile: 600; --typography-button-medium-line-height---desktop: 16px; --typography-button-medium-line-height---mobile: 16px; --typography-button-medium-size---desktop: 16px; --typography-button-medium-size---mobile: 16px; --typography-button-medium-weight---desktop: 600; --typography-button-medium-weight---mobile: 600; --typography-button-small-line-height---desktop: 12px; --typography-button-small-line-height---mobile: 14px; --typography-button-small-size---desktop: 14px; --typography-button-small-size---mobile: 14px; --typography-button-small-weight---desktop: 600; --typography-button-small-weight---mobile: 600; --typography-heading-medium-line-height---desktop: 48px; --typography-heading-medium-line-height---mobile: 32px; --typography-heading-medium-size---desktop: 48px; --typography-heading-medium-size---mobile: 32px; --typography-heading-medium-weight---desktop: 500; --typography-heading-medium-weight---mobile: 500; --typography-label-large-line-height---desktop: 11px; --typography-label-large-line-height---mobile: 11px; --typography-label-large-size---desktop: 12px; --typography-label-large-size---mobile: 12px; --typography-label-large-weight---desktop: 400; --typography-label-large-weight---mobile: 400; --typography-label-medium-line-height---desktop: 12px; --typography-label-medium-line-height---mobile: 12px; --typography-label-medium-size---desktop: 12px; --typography-label-medium-size---mobile: 12px; --typography-label-medium-weight---desktop: 400; --typography-label-medium-weight---mobile: 400; --typography-label-small-line-height---desktop: 7px; --typography-label-small-line-height---mobile: 7px; --typography-label-small-size---desktop: 10px; --typography-label-small-size---mobile: 10px; --typography-label-small-weight---desktop: 500; --typography-label-small-weight---mobile: 500; --typography-title-large-line-height---desktop: 34px; --typography-title-large-line-height---mobile: 30px; --typography-title-large-size---desktop: 28px; --typography-title-large-size---mobile: 24px; --typography-title-large-weight---desktop: 600; --typography-title-large-weight---mobile: 600; --typography-title-medium-line-height---desktop: 24px; --typography-title-medium-line-height---mobile: 20px; --typography-title-medium-size---desktop: 18px; --typography-title-medium-size---mobile: 16px; --typography-title-medium-weight---desktop: 700; --typography-title-medium-weight---mobile: 600; --typography-title-small-line-height---desktop: 18px; --typography-title-small-line-height---mobile: 18px; --typography-title-small-size---desktop: 14px; --typography-title-small-size---mobile: 14px; --typography-title-small-weight---desktop: 700; --typography-title-small-weight---mobile: 700; } /* Mode: Mobile */ [data-mode*="Mobile"] { --be---page-navigation-width: ; --be---page-padding-bottom: var(--spacing-l---mobile); --be---page-padding-left: var(--spacing-l---mobile); --be---page-padding-right: var(--spacing-l---mobile); --be---page-padding-top: var(--spacing-l---mobile); --be---page-page-min-height: 844px; --be---page-spacing: var(--spacing-xl---mobile); --button-large-corner-radius: var(--button-size-large-corner-radius---mobile); --button-large-font-line-height: var(--button-size-large-font-line-height---mobile); --button-large-font-size: var(--button-size-large-font-size---mobile); --button-large-font-weight: var(--button-size-large-font-weight---mobile); --button-large-icon: var(--button-size-large-font-size---mobile); --button-large-paddingbottom: var(--button-size-large-paddingbottom---mobile); --button-large-paddingleft: var(--button-size-large-paddingleft---mobile); --button-large-paddingright: var(--button-size-large-paddingright---mobile); --button-large-paddingtop: var(--button-size-large-paddingtop---mobile); --button-large-spacing: var(--button-size-large-spacing---mobile); --button-medium-corner-radius: var(--button-size-medium-corner-radius---mobile); --button-medium-font-line-height: var(--button-size-medium-font-line-height---mobile); --button-medium-font-size: var(--button-size-medium-font-size---mobile); --button-medium-font-weight: var(--button-size-medium-font-weight---mobile); --button-medium-icon: var(--button-size-medium-font-size---mobile); --button-medium-paddingbottom: var(--button-size-medium-paddingbottom---mobile); --button-medium-paddingleft: var(--button-size-medium-paddingleft---mobile); --button-medium-paddingright: var(--button-size-medium-paddingright---mobile); --button-medium-paddingtop: var(--button-size-medium-paddingtop---mobile); --button-medium-spacing: var(--button-size-medium-spacing---mobile); --button-small-corner-radius: var(--button-size-small-corner-radius---mobile); --button-small-font-line-height: var(--button-size-small-font-line-height---mobile); --button-small-font-size: var(--button-size-small-font-size---mobile); --button-small-font-weight: var(--button-size-small-font-weight---mobile); --button-small-icon: var(--button-size-small-font-size---mobile); --button-small-paddingbottom: var(--button-size-small-paddingbottom---mobile); --button-small-paddingleft: var(--button-size-small-paddingleft---mobile); --button-small-paddingright: var(--button-size-small-paddingright---mobile); --button-small-paddingtop: var(--button-size-small-paddingtop---mobile); --button-small-spacing: var(--button-size-small-spacing---mobile); --chip-corner-radius: var(--corner-radius-rounded); --chip-paddingbottom: var(--spacing-l---mobile); --chip-paddingleft: var(--spacing-xl---mobile); --chip-paddingright: var(--spacing-xl---mobile); --chip-paddingtop: var(--spacing-l---mobile); --chip-spacing: var(--spacing-xs----mobile); --corner-radius-0: var(--corner-radius-0); --corner-radius-2xl: var(--corner-radius-2xl); --corner-radius-2xs: var(--corner-radius-2xs); --corner-radius-l: var(--corner-radius-l); --corner-radius-m: var(--corner-radius-m); --corner-radius-s: var(--corner-radius-s); --corner-radius-xl: var(--corner-radius-xl); --corner-radius-xs: var(--corner-radius-xs); --corner-radius-rounded: var(--corner-radius-rounded); --drag-handle-padding: var(--spacing-m---mobile); --dropdown-item-font-line-height: var(--typography-body-size-medium); --dropdown-item-font-size: var(--typography-body-size-medium); --dropdown-item-font-weight: var(--typography-body-weight-medium); --dropdown-item-corner-radius: var(--corner-radius-s); --dropdown-item-icon: var(--typography-body-size-medium); --dropdown-item-paddingbottom: var(--spacing-m---mobile); --dropdown-item-paddingleft: var(--spacing-m---mobile); --dropdown-item-paddingright: var(--spacing-m---mobile); --dropdown-item-paddingtop: var(--spacing-m---mobile); --dropdown-item-spacing: var(--spacing-m---mobile); --dropdown-list-corner-radius: var(--corner-radius-m); --dropdown-list-padding: var(--spacing-m---mobile); --dropdown-list-spacing: var(--spacing-s----mobile); --filter-borderradius: var(--corner-radius-s); --filter-borderwidth: 1px; --filter-icon: var(--typography-body-size-small); --filter-paddingbottom: var(--spacing-m---mobile); --filter-paddingleft: var(--spacing-l---mobile); --filter-paddingright: var(--spacing-l---mobile); --filter-paddingtop: var(--spacing-m---mobile); --filter-spacing: var(--spacing-xs----mobile); --icon-button-large-corner-radius: var(--icon-button-size-large-corner-radius---mobile); --icon-button-large-icon: var(--icon-button-size-large-icon---mobile); --icon-button-large-padding: var(--icon-button-size-large-padding---mobile); --icon-button-medium-corner-radius: var(--icon-button-size-medium-corner-radius---mobile); --icon-button-medium-icon: var(--icon-button-size-medium-icon---mobile); --icon-button-medium-padding: var(--icon-button-size-medium-padding---mobile); --icon-button-small-corner-radius: var(--icon-button-size-small-corner-radius---mobile); --icon-button-small-icon: var(--icon-button-size-small-icon---mobile); --icon-button-small-padding: var(--icon-button-size-small-padding---mobile); --label-border-radius: var(--corner-radius-xs); --label-font-line-height: var(--typography-label-line-height-small); --label-font-size: var(--typography-label-size-small); --label-font-weight: var(--typography-label-weight-small); --label-icon-size: var(--typography-label-size-small); --label-min-height: 18px; --label-padding-bottom: var(--spacing-xs----mobile); --label-padding-left: var(--spacing-xs----mobile); --label-padding-right: var(--spacing-xs----mobile); --label-padding-top: var(--spacing-xs----mobile); --label-spacing: var(--spacing-xs----mobile); --menu-label-borderradius: var(--corner-radius-xs); --menu-label-borderwidth: ; --menu-label-paddingleft: var(--spacing-m---mobile); --menu-label-paddingright: var(--corner-radius-s); --menu-label-paddingvertical: var(--spacing-m---mobile); --menu-label-spacing: var(--spacing-s----mobile); --spacing-0: var(--spacing-0---mobile); --spacing-2xl: var(--spacing-2xl---mobile); --spacing-3xl: var(--spacing-3xl---mobile); --spacing-4xl: var(--spacing-4xl---mobile); --spacing-5xl: var(--spacing-5xl---mobile); --spacing-6xl: var(--spacing-6xl---mobile); --spacing-7xl: var(--spacing-7xl---mobile); --spacing-8xl: var(--spacing-8xl---mobile); --spacing-l: var(--spacing-l---mobile); --spacing-m: var(--spacing-m---mobile); --spacing-s: var(--spacing-s----mobile); --spacing-xl: var(--spacing-xl---mobile); --spacing-xs: var(--spacing-xs----mobile); --typography-body-line-height-large: 24px; --typography-body-line-height-medium: 22px; --typography-body-line-height-small: 16px; --typography-body-size-large: 18px; --typography-body-size-medium: 16px; --typography-body-size-small: 14px; --typography-body-weight-large: 400; --typography-body-weight-medium: 400; --typography-body-weight-small: 300; --typography-button-lineheight-large: 18px; --typography-button-lineheight-medium: 16px; --typography-button-lineheight-small: 14px; --typography-button-size-large: 18px; --typography-button-size-medium: 16px; --typography-button-size-small: 14px; --typography-button-weight-large: 600; --typography-button-weight-medium: 600; --typography-button-weight-small: 600; --typography-heading-line-height-medium: var(--typography-heading-medium-line-height---mobile); --typography-heading-size-medium: var(--typography-heading-medium-size---mobile); --typography-heading-weight-medium: var(--typography-heading-medium-weight---mobile); --typography-title-line-height-large: var(--typography-title-large-line-height---mobile); --typography-title-line-height-medium: var(--typography-title-medium-line-height---mobile); --typography-title-line-height-small: var(--typography-title-small-line-height---mobile); --typography-title-size-large: var(--typography-title-large-size---mobile); --typography-title-size-medium: var(--typography-title-medium-size---mobile); --typography-title-size-small: var(--typography-title-small-size---mobile); --typography-title-weight-large: var(--typography-title-large-weight---mobile); --typography-title-weight-medium: var(--typography-title-medium-weight---mobile); --typography-title-weight-small: var(--typography-title-small-weight---mobile); --typography-label-line-height-large: 11px; --typography-label-line-height-medium: 12px; --typography-label-line-height-small: 7px; --typography-label-size-large: 12px; --typography-label-size-medium: 12px; --typography-label-size-small: 10px; --typography-label-weight-large: 400; --typography-label-weight-medium: 400; --typography-label-weight-small: 500; --wl---page-horizontal-gap: var(--spacing-l---mobile); --wl---page-page-container: ; --wl---page-sidebar-maxwidth: ; --wl---page-vertical-gap: var(--spacing-0---mobile); --wl---page-padding-bottom: var(--spacing-l---mobile); --wl---page-padding-left: var(--spacing-l---mobile); --wl---page-padding-right: var(--spacing-l---mobile); --wl---page-padding-top: var(--spacing-l---mobile); --device: "Mobile"; --dropdown-item-font: var(--typography-font-family-font-2); --label-font-family: var(--typography-font-family-font-2); --be---page-overlay: var(--background-global-overlay); --menu-label-background: var(--colors-primitives-grey-scale-transparent); --menu-label-backgroundactive: var(--colors-primitives-grey-scale-transparent); --menu-label-backgroundhover: var(--brand-primary-brandlight); --menu-label-bordercolor: var(--colors-primitives-grey-scale-transparent); --menu-label-foreground: var(--text-main); --menu-label-foregroundactive: var(--brand-primary-brand); --menu-label-foregroundhover: var(--brand-primary-brand); --wl---page-overlay: var(--background-global-overlay); } /* Mode: SupptextAppearance-Default */ [data-mode*="SupptextAppearance-Default"] { --supporting-text-default: var(--text-secondary); } /* Mode: SupptextAppearance-Disabled */ [data-mode*="SupptextAppearance-Disabled"] { --supporting-text-default: var(--text-disabled); } /* Mode: SupptextAppearance-Error */ [data-mode*="SupptextAppearance-Error"] { --supporting-text-default: var(--brand-error-brand); } /* Mode: SupptextAppearance-Success */ [data-mode*="SupptextAppearance-Success"] { --supporting-text-default: var(--brand-success-brand); } /* Mode: SupptextAppearance-Warning */ [data-mode*="SupptextAppearance-Warning"] { --supporting-text-default: var(--brand-warning-brand); } /* Mode: Vigoleno */ [data-mode*="Vigoleno"] { --background-dark-be-background: #f2f3f7; --background-dark-global-background: #f2f3f7; --background-dark-global-overlay: var(--colors-primitives-grey-scale-black-5); --background-dark-global-paper1: var(--colors-primitives-grey-scale-black-0); --background-dark-global-paper2: var(--colors-primitives-grey-scale-black-2); --background-dark-global-paper3: var(--colors-primitives-grey-scale-black-5); --background-light-be-background: #f2f3f7; --background-light-global-background: #f2f3f7; --background-light-global-overlay: #f2f2f2; --background-light-global-paper1: var(--colors-primitives-grey-scale-black-0); --background-light-global-paper2: var(--colors-primitives-grey-scale-black-2); --background-light-global-paper3: var(--colors-primitives-grey-scale-black-5); --colors-brand-error-dark-mode-brand: var(--colors-primitives-red-red-6); --colors-brand-error-dark-mode-brandhover: var(--colors-primitives-red-red-7); --colors-brand-error-dark-mode-brandlight: var(--colors-primitives-red-red-1); --colors-brand-error-dark-mode-brandlighthover: var(--colors-primitives-red-red-2); --colors-brand-error-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-error-dark-mode-onbrandlight: var(--colors-primitives-red-red-7); --colors-brand-error-light-mode-brand: var(--colors-primitives-red-red-6); --colors-brand-error-light-mode-brandhover: var(--colors-primitives-red-red-7); --colors-brand-error-light-mode-brandlight: var(--colors-primitives-red-red-1); --colors-brand-error-light-mode-brandlighthover: var(--colors-primitives-red-red-2); --colors-brand-error-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-error-light-mode-onbrandlight: var(--colors-primitives-red-red-7); --colors-brand-neutral-dark-mode-brand: var(--colors-primitives-grey-scale-black-100); --colors-brand-neutral-dark-mode-brandhover: var(--colors-primitives-grey-scale-black-80); --colors-brand-neutral-dark-mode-brandlight: var(--colors-primitives-grey-scale-black-10); --colors-brand-neutral-dark-mode-brandlighthover: var(--colors-primitives-grey-scale-black-20); --colors-brand-neutral-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-neutral-dark-mode-onbrandlight: var(--colors-primitives-transparent-black-black-95); --colors-brand-neutral-light-mode-brand: var(--colors-primitives-grey-scale-black-100); --colors-brand-neutral-light-mode-brandhover: var(--colors-primitives-grey-scale-black-80); --colors-brand-neutral-light-mode-brandlight: var(--colors-primitives-grey-scale-black-10); --colors-brand-neutral-light-mode-brandlighthover: var(--colors-primitives-grey-scale-black-20); --colors-brand-neutral-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-neutral-light-mode-onbrandlight: var(--colors-primitives-transparent-black-black-95); --colors-brand-primary-dark-mode-brand: var(--colors-primitives-a-light-a-7); --colors-brand-primary-dark-mode-brandhover: var(--colors-primitives-a-light-a-8); --colors-brand-primary-dark-mode-brandlight: var(--colors-primitives-a-light-a-1); --colors-brand-primary-dark-mode-brandlighthover: var(--colors-primitives-a-light-a-2); --colors-brand-primary-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-primary-dark-mode-onbrandlight: var(--colors-primitives-a-light-a-7); --colors-brand-primary-light-mode-brand: var(--colors-primitives-a-light-a-7); --colors-brand-primary-light-mode-brandhover: var(--colors-primitives-a-light-a-8); --colors-brand-primary-light-mode-brandlight: var(--colors-primitives-a-light-a-1); --colors-brand-primary-light-mode-brandlighthover: var(--colors-primitives-a-light-a-2); --colors-brand-primary-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-primary-light-mode-onbrandlight: var(--colors-primitives-a-light-a-7); --colors-brand-secondary-dark-mode-brand: var(--colors-primitives-b-light-b-6); --colors-brand-secondary-dark-mode-brandhover: var(--colors-primitives-b-light-b-7); --colors-brand-secondary-dark-mode-brandlight: var(--colors-primitives-b-light-b-1); --colors-brand-secondary-dark-mode-brandlighthover: var(--colors-primitives-b-light-b-2); --colors-brand-secondary-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-secondary-dark-mode-onbrandlight: var(--colors-primitives-b-light-b-6); --colors-brand-secondary-light-mode-brand: var(--colors-primitives-b-light-b-6); --colors-brand-secondary-light-mode-brandhover: var(--colors-primitives-b-light-b-7); --colors-brand-secondary-light-mode-brandlight: var(--colors-primitives-b-light-b-1); --colors-brand-secondary-light-mode-brandlighthover: var(--colors-primitives-b-light-b-2); --colors-brand-secondary-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-secondary-light-mode-onbrandlight: var(--colors-primitives-b-light-b-6); --colors-brand-success-dark-mode-brand: var(--colors-primitives-green-green-3); --colors-brand-success-dark-mode-brandhover: var(--colors-primitives-green-green-4); --colors-brand-success-dark-mode-brandlight: var(--colors-primitives-green-green-6); --colors-brand-success-dark-mode-brandlighthover: var(--colors-primitives-green-green-7); --colors-brand-success-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-success-dark-mode-onbrandlight: var(--colors-primitives-green-green-1); --colors-brand-success-light-mode-brand: var(--colors-primitives-green-green-4); --colors-brand-success-light-mode-brandhover: var(--colors-primitives-green-green-3); --colors-brand-success-light-mode-brandlight: var(--colors-primitives-green-green-6); --colors-brand-success-light-mode-brandlighthover: var(--colors-primitives-green-green-7); --colors-brand-success-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-success-light-mode-onbrandlight: var(--colors-primitives-green-green-1); --colors-brand-warning-dark-mode-brand: var(--colors-primitives-yellow-yellow-6); --colors-brand-warning-dark-mode-brandhover: var(--colors-primitives-yellow-yellow-7); --colors-brand-warning-dark-mode-brandlight: var(--colors-primitives-yellow-yellow-1); --colors-brand-warning-dark-mode-brandlighthover: var(--colors-primitives-yellow-yellow-2); --colors-brand-warning-dark-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-warning-dark-mode-onbrandlight: var(--colors-primitives-yellow-yellow-7); --colors-brand-warning-light-mode-brand: var(--colors-primitives-yellow-yellow-6); --colors-brand-warning-light-mode-brandhover: var(--colors-primitives-yellow-yellow-7); --colors-brand-warning-light-mode-brandlight: var(--colors-primitives-yellow-yellow-1); --colors-brand-warning-light-mode-brandlighthover: var(--colors-primitives-yellow-yellow-2); --colors-brand-warning-light-mode-onbrand: var(--colors-primitives-grey-scale-black-0); --colors-brand-warning-light-mode-onbrandlight: var(--colors-primitives-yellow-yellow-7); --colors-primitives-a-dark-a-1: #fbe6f7; --colors-primitives-a-dark-a-10: #580048; --colors-primitives-a-dark-a-2: #f1b0e5; --colors-primitives-a-dark-a-3: #ea8acd; --colors-primitives-a-dark-a-4: #e154be; --colors-primitives-a-dark-a-5: #db33b9; --colors-primitives-a-dark-a-6: #d11a9d; --colors-primitives-a-dark-a-7: #d200b2; --colors-primitives-a-dark-a-8: #a3008d; --colors-primitives-a-dark-a-9: #74006a; --colors-primitives-a-light-a-1: #fbe6f7; --colors-primitives-a-light-a-10: #580048; --colors-primitives-a-light-a-2: #f1b0e5; --colors-primitives-a-light-a-3: #ea8acd; --colors-primitives-a-light-a-4: #e154be; --colors-primitives-a-light-a-5: #db33b9; --colors-primitives-a-light-a-6: #d11a9d; --colors-primitives-a-light-a-7: #d200b2; --colors-primitives-a-light-a-8: #a3008d; --colors-primitives-a-light-a-9: #74006a; --colors-primitives-b-dark-b-1: #ebfbed; --colors-primitives-b-dark-b-10: #1b5918; --colors-primitives-b-dark-b-2: #c2f1ce; --colors-primitives-b-dark-b-3: #a4eba9; --colors-primitives-b-dark-b-4: #7ae291; --colors-primitives-b-dark-b-5: #61dc69; --colors-primitives-b-dark-b-6: #39d341; --colors-primitives-b-dark-b-7: #34c050; --colors-primitives-b-dark-b-8: #2e9628; --colors-primitives-b-dark-b-9: #1f742f; --colors-primitives-b-light-b-1: #ebfbed; --colors-primitives-b-light-b-10: #1b5918; --colors-primitives-b-light-b-2: #c2f1ce; --colors-primitives-b-light-b-3: #a4eba9; --colors-primitives-b-light-b-4: #7ae291; --colors-primitives-b-light-b-5: #61dc69; --colors-primitives-b-light-b-6: #39d341; --colors-primitives-b-light-b-7: #34c050; --colors-primitives-b-light-b-8: #2e9628; --colors-primitives-b-light-b-9: #1f742f; --colors-primitives-grey-scale-transparent: #ffffff00; --colors-primitives-grey-scale-black-0: #ffffff; --colors-primitives-grey-scale-black-10: #e6e6e6; --colors-primitives-grey-scale-black-100: #000000; --colors-primitives-grey-scale-black-2: #fafafa; --colors-primitives-grey-scale-black-20: #cccccc; --colors-primitives-grey-scale-black-30: #b2b2b2; --colors-primitives-grey-scale-black-40: #999999; --colors-primitives-grey-scale-black-45: #8c8c8c; --colors-primitives-grey-scale-black-5: #f2f2f2; --colors-primitives-grey-scale-black-50: #808080; --colors-primitives-grey-scale-black-60: #666666; --colors-primitives-grey-scale-black-70: #4d4d4d; --colors-primitives-grey-scale-black-80: #333333; --colors-primitives-grey-scale-black-85: #262626; --colors-primitives-grey-scale-black-90: #1a1a1a; --colors-primitives-grey-scale-black-95: #0d0d0d; --colors-primitives-transparent-black-black-10: #0000001a; --colors-primitives-transparent-black-black-2: #00000005; --colors-primitives-transparent-black-black-20: #00000033; --colors-primitives-transparent-black-black-30: #0000004d; --colors-primitives-transparent-black-black-40: #00000066; --colors-primitives-transparent-black-black-5: #0000000d; --colors-primitives-transparent-black-black-50: #00000080; --colors-primitives-transparent-black-black-60: #00000099; --colors-primitives-transparent-black-black-70: #000000b2; --colors-primitives-transparent-black-black-80: #000000cc; --colors-primitives-transparent-black-black-90: #000000e5; --colors-primitives-transparent-black-black-95: #000000f2; --colors-primitives-green-green-1: #f2f5f2; --colors-primitives-green-green-10: #163608; --colors-primitives-green-green-2: #dee5dd; --colors-primitives-green-green-3: #b2cfae; --colors-primitives-green-green-4: #66a659; --colors-primitives-green-green-5: #55913c; --colors-primitives-green-green-6: #307911; --colors-primitives-green-green-7: #29670e; --colors-primitives-green-green-8: #22560c; --colors-primitives-green-green-9: #1b450a; --colors-primitives-red-red-1: #fae6e6; --colors-primitives-red-red-10: #5c0000; --colors-primitives-red-red-2: #f3c2c2; --colors-primitives-red-red-3: #e99191; --colors-primitives-red-red-4: #df5e5e; --colors-primitives-red-red-5: #d52e2e; --colors-primitives-red-red-6: #cc0000; --colors-primitives-red-red-7: #ad0000; --colors-primitives-red-red-8: #910000; --colors-primitives-red-red-9: #740000; --colors-primitives-yellow-yellow-1: #fdfbe6; --colors-primitives-yellow-yellow-10: #6b5e01; --colors-primitives-yellow-yellow-2: #fbf4c2; --colors-primitives-yellow-yellow-3: #f8ec92; --colors-primitives-yellow-yellow-4: #f4e360; --colors-primitives-yellow-yellow-5: #f1da30; --colors-primitives-yellow-yellow-6: #eed202; --colors-primitives-yellow-yellow-7: #cab302; --colors-primitives-yellow-yellow-8: #a99501; --colors-primitives-yellow-yellow-9: #887801; --button-font: var(--typography-font-family-font-2); --icon-button-font: var(--typography-font-family-font-2); --typography-body-font: var(--typography-font-family-font-2); --typography-button-font: var(--typography-font-family-font-2); --typography-heading-font: var(--typography-font-family-font-1); --typography-label-font: var(--typography-font-family-font-2); --typography-title-font: var(--typography-font-family-font-1); --typography-font-family-font-1: "Roboto"; --typography-font-family-font-2: "Roboto"; --blablablafe: "String value"; --button-size-large-corner-radius---desktop: var(--corner-radius-m); --button-size-large-corner-radius---mobile: var(--corner-radius-m); --button-size-large-font-line-height---desktop: var(--typography-button-large-line-height---desktop); --button-size-large-font-line-height---mobile: var(--typography-button-large-line-height---mobile); --button-size-large-font-size---desktop: var(--typography-button-large-size---desktop); --button-size-large-font-size---mobile: var(--typography-button-large-size---mobile); --button-size-large-font-weight---desktop: var(--typography-button-large-weight---desktop); --button-size-large-font-weight---mobile: var(--typography-button-large-weight---mobile); --button-size-large-icon---desktop: var(--typography-button-large-size---desktop); --button-size-large-icon---mobile: var(--typography-button-large-size---mobile); --button-size-large-paddingbottom---desktop: var(--spacing-l---desktop); --button-size-large-paddingbottom---mobile: var(--spacing-l---mobile); --button-size-large-paddingleft---desktop: var(--spacing-xl---desktop); --button-size-large-paddingleft---mobile: var(--spacing-xl---mobile); --button-size-large-paddingright---desktop: var(--spacing-xl---desktop); --button-size-large-paddingright---mobile: var(--spacing-xl---mobile); --button-size-large-paddingtop---desktop: var(--spacing-l---desktop); --button-size-large-paddingtop---mobile: var(--spacing-l---mobile); --button-size-large-spacing---desktop: var(--spacing-m---desktop); --button-size-large-spacing---mobile: var(--spacing-m---mobile); --button-size-medium-corner-radius---desktop: var(--corner-radius-m); --button-size-medium-corner-radius---mobile: var(--corner-radius-m); --button-size-medium-font-line-height---desktop: var(--typography-button-medium-line-height---desktop); --button-size-medium-font-line-height---mobile: var(--typography-button-medium-line-height---mobile); --button-size-medium-font-size---desktop: var(--typography-button-medium-size---desktop); --button-size-medium-font-size---mobile: var(--typography-button-medium-size---mobile); --button-size-medium-font-weight---desktop: var(--typography-button-medium-weight---desktop); --button-size-medium-font-weight---mobile: var(--typography-button-medium-weight---mobile); --button-size-medium-icon---desktop: var(--typography-button-medium-size---desktop); --button-size-medium-icon---mobile: var(--typography-button-medium-size---mobile); --button-size-medium-paddingbottom---desktop: var(--spacing-m---desktop); --button-size-medium-paddingbottom---mobile: var(--spacing-m---mobile); --button-size-medium-paddingleft---desktop: var(--spacing-l---desktop); --button-size-medium-paddingleft---mobile: var(--spacing-l---mobile); --button-size-medium-paddingright---desktop: var(--spacing-l---desktop); --button-size-medium-paddingright---mobile: var(--spacing-l---mobile); --button-size-medium-paddingtop---desktop: var(--spacing-m---desktop); --button-size-medium-paddingtop---mobile: var(--spacing-m---mobile); --button-size-medium-spacing---desktop: var(--spacing-s---desktop); --button-size-medium-spacing---mobile: var(--spacing-s----mobile); --button-size-small-corner-radius---desktop: var(--corner-radius-m); --button-size-small-corner-radius---mobile: var(--corner-radius-m); --button-size-small-font-line-height---desktop: var(--typography-button-small-line-height---desktop); --button-size-small-font-line-height---mobile: var(--typography-button-small-line-height---mobile); --button-size-small-font-size---desktop: var(--typography-button-small-size---desktop); --button-size-small-font-size---mobile: var(--typography-button-small-size---mobile); --button-size-small-font-weight---desktop: var(--typography-button-small-weight---desktop); --button-size-small-font-weight---mobile: var(--typography-button-small-weight---mobile); --button-size-small-icon---desktop: var(--typography-button-small-size---desktop); --button-size-small-icon---mobile: var(--typography-button-small-size---mobile); --button-size-small-paddingbottom---desktop: var(--spacing-s---desktop); --button-size-small-paddingbottom---mobile: var(--spacing-s----mobile); --button-size-small-paddingleft---desktop: var(--spacing-m---desktop); --button-size-small-paddingleft---mobile: var(--spacing-m---mobile); --button-size-small-paddingright---desktop: var(--spacing-m---desktop); --button-size-small-paddingright---mobile: var(--spacing-m---mobile); --button-size-small-paddingtop---desktop: var(--spacing-s---desktop); --button-size-small-paddingtop---mobile: var(--spacing-s----mobile); --button-size-small-spacing---desktop: var(--spacing-s---desktop); --button-size-small-spacing---mobile: var(--spacing-s----mobile); --corner-radius-0: ; --corner-radius-2xl: 32px; --corner-radius-2xs: 2px; --corner-radius-l: 16px; --corner-radius-m: 12px; --corner-radius-s: 8px; --corner-radius-xl: 24px; --corner-radius-xs: 4px; --corner-radius-rounded: 9999px; --icon-button-size-large-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-large-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-large-icon---desktop: var(--typography-button-large-size---desktop); --icon-button-size-large-icon---mobile: var(--typography-button-large-size---mobile); --icon-button-size-large-padding---desktop: var(--spacing-l---desktop); --icon-button-size-large-padding---mobile: var(--spacing-l---mobile); --icon-button-size-medium-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-medium-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-medium-icon---desktop: var(--typography-button-medium-size---desktop); --icon-button-size-medium-icon---mobile: var(--typography-button-medium-size---mobile); --icon-button-size-medium-padding---desktop: var(--spacing-m---desktop); --icon-button-size-medium-padding---mobile: var(--spacing-m---mobile); --icon-button-size-small-corner-radius---desktop: var(--corner-radius-m); --icon-button-size-small-corner-radius---mobile: var(--corner-radius-m); --icon-button-size-small-icon---desktop: var(--typography-button-small-size---desktop); --icon-button-size-small-icon---mobile: var(--typography-button-small-size---mobile); --icon-button-size-small-padding---desktop: var(--spacing-s---desktop); --icon-button-size-small-padding---mobile: var(--spacing-s----mobile); --spacing-0---desktop: ; --spacing-0---mobile: ; --spacing-2xl---desktop: 32px; --spacing-2xl---mobile: 24px; --spacing-3xl---desktop: 48px; --spacing-3xl---mobile: 32px; --spacing-4xl---desktop: 64px; --spacing-4xl---mobile: 48px; --spacing-5xl---desktop: 80px; --spacing-5xl---mobile: 64px; --spacing-6xl---desktop: 96px; --spacing-6xl---mobile: 80px; --spacing-7xl---desktop: 120px; --spacing-7xl---mobile: 96px; --spacing-8xl---desktop: 200px; --spacing-8xl---mobile: 120px; --spacing-l---desktop: 16px; --spacing-l---mobile: 12px; --spacing-m---desktop: 12px; --spacing-m---mobile: 8px; --spacing-s----mobile: 4px; --spacing-s---desktop: 8px; --spacing-xl---desktop: 24px; --spacing-xl---mobile: 16px; --spacing-xs----mobile: 4px; --spacing-xs---desktop: 4px; --typography-body-large-line-height---desktop: 24px; --typography-body-large-line-height---mobile: 24px; --typography-body-large-size---desktop: 18px; --typography-body-large-size---mobile: 18px; --typography-body-large-weight---desktop: 400; --typography-body-large-weight---mobile: 400; --typography-body-medium-line-height---desktop: 22px; --typography-body-medium-line-height---mobile: 22px; --typography-body-medium-size---desktop: 16px; --typography-body-medium-size---mobile: 16px; --typography-body-medium-weight---desktop: 400; --typography-body-medium-weight---mobile: 400; --typography-body-small-line-height---desktop: 16px; --typography-body-small-line-height---mobile: 16px; --typography-body-small-size---desktop: 14px; --typography-body-small-size---mobile: 14px; --typography-body-small-weight---desktop: 300; --typography-body-small-weight---mobile: 300; --typography-button-large-line-height---desktop: 18px; --typography-button-large-line-height---mobile: 18px; --typography-button-large-size---desktop: 20px; --typography-button-large-size---mobile: 18px; --typography-button-large-weight---desktop: 600; --typography-button-large-weight---mobile: 600; --typography-button-medium-line-height---desktop: 16px; --typography-button-medium-line-height---mobile: 16px; --typography-button-medium-size---desktop: 16px; --typography-button-medium-size---mobile: 16px; --typography-button-medium-weight---desktop: 600; --typography-button-medium-weight---mobile: 600; --typography-button-small-line-height---desktop: 12px; --typography-button-small-line-height---mobile: 14px; --typography-button-small-size---desktop: 14px; --typography-button-small-size---mobile: 14px; --typography-button-small-weight---desktop: 600; --typography-button-small-weight---mobile: 600; --typography-heading-medium-line-height---desktop: 48px; --typography-heading-medium-line-height---mobile: 32px; --typography-heading-medium-size---desktop: 48px; --typography-heading-medium-size---mobile: 32px; --typography-heading-medium-weight---desktop: 500; --typography-heading-medium-weight---mobile: 500; --typography-label-large-line-height---desktop: 11px; --typography-label-large-line-height---mobile: 11px; --typography-label-large-size---desktop: 12px; --typography-label-large-size---mobile: 12px; --typography-label-large-weight---desktop: 400; --typography-label-large-weight---mobile: 400; --typography-label-medium-line-height---desktop: 12px; --typography-label-medium-line-height---mobile: 12px; --typography-label-medium-size---desktop: 12px; --typography-label-medium-size---mobile: 12px; --typography-label-medium-weight---desktop: 400; --typography-label-medium-weight---mobile: 400; --typography-label-small-line-height---desktop: 7px; --typography-label-small-line-height---mobile: 7px; --typography-label-small-size---desktop: 10px; --typography-label-small-size---mobile: 10px; --typography-label-small-weight---desktop: 500; --typography-label-small-weight---mobile: 500; --typography-title-large-line-height---desktop: 34px; --typography-title-large-line-height---mobile: 30px; --typography-title-large-size---desktop: 28px; --typography-title-large-size---mobile: 24px; --typography-title-large-weight---desktop: 600; --typography-title-large-weight---mobile: 600; --typography-title-medium-line-height---desktop: 24px; --typography-title-medium-line-height---mobile: 20px; --typography-title-medium-size---desktop: 18px; --typography-title-medium-size---mobile: 16px; --typography-title-medium-weight---desktop: 700; --typography-title-medium-weight---mobile: 600; --typography-title-small-line-height---desktop: 18px; --typography-title-small-line-height---mobile: 18px; --typography-title-small-size---desktop: 14px; --typography-title-small-size---mobile: 14px; --typography-title-small-weight---desktop: 700; --typography-title-small-weight---mobile: 700; } /* Mode: accordion-Default */ [data-mode*="accordion-Default"] { --background: var(--accordion-background); --bordercoloractive: var(--accordion-bordercoloractive); --bordercolorresting: var(--accordion-bordercolorresting); --fontcolor: var(--accordion-fontcolor); --borderradius: var(--corner-radius-xl); --borderwidth: 1px; --fontlineheight: var(--typography-title-line-height-medium); --fontsize: var(--typography-title-size-medium); --fontweight: var(--typography-title-weight-medium); --paddingbottom: var(--spacing-l); --paddingleft: var(--spacing-l); --paddingright: var(--spacing-l); --paddingtop: var(--spacing-l); --spacing: var(--corner-radius-m); --fonttype: var(--typography-font-family-font-2); } /* Mode: buttonAppearance-Disabled */ [data-mode*="buttonAppearance-Disabled"] { --button-high-focused-background: var(--button-disabled-high-focused-background); --button-high-focused-border-color: var(--button-disabled-high-focused-border-color); --button-high-focused-foreground: var(--button-disabled-high-focused-foreground); --button-high-hover-background: var(--button-disabled-high-hover-background); --button-high-hover-border-color: var(--button-disabled-high-hover-border-color); --button-high-hover-foreground: var(--button-disabled-high-hover-foreground); --button-high-loading-background: var(--button-disabled-high-loading-background); --button-high-loading-border-color: var(--button-disabled-high-loading-border-color); --button-high-loading-foreground: var(--button-disabled-high-loading-foreground); --button-high-pressed-background: var(--button-disabled-high-pressed-background); --button-high-pressed-border-color: var(--button-disabled-high-pressed-border-color); --button-high-pressed-foreground: var(--button-disabled-high-pressed-foreground); --button-high-resting-background: var(--button-disabled-high-resting-background); --button-high-resting-border-color: var(--button-disabled-high-resting-border-color); --button-high-resting-foreground: var(--button-disabled-high-resting-foreground); --button-low-focused-background: var(--button-disabled-low-focused-background); --button-low-focused-border-color: var(--button-disabled-low-focused-border-color); --button-low-focused-foreground: var(--button-disabled-low-focused-foreground); --button-low-hover-background: var(--button-disabled-low-hover-background); --button-low-hover-border-color: var(--button-disabled-low-hover-border-color); --button-low-hover-foreground: var(--button-disabled-low-hover-foreground); --button-low-loading-background: var(--button-disabled-low-loading-background); --button-low-loading-border-color: var(--button-disabled-low-loading-border-color); --button-low-loading-foreground: var(--button-disabled-low-loading-foreground); --button-low-pressed-background: var(--button-disabled-low-pressed-background); --button-low-pressed-border-color: var(--button-disabled-low-pressed-border-color); --button-low-pressed-foreground: var(--button-disabled-low-pressed-foreground); --button-low-resting-background: var(--button-disabled-low-resting-background); --button-low-resting-border-color: var(--button-disabled-low-resting-border-color); --button-low-resting-foreground: var(--button-disabled-low-resting-foreground); --button-medium-low-focused-background: var(--button-disabled-medium-low-hover-background); --button-medium-low-focused-border-color: var(--button-disabled-medium-low-hover-border-color); --button-medium-low-focused-foreground: var(--button-disabled-medium-low-hover-foreground); --button-medium-low-hover-background: var(--button-disabled-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-disabled-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-disabled-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-disabled-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-disabled-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-disabled-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-disabled-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-disabled-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-disabled-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-disabled-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-disabled-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-disabled-medium-low-resting-foreground); --button-medium-focused-background: var(--button-disabled-medium-focused-background); --button-medium-focused-border-color: var(--button-disabled-medium-focused-border-color); --button-medium-focused-foreground: var(--button-disabled-medium-focused-foreground); --button-medium-hover-background: var(--button-disabled-medium-hover-background); --button-medium-hover-border-color: var(--button-disabled-medium-hover-border-color); --button-medium-hover-foreground: var(--button-disabled-medium-hover-foreground); --button-medium-loading-background: var(--button-disabled-medium-loading-background); --button-medium-loading-border-color: var(--button-disabled-medium-loading-border-color); --button-medium-loading-foreground: var(--button-disabled-medium-loading-foreground); --button-medium-pressed-background: var(--button-disabled-medium-pressed-background); --button-medium-pressed-border-color: var(--button-disabled-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-disabled-medium-pressed-foreground); --button-medium-resting-background: var(--button-disabled-medium-resting-background); --button-medium-resting-border-color: var(--button-disabled-medium-resting-border-color); --button-medium-resting-foreground: var(--button-disabled-medium-resting-foreground); --button-high-focused-border-width: var(--button-disabled-high-focused-border-width); --button-high-hover-border-width: var(--button-disabled-high-hover-border-width); --button-high-loading-border-width: var(--button-disabled-high-loading-border-width); --button-high-pressed-border-width: var(--button-disabled-high-pressed-border-width); --button-high-resting-border-width: var(--button-disabled-high-resting-border-width); --button-low-focused-border-width: var(--button-disabled-low-focused-border-width); --button-low-hover-border-width: var(--button-disabled-low-hover-border-width); --button-low-loading-border-width: var(--button-disabled-low-loading-border-width); --button-low-pressed-border-width: var(--button-disabled-low-pressed-border-width); --button-low-resting-border-width: var(--button-disabled-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-disabled-medium-low-hover-border-width); --button-medium-low-hover-border-width: var(--button-disabled-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-disabled-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-disabled-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-disabled-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-disabled-medium-focused-border-width); --button-medium-hover-border-width: var(--button-disabled-medium-hover-border-width); --button-medium-loading-border-width: var(--button-disabled-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-disabled-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-disabled-medium-resting-border-width); } /* Mode: buttonAppearance-Error */ [data-mode*="buttonAppearance-Error"] { --button-high-focused-background: var(--button-error-high-focused-background); --button-high-focused-border-color: var(--button-error-high-focused-border-color); --button-high-focused-foreground: var(--button-error-high-focused-foreground); --button-high-hover-background: var(--button-error-high-hover-background); --button-high-hover-border-color: var(--button-error-high-hover-border-color); --button-high-hover-foreground: var(--button-error-high-hover-foreground); --button-high-loading-background: var(--button-error-high-loading-background); --button-high-loading-border-color: var(--button-error-high-loading-border-color); --button-high-loading-foreground: var(--button-error-high-loading-foreground); --button-high-pressed-background: var(--button-error-high-pressed-background); --button-high-pressed-border-color: var(--button-error-high-pressed-border-color); --button-high-pressed-foreground: var(--button-error-high-pressed-foreground); --button-high-resting-background: var(--button-error-high-resting-background); --button-high-resting-border-color: var(--button-error-high-resting-border-color); --button-high-resting-foreground: var(--button-error-high-resting-foreground); --button-low-focused-background: var(--button-error-low-focused-background); --button-low-focused-border-color: var(--button-error-low-focused-border-color); --button-low-focused-foreground: var(--button-error-low-focused-foreground); --button-low-hover-background: var(--button-error-low-hover-background); --button-low-hover-border-color: var(--button-error-low-hover-border-color); --button-low-hover-foreground: var(--button-error-low-hover-foreground); --button-low-loading-background: var(--button-error-low-loading-background); --button-low-loading-border-color: var(--button-error-low-loading-border-color); --button-low-loading-foreground: var(--button-error-low-loading-foreground); --button-low-pressed-background: var(--button-error-low-pressed-background); --button-low-pressed-border-color: var(--button-error-low-pressed-border-color); --button-low-pressed-foreground: var(--button-error-low-pressed-foreground); --button-low-resting-background: var(--button-error-low-resting-background); --button-low-resting-border-color: var(--button-error-low-resting-border-color); --button-low-resting-foreground: var(--button-error-low-resting-foreground); --button-medium-low-focused-background: var(--button-error-medium-low-hover-background); --button-medium-low-focused-border-color: var(--button-error-medium-low-hover-border-color); --button-medium-low-focused-foreground: var(--button-error-medium-low-hover-foreground); --button-medium-low-hover-background: var(--button-error-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-error-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-error-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-error-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-error-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-error-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-error-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-error-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-error-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-error-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-error-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-error-medium-low-resting-foreground); --button-medium-focused-background: var(--button-error-medium-focused-background); --button-medium-focused-border-color: var(--button-error-medium-focused-border-color); --button-medium-focused-foreground: var(--button-error-medium-focused-foreground); --button-medium-hover-background: var(--button-error-medium-hover-background); --button-medium-hover-border-color: var(--button-error-medium-hover-border-color); --button-medium-hover-foreground: var(--button-error-medium-hover-foreground); --button-medium-loading-background: var(--button-error-medium-loading-background); --button-medium-loading-border-color: var(--button-error-medium-loading-border-color); --button-medium-loading-foreground: var(--button-error-medium-loading-foreground); --button-medium-pressed-background: var(--button-error-medium-pressed-background); --button-medium-pressed-border-color: var(--button-error-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-error-medium-pressed-foreground); --button-medium-resting-background: var(--button-error-medium-resting-background); --button-medium-resting-border-color: var(--button-error-medium-resting-border-color); --button-medium-resting-foreground: var(--button-error-medium-resting-foreground); --button-high-focused-border-width: var(--button-error-high-focused-border-width); --button-high-hover-border-width: var(--button-error-high-hover-border-width); --button-high-loading-border-width: var(--button-error-high-loading-border-width); --button-high-pressed-border-width: var(--button-error-high-pressed-border-width); --button-high-resting-border-width: var(--button-error-high-resting-border-width); --button-low-focused-border-width: var(--button-error-low-focused-border-width); --button-low-hover-border-width: var(--button-error-low-hover-border-width); --button-low-loading-border-width: var(--button-error-low-loading-border-width); --button-low-pressed-border-width: var(--button-error-low-pressed-border-width); --button-low-resting-border-width: var(--button-error-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-error-medium-low-hover-border-width); --button-medium-low-hover-border-width: var(--button-error-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-error-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-error-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-error-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-error-medium-focused-border-width); --button-medium-hover-border-width: var(--button-error-medium-hover-border-width); --button-medium-loading-border-width: var(--button-error-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-error-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-error-medium-resting-border-width); } /* Mode: buttonAppearance-Neutral */ [data-mode*="buttonAppearance-Neutral"] { --button-high-focused-background: var(--button-neutral-high-focused-background); --button-high-focused-border-color: var(--button-neutral-high-focused-border-color); --button-high-focused-foreground: var(--button-neutral-high-focused-foreground); --button-high-hover-background: var(--button-neutral-high-hover-background); --button-high-hover-border-color: var(--button-neutral-high-hover-border-color); --button-high-hover-foreground: var(--button-neutral-high-hover-foreground); --button-high-loading-background: var(--button-neutral-high-loading-background); --button-high-loading-border-color: var(--button-neutral-high-loading-border-color); --button-high-loading-foreground: var(--button-neutral-high-loading-foreground); --button-high-pressed-background: var(--button-neutral-high-pressed-background); --button-high-pressed-border-color: var(--button-neutral-high-pressed-border-color); --button-high-pressed-foreground: var(--button-neutral-high-pressed-foreground); --button-high-resting-background: var(--button-neutral-high-resting-background); --button-high-resting-border-color: var(--button-neutral-high-resting-border-color); --button-high-resting-foreground: var(--button-neutral-high-resting-foreground); --button-low-focused-background: var(--button-neutral-low-focused-background); --button-low-focused-border-color: var(--button-neutral-low-focused-border-color); --button-low-focused-foreground: var(--button-neutral-low-focused-foreground); --button-low-hover-background: var(--button-neutral-low-hover-background); --button-low-hover-border-color: var(--button-neutral-low-hover-border-color); --button-low-hover-foreground: var(--button-neutral-low-hover-foreground); --button-low-loading-background: var(--button-neutral-low-loading-background); --button-low-loading-border-color: var(--button-neutral-low-loading-border-color); --button-low-loading-foreground: var(--button-neutral-low-loading-foreground); --button-low-pressed-background: var(--button-neutral-low-pressed-background); --button-low-pressed-border-color: var(--button-neutral-low-pressed-border-color); --button-low-pressed-foreground: var(--button-neutral-low-pressed-foreground); --button-low-resting-background: var(--button-neutral-low-resting-background); --button-low-resting-border-color: var(--button-neutral-low-resting-border-color); --button-low-resting-foreground: var(--button-neutral-low-resting-foreground); --button-medium-low-focused-background: var(--button-neutral-medium-low-focused-background); --button-medium-low-focused-border-color: var(--button-neutral-medium-low-focused-border-color); --button-medium-low-focused-foreground: var(--button-neutral-medium-low-focused-foreground); --button-medium-low-hover-background: var(--button-neutral-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-neutral-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-neutral-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-neutral-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-neutral-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-neutral-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-neutral-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-neutral-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-neutral-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-neutral-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-neutral-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-neutral-medium-low-resting-foreground); --button-medium-focused-background: var(--button-neutral-medium-focused-background); --button-medium-focused-border-color: var(--button-neutral-medium-focused-border-color); --button-medium-focused-foreground: var(--button-neutral-medium-focused-foreground); --button-medium-hover-background: var(--button-neutral-medium-hover-background); --button-medium-hover-border-color: var(--button-neutral-medium-hover-border-color); --button-medium-hover-foreground: var(--button-neutral-medium-hover-foreground); --button-medium-loading-background: var(--button-neutral-medium-loading-background); --button-medium-loading-border-color: var(--button-neutral-medium-loading-border-color); --button-medium-loading-foreground: var(--button-neutral-medium-loading-foreground); --button-medium-pressed-background: var(--button-neutral-medium-pressed-background); --button-medium-pressed-border-color: var(--button-neutral-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-neutral-medium-pressed-foreground); --button-medium-resting-background: var(--button-neutral-medium-resting-background); --button-medium-resting-border-color: var(--button-neutral-medium-resting-border-color); --button-medium-resting-foreground: var(--button-neutral-medium-resting-foreground); --button-high-focused-border-width: var(--button-neutral-high-focused-border-width); --button-high-hover-border-width: var(--button-neutral-high-hover-border-width); --button-high-loading-border-width: var(--button-neutral-high-loading-border-width); --button-high-pressed-border-width: var(--button-neutral-high-pressed-border-width); --button-high-resting-border-width: var(--button-neutral-high-resting-border-width); --button-low-focused-border-width: var(--button-neutral-low-focused-border-width); --button-low-hover-border-width: var(--button-neutral-low-hover-border-width); --button-low-loading-border-width: var(--button-neutral-low-loading-border-width); --button-low-pressed-border-width: var(--button-neutral-low-pressed-border-width); --button-low-resting-border-width: var(--button-neutral-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-neutral-medium-low-focused-border-width); --button-medium-low-hover-border-width: var(--button-neutral-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-neutral-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-neutral-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-neutral-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-neutral-medium-focused-border-width); --button-medium-hover-border-width: var(--button-neutral-medium-hover-border-width); --button-medium-loading-border-width: var(--button-neutral-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-neutral-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-neutral-medium-resting-border-width); } /* Mode: buttonAppearance-Primary */ [data-mode*="buttonAppearance-Primary"] { --button-high-focused-background: var(--button-primary-high-focused-background); --button-high-focused-border-color: var(--button-primary-high-focused-border-color); --button-high-focused-foreground: var(--button-primary-high-focused-foreground); --button-high-hover-background: var(--button-primary-high-hover-background); --button-high-hover-border-color: var(--button-primary-high-hover-border-color); --button-high-hover-foreground: var(--button-primary-high-hover-foreground); --button-high-loading-background: var(--button-primary-high-loading-background); --button-high-loading-border-color: var(--button-primary-high-loading-border-color); --button-high-loading-foreground: var(--button-primary-high-loading-foreground); --button-high-pressed-background: var(--button-primary-high-pressed-background); --button-high-pressed-border-color: var(--button-primary-high-pressed-border-color); --button-high-pressed-foreground: var(--button-primary-high-pressed-foreground); --button-high-resting-background: var(--button-primary-high-resting-background); --button-high-resting-border-color: var(--button-primary-high-resting-border-color); --button-high-resting-foreground: var(--button-primary-high-resting-foreground); --button-low-focused-background: var(--button-primary-low-focused-background); --button-low-focused-border-color: var(--button-primary-low-focused-border-color); --button-low-focused-foreground: var(--button-primary-low-focused-foreground); --button-low-hover-background: var(--button-primary-low-hover-background); --button-low-hover-border-color: var(--button-primary-low-hover-border-color); --button-low-hover-foreground: var(--button-primary-low-hover-foreground); --button-low-loading-background: var(--button-primary-low-loading-background); --button-low-loading-border-color: var(--button-primary-low-loading-border-color); --button-low-loading-foreground: var(--button-primary-low-loading-foreground); --button-low-pressed-background: var(--button-primary-low-pressed-background); --button-low-pressed-border-color: var(--button-primary-low-pressed-border-color); --button-low-pressed-foreground: var(--button-primary-low-pressed-foreground); --button-low-resting-background: var(--button-primary-low-resting-background); --button-low-resting-border-color: var(--button-primary-low-resting-border-color); --button-low-resting-foreground: var(--button-primary-low-resting-foreground); --button-medium-low-focused-background: var(--button-primary-medium-low-focused-background); --button-medium-low-focused-border-color: var(--button-primary-medium-low-focused-border-color); --button-medium-low-focused-foreground: var(--button-primary-medium-low-focused-foreground); --button-medium-low-hover-background: var(--button-primary-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-primary-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-primary-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-primary-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-primary-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-primary-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-primary-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-primary-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-primary-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-primary-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-primary-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-primary-medium-low-resting-foreground); --button-medium-focused-background: var(--button-primary-medium-focused-background); --button-medium-focused-border-color: var(--button-primary-medium-focused-border-color); --button-medium-focused-foreground: var(--button-primary-medium-focused-foreground); --button-medium-hover-background: var(--button-primary-medium-hover-background); --button-medium-hover-border-color: var(--button-primary-medium-hover-border-color); --button-medium-hover-foreground: var(--button-primary-medium-hover-foreground); --button-medium-loading-background: var(--button-primary-medium-loading-background); --button-medium-loading-border-color: var(--button-primary-medium-loading-border-color); --button-medium-loading-foreground: var(--button-primary-medium-loading-foreground); --button-medium-pressed-background: var(--button-primary-medium-pressed-background); --button-medium-pressed-border-color: var(--button-primary-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-primary-medium-pressed-foreground); --button-medium-resting-background: var(--button-primary-medium-resting-background); --button-medium-resting-border-color: var(--button-primary-medium-resting-border-color); --button-medium-resting-foreground: var(--button-primary-medium-resting-foreground); --button-high-focused-border-width: var(--button-primary-high-focused-border-width); --button-high-hover-border-width: var(--button-primary-high-hover-border-width); --button-high-loading-border-width: var(--button-primary-high-loading-border-width); --button-high-pressed-border-width: var(--button-primary-high-pressed-border-width); --button-high-resting-border-width: var(--button-primary-high-resting-border-width); --button-low-focused-border-width: var(--button-primary-low-focused-border-width); --button-low-hover-border-width: var(--button-primary-low-hover-border-width); --button-low-loading-border-width: var(--button-primary-low-loading-border-width); --button-low-pressed-border-width: var(--button-primary-low-pressed-border-width); --button-low-resting-border-width: var(--button-primary-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-primary-medium-low-focused-border-width); --button-medium-low-hover-border-width: var(--button-primary-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-primary-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-primary-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-primary-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-primary-medium-focused-border-width); --button-medium-hover-border-width: var(--button-primary-medium-hover-border-width); --button-medium-loading-border-width: var(--button-primary-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-primary-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-primary-medium-resting-border-width); } /* Mode: buttonAppearance-Secondary */ [data-mode*="buttonAppearance-Secondary"] { --button-high-focused-background: var(--button-secondary-high-focused-background); --button-high-focused-border-color: var(--button-secondary-high-focused-border-color); --button-high-focused-foreground: var(--button-secondary-high-focused-foreground); --button-high-hover-background: var(--button-secondary-high-hover-background); --button-high-hover-border-color: var(--button-secondary-high-hover-border-color); --button-high-hover-foreground: var(--button-secondary-high-hover-foreground); --button-high-loading-background: var(--button-secondary-high-loading-background); --button-high-loading-border-color: var(--button-secondary-high-loading-border-color); --button-high-loading-foreground: var(--button-secondary-high-loading-foreground); --button-high-pressed-background: var(--button-secondary-high-pressed-background); --button-high-pressed-border-color: var(--button-secondary-high-pressed-border-color); --button-high-pressed-foreground: var(--button-secondary-high-pressed-foreground); --button-high-resting-background: var(--button-secondary-high-resting-background); --button-high-resting-border-color: var(--button-secondary-high-resting-border-color); --button-high-resting-foreground: var(--button-secondary-high-resting-foreground); --button-low-focused-background: var(--button-secondary-low-focused-background); --button-low-focused-border-color: var(--button-secondary-low-focused-border-color); --button-low-focused-foreground: var(--button-secondary-low-focused-foreground); --button-low-hover-background: var(--button-secondary-low-hover-background); --button-low-hover-border-color: var(--button-secondary-low-hover-border-color); --button-low-hover-foreground: var(--button-secondary-low-hover-foreground); --button-low-loading-background: var(--button-secondary-low-loading-background); --button-low-loading-border-color: var(--button-secondary-low-loading-border-color); --button-low-loading-foreground: var(--button-secondary-low-loading-foreground); --button-low-pressed-background: var(--button-secondary-low-pressed-background); --button-low-pressed-border-color: var(--button-secondary-low-pressed-border-color); --button-low-pressed-foreground: var(--button-secondary-low-pressed-foreground); --button-low-resting-background: var(--button-secondary-low-resting-background); --button-low-resting-border-color: var(--button-secondary-low-resting-border-color); --button-low-resting-foreground: var(--button-secondary-low-resting-foreground); --button-medium-low-focused-background: var(--button-secondary-medium-low-focused-background); --button-medium-low-focused-border-color: var(--button-secondary-medium-low-focused-border-color); --button-medium-low-focused-foreground: var(--button-secondary-medium-low-focused-foreground); --button-medium-low-hover-background: var(--button-secondary-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-secondary-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-secondary-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-secondary-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-secondary-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-secondary-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-secondary-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-secondary-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-secondary-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-secondary-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-secondary-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-secondary-medium-low-resting-foreground); --button-medium-focused-background: var(--button-secondary-medium-focused-background); --button-medium-focused-border-color: var(--button-secondary-medium-focused-border-color); --button-medium-focused-foreground: var(--button-secondary-medium-focused-foreground); --button-medium-hover-background: var(--button-secondary-medium-hover-background); --button-medium-hover-border-color: var(--button-secondary-medium-hover-border-color); --button-medium-hover-foreground: var(--button-secondary-medium-hover-foreground); --button-medium-loading-background: var(--button-secondary-medium-loading-background); --button-medium-loading-border-color: var(--button-secondary-medium-loading-border-color); --button-medium-loading-foreground: var(--button-secondary-medium-loading-foreground); --button-medium-pressed-background: var(--button-secondary-medium-pressed-background); --button-medium-pressed-border-color: var(--button-secondary-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-secondary-medium-pressed-foreground); --button-medium-resting-background: var(--button-secondary-medium-resting-background); --button-medium-resting-border-color: var(--button-secondary-medium-resting-border-color); --button-medium-resting-foreground: var(--button-secondary-medium-resting-foreground); --button-high-focused-border-width: var(--button-secondary-high-focused-border-width); --button-high-hover-border-width: var(--button-secondary-high-hover-border-width); --button-high-loading-border-width: var(--button-secondary-high-loading-border-width); --button-high-pressed-border-width: var(--button-secondary-high-pressed-border-width); --button-high-resting-border-width: var(--button-secondary-high-resting-border-width); --button-low-focused-border-width: var(--button-secondary-low-focused-border-width); --button-low-hover-border-width: var(--button-secondary-low-hover-border-width); --button-low-loading-border-width: var(--button-secondary-low-loading-border-width); --button-low-pressed-border-width: var(--button-secondary-low-pressed-border-width); --button-low-resting-border-width: var(--button-secondary-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-secondary-medium-low-focused-border-width); --button-medium-low-hover-border-width: var(--button-secondary-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-secondary-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-secondary-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-secondary-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-secondary-medium-focused-border-width); --button-medium-hover-border-width: var(--button-secondary-medium-hover-border-width); --button-medium-loading-border-width: var(--button-secondary-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-secondary-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-secondary-medium-resting-border-width); } /* Mode: buttonAppearance-Success */ [data-mode*="buttonAppearance-Success"] { --button-high-focused-background: var(--button-success-high-focused-background); --button-high-focused-border-color: var(--button-success-high-focused-border-color); --button-high-focused-foreground: var(--button-success-high-focused-foreground); --button-high-hover-background: var(--button-success-high-hover-background); --button-high-hover-border-color: var(--button-success-high-hover-border-color); --button-high-hover-foreground: var(--button-success-high-hover-foreground); --button-high-loading-background: var(--button-success-high-loading-background); --button-high-loading-border-color: var(--button-success-high-loading-border-color); --button-high-loading-foreground: var(--button-success-high-loading-foreground); --button-high-pressed-background: var(--button-success-high-pressed-background); --button-high-pressed-border-color: var(--button-success-high-pressed-border-color); --button-high-pressed-foreground: var(--button-success-high-pressed-foreground); --button-high-resting-background: var(--button-success-high-resting-background); --button-high-resting-border-color: var(--button-success-high-resting-border-color); --button-high-resting-foreground: var(--button-success-high-resting-foreground); --button-low-focused-background: var(--button-success-low-focused-background); --button-low-focused-border-color: var(--button-success-low-focused-border-color); --button-low-focused-foreground: var(--button-success-low-focused-foreground); --button-low-hover-background: var(--button-success-low-hover-background); --button-low-hover-border-color: var(--button-success-low-hover-border-color); --button-low-hover-foreground: var(--button-success-low-hover-foreground); --button-low-loading-background: var(--button-success-low-loading-background); --button-low-loading-border-color: var(--button-success-low-loading-border-color); --button-low-loading-foreground: var(--button-success-low-loading-foreground); --button-low-pressed-background: var(--button-success-low-pressed-background); --button-low-pressed-border-color: var(--button-success-low-pressed-border-color); --button-low-pressed-foreground: var(--button-success-low-pressed-foreground); --button-low-resting-background: var(--button-success-low-resting-background); --button-low-resting-border-color: var(--button-success-low-resting-border-color); --button-low-resting-foreground: var(--button-success-low-resting-foreground); --button-medium-low-focused-background: var(--button-success-medium-low-focused-background); --button-medium-low-focused-border-color: var(--button-success-medium-low-focused-border-color); --button-medium-low-focused-foreground: var(--button-success-medium-low-focused-foreground); --button-medium-low-hover-background: var(--button-success-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-success-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-success-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-success-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-success-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-success-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-success-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-success-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-success-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-success-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-success-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-success-medium-low-resting-foreground); --button-medium-focused-background: var(--button-success-medium-focused-background); --button-medium-focused-border-color: var(--button-success-medium-focused-border-color); --button-medium-focused-foreground: var(--button-success-medium-focused-foreground); --button-medium-hover-background: var(--button-success-medium-hover-background); --button-medium-hover-border-color: var(--button-success-medium-hover-border-color); --button-medium-hover-foreground: var(--button-success-medium-hover-foreground); --button-medium-loading-background: var(--button-success-medium-loading-background); --button-medium-loading-border-color: var(--button-success-medium-loading-border-color); --button-medium-loading-foreground: var(--button-success-medium-loading-foreground); --button-medium-pressed-background: var(--button-success-medium-pressed-background); --button-medium-pressed-border-color: var(--button-success-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-success-medium-pressed-foreground); --button-medium-resting-background: var(--button-success-medium-resting-background); --button-medium-resting-border-color: var(--button-success-medium-resting-border-color); --button-medium-resting-foreground: var(--button-success-medium-resting-foreground); --button-high-focused-border-width: var(--button-success-high-focused-border-width); --button-high-hover-border-width: var(--button-success-high-hover-border-width); --button-high-loading-border-width: var(--button-success-high-loading-border-width); --button-high-pressed-border-width: var(--button-success-high-pressed-border-width); --button-high-resting-border-width: var(--button-success-high-resting-border-width); --button-low-focused-border-width: var(--button-success-low-focused-border-width); --button-low-hover-border-width: var(--button-success-low-hover-border-width); --button-low-loading-border-width: var(--button-success-low-loading-border-width); --button-low-pressed-border-width: var(--button-success-low-pressed-border-width); --button-low-resting-border-width: var(--button-success-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-success-medium-low-focused-border-width); --button-medium-low-hover-border-width: var(--button-success-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-success-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-success-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-success-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-success-medium-focused-border-width); --button-medium-hover-border-width: var(--button-success-medium-hover-border-width); --button-medium-loading-border-width: var(--button-success-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-success-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-success-medium-resting-border-width); } /* Mode: buttonAppearance-Warning */ [data-mode*="buttonAppearance-Warning"] { --button-high-focused-background: var(--button-warning-high-focused-background); --button-high-focused-border-color: var(--button-warning-high-focused-border-color); --button-high-focused-foreground: var(--button-warning-high-focused-foreground); --button-high-hover-background: var(--button-warning-high-hover-background); --button-high-hover-border-color: var(--button-warning-high-hover-border-color); --button-high-hover-foreground: var(--button-warning-high-hover-foreground); --button-high-loading-background: var(--button-warning-high-loading-background); --button-high-loading-border-color: var(--button-warning-high-loading-border-color); --button-high-loading-foreground: var(--button-warning-high-loading-foreground); --button-high-pressed-background: var(--button-warning-high-pressed-background); --button-high-pressed-border-color: var(--button-warning-high-pressed-border-color); --button-high-pressed-foreground: var(--button-warning-high-pressed-foreground); --button-high-resting-background: var(--button-warning-high-resting-background); --button-high-resting-border-color: var(--button-warning-high-resting-border-color); --button-high-resting-foreground: var(--button-warning-high-resting-foreground); --button-low-focused-background: var(--button-warning-low-focused-background); --button-low-focused-border-color: var(--button-warning-low-focused-border-color); --button-low-focused-foreground: var(--button-warning-low-focused-foreground); --button-low-hover-background: var(--button-warning-low-hover-background); --button-low-hover-border-color: var(--button-warning-low-hover-border-color); --button-low-hover-foreground: var(--button-warning-low-hover-foreground); --button-low-loading-background: var(--button-warning-low-loading-background); --button-low-loading-border-color: var(--button-warning-low-loading-border-color); --button-low-loading-foreground: var(--button-warning-low-loading-foreground); --button-low-pressed-background: var(--button-warning-low-pressed-background); --button-low-pressed-border-color: var(--button-warning-low-pressed-border-color); --button-low-pressed-foreground: var(--button-warning-low-pressed-foreground); --button-low-resting-background: var(--button-warning-low-resting-background); --button-low-resting-border-color: var(--button-warning-low-resting-border-color); --button-low-resting-foreground: var(--button-warning-low-resting-foreground); --button-medium-low-focused-background: var(--button-warning-medium-low-focused-background); --button-medium-low-focused-border-color: var(--button-warning-medium-low-focused-border-color); --button-medium-low-focused-foreground: var(--button-warning-medium-low-focused-foreground); --button-medium-low-hover-background: var(--button-warning-medium-low-hover-background); --button-medium-low-hover-border-color: var(--button-warning-medium-low-hover-border-color); --button-medium-low-hover-foreground: var(--button-warning-medium-low-hover-foreground); --button-medium-low-loading-background: var(--button-warning-medium-low-loading-background); --button-medium-low-loading-border-color: var(--button-warning-medium-low-loading-border-color); --button-medium-low-loading-foreground: var(--button-warning-medium-low-loading-foreground); --button-medium-low-pressed-background: var(--button-warning-medium-low-pressed-background); --button-medium-low-pressed-border-color: var(--button-warning-medium-low-pressed-border-color); --button-medium-low-pressed-foreground: var(--button-warning-medium-low-pressed-foreground); --button-medium-low-resting-background: var(--button-warning-medium-low-resting-background); --button-medium-low-resting-border-color: var(--button-warning-medium-low-resting-border-color); --button-medium-low-resting-foreground: var(--button-warning-medium-low-resting-foreground); --button-medium-focused-background: var(--button-warning-medium-focused-background); --button-medium-focused-border-color: var(--button-warning-medium-focused-border-color); --button-medium-focused-foreground: var(--button-warning-medium-focused-foreground); --button-medium-hover-background: var(--button-warning-medium-hover-background); --button-medium-hover-border-color: var(--button-warning-medium-hover-border-color); --button-medium-hover-foreground: var(--button-warning-medium-hover-foreground); --button-medium-loading-background: var(--button-warning-medium-loading-background); --button-medium-loading-border-color: var(--button-warning-medium-loading-border-color); --button-medium-loading-foreground: var(--button-warning-medium-loading-foreground); --button-medium-pressed-background: var(--button-warning-medium-pressed-background); --button-medium-pressed-border-color: var(--button-warning-medium-pressed-border-color); --button-medium-pressed-foreground: var(--button-warning-medium-pressed-foreground); --button-medium-resting-background: var(--button-warning-medium-resting-background); --button-medium-resting-border-color: var(--button-warning-medium-resting-border-color); --button-medium-resting-foreground: var(--button-warning-medium-resting-foreground); --button-high-focused-border-width: var(--button-warning-high-focused-border-width); --button-high-hover-border-width: var(--button-warning-high-hover-border-width); --button-high-loading-border-width: var(--button-warning-high-loading-border-width); --button-high-pressed-border-width: var(--button-warning-high-pressed-border-width); --button-high-resting-border-width: var(--button-warning-high-resting-border-width); --button-low-focused-border-width: var(--button-warning-low-focused-border-width); --button-low-hover-border-width: var(--button-warning-low-hover-border-width); --button-low-loading-border-width: var(--button-warning-low-loading-border-width); --button-low-pressed-border-width: var(--button-warning-low-pressed-border-width); --button-low-resting-border-width: var(--button-warning-low-resting-border-width); --button-medium-low-focused-border-width: var(--button-warning-medium-low-focused-border-width); --button-medium-low-hover-border-width: var(--button-warning-medium-low-hover-border-width); --button-medium-low-loading-border-width: var(--button-warning-medium-low-loading-border-width); --button-medium-low-pressed-border-width: var(--button-warning-medium-low-pressed-border-width); --button-medium-low-resting-border-width: var(--button-warning-medium-low-resting-border-width); --button-medium-focused-border-width: var(--button-warning-medium-focused-border-width); --button-medium-hover-border-width: var(--button-warning-medium-hover-border-width); --button-medium-loading-border-width: var(--button-warning-medium-loading-border-width); --button-medium-pressed-border-width: var(--button-warning-medium-pressed-border-width); --button-medium-resting-border-width: var(--button-warning-medium-resting-border-width); } /* Mode: buttonEmphasis-High */ [data-mode*="buttonEmphasis-High"] { --button-focused-background: var(--button-high-focused-background); --button-focused-border-color: var(--button-high-focused-border-color); --button-focused-foreground: var(--button-high-focused-foreground); --button-hover-background: var(--button-high-hover-background); --button-hover-border-color: var(--button-high-hover-border-color); --button-hover-foreground: var(--button-high-hover-foreground); --button-loading-background: var(--button-high-loading-background); --button-loading-border-color: var(--button-high-loading-border-color); --button-loading-foreground: var(--button-high-loading-foreground); --button-pressed-background: var(--button-high-pressed-background); --button-pressed-border-color: var(--button-high-pressed-border-color); --button-pressed-foreground: var(--button-high-pressed-foreground); --button-resting-background: var(--button-high-resting-background); --button-resting-border-color: var(--button-high-resting-border-color); --button-resting-foreground: var(--button-high-resting-foreground); --button-focused-border-width: var(--button-high-focused-border-width); --button-hover-border-width: var(--button-high-hover-border-width); --button-loading-border-width: var(--button-high-loading-border-width); --button-pressed-border-width: var(--button-high-pressed-border-width); --button-resting-border-width: var(--button-high-resting-border-width); } /* Mode: buttonEmphasis-Low */ [data-mode*="buttonEmphasis-Low"] { --button-focused-background: var(--button-low-focused-background); --button-focused-border-color: var(--button-low-focused-border-color); --button-focused-foreground: var(--button-low-focused-foreground); --button-hover-background: var(--button-low-hover-background); --button-hover-border-color: var(--button-low-hover-border-color); --button-hover-foreground: var(--button-low-hover-foreground); --button-loading-background: var(--button-low-loading-background); --button-loading-border-color: var(--button-low-loading-border-color); --button-loading-foreground: var(--button-low-loading-foreground); --button-pressed-background: var(--button-low-pressed-background); --button-pressed-border-color: var(--button-low-pressed-border-color); --button-pressed-foreground: var(--button-low-pressed-foreground); --button-resting-background: var(--button-low-resting-background); --button-resting-border-color: var(--button-low-resting-border-color); --button-resting-foreground: var(--button-low-resting-foreground); --button-focused-border-width: var(--button-low-focused-border-width); --button-hover-border-width: var(--button-low-hover-border-width); --button-loading-border-width: var(--button-low-loading-border-width); --button-pressed-border-width: var(--button-low-pressed-border-width); --button-resting-border-width: var(--button-low-resting-border-width); } /* Mode: buttonEmphasis-Medium */ [data-mode*="buttonEmphasis-Medium"] { --button-focused-background: var(--button-medium-focused-background); --button-focused-border-color: var(--button-medium-focused-border-color); --button-focused-foreground: var(--button-medium-focused-foreground); --button-hover-background: var(--button-medium-hover-background); --button-hover-border-color: var(--button-medium-hover-border-color); --button-hover-foreground: var(--button-medium-hover-foreground); --button-loading-background: var(--button-medium-loading-background); --button-loading-border-color: var(--button-medium-loading-border-color); --button-loading-foreground: var(--button-medium-loading-foreground); --button-pressed-background: var(--button-medium-pressed-background); --button-pressed-border-color: var(--button-medium-pressed-border-color); --button-pressed-foreground: var(--button-medium-pressed-foreground); --button-resting-background: var(--button-medium-resting-background); --button-resting-border-color: var(--button-medium-resting-border-color); --button-resting-foreground: var(--button-medium-resting-foreground); --button-focused-border-width: var(--button-medium-focused-border-width); --button-hover-border-width: var(--button-medium-hover-border-width); --button-loading-border-width: var(--button-medium-loading-border-width); --button-pressed-border-width: var(--button-medium-pressed-border-width); --button-resting-border-width: var(--button-medium-resting-border-width); } /* Mode: buttonEmphasis-MediumLow */ [data-mode*="buttonEmphasis-MediumLow"] { --button-focused-background: var(--button-medium-low-focused-background); --button-focused-border-color: var(--button-medium-low-focused-border-color); --button-focused-foreground: var(--button-medium-low-focused-foreground); --button-hover-background: var(--button-medium-low-hover-background); --button-hover-border-color: var(--button-medium-low-hover-border-color); --button-hover-foreground: var(--button-medium-low-hover-foreground); --button-loading-background: var(--button-medium-low-loading-background); --button-loading-border-color: var(--button-medium-low-loading-border-color); --button-loading-foreground: var(--button-medium-low-loading-foreground); --button-pressed-background: var(--button-medium-low-pressed-background); --button-pressed-border-color: var(--button-medium-low-pressed-border-color); --button-pressed-foreground: var(--button-medium-low-pressed-foreground); --button-resting-background: var(--button-medium-low-resting-background); --button-resting-border-color: var(--button-medium-low-resting-border-color); --button-resting-foreground: var(--button-medium-low-resting-foreground); --button-focused-border-width: var(--button-medium-low-focused-border-width); --button-hover-border-width: var(--button-medium-low-hover-border-width); --button-loading-border-width: var(--button-medium-low-loading-border-width); --button-pressed-border-width: var(--button-medium-low-pressed-border-width); --button-resting-border-width: var(--button-medium-low-resting-border-width); } /* Mode: buttonSize-Large */ [data-mode*="buttonSize-Large"] { --button-corner-radius: var(--button-large-corner-radius); --button-font-line-height: var(--button-large-font-line-height); --button-font-size: var(--button-large-font-size); --button-font-weight: var(--button-large-font-weight); --button-icon: var(--button-large-icon); --button-paddingbottom: var(--button-large-paddingbottom); --button-paddingleft: var(--button-large-paddingleft); --button-paddingright: var(--button-large-paddingright); --button-paddingtop: var(--button-large-paddingtop); --button-spacing: var(--button-large-spacing); } /* Mode: buttonSize-Medium */ [data-mode*="buttonSize-Medium"] { --button-corner-radius: var(--button-medium-corner-radius); --button-font-line-height: var(--button-medium-font-line-height); --button-font-size: var(--button-medium-font-size); --button-font-weight: var(--button-medium-font-weight); --button-icon: var(--button-medium-icon); --button-paddingbottom: var(--button-medium-paddingbottom); --button-paddingleft: var(--button-medium-paddingleft); --button-paddingright: var(--button-medium-paddingright); --button-paddingtop: var(--button-medium-paddingtop); --button-spacing: var(--button-medium-spacing); } /* Mode: buttonSize-Small */ [data-mode*="buttonSize-Small"] { --button-corner-radius: var(--button-small-corner-radius); --button-font-line-height: var(--button-small-font-line-height); --button-font-size: var(--button-small-font-size); --button-font-weight: var(--button-small-font-weight); --button-icon: var(--button-small-icon); --button-paddingbottom: var(--button-small-paddingbottom); --button-paddingleft: var(--button-small-paddingleft); --button-paddingright: var(--button-small-paddingright); --button-paddingtop: var(--button-small-paddingtop); --button-spacing: var(--button-small-spacing); } /* Mode: cardAppearance-Important */ [data-mode*="cardAppearance-Important"] { --card-background: var(--card-important-background); --card-border-color: var(--card-important-border-color); --card-subtitle: var(--card-important-subtitle); --card-title: var(--card-important-title); --card-border-width: var(--card-important-border-width); } /* Mode: cardAppearance-Transparent */ [data-mode*="cardAppearance-Transparent"] { --card-background: var(--card-transparent-background); --card-border-color: var(--card-transparent-border-color); --card-subtitle: var(--card-transparent-subtitle); --card-title: var(--card-transparent-title); --card-border-width: var(--card-transparent-border-width); } /* Mode: cardAppearance-White */ [data-mode*="cardAppearance-White"] { --card-background: var(--card-white-background); --card-border-color: var(--card-white-border-color); --card-subtitle: var(--card-white-subtitle); --card-title: var(--card-white-title); --card-border-width: var(--card-white-border-width); } /* Mode: cardSize-Compact */ [data-mode*="cardSize-Compact"] { --card-border-radius: var(--corner-radius-xl); --card-padding: var(--spacing-0); --card-spacing: var(--spacing-m); } /* Mode: cardSize-Medium */ [data-mode*="cardSize-Medium"] { --card-border-radius: var(--corner-radius-xl); --card-padding: var(--spacing-xl); --card-spacing: var(--spacing-xl); } /* Mode: cardSize-Small */ [data-mode*="cardSize-Small"] { --card-border-radius: var(--corner-radius-xl); --card-padding: var(--spacing-l); --card-spacing: var(--spacing-l); } /* Mode: cardTitle-Large */ [data-mode*="cardTitle-Large"] { --subtitle-font-line-height: var(--typography-body-line-height-medium); --subtitle-font-size: var(--typography-body-size-medium); --subtitle-font-weight: var(--typography-body-weight-medium); --title-font-line-height: var(--typography-title-line-height-large); --title-font-size: var(--typography-title-size-large); --title-font-weight: var(--typography-title-weight-large); --subtitle-font-type: var(--typography-font-family-font-2); --title-font-type: var(--typography-font-family-font-1); } /* Mode: cardTitle-Medium */ [data-mode*="cardTitle-Medium"] { --subtitle-font-line-height: var(--typography-body-line-height-medium); --subtitle-font-size: var(--typography-body-size-medium); --subtitle-font-weight: var(--typography-body-weight-medium); --title-font-line-height: var(--typography-title-line-height-medium); --title-font-size: var(--typography-title-size-medium); --title-font-weight: var(--typography-title-weight-medium); --subtitle-font-type: var(--typography-font-family-font-2); --title-font-type: var(--typography-font-family-font-1); } /* Mode: chipAppearance-Active */ [data-mode*="chipAppearance-Active"] { --background: var(--chip-active-background); --border-color: var(--chip-active-border-color); --foreground: var(--chip-active-foreground); --border-width: var(--chip-active-border-width); } /* Mode: chipAppearance-Hover */ [data-mode*="chipAppearance-Hover"] { --background: var(--chip-hover-background); --border-color: var(--chip-hover-border-color); --foreground: var(--chip-hover-foreground); --border-width: var(--chip-hover-border-width); } /* Mode: chipAppearance-Resting */ [data-mode*="chipAppearance-Resting"] { --background: var(--chip-resting-background); --border-color: var(--chip-resting-border-color); --foreground: var(--chip-resting-foreground); --border-width: var(--chip-resting-border-width); } /* Mode: dialogAppearance-Default */ [data-mode*="dialogAppearance-Default"] { --border-width: ; --corner-radius: var(--corner-radius-xl); --padding: var(--spacing-xl); --spacing: var(--spacing-2xl); --background: var(--background-global-paper1); --border-color: var(--colors-primitives-grey-scale-transparent); } /* Mode: divider-Default */ [data-mode*="divider-Default"] { --border-color: var(--divider-background); --borderwidth: 1px; } /* Mode: dropdownAppearance-Disabled */ [data-mode*="dropdownAppearance-Disabled"] { --dropdown-empty-background: var(--background-disabled); --dropdown-empty-border: var(--border-disabled); --dropdown-empty-iconaction: var(--text-disabled); --dropdown-empty-label: var(--text-disabled); --dropdown-filled-background: var(--background-disabled); --dropdown-filled-border: var(--border-disabled); --dropdown-filled-iconaction: var(--text-disabled); --dropdown-filled-label: var(--text-disabled); --dropdown-empty-borderwidth: 1px; --dropdown-filled-borderwidth: 1px; } /* Mode: dropdownAppearance-Error */ [data-mode*="dropdownAppearance-Error"] { --dropdown-empty-background: var(--background-global-paper1); --dropdown-empty-border: var(--border-error); --dropdown-empty-iconaction: var(--text-main); --dropdown-empty-label: var(--text-secondary); --dropdown-filled-background: var(--background-global-paper1); --dropdown-filled-border: var(--border-error); --dropdown-filled-iconaction: var(--text-main); --dropdown-filled-label: var(--text-main); --dropdown-empty-borderwidth: 1px; --dropdown-filled-borderwidth: 1px; } /* Mode: dropdownAppearance-Focus */ [data-mode*="dropdownAppearance-Focus"] { --dropdown-empty-background: var(--background-global-paper1); --dropdown-empty-border: var(--border-active); --dropdown-empty-iconaction: var(--text-main); --dropdown-empty-label: var(--text-secondary); --dropdown-filled-background: var(--background-global-paper1); --dropdown-filled-border: var(--border-active); --dropdown-filled-iconaction: var(--text-main); --dropdown-filled-label: var(--text-main); --dropdown-empty-borderwidth: 2px; --dropdown-filled-borderwidth: 2px; } /* Mode: dropdownAppearance-ReadOnly */ [data-mode*="dropdownAppearance-ReadOnly"] { --dropdown-empty-background: var(--background-global-paper1); --dropdown-empty-border: var(--border-disabled); --dropdown-empty-iconaction: var(--text-disabled); --dropdown-empty-label: var(--text-main); --dropdown-filled-background: var(--background-global-paper1); --dropdown-filled-border: var(--border-disabled); --dropdown-filled-iconaction: var(--text-disabled); --dropdown-filled-label: var(--text-main); --dropdown-empty-borderwidth: 1px; --dropdown-filled-borderwidth: 1px; } /* Mode: dropdownAppearance-Resting */ [data-mode*="dropdownAppearance-Resting"] { --dropdown-empty-background: var(--background-global-paper1); --dropdown-empty-border: var(--border-default); --dropdown-empty-iconaction: var(--text-main); --dropdown-empty-label: var(--text-secondary); --dropdown-filled-background: var(--background-global-paper1); --dropdown-filled-border: var(--border-default); --dropdown-filled-iconaction: var(--text-main); --dropdown-filled-label: var(--text-main); --dropdown-empty-borderwidth: 1px; --dropdown-filled-borderwidth: 1px; } /* Mode: dropdownSize-Medium */ [data-mode*="dropdownSize-Medium"] { --dropdown-borderradius: var(--border-radius-m); --dropdown-paddinghorizontal: var(--spacing-l); --dropdown-paddingvertical: var(--spacing-l); --dropdown-spacing: var(--spacing-s); } /* Mode: elevation-0 */ [data-mode*="elevation-0"] { --blur: ; --spread: ; --x: ; --y: ; --color: #ffffff00; } /* Mode: elevation-2 */ [data-mode*="elevation-2"] { --x: ; --y: ; --y: 4px; --color: #0000001a; --color: #0000000d; } /* Mode: elevation-3 */ [data-mode*="elevation-3"] { --blur: 20px; --spread: ; --x: ; --y: ; --color: #0000001a; } /* Mode: iconbuttonSize-Large */ [data-mode*="iconbuttonSize-Large"] { --borderoff: ; --borderon: 1px; --corner-radius: var(--icon-button-large-corner-radius); --icon: var(--icon-button-large-icon); --min-height: 32px; --min-width: 32px; --padding: var(--icon-button-large-padding); } /* Mode: iconbuttonSize-Medium */ [data-mode*="iconbuttonSize-Medium"] { --borderoff: ; --borderon: 1px; --corner-radius: var(--icon-button-medium-corner-radius); --icon: var(--icon-button-medium-icon); --min-height: 32px; --min-width: 32px; --padding: var(--icon-button-medium-padding); } /* Mode: iconbuttonSize-Small */ [data-mode*="iconbuttonSize-Small"] { --borderoff: ; --borderon: 1px; --corner-radius: var(--icon-button-small-corner-radius); --icon: var(--icon-button-small-icon); --min-height: 32px; --min-width: 32px; --padding: var(--icon-button-small-padding); } /* Mode: iconlistAppearance-Accent */ [data-mode*="iconlistAppearance-Accent"] { --foreground-icon: var(--brand-secondary-brand); --foreground-text: var(--text-main); } /* Mode: iconlistAppearance-Default */ [data-mode*="iconlistAppearance-Default"] { --foreground-icon: var(--text-main); --foreground-text: var(--text-main); } /* Mode: iconlistAppearance-Secondary */ [data-mode*="iconlistAppearance-Secondary"] { --foreground-icon: var(--text-secondary); --foreground-text: var(--text-secondary); } /* Mode: labelAppearance-Default */ [data-mode*="labelAppearance-Default"] { --background: var(--label-default-background); --border-color: var(--label-default-border-color); --foreground: var(--label-default-foreground); --border-width: var(--label-default-border-width); } /* Mode: labelAppearance-Error */ [data-mode*="labelAppearance-Error"] { --background: var(--label-error-background); --border-color: var(--label-error-border-color); --foreground: var(--label-error-foreground); --border-width: var(--label-error-border-width); } /* Mode: labelAppearance-Success */ [data-mode*="labelAppearance-Success"] { --background: var(--label-success-background); --border-color: var(--label-success-border-color); --foreground: var(--label-success-foreground); --border-width: var(--label-success-border-width); } /* Mode: labelAppearance-Warning */ [data-mode*="labelAppearance-Warning"] { --background: var(--label-warning-background); --border-color: var(--label-warning-border-color); --foreground: var(--label-warning-foreground); --border-width: var(--label-warning-border-width); } /* Mode: modalAppearance-Default */ [data-mode*="modalAppearance-Default"] { --border-width: ; --corner-radius: var(--corner-radius-xl); --padding: var(--spacing-xl); --spacing: var(--spacing-2xl); --background: var(--background-global-paper1); --border-color: var(--colors-primitives-grey-scale-transparent); } /* Mode: snackbarAppearance-Error */ [data-mode*="snackbarAppearance-Error"] { --background-color: var(--brand-error-brand); --border-color: var(--colors-primitives-grey-scale-transparent); --font-color: var(--brand-error-onbrand); --border-radius: var(--spacing-l); --border-width: ; --font-line-height: var(--typography-body-line-height-medium); --font-size: var(--typography-body-size-medium); --font-weight: var(--typography-body-weight-medium); --font-type: var(--typography-font-family-font-2); } /* Mode: snackbarAppearance-Info */ [data-mode*="snackbarAppearance-Info"] { --background-color: var(--colors-primitives-grey-scale-black-60); --border-color: var(--colors-primitives-grey-scale-black-10); --font-color: var(--neutral-white); --border-radius: var(--spacing-l); --border-width: 1px; --font-line-height: var(--typography-body-line-height-medium); --font-size: var(--typography-body-size-medium); --font-weight: var(--typography-body-weight-medium); --font-type: var(--typography-font-family-font-2); } /* Mode: snackbarAppearance-Success */ [data-mode*="snackbarAppearance-Success"] { --background-color: var(--brand-success-brand); --border-color: var(--colors-primitives-grey-scale-transparent); --font-color: var(--brand-success-onbrand); --border-radius: var(--spacing-l); --border-width: ; --font-line-height: var(--typography-body-line-height-medium); --font-size: var(--typography-body-size-medium); --font-weight: var(--typography-body-weight-medium); --font-type: var(--typography-font-family-font-2); } /* Mode: snackbarAppearance-Warning */ [data-mode*="snackbarAppearance-Warning"] { --background-color: var(--brand-warning-brand); --border-color: var(--colors-primitives-grey-scale-transparent); --font-color: var(--brand-warning-onbrand); --border-radius: var(--spacing-l); --border-width: ; --font-line-height: var(--typography-body-line-height-medium); --font-size: var(--typography-body-size-medium); --font-weight: var(--typography-body-weight-medium); --font-type: var(--typography-font-family-font-2); } /* Mode: standlinkAppearance-Neutral */ [data-mode*="standlinkAppearance-Neutral"] { --color: var(--text-main); } /* Mode: standlinkAppearance-Primary */ [data-mode*="standlinkAppearance-Primary"] { --color: var(--brand-primary-brand); } /* Mode: standlinkAppearance-Secondary */ [data-mode*="standlinkAppearance-Secondary"] { --color: var(--brand-secondary-brand); } /* Mode: table-Default */ [data-mode*="table-Default"] { --content-background-color: var(--colors-primitives-grey-scale-transparent); --content-border-color: var(--border-light); --footer-background-color: var(--background-global-paper2); --heading-background-color: var(--background-global-paper2); --heading-text-color: var(--text-secondary); --content-border-width: 1px; --content-padding-horizontal: var(--spacing-m); --content-padding-vertical: var(--spacing-l); --content-spacing: var(--spacing-4xl); --footer-border-radius: var(--corner-radius-s); --footer-padding-horizontal: var(--spacing-m); --footer-padding-vertical: var(--spacing-l); --footer-spacing: var(--spacing-4xl); --heading-border-radius: var(--corner-radius-s); --heading-font-line-height: var(--typography-title-line-height-small); --heading-font-size: var(--typography-title-size-small); --heading-font-weight: var(--typography-title-weight-small); --heading-padding-horizontal: var(--spacing-m); --heading-padding-vertical: var(--spacing-l); --heading-spacing: var(--spacing-4xl); --heading-font-type: var(--typography-font-family-font-1); } /* Mode: texteditorEmphasis-Active */ [data-mode*="texteditorEmphasis-Active"] { --background: var(--text-editor-active-background); --foreground: var(--text-editor-active-foreground); } /* Mode: texteditorEmphasis-Disabled */ [data-mode*="texteditorEmphasis-Disabled"] { --background: var(--text-editor-disabled-background); --foreground: var(--text-editor-disabled-foreground); } /* Mode: textfieldAppearance-Disabled */ [data-mode*="textfieldAppearance-Disabled"] { --text-field-empty-background: var(--colors-primitives-grey-scale-black-5); --text-field-empty-border: var(--border-disabled); --text-field-empty-icon: var(--text-disabled); --text-field-empty-label: var(--text-disabled); --text-field-filled-background: var(--colors-primitives-grey-scale-black-5); --text-field-filled-border: var(--border-disabled); --text-field-filled-icon: var(--text-disabled); --text-field-filled-label: var(--text-disabled); --text-field-empty-borderwidth: 1px; --text-field-filled-borderwidth: 1px; --text-field-empty-supportingtext: "Default"; --text-field-filled-supportingtext: "Default"; } /* Mode: textfieldAppearance-Error */ [data-mode*="textfieldAppearance-Error"] { --text-field-empty-background: var(--background-global-paper1); --text-field-empty-border: var(--border-error); --text-field-empty-icon: var(--text-main); --text-field-empty-label: var(--text-secondary); --text-field-filled-background: var(--background-global-paper1); --text-field-filled-border: var(--border-error); --text-field-filled-icon: var(--text-main); --text-field-filled-label: var(--text-main); --text-field-empty-borderwidth: 1px; --text-field-filled-borderwidth: 1px; --text-field-empty-supportingtext: "Error"; --text-field-filled-supportingtext: "Error"; } /* Mode: textfieldAppearance-Focus */ [data-mode*="textfieldAppearance-Focus"] { --text-field-empty-background: var(--background-global-paper1); --text-field-empty-border: var(--border-active); --text-field-empty-icon: var(--text-main); --text-field-empty-label: var(--text-secondary); --text-field-filled-background: var(--background-global-paper1); --text-field-filled-border: var(--border-active); --text-field-filled-icon: var(--text-main); --text-field-filled-label: var(--text-main); --text-field-empty-borderwidth: 2px; --text-field-filled-borderwidth: 2px; --text-field-empty-supportingtext: "Default"; --text-field-filled-supportingtext: "Default"; } /* Mode: textfieldAppearance-ReadOnly */ [data-mode*="textfieldAppearance-ReadOnly"] { --text-field-empty-background: var(--background-global-default); --text-field-empty-border: var(--border-disabled); --text-field-empty-icon: var(--text-main); --text-field-empty-label: var(--text-main); --text-field-filled-background: var(--background-global-default); --text-field-filled-border: var(--border-disabled); --text-field-filled-icon: var(--text-main); --text-field-filled-label: var(--text-main); --text-field-empty-borderwidth: 1px; --text-field-filled-borderwidth: 1px; --text-field-empty-supportingtext: "Default"; --text-field-filled-supportingtext: "Default"; } /* Mode: textfieldAppearance-Resting */ [data-mode*="textfieldAppearance-Resting"] { --text-field-empty-background: var(--background-global-paper1); --text-field-empty-border: var(--border-default); --text-field-empty-icon: var(--text-main); --text-field-empty-label: var(--text-secondary); --text-field-filled-background: var(--background-global-paper1); --text-field-filled-border: var(--border-default); --text-field-filled-icon: var(--text-main); --text-field-filled-label: var(--text-main); --text-field-empty-borderwidth: 1px; --text-field-filled-borderwidth: 1px; --text-field-empty-supportingtext: "Default"; --text-field-filled-supportingtext: "Default"; } /* Mode: textfieldSize-Medium */ [data-mode*="textfieldSize-Medium"] { --text-field-borderradius: var(--corner-radius-m); --text-field-paddinghorizontal: var(--spacing-l); --text-field-paddingvertical: var(--spacing-l); --text-field-spacing: var(--spacing-s); } /* Mode: toggleAppearance-Default */ [data-mode*="toggleAppearance-Default"] { --toggle-off-background: var(--toggle-off-default-background); --toggle-off-foreground: var(--toggle-off-default-foreground); --toggle-on-background: var(--toggle-on-default-background); --toggle-on-foreground: var(--toggle-on-default-foreground); } /* Mode: toggleAppearance-Disabled */ [data-mode*="toggleAppearance-Disabled"] { --toggle-off-background: var(--toggle-off-disabled-background); --toggle-off-foreground: var(--toggle-off-disabled-foreground); --toggle-on-background: var(--toggle-on-disabled-background); --toggle-on-foreground: var(--toggle-on-disabled-foreground); } /* Mode: typoBody-Large */ [data-mode*="typoBody-Large"] { --line-height: var(--typography-body-line-height-large); --size: var(--typography-body-size-large); --weight: var(--typography-body-weight-large); } /* Mode: typoBody-Medium */ [data-mode*="typoBody-Medium"] { --line-height: var(--typography-body-line-height-medium); --size: var(--typography-body-size-medium); --weight: var(--typography-body-weight-medium); } /* Mode: typoBody-Small */ [data-mode*="typoBody-Small"] { --line-height: var(--typography-body-line-height-small); --size: var(--typography-body-size-small); --weight: var(--typography-body-weight-small); } /* Mode: typoButton-Large */ [data-mode*="typoButton-Large"] { --line-height: var(--typography-button-lineheight-large); --size: var(--typography-button-size-large); --weight: var(--typography-button-weight-large); } /* Mode: typoButton-Medium */ [data-mode*="typoButton-Medium"] { --line-height: var(--typography-button-lineheight-medium); --size: var(--typography-button-size-medium); --weight: var(--typography-button-weight-medium); } /* Mode: typoButton-Small */ [data-mode*="typoButton-Small"] { --line-height: var(--typography-button-lineheight-small); --size: var(--typography-button-size-small); --weight: var(--typography-button-weight-small); } /* Mode: typoHeading-Medium */ [data-mode*="typoHeading-Medium"] { --line-height: var(--typography-heading-line-height-medium); --size: var(--typography-heading-size-medium); --weight: var(--typography-heading-weight-medium); } /* Mode: typoLabel-Large */ [data-mode*="typoLabel-Large"] { --line-height: var(--typography-label-line-height-large); --size: var(--typography-label-size-large); --weight: var(--typography-label-weight-large); } /* Mode: typoLabel-Medium */ [data-mode*="typoLabel-Medium"] { --line-height: var(--typography-label-line-height-medium); --size: var(--typography-label-size-medium); --weight: var(--typography-label-weight-medium); } /* Mode: typoLabel-Small */ [data-mode*="typoLabel-Small"] { --line-height: var(--typography-label-line-height-small); --size: var(--typography-label-size-small); --weight: var(--typography-label-weight-small); } /* Mode: typoTitle-Large */ [data-mode*="typoTitle-Large"] { --line-height: var(--typography-title-line-height-large); --size: var(--typography-title-size-large); --weight: var(--typography-title-weight-large); } /* Mode: typoTitle-Medium */ [data-mode*="typoTitle-Medium"] { --line-height: var(--typography-title-line-height-medium); --size: var(--typography-title-size-medium); --weight: var(--typography-title-weight-medium); } /* Mode: typoTitle-Small */ [data-mode*="typoTitle-Small"] { --line-height: var(--typography-title-line-height-small); --size: var(--typography-title-size-small); --weight: var(--typography-title-weight-small); }