/* Generated by build/bundle.mjs — do not edit. Source: @ticketio/css-components/shadow.css */ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ *, *:after, *:before { --body: Roboto; --display: Obviously; --mono: Fira Mono; --display-weight: Wide Semibold; --theme-font-size-4xl: 28px; --theme-font-size-lg: 18px; --theme-font-size-md: 16px; --theme-font-size-xl: 20px; --theme-font-size-sm: 12px; --theme-font-size-2xl: 22px; --theme-font-size-7xl: 40px; --theme-font-size-3xl: 25px; --theme-font-size-5xl: 32px; --theme-font-size-base: 14px; --theme-font-size-6xl: 36px; --theme-font-size-xs: 10px; --theme-font-size-2xs: 8px; --theme-spacing-3xl: 56px; --theme-spacing-2xl: 48px; --theme-spacing-xl: 40px; --theme-spacing-xs: 8px; --theme-spacing-sm: 16px; --theme-spacing-2xs: 4px; --theme-spacing-md: 24px; --theme-spacing-3xs: 2px; --theme-spacing-lg: 32px; --theme-spacing-6xl: 80px; --theme-spacing-5xl: 72px; --theme-spacing-4xl: 64px; --theme-spacing-none: 0px; --gradient-gradient-default: linear-gradient(48deg, #372a7f 0%, #5e52a8 100%); --gradient-gradient-accent: linear-gradient(48deg, #12c19f 0%, #54e8c4 100%); --gradient-gradient-bicolor: linear-gradient(48deg, #5e52a8 0%, #54e8c4 100%); --gradient-critical-10: linear-gradient(90deg, #8c1617 0%, #d04841 100%); --color-violet-10: 25 1 99; --color-violet-20: 55 42 127; --color-violet-30: 70 58 142; --color-violet-40: 94 82 168; --color-violet-50: 119 107 195; --color-violet-60: 145 133 223; --color-violet-70: 171 160 252; --color-violet-80: 200 191 255; --color-violet-90: 229 222 255; --color-violet-95: 244 238 255; --color-violet-99: 250 247 250; --color-turqoise-10: 0 32 25; --color-turqoise-20: 0 56 44; --color-turqoise-30: 0 81 65; --color-turqoise-40: 0 107 87; --color-turqoise-50: 0 135 110; --color-turqoise-60: 0 164 134; --color-turqoise-70: 18 193 159; --color-turqoise-80: 84 232 196; --color-turqoise-90: 105 250 213; --color-turqoise-95: 185 255 232; --color-turqoise-99: 243 255 249; --color-green-10: 0 33 17; --color-green-20: 0 57 33; --color-green-30: 0 82 49; --color-green-40: 0 109 67; --color-green-50: 0 137 86; --color-green-60: 10 165 105; --color-green-70: 60 193 130; --color-green-80: 115 217 165; --color-green-90: 185 235 199; --color-green-95: 231 244 222; --color-green-99: 245 255 245; --color-blue-10: 0 22 77; --color-blue-20: 0 41 123; --color-blue-30: 34 65 148; --color-blue-40: 61 89 174; --color-blue-50: 88 115 200; --color-blue-60: 114 141 228; --color-blue-70: 142 167 255; --color-blue-80: 181 196 255; --color-blue-90: 220 225 255; --color-blue-95: 239 240 255; --color-blue-99: 254 251 255; --color-red-10: 65 0 3; --color-red-20: 105 0 7; --color-red-30: 140 22 23; --color-red-40: 174 47 43; --color-red-50: 208 72 65; --color-red-60: 242 97 88; --color-red-70: 255 137 127; --color-red-80: 255 180 172; --color-red-90: 255 218 214; --color-red-95: 255 237 234; --color-red-99: 255 251 255; --color-red-critical: 255 0 0; --color-orange-10: 43 23 0; --color-orange-20: 72 41 0; --color-orange-30: 103 61 0; --color-orange-40: 136 82 0; --color-orange-50: 170 104 0; --color-orange-60: 206 126 0; --color-orange-70: 241 150 16; --color-orange-80: 255 184 104; --color-orange-90: 255 184 104; --color-orange-95: 255 227 203; --color-orange-99: 255 245 236; --color-grey-10: 26 28 29; --color-grey-20: 47 49 50; --color-grey-30: 69 71 72; --color-grey-40: 93 95 96; --color-grey-50: 118 119 120; --color-grey-60: 143 145 146; --color-grey-70: 170 171 172; --color-grey-80: 198 198 199; --color-grey-90: 226 226 227; --color-grey-95: 240 241 242; --color-grey-99: 252 252 253; --color-black: 47 47 47; --color-white: 255 255 255; --color-lilac-10: 25 25 49; --color-lilac-20: 46 46 71; --color-lilac-30: 69 68 95; --color-lilac-40: 92 92 119; --color-lilac-50: 117 116 145; --color-lilac-60: 143 142 172; --color-lilac-70: 170 168 199; --color-lilac-80: 197 195 227; --color-lilac-90: 226 223 255; --color-lilac-95: 242 239 255; --color-lilac-99: 246 245 251; --color-transparent: 255 255 255 / 0; --size-7: 7px; --size-8: 8px; --size-10: 10px; --size-12: 12px; --size-15: 15px; --size-18: 18px; --size-20: 20px; --size-32: 32px; --size-40: 40px; --size-50: 50px; --size-60: 60px; --size-280: 280px; --size-form: 510px; --size-form-width: 510px; --theme-border-radius-1: 1px; --theme-border-radius-3: 3px; --theme-border-radius-base: 8px; --theme-border-radius-full: 99999px; --background-neutral-shadow: 26 28 29 / 0.08; --border-radius-lg: 0px; --shadow-input-shadow-color: 226 223 255 / 0.5; --shadow-input-shadow-type: innerShadow; --shadow-input-shadow-blur: 12px; --shadow-input-shadow-spread: 0; --shadow-input-shadow-offset-x: 0; --shadow-input-shadow-offset-y: 0; --shadow-dropdown-shadow-color: 26 28 29 / 0.08; --shadow-dropdown-shadow-type: dropShadow; --shadow-dropdown-shadow-blur: 10px; --shadow-dropdown-shadow-spread: 0; --shadow-dropdown-shadow-offset-x: 0; --shadow-dropdown-shadow-offset-y: 4px; --shadow-md-color: 26 28 29 / 0.08; --shadow-md-type: dropShadow; --shadow-md-blur: 30px; --shadow-md-spread: 0; --shadow-md-offset-x: 0; --shadow-md-offset-y: 5px; --shadow-lg-color: 242 239 255; --shadow-lg-type: dropShadow; --shadow-lg-blur: 20px; --shadow-lg-spread: 0; --shadow-lg-offset-x: 0; --shadow-lg-offset-y: 0; --spacing-3xl: var(--theme-spacing-3xl); --spacing-2xl: var(--theme-spacing-2xl); --spacing-xl: var(--theme-spacing-xl); --spacing-xs: var(--theme-spacing-xs); --spacing-sm: var(--theme-spacing-sm); --spacing-2xs: var(--theme-spacing-2xs); --spacing-md: var(--theme-spacing-md); --spacing-3xs: var(--theme-spacing-3xs); --spacing-lg: var(--theme-spacing-lg); --spacing-6xl: var(--theme-spacing-6xl); --spacing-5xl: var(--theme-spacing-5xl); --spacing-4xl: var(--theme-spacing-4xl); --spacing-none: var(--theme-spacing-none); --background-accent-weak: var(--color-turqoise-99); --background-accent-weak-hover: var(--color-turqoise-95); --background-accent-weak-disabled: var(--color-turqoise-99); --background-accent-default: var(--color-turqoise-70); --background-accent-hover: var(--color-turqoise-80); --background-accent-disabled: var(--color-turqoise-95); --background-accent-strong: var(--color-turqoise-60); --background-accent-strong-hover: var(--color-turqoise-70); --background-accent-strong-disabled: var(--color-turqoise-95); --background-accent-weak-active: var(--color-turqoise-90); --background-accent-strong-active: var(--color-turqoise-80); --background-accent-active: var(--color-turqoise-80); --background-success-weak: var(--color-green-95); --background-success-weak-hover: var(--color-green-90); --background-success-weak-disabled: var(--color-green-99); --background-success-default: var(--color-green-60); --background-success-hover: var(--color-green-60); --background-success-disabled: var(--color-green-95); --background-success-strong: var(--color-green-40); --background-success-strong-hover: var(--color-green-50); --background-success-strong-disabled: var(--color-green-95); --background-success-active: var(--color-green-50); --background-success-weak-active: var(--color-green-90); --background-success-strong-active: var(--color-green-50); --background-info-weak: var(--color-blue-95); --background-info-weak-hover: var(--color-blue-80); --background-info-weak-disabled: var(--color-blue-99); --background-info-default: var(--color-blue-50); --background-info-hover: var(--color-blue-40); --background-info-disabled: var(--color-blue-90); --background-info-strong: var(--color-blue-30); --background-info-strong-hover: var(--color-blue-40); --background-info-strong-disabled: var(--color-blue-90); --background-info-active: var(--color-blue-40); --background-info-weak-active: var(--color-blue-80); --background-info-strong-active: var(--color-blue-40); --background-critical-weak: var(--color-red-90); --background-critical-weak-hover: var(--color-red-80); --background-critical-weak-disabled: var(--color-red-95); --background-critical-default: var(--color-red-50); --background-critical-hover: var(--color-red-70); --background-critical-disabled: var(--color-red-95); --background-critical-strong: var(--color-red-30); --background-critical-strong-hover: var(--color-red-40); --background-critical-strong-disabled: var(--color-red-90); --background-critical-active: var(--color-red-60); --background-critical-weak-active: var(--color-red-80); --background-critical-strong-active: var(--color-red-40); --background-warning-weak: var(--color-orange-95); --background-warning-weak-hover: var(--color-orange-90); --background-warning-weak-disabled: var(--color-orange-99); --background-warning-default: var(--color-orange-70); --background-warning-hover: var(--color-orange-80); --background-warning-disabled: var(--color-orange-95); --background-warning-strong: var(--color-orange-60); --background-warning-strong-hover: var(--color-orange-70); --background-warning-strong-disabled: var(--color-orange-95); --background-warning-strong-active: var(--color-orange-70); --background-warning-active: var(--color-orange-80); --background-warning-weak-active: var(--color-orange-90); --background-neutral-weak: var(--color-grey-90); --background-neutral-weak-hover: var(--color-grey-70); --background-neutral-weak-disabled: var(--color-grey-95); --background-neutral-default: var(--color-grey-70); --background-neutral-hover: var(--color-grey-80); --background-neutral-disabled: var(--color-grey-90); --background-neutral-strong: var(--color-grey-40); --background-neutral-strong-hover: var(--color-grey-60); --background-neutral-strong-disabled: var(--color-grey-80); --background-neutral-uncolored: var(--color-white); --background-neutral-strong-active: var(--color-grey-60); --background-neutral-active: var(--color-grey-80); --background-neutral-weak-active: var(--color-grey-70); --background-neutral-body: var(--color-white); --background-secondary-weak: var(--color-lilac-99); --background-secondary-strong: var(--color-lilac-90); --background-secondary-hover: var(--color-lilac-80); --background-secondary-active: var(--color-lilac-80); --background-secondary-disabled: var(--color-lilac-95); --background-secondary-weak-hover: var(--color-lilac-95); --background-secondary-strong-hover: var(--color-lilac-70); --background-secondary-weak-active: var(--color-lilac-90); --background-secondary-strong-active: var(--color-lilac-70); --background-secondary-weak-disabled: var(--color-lilac-99); --background-secondary-strong-disabled: var(--color-lilac-70); --background-secondary-default: var(--color-lilac-95); --background-primary-weak: var(--color-violet-70); --background-primary-strong: var(--color-violet-10); --background-primary-hover: var(--color-violet-50); --background-primary-active: var(--color-violet-40); --background-primary-disabled: var(--color-violet-95); --background-primary-weak-hover: var(--color-violet-80); --background-primary-weak-active: var(--color-violet-80); --background-primary-weak-disabled: var(--color-violet-99); --background-primary-strong-hover: var(--color-violet-30); --background-primary-strong-active: var(--color-violet-40); --background-primary-strong-disabled: var(--color-violet-90); --background-primary-default: var(--color-violet-20); --content-accent-weak: var(--color-turqoise-80); --content-accent-weak-hover: var(--color-turqoise-70); --content-accent-weak-disabled: var(--color-turqoise-99); --content-accent-default: var(--color-turqoise-70); --content-accent-hover: var(--color-turqoise-70); --content-accent-disabled: var(--color-turqoise-95); --content-accent-strong: var(--color-turqoise-40); --content-accent-strong-hover: var(--color-turqoise-60); --content-accent-strong-disabled: var(--color-turqoise-95); --content-accent-strong-active: var(--color-turqoise-60); --content-accent-active: var(--color-turqoise-70); --content-accent-weak-active: var(--color-turqoise-70); --content-success-weak: var(--color-green-70); --content-success-weak-hover: var(--color-green-60); --content-success-weak-disabled: var(--color-green-90); --content-success-default: var(--color-green-50); --content-success-hover: var(--color-green-40); --content-success-disabled: var(--color-green-90); --content-success-strong: var(--color-green-30); --content-success-strong-hover: var(--color-green-40); --content-success-strong-disabled: var(--color-green-90); --content-success-strong-active: var(--color-green-20); --content-success-active: var(--color-green-50); --content-success-weak-active: var(--color-green-60); --content-info-weak: var(--color-blue-70); --content-info-weak-hover: var(--color-blue-60); --content-info-weak-disabled: var(--color-blue-90); --content-info-default: var(--color-blue-50); --content-info-hover: var(--color-blue-40); --content-info-disabled: var(--color-blue-90); --content-info-strong: var(--color-blue-30); --content-info-strong-hover: var(--color-blue-40); --content-info-strong-disabled: var(--color-blue-90); --content-info-strong-active: var(--color-blue-20); --content-info-active: var(--color-blue-50); --content-info-weak-active: var(--color-blue-60); --content-critical-weak: var(--color-red-70); --content-critical-weak-hover: var(--color-red-60); --content-critical-weak-disabled: var(--color-red-90); --content-critical-default: var(--color-red-50); --content-critical-hover: var(--color-red-40); --content-critical-disabled: var(--color-red-80); --content-critical-strong: var(--color-red-critical); --content-critical-strong-hover: var(--color-red-40); --content-critical-strong-disabled: var(--color-red-80); --content-critical-strong-active: var(--color-red-20); --content-critical-active: var(--color-red-50); --content-critical-weak-active: var(--color-red-60); --content-critical-uncolored: var(--color-red-99); --content-warning-weak: var(--color-orange-70); --content-warning-weak-hover: var(--color-orange-60); --content-warning-weak-disabled: var(--color-orange-90); --content-warning-default: var(--color-orange-50); --content-warning-hover: var(--color-orange-40); --content-warning-disabled: var(--color-orange-90); --content-warning-strong: var(--color-orange-30); --content-warning-strong-hover: var(--color-orange-40); --content-warning-strong-disabled: var(--color-orange-90); --content-warning-strong-active: var(--color-orange-20); --content-warning-active: var(--color-orange-50); --content-warning-weak-active: var(--color-orange-60); --content-neutral-weak: var(--color-grey-70); --content-neutral-weak-hover: var(--color-grey-60); --content-neutral-weak-disabled: var(--color-grey-70); --content-neutral-default: var(--color-grey-50); --content-neutral-hover: var(--color-grey-40); --content-neutral-disabled: var(--color-grey-70); --content-neutral-strong: var(--color-grey-30); --content-neutral-strong-hover: var(--color-grey-40); --content-neutral-strong-disabled: var(--color-grey-70); --content-neutral-uncolored: var(--color-white); --content-neutral-strong-active: var(--color-grey-20); --content-neutral-active: var(--color-grey-50); --content-neutral-weak-active: var(--color-grey-60); --content-primary-weak: var(--color-violet-40); --content-primary-strong: var(--color-violet-10); --content-primary-hover: var(--color-violet-50); --content-primary-active: var(--color-violet-50); --content-primary-disabled: var(--color-lilac-90); --content-primary-weak-hover: var(--color-violet-60); --content-primary-weak-active: var(--color-violet-60); --content-primary-weak-disabled: var(--color-violet-95); --content-primary-strong-hover: var(--color-violet-40); --content-primary-strong-active: var(--color-violet-40); --content-primary-strong-disabled: var(--color-violet-80); --content-primary-default: var(--color-violet-20); --content-secondary-weak: var(--color-lilac-80); --content-secondary-strong: var(--color-lilac-50); --content-secondary-hover: var(--color-lilac-60); --content-secondary-active: var(--color-lilac-60); --content-secondary-disabled: var(--color-lilac-80); --content-secondary-weak-hover: var(--color-lilac-70); --content-secondary-weak-active: var(--color-lilac-70); --content-secondary-weak-disabled: var(--color-lilac-99); --content-secondary-strong-hover: var(--color-lilac-50); --content-secondary-strong-active: var(--color-lilac-50); --content-secondary-strong-disabled: var(--color-lilac-70); --content-secondary-default: var(--color-lilac-70); --border-accent-weak: var(--color-turqoise-95); --border-accent-weak-hover: var(--color-turqoise-90); --border-accent-weak-disabled: var(--color-turqoise-95); --border-accent-default: var(--color-turqoise-80); --border-accent-hover: var(--color-turqoise-70); --border-accent-disabled: var(--color-turqoise-95); --border-accent-strong: var(--color-turqoise-70); --border-accent-strong-hover: var(--color-turqoise-60); --border-accent-strong-disabled: var(--color-turqoise-95); --border-accent-strong-active: var(--color-turqoise-50); --border-accent-active: var(--color-turqoise-60); --border-accent-weak-active: var(--color-turqoise-90); --border-success-weak: var(--color-green-95); --border-success-weak-hover: var(--color-green-90); --border-success-weak-disabled: var(--color-green-95); --border-success-default: var(--color-green-80); --border-success-hover: var(--color-green-70); --border-success-disabled: var(--color-green-95); --border-success-strong: var(--color-green-70); --border-success-strong-hover: var(--color-green-60); --border-success-strong-disabled: var(--color-green-95); --border-success-strong-active: var(--color-green-50); --border-success-active: var(--color-green-60); --border-success-weak-active: var(--color-green-90); --border-info-weak: var(--color-blue-95); --border-info-weak-hover: var(--color-blue-90); --border-info-weak-disabled: var(--color-blue-95); --border-info-default: var(--color-blue-80); --border-info-hover: var(--color-blue-70); --border-info-disabled: var(--color-blue-95); --border-info-strong: var(--color-blue-70); --border-info-strong-hover: var(--color-blue-60); --border-info-strong-disabled: var(--color-blue-95); --border-info-strong-active: var(--color-blue-50); --border-info-active: var(--color-blue-60); --border-info-weak-active: var(--color-blue-90); --border-critical-weak: var(--color-red-95); --border-critical-weak-hover: var(--color-red-90); --border-critical-weak-disabled: var(--color-red-95); --border-critical-default: var(--color-red-80); --border-critical-hover: var(--color-red-70); --border-critical-disabled: var(--color-red-95); --border-critical-strong: var(--color-red-70); --border-critical-strong-hover: var(--color-red-60); --border-critical-strong-disabled: var(--color-red-95); --border-critical-strong-active: var(--color-red-50); --border-critical-active: var(--color-red-60); --border-critical-weak-active: var(--color-red-90); --border-warning-weak: var(--color-orange-95); --border-warning-weak-hover: var(--color-orange-90); --border-warning-weak-disabled: var(--color-orange-95); --border-warning-default: var(--color-orange-80); --border-warning-hover: var(--color-orange-70); --border-warning-disabled: var(--color-orange-95); --border-warning-strong: var(--color-orange-70); --border-warning-strong-hover: var(--color-orange-60); --border-warning-strong-disabled: var(--color-orange-95); --border-warning-strong-active: var(--color-orange-50); --border-warning-active: var(--color-orange-60); --border-warning-weak-active: var(--color-orange-90); --border-neutral-weak: var(--color-grey-95); --border-neutral-weak-hover: var(--color-grey-90); --border-neutral-weak-disabled: var(--color-grey-90); --border-neutral-default: var(--color-grey-80); --border-neutral-hover: var(--color-grey-70); --border-neutral-disabled: var(--color-grey-90); --border-neutral-strong: var(--color-grey-70); --border-neutral-strong-hover: var(--color-grey-60); --border-neutral-strong-disabled: var(--color-grey-90); --border-neutral-uncolored: var(--color-transparent); --border-neutral-strong-active: var(--color-grey-50); --border-neutral-active: var(--color-grey-60); --border-neutral-weak-active: var(--color-grey-90); --border-primary-weak: var(--color-violet-80); --border-primary-strong: var(--color-violet-10); --border-primary-hover: var(--color-violet-50); --border-primary-active: var(--color-violet-50); --border-primary-disabled: var(--color-lilac-90); --border-primary-weak-hover: var(--color-violet-50); --border-primary-weak-active: var(--color-violet-60); --border-primary-weak-disabled: var(--color-violet-90); --border-primary-strong-hover: var(--color-violet-40); --border-primary-strong-active: var(--color-violet-40); --border-primary-strong-disabled: var(--color-violet-90); --border-primary-default: var(--color-violet-20); --border-secondary-default: var(--color-lilac-80); --border-secondary-weak: var(--color-lilac-95); --border-secondary-strong: var(--color-lilac-70); --border-secondary-hover: var(--color-lilac-70); --border-secondary-active: var(--color-lilac-60); --border-secondary-disabled: var(--color-lilac-95); --border-secondary-weak-hover: var(--color-lilac-90); --border-secondary-weak-active: var(--color-lilac-90); --border-secondary-weak-disabled: var(--color-lilac-95); --border-secondary-strong-hover: var(--color-lilac-60); --border-secondary-strong-active: var(--color-lilac-50); --border-secondary-strong-disabled: var(--color-lilac-95); --charts-primary-10: var(--color-violet-20); --charts-primary-20: var(--color-violet-30); --charts-primary-30: var(--color-violet-40); --charts-primary-40: var(--color-violet-50); --charts-primary-50: var(--color-violet-60); --charts-primary-60: var(--color-violet-70); --charts-primary-70: var(--color-violet-80); --charts-primary-80: var(--color-violet-90); --charts-primary-90: var(--color-violet-95); --charts-primary-100: var(--color-violet-99); --charts-secondary-10: var(--color-lilac-20); --charts-secondary-20: var(--color-lilac-30); --charts-secondary-30: var(--color-lilac-40); --charts-secondary-40: var(--color-lilac-50); --charts-secondary-50: var(--color-lilac-60); --charts-secondary-60: var(--color-lilac-70); --charts-secondary-70: var(--color-lilac-80); --charts-secondary-80: var(--color-lilac-90); --charts-secondary-90: var(--color-lilac-95); --charts-secondary-100: var(--color-lilac-99); --charts-accent-10: var(--color-turqoise-20); --charts-accent-20: var(--color-turqoise-30); --charts-accent-30: var(--color-turqoise-40); --charts-accent-40: var(--color-turqoise-50); --charts-accent-50: var(--color-turqoise-60); --charts-accent-60: var(--color-turqoise-70); --charts-accent-70: var(--color-turqoise-80); --charts-accent-80: var(--color-turqoise-90); --charts-accent-90: var(--color-turqoise-95); --charts-accent-100: var(--color-turqoise-99); --charts-critical-10: var(--color-red-20); --charts-critical-20: var(--color-red-30); --charts-critical-30: var(--color-red-40); --charts-critical-40: var(--color-red-50); --charts-critical-50: var(--color-red-60); --charts-critical-60: var(--color-red-70); --charts-critical-70: var(--color-red-80); --charts-critical-80: var(--color-red-90); --charts-critical-90: var(--color-red-95); --charts-critical-100: var(--color-red-99); --charts-info-10: var(--color-blue-20); --charts-info-20: var(--color-blue-30); --charts-info-30: var(--color-blue-40); --charts-info-40: var(--color-blue-50); --charts-info-50: var(--color-blue-60); --charts-info-60: var(--color-blue-70); --charts-info-70: var(--color-blue-80); --charts-info-80: var(--color-blue-90); --charts-info-90: var(--color-blue-95); --charts-info-100: var(--color-blue-99); --charts-success-10: var(--color-green-20); --charts-success-20: var(--color-green-30); --charts-success-30: var(--color-green-40); --charts-success-40: var(--color-green-50); --charts-success-50: var(--color-green-60); --charts-success-60: var(--color-green-70); --charts-success-70: var(--color-green-80); --charts-success-80: var(--color-green-90); --charts-success-90: var(--color-green-95); --charts-success-100: var(--color-green-99); --charts-warning-10: var(--color-orange-20); --charts-warning-20: var(--color-orange-30); --charts-warning-30: var(--color-orange-40); --charts-warning-40: var(--color-orange-50); --charts-warning-50: var(--color-orange-60); --charts-warning-60: var(--color-orange-70); --charts-warning-70: var(--color-orange-80); --charts-warning-80: var(--color-orange-90); --charts-warning-90: var(--color-orange-95); --charts-warning-100: var(--color-orange-99); --charts-neutral-10: var(--color-grey-20); --charts-neutral-20: var(--color-grey-30); --charts-neutral-30: var(--color-grey-40); --charts-neutral-40: var(--color-grey-50); --charts-neutral-50: var(--color-grey-60); --charts-neutral-60: var(--color-grey-70); --charts-neutral-70: var(--color-grey-80); --charts-neutral-80: var(--color-grey-90); --charts-neutral-90: var(--color-grey-95); --charts-neutral-100: var(--color-grey-99); --font-family-body: var(--body); --font-family-labels: var(--body); --font-family-heading: var(--body); --font-family-code: var(--mono); --font-family-display: var(--display); --font-size-h1: var(--theme-font-size-4xl); --font-size-h2: var(--theme-font-size-3xl); --font-size-h3: var(--theme-font-size-2xl); --font-size-h4: var(--theme-font-size-xl); --font-size-h5: var(--theme-font-size-lg); --font-size-h6: var(--theme-font-size-md); --font-size-base: var(--theme-font-size-base); --font-size-sm: var(--theme-font-size-sm); --font-size-xs: var(--theme-font-size-xs); --border-radius-full: var(--theme-border-radius-full); --border-radius-sm: var(--theme-border-radius-3); --border-radius-md: var(--theme-border-radius-base); --border-radius-xs: var(--theme-border-radius-1); --button-silent-background: var(--color-transparent); --avatar-width-small: var(--size-40); --avatar-width-medium: var(--size-50); --avatar-width-large: var(--size-60); --tooltip-arrow-size: var(--size-10); --checkbox-background: var(--color-transparent); --checkbox-width: var(--size-18); --checkbox-height: var(--size-18); --checkbox-indicator-size: var(--size-20); --radiobutton-indicator-width: var(--size-10); --radiobutton-indicator-height: var(--size-10); --pagination-item-background: var(--color-transparent); --dropdown-menu-item-background-disabled: var(--color-transparent); --progress-height: var(--size-7); --colorpicker-width: var(--size-40); --colorpicker-height: var(--size-15); --datepicker-day-background: var(--color-transparent); --datepicker-width: var(--size-280); --carousel-pagination-item-size: var(--size-8); --table-quiet-head-background: var(--color-transparent); --tabs-item-background: var(--color-transparent); --notification-badge-size: var(--size-12); --notification-badge-content-size: var(--size-15); --toggle-status-indicator-background-active: var(--color-white); --toggle-status-indicator-background-inactive: var(--color-white); --toggle-width: var(--size-32); --toggle-height: var(--size-18); --button-primary-background: var(--background-primary-default); --button-primary-text: var(--content-neutral-uncolored); --button-primary-outline-focus: var(--border-accent-default); --button-primary-background-hover: var(--background-primary-hover); --button-primary-background-disabled: var(--background-secondary-disabled); --button-primary-text-disabled: var(--content-secondary-disabled); --button-primary-background-critical: var(--background-critical-default); --button-primary-background-critical-hover: var(--background-critical-hover); --button-primary-background-critical-disabled: var(--background-critical-disabled); --button-primary-text-critical-disabled: var(--content-critical-disabled); --button-primary-text-critical: var(--content-critical-uncolored); --button-primary-text-active: var(--content-neutral-uncolored); --button-primary-background-active: var(--background-primary-active); --button-primary-border-active: var(--background-primary-active); --button-secondary-background: var(--background-secondary-strong); --button-secondary-background-hover: var(--background-secondary-hover); --button-secondary-background-disabled: var(--background-secondary-disabled); --button-secondary-border-focused: var(--border-accent-default); --button-secondary-text: var(--content-primary-default); --button-secondary-text-disabled: var(--content-secondary-disabled); --button-secondary-background-critical-hover: var(--background-critical-weak-hover); --button-secondary-background-critical-disabled: var(--background-critical-weak-disabled); --button-secondary-background-critical: var(--background-critical-weak); --button-secondary-text-critical-hover: var(--content-critical-hover); --button-secondary-text-critical-disabled: var(--content-critical-weak-disabled); --button-secondary-text-critical: var(--content-critical-default); --button-secondary-text-active: var(--content-primary-default); --button-secondary-background-active: var(--background-secondary-strong-active); --button-secondary-border-active: var(--background-secondary-strong-active); --button-silent-border: var(--button-silent-background); --button-silent-text: var(--content-primary-default); --button-silent-text-hover: var(--content-primary-hover); --button-silent-text-disabled: var(--content-neutral-disabled); --button-silent-text-critical-hover: var(--content-critical-hover); --button-silent-text-critical-disabled: var(--content-critical-disabled); --button-silent-text-critical: var(--content-critical-strong); --button-silent-background-active: var(--button-silent-background); --button-silent-border-active: var(--border-primary-weak); --button-padding-x: var(--spacing-lg); --button-padding-y: var(--spacing-xs); --button-font-size: var(--font-size-base); --button-border-radius: var(--border-radius-md); --button-small-padding-x: var(--spacing-sm); --button-small-padding-y: var(--spacing-xs); --button-icon-padding-x: var(--spacing-xs); --input-background: var(--background-secondary-weak); --input-placeholder-color: var(--content-secondary-weak); --input-outline-focus: var(--border-accent-default); --input-border-invalid: var(--border-critical-default); --input-background-disabled: var(--background-neutral-weak-disabled); --input-text-active: var(--content-primary-default); --input-text-disabled: var(--content-neutral-disabled); --input-border-disabled: var(--border-neutral-disabled); --input-group-item-background: var(--background-secondary-strong); --input-group-item-text: var(--content-primary-default); --input-group-item-background-disabled: var(--background-neutral-disabled); --input-group-item-text-disabled: var(--content-neutral-disabled); --input-group-item-padding-x: var(--spacing-sm); --input-group-item-icon-padding-x: var(--spacing-xs); --input-border: var(--border-secondary-strong); --input-font-size: var(--font-size-h6); --input-gap: var(--spacing-2xs); --input-padding-x: var(--spacing-sm); --input-padding-y: var(--spacing-xs); --input-border-radius: var(--border-radius-md); --helper-text-text: var(--content-secondary-strong); --helper-text-text-invalid: var(--content-critical-default); --helper-text-text-disabled: var(--content-neutral-disabled); --helper-text-font-size: var(--font-size-sm); --helper-text-gap: var(--spacing-3xs); --helper-text-padding-top: var(--spacing-2xs); --label-text: var(--content-primary-default); --label-text-disabled: var(--content-neutral-disabled); --label-font-size: var(--font-size-h6); --avatar-text: var(--content-neutral-uncolored); --avatar-font-size-small: var(--font-size-base); --avatar-font-size-medium: var(--font-size-h6); --avatar-font-size-large: var(--font-size-h5); --dropdown-select-outline-focused: var(--border-accent-default); --dropdown-select-text: var(--content-primary-default); --dropdown-select-background-disabled: var(--background-neutral-weak-disabled); --dropdown-select-text-disabled: var(--content-neutral-disabled); --dropdown-select-background: var(--background-secondary-weak); --dropdown-select-option-text-selected: var(--content-primary-active); --dropdown-select-option-text: var(--content-primary-default); --dropdown-select-option-background-hover: var(--background-secondary-weak); --dropdown-select-option-text-disabled: var(--content-neutral-disabled); --dropdown-select-option-padding-x: var(--spacing-sm); --dropdown-select-option-padding-y: var(--spacing-xs); --dropdown-select-listbox-background: var(--background-neutral-uncolored); --dropdown-select-listbox-border: var(--border-neutral-uncolored); --dropdown-select-optgroup-text: var(--content-secondary-strong); --dropdown-select-optgroup-font-size: var(--font-size-sm); --dropdown-select-border-radius: var(--border-radius-md); --dropdown-select-padding-y: var(--spacing-xs); --dropdown-select-padding-x: var(--spacing-sm); --dropdown-select-multiple-gap: var(--spacing-xs); --dropdown-select-multiple-padding-y: var(--spacing-2xs); --alert-success-background: var(--background-success-weak); --alert-success-text: var(--content-success-strong); --alert-warning-background: var(--background-warning-weak); --alert-warning-text: var(--content-warning-strong); --alert-critical-background: var(--background-critical-weak); --alert-critical-text: var(--content-critical-default); --alert-info-background: var(--background-info-weak); --alert-info-text: var(--content-info-strong); --alert-text: var(--content-neutral-uncolored); --alert-padding-x: var(--spacing-sm); --alert-padding-y: var(--spacing-sm); --alert-border-radius: var(--border-radius-md); --alert-small-padding-x: var(--spacing-sm); --alert-small-padding-y: var(--spacing-xs); --alert-small-font-size: var(--font-size-sm); --alert-font-size: var(--font-size-base); --tooltip-text: var(--content-primary-default); --tooltip-background: var(--background-secondary-strong); --tooltip-padding-y: var(--spacing-xs); --tooltip-padding-x: var(--spacing-sm); --tooltip-border-radius: var(--border-radius-md); --tooltip-font-size: var(--font-size-sm); --checkbox-text: var(--content-neutral-uncolored); --checkbox-border: var(--border-primary-default); --checkbox-background-hover: var(--background-secondary-weak-hover); --checkbox-border-disabled: var(--border-neutral-disabled); --checkbox-background-active: var(--background-primary-default); --checkbox-border-focused: var(--border-accent-strong); --checkbox-background-disabled: var(--background-neutral-disabled); --checkbox-background-active-hover: var(--background-primary-hover); --checkbox-text-disabled: var(--content-neutral-disabled); --checkbox-border-radius: var(--border-radius-sm); --checkbox-gap: var(--spacing-xs); --radiobutton-background: var(--checkbox-background); --radiobutton-border-radius: var(--border-radius-full); --radiobutton-width: var(--checkbox-width); --radiobutton-height: var(--checkbox-height); --radiobutton-group-gap-y: var(--spacing-xs); --radiobutton-group-gap-x: var(--spacing-sm); --tag-background: var(--background-primary-default); --tag-secondary-background: var(--background-secondary-default); --tag-secondary-text: var(--content-primary-default); --tag-text: var(--content-neutral-uncolored); --tag-accent-background: var(--background-accent-weak); --tag-accent-text: var(--content-accent-default); --tag-padding-y: var(--spacing-2xs); --tag-padding-x: var(--spacing-sm); --tag-font-size: var(--font-size-sm); --tag-border-radius: var(--border-radius-md); --tag-dismissible-padding-right: var(--spacing-xs); --pagination-item-background-active: var(--background-secondary-weak-active); --pagination-item-text: var(--content-primary-default); --pagination-item-padding-x: var(--spacing-xs); --pagination-item-padding-y: var(--spacing-3xs); --pagination-item-border-radius: var(--border-radius-sm); --pagination-gap: var(--spacing-2xs); --dropdown-menu-item-text-critical: var(--content-critical-default); --dropdown-menu-item-text-disabled: var(--content-secondary-disabled); --dropdown-menu-item-padding-left: var(--spacing-sm); --dropdown-menu-item-padding-y: var(--spacing-xs); --dropdown-menu-item-padding-right: var(--spacing-2xs); --dropdown-menu-border-radius: var(--spacing-xs); --progress-background: var(--background-neutral-weak); --progress-indicator-background: var(--background-primary-strong); --progress-indicator-success-background: var(--background-success-default); --progress-indicator-warning-background: var(--background-warning-default); --progress-indicator-critical-background: var(--background-critical-default); --progress-border-radius: var(--border-radius-full); --colorpicker-border: var(--border-primary-default); --colorpicker-gap: var(--spacing-2xs); --colorpicker-border-radius: var(--border-radius-sm); --separator-border: var(--border-secondary-weak); --separator-strong-border: var(--border-primary-default); --action-list-item-background-selected: var(--background-secondary-weak-active); --action-list-item-background-hover: var(--background-secondary-weak-hover); --action-list-item-padding-right: var(--spacing-xs); --datepicker-day-text-disabled: var(--content-neutral-disabled); --datepicker-day-text: var(--content-primary-default); --datepicker-day-background-selected: var(--background-secondary-weak-active); --datepicker-day-padding-x: var(--spacing-xs); --datepicker-day-padding-y: var(--spacing-xs); --datepicker-today-text: var(--content-accent-default); --datepicker-padding-x: var(--spacing-xs); --datepicker-padding-y: var(--spacing-xs); --datepicker-gap: var(--spacing-sm); --carousel-pagination-item-background: var(--content-secondary-weak); --carousel-pagination-item-background-active: var(--content-primary-default); --carousel-gap: var(--spacing-xs); --carousel-slide-border-radius: var(--border-radius-md); --card-background: var(--background-neutral-uncolored); --card-heading-background: var(--background-secondary-weak); --card-heading-text: var(--content-primary-default); --card-heading-padding-x: var(--spacing-sm); --card-heading-padding-y: var(--spacing-xs); --card-heading-font-size: var(--font-size-base); --card-text: var(--content-primary-default); --card-padding-x: var(--spacing-sm); --card-padding-y: var(--spacing-sm); --card-border-radius: var(--border-radius-md); --card-large-padding-y: var(--spacing-md); --card-large-heading-padding-y: var(--spacing-sm); --file-input-padding-x: var(--spacing-sm); --file-input-padding-y: var(--spacing-xs); --file-input-gap: var(--spacing-xs); --file-input-border-radius: var(--border-radius-md); --collapsible-strong-header-padding-left: var(--spacing-sm); --collapsible-strong-header-padding-right: var(--spacing-xs); --collapsible-strong-border: var(--border-secondary-weak); --collapsible-strong-text-content-padding-top: var(--spacing-sm); --collapsible-header-text: var(--content-primary-default); --collapsible-header-padding-right: var(--spacing-xs); --collapsible-header-padding-y: var(--spacing-xs); --collapsible-header-padding-left: var(--spacing-none); --collapsible-header-gap: var(--spacing-xs); --collapsible-text: var(--content-primary-default); --collapsible-background: var(--background-neutral-uncolored); --collapsible-text-content-padding-bottom: var(--spacing-sm); --collapsible-text-content-padding-x: var(--spacing-sm); --table-head-background: var(--background-primary-default); --table-head-text: var(--content-neutral-uncolored); --table-head-padding-x: var(--spacing-xs); --table-head-padding-y: var(--spacing-xs); --table-row-background: var(--background-neutral-uncolored); --table-row-even-background: var(--background-secondary-weak); --table-cell-text: var(--content-primary-default); --table-cell-padding-x: var(--spacing-xs); --table-cell-padding-y: var(--spacing-xs); --table-secondary-head-background: var(--background-secondary-default); --table-quiet-head-border: var(--border-secondary-default); --table-border-radius: var(--border-radius-md); --table-header-padding-y: var(--spacing-sm); --table-footer-padding-y: var(--spacing-sm); --table-empty-padding-y: var(--spacing-sm); --table-empty-padding-x: var(--spacing-sm); --tabs-item-background-selected: var(--background-secondary-weak-active); --tabs-item-background-hover: var(--background-secondary-weak-hover); --tabs-item-text: var(--content-primary-default); --tabs-item-background-disabled: var(--background-secondary-weak-disabled); --tabs-item-text-disabled: var(--content-primary-disabled); --tabs-item-padding-x: var(--spacing-sm); --tabs-item-padding-y: var(--spacing-xs); --tabs-item-border-radius: var(--border-radius-md); --tabs-background: var(--background-secondary-weak); --tabs-border-radius: var(--border-radius-md); --tabs-gap: var(--spacing-xs); --notification-badge-background: var(--background-accent-default); --notification-badge-primary-background: var(--background-primary-default); --notification-badge-secondary-background: var(--background-secondary-strong); --notification-badge-secondary-text: var(--content-primary-default); --notification-badge-text: var(--content-neutral-uncolored); --notification-badge-font-size: var(--font-size-xs); --breadcrumbs-item-text: var(--content-primary-weak); --breadcrumbs-item-text-selected: var(--content-primary-default); --breadcrumbs-item-padding-y: var(--spacing-2xs); --breadcrumbs-gap: var(--spacing-2xs); --toggle-background-active: var(--background-primary-default); --toggle-background-inactive: var(--background-neutral-weak); --toggle-indicator-background-active: var(--content-neutral-uncolored); --toggle-indicator-background-disabled: var(--content-neutral-disabled); --toggle-indicator-background-inactive: var(--content-primary-default); --toggle-indicator-border-radius: var(--border-radius-full); --toggle-background-disabled: var(--background-neutral-weak-disabled); --toggle-status-background-active: var(--background-success-default); --toggle-status-background-inactive: var(--background-critical-default); --toggle-status-indicator-background: var(--content-neutral-uncolored); --toggle-padding: var(--spacing-3xs); --toggle-border-radius: var(--border-radius-full); --navigationbar-text: var(--content-neutral-uncolored); --navigationbar-item-background-active: var(--background-primary-strong-active); --navigationbar-item-background-hover: var(--background-primary-strong-hover); --navigationbar-item-padding-x: var(--spacing-xs); --navigationbar-item-padding-y: var(--spacing-xs); --navigationbar-item-border-radius: var(--border-radius-md); --navigationbar-gap: var(--spacing-xs); --code-background: var(--background-accent-weak); --code-text: var(--content-accent-default); --code-border-radius: var(--border-radius-xs); --code-padding-x: var(--spacing-2xs); --code-padding-y: var(--spacing-3xs); --modal-backdrop: var(--background-secondary-strong-disabled); --modal-heading-padding-x: var(--spacing-sm); --modal-heading-padding-y: var(--spacing-xs); --modal-text: var(--content-primary-default); --modal-padding-x: var(--spacing-sm); --modal-padding-y: var(--spacing-sm); --header-meta-background: var(--background-secondary-default); --header-meta-text: var(--content-primary-default); --header-meta-padding-y: var(--spacing-2xs); --header-meta-font-size: var(--font-size-base); --header-actions-gap: var(--spacing-xs); --header-gap: var(--spacing-md); --header-padding-x: var(--spacing-sm); --header-padding-y: var(--spacing-xs); --legend-item-text: var(--content-primary-default); --legend-item-border-radius: var(--border-radius-sm); --legend-item-gap: var(--spacing-xs); --legend-item-font-size: var(--font-size-h6); --legend-gap: var(--spacing-sm); --accordion-border-radius: var(--border-radius-md); --buttongroup-gap: var(--spacing-2xs); --button-primary-border: var(--button-primary-background); --button-primary-border-hover: var(--button-primary-background-hover); --button-primary-border-disabled: var(--button-primary-background-disabled); --button-secondary-border: var(--button-secondary-background); --button-secondary-border-hover: var(--button-secondary-background-hover); --button-secondary-border-disabled: var(--button-secondary-background-disabled); --button-silent-text-active: var(--button-silent-text); --dropdown-select-optgroup-padding-x: var(--dropdown-select-option-padding-x); --dropdown-select-optgroup-padding-y: var(--dropdown-select-option-padding-y); --dropdown-select-border: var(--input-border); --dropdown-select-border-disabled: var(--input-border-disabled); --dropdown-select-font-size: var(--input-font-size); --dropdown-select-multiple-padding-x: var(--dropdown-select-padding-x); --checkbox-border-hover: var(--checkbox-background-active-hover); --radiobutton-background-hover: var(--checkbox-background-hover); --radiobutton-border: var(--checkbox-border); --radiobutton-border-disabled: var(--checkbox-border-disabled); --radiobutton-border-focused: var(--checkbox-border-focused); --radiobutton-background-active: var(--checkbox-background-active); --radiobutton-background-disabled: var(--checkbox-background-disabled); --radiobutton-gap: var(--checkbox-gap); --tag-critical-background: var(--alert-critical-background); --tag-critical-text: var(--alert-critical-text); --tag-success-background: var(--alert-success-background); --tag-success-text: var(--alert-success-text); --tag-warning-background: var(--alert-warning-background); --tag-warning-text: var(--alert-warning-text); --tag-info-background: var(--alert-info-background); --tag-info-text: var(--alert-info-text); --dropdown-menu-item-background-selected: var(--dropdown-select-option-background-hover); --dropdown-menu-item-text: var(--dropdown-select-option-text); --dropdown-menu-background: var(--dropdown-select-listbox-background); --dropdown-menu-border: var(--dropdown-select-listbox-border); --textarea-background: var(--input-background); --textarea-border: var(--input-border); --textarea-placeholder-color: var(--input-placeholder-color); --textarea-background-disabled: var(--input-background-disabled); --textarea-text-active: var(--input-text-active); --textarea-border-invalid: var(--input-border-invalid); --textarea-border-disabled: var(--input-border-disabled); --textarea-text-disabled: var(--input-text-disabled); --textarea-padding-x: var(--input-padding-x); --textarea-padding-y: var(--input-padding-y); --textarea-border-radius: var(--input-border-radius); --textarea-font-size: var(--input-font-size); --action-list-item-padding-left: var(--dropdown-menu-item-padding-left); --action-list-item-padding-y: var(--dropdown-menu-item-padding-y); --action-list-header-background: var(--card-heading-background); --action-list-header-text: var(--card-heading-text); --datepicker-border: var(--input-border); --datepicker-border-invalid: var(--input-border-invalid); --datepicker-border-disabled: var(--input-border-disabled); --datepicker-background: var(--input-background); --datepicker-background-disabled: var(--input-background-disabled); --datepicker-border-radius: var(--input-border-radius); --popover-background: var(--card-background); --popover-heading-background: var(--card-heading-background); --popover-heading-text: var(--card-heading-text); --popover-heading-padding-x: var(--card-heading-padding-x); --popover-heading-padding-y: var(--card-heading-padding-y); --popover-heading-font-size: var(--card-heading-font-size); --popover-text: var(--card-text); --popover-padding-x: var(--card-padding-x); --popover-padding-y: var(--card-padding-y); --popover-border-radius: var(--card-border-radius); --card-large-padding-x: var(--header-padding-x); --card-large-heading-padding-x: var(--header-padding-x); --file-input-background: var(--input-background); --file-input-background-disabled: var(--input-background-disabled); --file-input-border: var(--input-border); --file-input-border-disabled: var(--input-border-disabled); --file-input-border-invalid: var(--input-border-invalid); --file-input-text-active: var(--input-text-active); --file-input-text-disabled: var(--input-text-disabled); --file-input-placeholder-color: var(--input-placeholder-color); --file-input-font-size: var(--input-font-size); --collapsible-strong-header-background: var(--card-heading-background); --collapsible-strong-header-text: var(--card-heading-text); --collapsible-header-background: var(--collapsible-background); --table-secondary-head-text: var(--table-cell-text); --table-quiet-head-text: var(--table-cell-text); --toggle-gap: var(--checkbox-gap); --modal-background: var(--card-background); --modal-heading-background: var(--card-heading-background); --modal-heading-text: var(--card-heading-text); --modal-border-radius: var(--card-border-radius); --legend-item-height: var(--legend-item-font-size); --legend-item-width: var(--legend-item-font-size); --action-list-item-background: var(--dropdown-menu-background); --action-list-item-text: var(--dropdown-menu-item-text); --action-list-header-padding-x: var(--action-list-item-padding-left); --action-list-header-padding-y: var(--action-list-item-padding-y); --card-border: var(--dropdown-menu-border); --card-heading-background-strong: var(--action-list-header-background); --card-heading-text-strong: var(--action-list-header-text); --popover-border: var(--card-border); --modal-border: var(--card-border); } @media screen and (min-width: 768px) { *, *:after, *:before { --avatar-width-small: var(--size-40); --avatar-width-medium: var(--size-50); --avatar-width-large: var(--size-60); --tooltip-arrow-size: var(--size-10); --checkbox-width: var(--size-15); --checkbox-height: var(--size-15); --checkbox-indicator-size: var(--size-18); --radiobutton-indicator-width: var(--size-7); --radiobutton-indicator-height: var(--size-7); --progress-height: var(--size-7); --colorpicker-width: var(--size-40); --colorpicker-height: var(--size-15); --datepicker-width: var(--size-280); --carousel-pagination-item-size: var(--size-8); --notification-badge-size: var(--size-12); --notification-badge-content-size: var(--size-15); --toggle-width: var(--size-32); --toggle-height: var(--size-18); --button-padding-x: var(--spacing-lg); --button-padding-y: var(--spacing-xs); --button-font-size: var(--font-size-base); --button-border-radius: var(--border-radius-md); --button-small-padding-x: var(--spacing-sm); --button-small-padding-y: var(--spacing-xs); --button-icon-padding-x: var(--spacing-xs); --input-group-item-padding-x: var(--spacing-sm); --input-group-item-icon-padding-x: var(--spacing-xs); --input-font-size: var(--font-size-base); --input-gap: var(--spacing-2xs); --input-padding-x: var(--spacing-sm); --input-padding-y: var(--spacing-xs); --input-border-radius: var(--border-radius-md); --helper-text-font-size: var(--font-size-sm); --helper-text-gap: var(--spacing-3xs); --helper-text-padding-top: var(--spacing-2xs); --label-font-size: var(--font-size-base); --avatar-font-size-small: var(--font-size-base); --avatar-font-size-medium: var(--font-size-h6); --avatar-font-size-large: var(--font-size-h5); --dropdown-select-option-padding-x: var(--spacing-sm); --dropdown-select-option-padding-y: var(--spacing-xs); --dropdown-select-optgroup-font-size: var(--font-size-sm); --dropdown-select-border-radius: var(--border-radius-md); --dropdown-select-padding-y: var(--spacing-xs); --dropdown-select-padding-x: var(--spacing-sm); --dropdown-select-multiple-gap: var(--spacing-xs); --dropdown-select-multiple-padding-y: var(--spacing-2xs); --alert-padding-x: var(--spacing-sm); --alert-padding-y: var(--spacing-sm); --alert-border-radius: var(--border-radius-md); --alert-small-padding-x: var(--spacing-sm); --alert-small-padding-y: var(--spacing-xs); --alert-small-font-size: var(--font-size-sm); --alert-font-size: var(--font-size-base); --tooltip-padding-y: var(--spacing-xs); --tooltip-padding-x: var(--spacing-sm); --tooltip-border-radius: var(--border-radius-md); --tooltip-font-size: var(--font-size-sm); --checkbox-border-radius: var(--border-radius-sm); --checkbox-gap: var(--spacing-xs); --radiobutton-border-radius: var(--border-radius-full); --radiobutton-width: var(--checkbox-width); --radiobutton-height: var(--checkbox-height); --radiobutton-group-gap-y: var(--spacing-xs); --radiobutton-group-gap-x: var(--spacing-sm); --tag-padding-y: var(--spacing-2xs); --tag-padding-x: var(--spacing-sm); --tag-font-size: var(--font-size-sm); --tag-border-radius: var(--border-radius-md); --tag-dismissible-padding-right: var(--spacing-xs); --pagination-item-padding-x: var(--spacing-xs); --pagination-item-padding-y: var(--spacing-3xs); --pagination-item-border-radius: var(--border-radius-sm); --pagination-gap: var(--spacing-2xs); --dropdown-menu-item-padding-left: var(--spacing-sm); --dropdown-menu-item-padding-y: var(--spacing-xs); --dropdown-menu-item-padding-right: var(--spacing-2xs); --dropdown-menu-border-radius: var(--spacing-xs); --progress-border-radius: var(--border-radius-full); --colorpicker-gap: var(--spacing-2xs); --colorpicker-border-radius: var(--border-radius-sm); --action-list-item-padding-right: var(--spacing-xs); --datepicker-day-padding-x: var(--spacing-xs); --datepicker-day-padding-y: var(--spacing-xs); --datepicker-padding-x: var(--spacing-xs); --datepicker-padding-y: var(--spacing-xs); --datepicker-gap: var(--spacing-sm); --carousel-gap: var(--spacing-xs); --carousel-slide-border-radius: var(--border-radius-md); --card-heading-padding-x: var(--spacing-sm); --card-heading-padding-y: var(--spacing-xs); --card-heading-font-size: var(--font-size-base); --card-padding-x: var(--spacing-sm); --card-padding-y: var(--spacing-sm); --card-border-radius: var(--border-radius-md); --card-large-padding-x: var(--spacing-md); --card-large-padding-y: var(--spacing-md); --card-large-heading-padding-x: var(--spacing-md); --card-large-heading-padding-y: var(--spacing-md); --file-input-padding-x: var(--spacing-sm); --file-input-padding-y: var(--spacing-xs); --file-input-gap: var(--spacing-xs); --file-input-border-radius: var(--border-radius-md); --collapsible-strong-header-padding-left: var(--spacing-sm); --collapsible-strong-header-padding-right: var(--spacing-xs); --collapsible-strong-text-content-padding-top: var(--spacing-sm); --collapsible-header-padding-right: var(--spacing-xs); --collapsible-header-padding-y: var(--spacing-xs); --collapsible-header-padding-left: var(--spacing-none); --collapsible-header-gap: var(--spacing-xs); --collapsible-text-content-padding-bottom: var(--spacing-sm); --collapsible-text-content-padding-x: var(--spacing-sm); --table-head-padding-x: var(--spacing-xs); --table-head-padding-y: var(--spacing-xs); --table-cell-padding-x: var(--spacing-xs); --table-cell-padding-y: var(--spacing-xs); --table-border-radius: var(--border-radius-md); --table-header-padding-y: var(--spacing-sm); --table-footer-padding-y: var(--spacing-sm); --table-empty-padding-y: var(--spacing-sm); --table-empty-padding-x: var(--spacing-sm); --tabs-item-padding-x: var(--spacing-sm); --tabs-item-padding-y: var(--spacing-xs); --tabs-item-border-radius: var(--border-radius-md); --tabs-border-radius: var(--border-radius-md); --tabs-gap: var(--spacing-xs); --notification-badge-font-size: var(--font-size-xs); --breadcrumbs-item-padding-y: var(--spacing-2xs); --breadcrumbs-gap: var(--spacing-2xs); --toggle-indicator-border-radius: var(--border-radius-full); --toggle-padding: var(--spacing-3xs); --toggle-border-radius: var(--border-radius-full); --navigationbar-item-padding-x: var(--spacing-xs); --navigationbar-item-padding-y: var(--spacing-xs); --navigationbar-item-border-radius: var(--border-radius-md); --navigationbar-gap: var(--spacing-xs); --code-border-radius: var(--border-radius-xs); --code-padding-x: var(--spacing-2xs); --code-padding-y: var(--spacing-3xs); --modal-heading-padding-x: var(--spacing-sm); --modal-heading-padding-y: var(--spacing-xs); --modal-padding-x: var(--spacing-sm); --modal-padding-y: var(--spacing-sm); --header-meta-padding-y: var(--spacing-2xs); --header-meta-font-size: var(--font-size-base); --header-actions-gap: var(--spacing-xs); --header-gap: var(--spacing-md); --header-padding-x: var(--spacing-md); --header-padding-y: var(--spacing-md); --legend-item-border-radius: var(--border-radius-sm); --legend-item-gap: var(--spacing-xs); --legend-item-font-size: var(--font-size-h6); --legend-gap: var(--spacing-sm); --accordion-border-radius: var(--border-radius-md); --buttongroup-gap: var(--spacing-2xs); --dropdown-select-optgroup-padding-x: var(--dropdown-select-option-padding-x); --dropdown-select-optgroup-padding-y: var(--dropdown-select-option-padding-y); --dropdown-select-font-size: var(--input-font-size); --dropdown-select-multiple-padding-x: var(--dropdown-select-padding-x); --radiobutton-gap: var(--checkbox-gap); --textarea-padding-x: var(--input-padding-x); --textarea-padding-y: var(--input-padding-y); --textarea-border-radius: var(--input-border-radius); --textarea-font-size: var(--input-font-size); --action-list-item-padding-left: var(--dropdown-menu-item-padding-left); --action-list-item-padding-y: var(--dropdown-menu-item-padding-y); --datepicker-border-radius: var(--input-border-radius); --popover-heading-padding-x: var(--card-heading-padding-x); --popover-heading-padding-y: var(--card-heading-padding-y); --popover-heading-font-size: var(--card-heading-font-size); --popover-padding-x: var(--card-padding-x); --popover-padding-y: var(--card-padding-y); --popover-border-radius: var(--card-border-radius); --file-input-font-size: var(--input-font-size); --toggle-gap: var(--checkbox-gap); --modal-border-radius: var(--card-border-radius); --legend-item-height: var(--legend-item-font-size); --legend-item-width: var(--legend-item-font-size); --action-list-header-padding-x: var(--action-list-item-padding-left); --action-list-header-padding-y: var(--action-list-item-padding-y); } } .dark *, .dark *:after, .dark *:before { --background-accent-weak: var(--color-turqoise-40); --background-accent-weak-hover: var(--color-turqoise-70); --background-accent-weak-disabled: var(--color-turqoise-50); --background-accent-default: var(--color-turqoise-70); --background-accent-hover: var(--color-turqoise-90); --background-accent-disabled: var(--color-turqoise-30); --background-accent-strong: var(--color-turqoise-90); --background-accent-strong-hover: var(--color-turqoise-70); --background-accent-strong-disabled: var(--color-turqoise-20); --background-accent-weak-active: var(--color-turqoise-80); --background-accent-strong-active: var(--color-turqoise-80); --background-accent-active: var(--color-turqoise-95); --background-success-weak: var(--color-green-30); --background-success-weak-hover: var(--color-green-95); --background-success-weak-disabled: var(--color-green-99); --background-success-default: var(--color-green-60); --background-success-hover: var(--color-green-70); --background-success-disabled: var(--color-green-95); --background-success-strong: var(--color-green-40); --background-success-strong-hover: var(--color-green-50); --background-success-strong-disabled: var(--color-green-95); --background-success-active: var(--color-green-70); --background-success-weak-active: var(--color-green-30); --background-success-strong-active: var(--color-green-90); --background-info-weak: var(--color-blue-30); --background-info-weak-hover: var(--color-blue-80); --background-info-weak-disabled: var(--color-blue-95); --background-info-default: var(--color-blue-50); --background-info-hover: var(--color-blue-60); --background-info-disabled: var(--color-blue-90); --background-info-strong: var(--color-blue-30); --background-info-strong-hover: var(--color-blue-40); --background-info-strong-disabled: var(--color-blue-90); --background-info-active: var(--color-blue-60); --background-info-weak-active: var(--color-blue-20); --background-info-strong-active: var(--color-blue-20); --background-critical-weak: var(--color-red-30); --background-critical-weak-hover: var(--color-red-40); --background-critical-weak-disabled: var(--color-red-10); --background-critical-default: var(--color-red-50); --background-critical-hover: var(--color-red-30); --background-critical-disabled: var(--color-red-10); --background-critical-strong: var(--color-red-40); --background-critical-strong-hover: var(--color-red-40); --background-critical-strong-disabled: var(--color-red-90); --background-critical-active: var(--color-red-30); --background-critical-weak-active: var(--color-red-20); --background-critical-strong-active: var(--color-red-20); --background-warning-weak: var(--color-orange-50); --background-warning-weak-hover: var(--color-orange-95); --background-warning-weak-disabled: var(--color-orange-99); --background-warning-default: var(--color-orange-70); --background-warning-hover: var(--color-orange-80); --background-warning-disabled: var(--color-orange-95); --background-warning-strong: var(--color-orange-60); --background-warning-strong-hover: var(--color-orange-70); --background-warning-strong-disabled: var(--color-orange-95); --background-warning-strong-active: var(--color-orange-90); --background-warning-active: var(--color-orange-60); --background-warning-weak-active: var(--color-orange-50); --background-neutral-weak: var(--color-grey-30); --background-neutral-weak-hover: var(--color-grey-95); --background-neutral-weak-disabled: var(--color-grey-20); --background-neutral-default: var(--color-grey-70); --background-neutral-hover: var(--color-grey-80); --background-neutral-disabled: var(--color-grey-30); --background-neutral-strong: var(--color-grey-40); --background-neutral-strong-hover: var(--color-grey-40); --background-neutral-strong-disabled: var(--color-grey-90); --background-neutral-uncolored: var(--color-lilac-20); --background-neutral-strong-active: var(--color-grey-50); --background-neutral-active: var(--color-grey-60); --background-neutral-weak-active: var(--color-grey-20); --background-neutral-body: var(--color-lilac-10); --background-neutral-shadow: var(--color-transparent); --background-secondary-weak: var(--color-lilac-30); --background-secondary-strong: var(--color-lilac-40); --background-secondary-hover: var(--color-lilac-60); --background-secondary-active: var(--color-lilac-50); --background-secondary-disabled: var(--color-lilac-30); --background-secondary-weak-hover: var(--color-lilac-40); --background-secondary-strong-hover: var(--color-lilac-70); --background-secondary-weak-active: var(--color-lilac-40); --background-secondary-strong-active: var(--color-lilac-60); --background-secondary-weak-disabled: var(--color-lilac-10); --background-secondary-strong-disabled: var(--color-lilac-20); --background-secondary-default: var(--color-lilac-40); --background-primary-weak: var(--color-violet-40); --background-primary-strong: var(--color-violet-99); --background-primary-hover: var(--color-violet-80); --background-primary-active: var(--color-violet-95); --background-primary-disabled: var(--color-violet-20); --background-primary-weak-hover: var(--color-violet-30); --background-primary-weak-active: var(--color-violet-30); --background-primary-weak-disabled: var(--color-violet-10); --background-primary-strong-hover: var(--color-violet-99); --background-primary-strong-active: var(--color-violet-95); --background-primary-strong-disabled: var(--color-violet-30); --background-primary-default: var(--color-violet-95); --content-accent-weak: var(--color-turqoise-80); --content-accent-weak-hover: var(--color-turqoise-90); --content-accent-weak-disabled: var(--color-turqoise-99); --content-accent-default: var(--color-turqoise-90); --content-accent-hover: var(--color-turqoise-70); --content-accent-disabled: var(--color-turqoise-95); --content-accent-strong: var(--color-turqoise-95); --content-accent-strong-hover: var(--color-turqoise-60); --content-accent-strong-disabled: var(--color-turqoise-95); --content-accent-strong-active: var(--color-turqoise-90); --content-accent-active: var(--color-turqoise-70); --content-accent-weak-active: var(--color-turqoise-30); --content-success-weak: var(--color-green-50); --content-success-weak-hover: var(--color-green-80); --content-success-weak-disabled: var(--color-green-40); --content-success-default: var(--color-green-90); --content-success-hover: var(--color-green-60); --content-success-disabled: var(--color-green-40); --content-success-strong: var(--color-green-99); --content-success-strong-hover: var(--color-green-80); --content-success-strong-disabled: var(--color-green-40); --content-success-strong-active: var(--color-green-90); --content-success-active: var(--color-green-80); --content-success-weak-active: var(--color-green-70); --content-info-weak: var(--color-blue-50); --content-info-weak-hover: var(--color-blue-80); --content-info-weak-disabled: var(--color-blue-40); --content-info-default: var(--color-blue-90); --content-info-hover: var(--color-blue-60); --content-info-disabled: var(--color-blue-40); --content-info-strong: var(--color-blue-99); --content-info-strong-hover: var(--color-blue-80); --content-info-strong-disabled: var(--color-blue-40); --content-info-strong-active: var(--color-blue-90); --content-info-active: var(--color-blue-80); --content-info-weak-active: var(--color-blue-70); --content-critical-weak: var(--color-red-50); --content-critical-weak-hover: var(--color-red-80); --content-critical-weak-disabled: var(--color-red-40); --content-critical-default: var(--color-red-90); --content-critical-hover: var(--color-red-60); --content-critical-disabled: var(--color-red-40); --content-critical-strong: var(--color-red-critical); --content-critical-strong-hover: var(--color-red-80); --content-critical-strong-disabled: var(--color-red-40); --content-critical-strong-active: var(--color-red-90); --content-critical-active: var(--color-red-80); --content-critical-weak-active: var(--color-red-70); --content-critical-uncolored: var(--color-red-99); --content-warning-weak: var(--color-orange-50); --content-warning-weak-hover: var(--color-orange-80); --content-warning-weak-disabled: var(--color-orange-40); --content-warning-default: var(--color-orange-90); --content-warning-hover: var(--color-orange-60); --content-warning-disabled: var(--color-orange-40); --content-warning-strong: var(--color-orange-99); --content-warning-strong-hover: var(--color-orange-80); --content-warning-strong-disabled: var(--color-orange-40); --content-warning-strong-active: var(--color-orange-90); --content-warning-active: var(--color-orange-80); --content-warning-weak-active: var(--color-orange-70); --content-neutral-weak: var(--color-grey-50); --content-neutral-weak-hover: var(--color-grey-80); --content-neutral-weak-disabled: var(--color-grey-50); --content-neutral-default: var(--color-grey-90); --content-neutral-hover: var(--color-grey-60); --content-neutral-disabled: var(--color-grey-50); --content-neutral-strong: var(--color-grey-99); --content-neutral-strong-hover: var(--color-grey-80); --content-neutral-strong-disabled: var(--color-grey-50); --content-neutral-uncolored: var(--color-violet-20); --content-neutral-strong-active: var(--color-grey-90); --content-neutral-active: var(--color-grey-80); --content-neutral-weak-active: var(--color-grey-70); --content-primary-weak: var(--color-violet-90); --content-primary-strong: var(--color-lilac-90); --content-primary-hover: var(--color-violet-80); --content-primary-active: var(--color-violet-70); --content-primary-disabled: var(--color-violet-20); --content-primary-weak-hover: var(--color-violet-50); --content-primary-weak-active: var(--color-violet-30); --content-primary-weak-disabled: var(--color-violet-10); --content-primary-strong-hover: var(--color-violet-50); --content-primary-strong-active: var(--color-violet-70); --content-primary-strong-disabled: var(--color-violet-50); --content-primary-default: var(--color-violet-99); --content-secondary-weak: var(--color-lilac-50); --content-secondary-strong: var(--color-lilac-99); --content-secondary-hover: var(--color-lilac-95); --content-secondary-active: var(--color-lilac-95); --content-secondary-disabled: var(--color-lilac-40); --content-secondary-weak-hover: var(--color-lilac-60); --content-secondary-weak-active: var(--color-lilac-60); --content-secondary-weak-disabled: var(--color-lilac-20); --content-secondary-strong-hover: var(--color-lilac-99); --content-secondary-strong-active: var(--color-lilac-99); --content-secondary-strong-disabled: var(--color-lilac-40); --content-secondary-default: var(--color-lilac-90); --border-accent-weak: var(--color-turqoise-40); --border-accent-weak-hover: var(--color-turqoise-50); --border-accent-weak-disabled: var(--color-turqoise-30); --border-accent-default: var(--color-turqoise-60); --border-accent-hover: var(--color-turqoise-70); --border-accent-disabled: var(--color-turqoise-30); --border-accent-strong: var(--color-turqoise-80); --border-accent-strong-hover: var(--color-turqoise-90); --border-accent-strong-disabled: var(--color-turqoise-30); --border-accent-strong-active: var(--color-turqoise-99); --border-accent-active: var(--color-turqoise-80); --border-accent-weak-active: var(--color-turqoise-60); --border-success-weak: var(--color-green-40); --border-success-weak-hover: var(--color-green-50); --border-success-weak-disabled: var(--color-green-30); --border-success-default: var(--color-green-60); --border-success-hover: var(--color-green-70); --border-success-disabled: var(--color-green-30); --border-success-strong: var(--color-green-80); --border-success-strong-hover: var(--color-green-90); --border-success-strong-disabled: var(--color-green-30); --border-success-strong-active: var(--color-green-99); --border-success-active: var(--color-green-80); --border-success-weak-active: var(--color-green-60); --border-info-weak: var(--color-blue-40); --border-info-weak-hover: var(--color-blue-50); --border-info-weak-disabled: var(--color-blue-30); --border-info-default: var(--color-blue-60); --border-info-hover: var(--color-blue-70); --border-info-disabled: var(--color-blue-30); --border-info-strong: var(--color-blue-80); --border-info-strong-hover: var(--color-blue-90); --border-info-strong-disabled: var(--color-blue-30); --border-info-strong-active: var(--color-blue-99); --border-info-active: var(--color-blue-80); --border-info-weak-active: var(--color-blue-60); --border-critical-weak: var(--color-red-40); --border-critical-weak-hover: var(--color-red-50); --border-critical-weak-disabled: var(--color-red-30); --border-critical-default: var(--color-red-60); --border-critical-hover: var(--color-red-70); --border-critical-disabled: var(--color-red-30); --border-critical-strong: var(--color-red-80); --border-critical-strong-hover: var(--color-red-90); --border-critical-strong-disabled: var(--color-red-30); --border-critical-strong-active: var(--color-red-99); --border-critical-active: var(--color-red-80); --border-critical-weak-active: var(--color-red-60); --border-warning-weak: var(--color-orange-40); --border-warning-weak-hover: var(--color-orange-50); --border-warning-weak-disabled: var(--color-orange-30); --border-warning-default: var(--color-orange-60); --border-warning-hover: var(--color-orange-70); --border-warning-disabled: var(--color-orange-30); --border-warning-strong: var(--color-orange-80); --border-warning-strong-hover: var(--color-orange-90); --border-warning-strong-disabled: var(--color-orange-30); --border-warning-strong-active: var(--color-orange-99); --border-warning-active: var(--color-orange-80); --border-warning-weak-active: var(--color-orange-60); --border-neutral-weak: var(--color-grey-40); --border-neutral-weak-hover: var(--color-grey-50); --border-neutral-weak-disabled: var(--color-grey-30); --border-neutral-default: var(--color-grey-60); --border-neutral-hover: var(--color-grey-70); --border-neutral-disabled: var(--color-grey-30); --border-neutral-strong: var(--color-grey-80); --border-neutral-strong-hover: var(--color-grey-90); --border-neutral-strong-disabled: var(--color-grey-30); --border-neutral-uncolored: var(--color-lilac-30); --border-neutral-strong-active: var(--color-grey-99); --border-neutral-active: var(--color-grey-80); --border-neutral-weak-active: var(--color-grey-60); --border-primary-weak: var(--color-violet-40); --border-primary-strong: var(--color-violet-99); --border-primary-hover: var(--color-violet-80); --border-primary-active: var(--color-turqoise-90); --border-primary-disabled: var(--color-violet-20); --border-primary-weak-hover: var(--color-violet-40); --border-primary-weak-active: var(--color-turqoise-90); --border-primary-weak-disabled: var(--color-violet-20); --border-primary-strong-hover: var(--color-violet-90); --border-primary-strong-active: var(--color-turqoise-90); --border-primary-strong-disabled: var(--color-violet-20); --border-primary-default: var(--color-violet-95); --border-secondary-default: var(--color-lilac-60); --border-secondary-weak: var(--color-lilac-40); --border-secondary-strong: var(--color-lilac-80); --border-secondary-hover: var(--color-lilac-70); --border-secondary-active: var(--color-lilac-80); --border-secondary-disabled: var(--color-lilac-30); --border-secondary-weak-hover: var(--color-lilac-50); --border-secondary-weak-active: var(--color-lilac-60); --border-secondary-weak-disabled: var(--color-lilac-30); --border-secondary-strong-hover: var(--color-lilac-90); --border-secondary-strong-active: var(--color-lilac-99); --border-secondary-strong-disabled: var(--color-lilac-30); --charts-primary-10: var(--color-violet-99); --charts-primary-20: var(--color-violet-95); --charts-primary-30: var(--color-violet-90); --charts-primary-40: var(--color-violet-80); --charts-primary-50: var(--color-violet-70); --charts-primary-60: var(--color-violet-60); --charts-primary-70: var(--color-violet-50); --charts-primary-80: var(--color-violet-40); --charts-primary-90: var(--color-violet-30); --charts-primary-100: var(--color-violet-20); --charts-secondary-10: var(--color-violet-99); --charts-secondary-20: var(--color-lilac-95); --charts-secondary-30: var(--color-lilac-90); --charts-secondary-40: var(--color-lilac-80); --charts-secondary-50: var(--color-lilac-70); --charts-secondary-60: var(--color-lilac-60); --charts-secondary-70: var(--color-lilac-50); --charts-secondary-80: var(--color-lilac-40); --charts-secondary-90: var(--color-lilac-30); --charts-secondary-100: var(--color-lilac-20); --charts-accent-10: var(--color-turqoise-99); --charts-accent-20: var(--color-turqoise-95); --charts-accent-30: var(--color-turqoise-90); --charts-accent-40: var(--color-turqoise-80); --charts-accent-50: var(--color-turqoise-70); --charts-accent-60: var(--color-turqoise-60); --charts-accent-70: var(--color-turqoise-50); --charts-accent-80: var(--color-turqoise-40); --charts-accent-90: var(--color-turqoise-30); --charts-accent-100: var(--color-turqoise-20); --charts-critical-10: var(--color-red-99); --charts-critical-20: var(--color-red-95); --charts-critical-30: var(--color-red-90); --charts-critical-40: var(--color-red-80); --charts-critical-50: var(--color-red-70); --charts-critical-60: var(--color-red-60); --charts-critical-70: var(--color-red-50); --charts-critical-80: var(--color-red-40); --charts-critical-90: var(--color-red-30); --charts-critical-100: var(--color-red-20); --charts-info-10: var(--color-blue-99); --charts-info-20: var(--color-blue-95); --charts-info-30: var(--color-blue-90); --charts-info-40: var(--color-blue-80); --charts-info-50: var(--color-blue-70); --charts-info-60: var(--color-blue-60); --charts-info-70: var(--color-blue-50); --charts-info-80: var(--color-blue-40); --charts-info-90: var(--color-blue-30); --charts-info-100: var(--color-blue-20); --charts-success-10: var(--color-green-99); --charts-success-20: var(--color-green-95); --charts-success-30: var(--color-green-90); --charts-success-40: var(--color-green-80); --charts-success-50: var(--color-green-70); --charts-success-60: var(--color-green-60); --charts-success-70: var(--color-green-50); --charts-success-80: var(--color-green-40); --charts-success-90: var(--color-green-30); --charts-success-100: var(--color-green-20); --charts-warning-10: var(--color-orange-99); --charts-warning-20: var(--color-orange-95); --charts-warning-30: var(--color-orange-90); --charts-warning-40: var(--color-orange-80); --charts-warning-50: var(--color-orange-70); --charts-warning-60: var(--color-orange-60); --charts-warning-70: var(--color-orange-50); --charts-warning-80: var(--color-orange-40); --charts-warning-90: var(--color-orange-30); --charts-warning-100: var(--color-orange-20); --charts-neutral-10: var(--color-grey-99); --charts-neutral-20: var(--color-grey-95); --charts-neutral-30: var(--color-grey-90); --charts-neutral-40: var(--color-grey-80); --charts-neutral-50: var(--color-grey-70); --charts-neutral-60: var(--color-grey-60); --charts-neutral-70: var(--color-grey-50); --charts-neutral-80: var(--color-grey-40); --charts-neutral-90: var(--color-grey-30); --charts-neutral-100: var(--color-grey-20); } .dark { --tio-elevated-border-width: 1px; --tio-popover-arrow-z-index: 1; --tio-header-bg-image: none; } .dark tio-header { --tio-header-bg: rgb(var(--background-neutral-uncolored)); --tio-header-text: rgb(var(--content-primary-default)); } .dark tio-search-input.tio-search-input--glassy { --tio-search-input-glassy-text: rgb(var(--content-primary-default)); } .tio-dropdown-menu-list tio-collapsible::part(header) { display: flex; align-items: center; width: 100%; cursor: default; user-select: none; position: relative; padding-left: var(--dropdown-menu-item-padding-left); padding-right: var(--dropdown-menu-item-padding-right); padding-top: var(--dropdown-menu-item-padding-y); padding-bottom: var(--dropdown-menu-item-padding-y); color: rgb(var(--dropdown-menu-item-text)); font-weight: 400; } .tio-dropdown-menu-list tio-collapsible:first-child::part(header) { border-top-left-radius: var(--dropdown-menu-border-radius); border-top-right-radius: var(--dropdown-menu-border-radius); } .tio-dropdown-menu-list tio-collapsible:last-child::part(header) { border-bottom-left-radius: var(--dropdown-menu-border-radius); border-bottom-right-radius: var(--dropdown-menu-border-radius); } .tio-dropdown-menu-list tio-collapsible::part(header):hover { background-color: rgb(var(--dropdown-menu-item-background-selected)); } .tio-breadcrumbs-separator { padding-top: var(--breadcrumbs-item-padding-y); padding-bottom: var(--breadcrumbs-item-padding-y); color: rgb(var(--breadcrumbs-item-text)); white-space: nowrap; display: inline-flex; align-items: center; margin-right: var(--breadcrumbs-gap) !important; } .tio-breadcrumbs-separator > * { display: inline-flex; align-items: center; } .tio-breadcrumbs--multistep tio-breadcrumbs-item { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); text-transform: uppercase; } tio-navbar-item > a, tio-navbar-item > button, tio-navbar-item [aria-haspopup='true'] { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding-left: var(--navigationbar-item-padding-x); padding-right: var(--navigationbar-item-padding-x); padding-top: var(--navigationbar-item-padding-y); padding-bottom: var(--navigationbar-item-padding-y); border-radius: var(--navigationbar-item-border-radius); color: inherit; } tio-navbar-item > a:hover, tio-navbar-item > button:hover, tio-navbar-item [aria-haspopup='true']:hover { background-color: rgb(var(--navigationbar-item-background-hover)); color: rgb(var(--content-neutral-uncolored)); } tio-navbar-item > tio-dropdown-menu { display: block; width: 100%; } tio-navbar-item > a:focus-visible, tio-navbar-item > button:focus-visible, tio-navbar-item [aria-haspopup='true']:focus-visible { outline-offset: -2px; } tio-navbar-item .tio-navbar__chevron { margin-inline-start: var(--spacing-2xs); } .tio-navbar--tabs tio-navbar-item > a, .tio-navbar--tabs tio-navbar-item > button, .tio-navbar--tabs tio-navbar-item [aria-haspopup='true'] { display: inline-flex; align-items: center; cursor: pointer; background-color: rgb(var(--tabs-item-background)); padding-left: var(--tabs-item-padding-x); padding-right: var(--tabs-item-padding-x); padding-top: var(--tabs-item-padding-y); padding-bottom: var(--tabs-item-padding-y); color: rgb(var(--tabs-item-text)); border-radius: var(--tabs-item-border-radius); white-space: nowrap; height: 100%; } .tio-navbar--tabs tio-navbar-item:hover { background-color: rgb(var(--tabs-item-background-hover)); } .tio-navbar--tabs tio-navbar-item[current] { font-weight: 600; background-color: rgb(var(--tabs-item-background-selected)); } tio-dropdown-menu-item > a, tio-dropdown-menu-item > button { display: block; width: 100%; margin: 0; padding-left: var(--dropdown-menu-item-padding-left); padding-right: var(--dropdown-menu-item-padding-left); padding-top: var(--dropdown-menu-item-padding-y); padding-bottom: var(--dropdown-menu-item-padding-y); text-decoration: none; } tio-dropdown-menu-item > a:hover, tio-dropdown-menu-item > button:hover { text-decoration: none; } tio-dropdown-menu-item > a:focus-visible, tio-dropdown-menu-item > button:focus-visible { outline: none; } tio-dropdown-menu-item:focus-visible::part(container), tio-dropdown-menu-item:has(> a:focus-visible)::part(container), tio-dropdown-menu-item:has(> button:focus-visible)::part(container) { outline: auto; outline-color: var(--tio-focus-ring-color, var(--tio-focus-ring-native)); outline-offset: -2px; } tio-dropdown-menu-item:has(> a)::part(container), tio-dropdown-menu-item:has(> button)::part(container) { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; } .tio-table-toolbar { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: var(--table-header-padding-y); padding-bottom: var(--table-header-padding-y); gap: var(--spacing-xs); color: rgb(var(--table-cell-text)); position: sticky; top: 0; background-color: rgb(var(--background-neutral-uncolored)); z-index: 1; } .tio-table__bottom { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: var(--table-footer-padding-y); padding-bottom: var(--table-footer-padding-y); gap: var(--spacing-sm); color: rgb(var(--table-cell-text)); position: sticky; bottom: 0; background-color: rgb(var(--background-neutral-uncolored)); } .tio-table--empty { box-sizing: border-box; display: flex; justify-content: center; align-items: center; color: rgb(var(--table-cell-text)); padding-left: var(--table-empty-padding-x); padding-right: var(--table-empty-padding-x); padding-top: var(--table-empty-padding-y); padding-bottom: var(--table-empty-padding-y); } .tio-table__search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tio-table__filter { display: flex; align-items: center; gap: 4px; } @media (max-width: 767.98px) { .tio-table__filter { flex-direction: column; align-items: stretch; width: 100%; } .tio-table__filter tio-search-input { order: -1; } .tio-table__filter tio-dropdown-select { max-width: none; } } .tio-table__select-count { display: flex; align-items: center; gap: 0.5rem; } .tio-table__select-count-label { display: none; } @media (min-width: 768px) { .tio-table__select-count-label { display: inline-block; } }