@layer reset, base, tokens, components, overrides, utilities;
@layer tokens {
:root { color-scheme: light dark; }
}
@layer tokens {
[data-surface="dark"] { color-scheme: dark; }
}
@layer tokens {
[data-surface="light"] { color-scheme: light; }
}
@property --var-ui-space-0 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-1 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-2 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-3 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-4 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-5 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-6 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-7 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-8 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-9 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-10 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-11 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-12 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-16 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-space-20 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-control-sm { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-control-md { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-control-lg { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-icon-sm { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-icon-md { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-icon-lg { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-size-nav-bar { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-opacity-disabled { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-opacity-muted { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-letterSpacing-tight { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-letterSpacing-normal { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-letterSpacing-wide { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-letterSpacing-caps { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-none { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-sm { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-md { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-lg { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-xl { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-full { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-radius-navItem { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-borderWidth-thin { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-borderWidth-default { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-borderWidth-thick { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontFamily-body { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-fontFamily-display { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-fontFamily-mono { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-fontSize-xs { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-sm { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-md { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-lg { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-xl { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-2xl { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontSize-3xl { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --var-ui-fontWeight-normal { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-fontWeight-medium { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-fontWeight-semibold { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-fontWeight-bold { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-lineHeight-tight { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-lineHeight-normal { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-lineHeight-relaxed { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-shadow-xs { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-sm { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-md { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-lg { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-xl { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-elevation-low { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-elevation-med { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-shadow-elevation-high { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-duration-fast { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-medium { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-slow { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-fast-min { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-fast-max { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-medium-min { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-medium-max { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-slow-min { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-duration-slow-max { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --var-ui-easing-standard { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-easing-emphasized { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-overlayFade { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-panelEnter { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-backdrop { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-surfaceFast { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-colorShift { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-transition-controlSurface { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-breakpoint-sm { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-breakpoint-md { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-breakpoint-lg { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-breakpoint-xl { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-zIndex-base { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-raised { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-sticky { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-dropdown { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-overlay { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-toast { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-modal { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-zIndex-max { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --var-ui-color-palette-rose-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-rose-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-crimson-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-ruby-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-red-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-tomato-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-orange-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-amber-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gold-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-yellow-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-lime-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-grass-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-green-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-emerald-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-jade-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-teal-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mint-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-cyan-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sky-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-blue-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-indigo-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-iris-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-violet-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-purple-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-plum-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-fuchsia-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-pink-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-bronze-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-brown-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-taupe-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-stone-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sand-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-olive-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-sage-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mist-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-slate-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-gray-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-zinc-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-mauve-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-9 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-palette-neutral-10 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-app { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-surface { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-subtle { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-elevated { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-popover { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-muted { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-secondary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-background-tertiary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-text-primary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-text-secondary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-text-disabled { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-text-placeholder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-accent-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-accent-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-accent-subtleBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-accent-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-accent-foregroundOnBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-success-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-success-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-success-subtleBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-success-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-success-foregroundOnBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-warning-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-warning-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-warning-subtleBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-warning-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-warning-foregroundOnBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-danger-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-danger-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-danger-subtleBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-danger-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-danger-foregroundOnBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-info-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-info-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-info-subtleBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-info-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-tone-info-foregroundOnBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-border-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-border-strong { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-border-focus { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-border-subtle { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-link-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-link-hover { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-hoverBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-activeBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-selectedBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-navItem-selectedForeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-ring-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-overlay-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-overlay-backdrop { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-overlay-panel { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-overlay-hover { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-overlay-pressed { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-skeleton-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-track-default { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-base { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-keyword { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-title { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-attr { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-string { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-builtIn { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-comment { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-name { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-section { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-bullet { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-addition { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-additionBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-deletion { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-code-deletionBackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-stroke-default { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-stroke-strong { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-alert-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-alert-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-alert-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-alert { --var-ui-alert-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); display: flex; align-items: flex-start; gap: var(--var-ui-space-3); padding: var(--var-ui-space-4); border-radius: var(--var-ui-radius-md); line-height: 1.55; }
}
@layer components {
.var-ui-alert[data-tone="info"] { --var-ui-alert-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-alert[data-tone="success"] { --var-ui-alert-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-success-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-alert[data-tone="warning"] { --var-ui-alert-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-alert[data-tone="danger"] { --var-ui-alert-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-alert[data-tone="tip"] { --var-ui-alert-semantic: var(--var-ui-color-tone-info-foreground); --var-ui-alert-solidbg: var(--var-ui-color-tone-info-background); --var-ui-alert-solidfg: var(--var-ui-color-tone-info-foregroundOnBackground); }
}
@layer components {
.var-ui-alert[data-appearance="subtle"] { background-color: color-mix(in srgb, var(--var-ui-alert-semantic) 12%, var(--var-ui-color-background-surface)); color: var(--var-ui-color-text-primary); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-alert-semantic); }
}
@layer components {
.var-ui-alert[data-appearance="solid"] { background-color: var(--var-ui-alert-solidbg); color: var(--var-ui-alert-solidfg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-alert-solidbg); }
}
@layer components {
.var-ui-alert[data-appearance="outline"] { background-color: transparent; color: var(--var-ui-color-text-primary); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-alert-semantic); }
}
@layer components {
.var-ui-alert__icon { flex-shrink: 0; display: inline-flex; margin-top: 2px; font-size: var(--var-ui-fontSize-lg); line-height: 1; }
}
@layer components {
.var-ui-alert__icon[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-alert__body { flex: 1; min-width: 0; }
}
@layer components {
.var-ui-alert__title { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); margin: 0; color: var(--var-ui-alert-semantic); }
}
@layer components {
.var-ui-alert__title[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-alert__content { font-size: var(--var-ui-fontSize-md); margin: 0; color: inherit; }
}
@layer components {
.var-ui-alert__content[data-content-gap="spaced"] { margin-top: var(--var-ui-space-1); }
}
@layer components {
.var-ui-alert__content[data-content-gap="flush"] { margin-top: 0; }
}
@layer components {
.var-ui-alert__action { margin-top: var(--var-ui-space-2); }
}
@layer components {
.var-ui-alert__actionLink { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: inherit; text-decoration: underline; text-underline-offset: 2px; }
}
@layer components {
.var-ui-alert__actionLink:hover { text-decoration: none; }
}
@layer components {
.var-ui-alert__actionLink:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-sm); }
}
@property --var-ui-app-shell-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-app-shell-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-app-shell-contentpadding { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-app-shell-asidewidth { syntax: "<length>"; inherits: true; initial-value: 12.5rem; }
@property --var-ui-app-shell-sidenavwidth { syntax: "<length> | auto"; inherits: true; initial-value: auto; }
@layer components {
.var-ui-app-shell { --var-ui-app-shell-background: var(--var-ui-color-background-app); --var-ui-app-shell-border: var(--var-ui-color-border-default); --var-ui-app-shell-contentpadding: 0px; --var-ui-app-shell-asidewidth: 12.5rem; --var-ui-app-shell-sidenavwidth: auto; position: relative; display: flex; flex-direction: column; min-width: 0; background-color: var(--var-ui-app-shell-background); }
}
@layer components {
.var-ui-app-shell[data-height="fill"] { min-height: 100dvh; height: 100dvh; max-height: 100dvh; overflow: hidden; }
}
@layer components {
.var-ui-app-shell[data-height="auto"] { min-height: auto; height: auto; }
}
@layer components {
.var-ui-app-shell[data-variant="wash"] { --var-ui-app-shell-background: var(--var-ui-color-background-app); }
}
@layer components {
.var-ui-app-shell[data-variant="surface"] { --var-ui-app-shell-background: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-app-shell[data-variant="section"] { --var-ui-app-shell-background: var(--var-ui-color-background-surface); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-app-shell-border); border-radius: var(--var-ui-radius-lg); box-shadow: var(--var-ui-shadow-xs); }
}
@layer components {
.var-ui-app-shell[data-variant="elevated"] { --var-ui-app-shell-background: var(--var-ui-color-background-elevated); box-shadow: var(--var-ui-shadow-sm); }
}
@layer components {
.var-ui-app-shell[data-content-padding="0"] { --var-ui-app-shell-contentpadding: 0px; }
}
@layer components {
.var-ui-app-shell[data-content-padding="1"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-app-shell[data-content-padding="2"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-app-shell[data-content-padding="3"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-3); }
}
@layer components {
.var-ui-app-shell[data-content-padding="4"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-app-shell[data-content-padding="5"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-5); }
}
@layer components {
.var-ui-app-shell[data-content-padding="6"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-6); }
}
@layer components {
.var-ui-app-shell[data-content-padding="8"] { --var-ui-app-shell-contentpadding: var(--var-ui-space-8); }
}
@layer components {
.var-ui-app-shell__banner { flex-shrink: 0; }
}
@layer components {
.var-ui-app-shell__frame { display: grid; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; grid-template-areas: "top top" "side main"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; }
}
@layer components {
[data-has-side-nav] .var-ui-app-shell__frame { grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr; }
}
@layer components {
[data-aside] .var-ui-app-shell__frame { grid-template-areas: "top top top" "side main aside"; grid-template-columns: auto 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-has-side-nav][data-aside] .var-ui-app-shell__frame { grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-aside]:not([data-has-side-nav]) .var-ui-app-shell__frame { grid-template-areas: "top top" "main aside"; grid-template-columns: 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-side-nav-collapsed] .var-ui-app-shell__frame { grid-template-areas: "top top" "main main"; grid-template-columns: 1fr; }
}
@layer components {
[data-side-nav-collapsed][data-aside] .var-ui-app-shell__frame { grid-template-areas: "top top top" "main aside"; grid-template-columns: 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-side-nav-collapsed][data-aside-collapsed] .var-ui-app-shell__frame { grid-template-areas: "top top" "main main"; grid-template-columns: 1fr; }
}
@layer components {
[data-aside-collapsed] .var-ui-app-shell__frame { grid-template-areas: "top top" "side main"; grid-template-columns: auto 1fr; }
}
@layer components {
[data-aside-collapsed][data-has-side-nav] .var-ui-app-shell__frame { grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr; }
}
@layer components {
[data-layout="alt"] .var-ui-app-shell__frame { grid-template-areas: "side top" "side main"; grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr; grid-template-rows: auto 1fr; }
}
@layer components {
[data-layout="alt"][data-aside] .var-ui-app-shell__frame { grid-template-areas: "side top top" "side main aside"; grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-layout="alt"][data-side-nav-collapsed] .var-ui-app-shell__frame { grid-template-areas: "top" "main"; grid-template-columns: 1fr; }
}
@layer components {
[data-layout="alt"][data-side-nav-collapsed][data-aside] .var-ui-app-shell__frame { grid-template-areas: "top top" "main aside"; grid-template-columns: 1fr var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-layout="alt"][data-side-nav-collapsed][data-aside-collapsed] .var-ui-app-shell__frame { grid-template-areas: "top" "main"; grid-template-columns: 1fr; }
}
@layer components {
[data-layout="alt"][data-aside-collapsed] .var-ui-app-shell__frame { grid-template-areas: "side top" "side main"; grid-template-columns: var(--var-ui-app-shell-sidenavwidth) 1fr; }
}
@layer components {
[data-header-hidden]:not([data-header-offset]) .var-ui-app-shell__frame { grid-template-rows: 0fr 1fr; }
}
@layer components {
[data-mobile] .var-ui-app-shell__frame { grid-template-areas: "top" "main"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}
@layer components {
.var-ui-app-shell__topNav { grid-area: top; min-width: 0; z-index: 2; flex-shrink: 0; transition: transform var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
[data-header-hidden][data-header-offset] .var-ui-app-shell__topNav { transform: translateY(-100%); }
}
@layer components {
[data-header-hidden]:not([data-header-offset]) .var-ui-app-shell__topNav { transform: none; min-height: 0; height: 0; overflow: hidden; visibility: hidden; }
}
@layer components {
.var-ui-app-shell__sideNav { grid-area: side; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; transition: transform var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
[data-has-side-nav] .var-ui-app-shell__sideNav { width: var(--var-ui-app-shell-sidenavwidth); }
}
@layer components {
[data-side-nav-collapsed] .var-ui-app-shell__sideNav { display: none; }
}
@layer components {
[data-mobile] .var-ui-app-shell__sideNav { display: none; }
}
@layer components {
.var-ui-app-shell__main { grid-area: main; min-height: 0; min-width: 0; overflow: auto; padding: var(--var-ui-app-shell-contentpadding); }
}
@layer components {
.var-ui-app-shell__aside { grid-area: aside; min-height: 0; min-width: 0; overflow: auto; position: sticky; top: 0; align-self: start; max-height: 100%; transition: transform var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
[data-aside] .var-ui-app-shell__aside { width: var(--var-ui-app-shell-asidewidth); }
}
@layer components {
[data-aside-collapsed] .var-ui-app-shell__aside { display: none; }
}
@layer components {
[data-mobile] .var-ui-app-shell__aside { display: none; }
}
@layer components {
.var-ui-app-shell__skipLink { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@layer components {
.var-ui-app-shell__skipLink:focus-visible { position: fixed; top: var(--var-ui-space-2); inset-inline-start: var(--var-ui-space-2); z-index: var(--var-ui-zIndex-max); width: auto; height: auto; margin: 0; padding: var(--var-ui-space-2) var(--var-ui-space-3); overflow: visible; clip: auto; white-space: normal; border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-color-background-surface); color: var(--var-ui-color-text-primary); box-shadow: var(--var-ui-shadow-md); outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; text-decoration: none; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-aspect-ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
}
@layer components {
.var-ui-aspect-ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@property --var-ui-avatar-size { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --var-ui-avatar-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-avatar-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-avatar { --var-ui-avatar-size: 32px; --var-ui-avatar-background: var(--var-ui-color-tone-accent-subtleBackground); --var-ui-avatar-foreground: var(--var-ui-color-text-primary); position: relative; display: inline-flex; width: var(--var-ui-avatar-size); height: var(--var-ui-avatar-size); border-radius: 50%; background-color: var(--var-ui-avatar-background); color: var(--var-ui-avatar-foreground); flex-shrink: 0; vertical-align: middle; }
}
@layer components {
.var-ui-avatar[data-size="xs"] { --var-ui-avatar-size: 20px; }
}
@layer components {
.var-ui-avatar[data-size="sm"] { --var-ui-avatar-size: 24px; }
}
@layer components {
.var-ui-avatar[data-size="md"] { --var-ui-avatar-size: 32px; }
}
@layer components {
.var-ui-avatar[data-size="lg"] { --var-ui-avatar-size: 40px; }
}
@layer components {
.var-ui-avatar[data-size="xl"] { --var-ui-avatar-size: 56px; }
}
@layer components {
.var-ui-avatar__image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
}
@layer components {
.var-ui-avatar__initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: calc(var(--var-ui-avatar-size) * 0.4); font-weight: var(--var-ui-fontWeight-semibold); text-transform: uppercase; user-select: none; }
}
@layer components {
.var-ui-avatar__status { position: absolute; right: -1px; bottom: -1px; display: inline-flex; border-radius: 50%; border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-color-background-surface); }
}
@property --var-ui-avatar-group-ringcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-avatar-group { --var-ui-avatar-group-ringcolor: var(--var-ui-color-background-surface); display: inline-flex; align-items: center; }
}
@layer components {
.var-ui-avatar-group__item { margin-left: calc(var(--var-ui-space-2) * -1); border-radius: 50%; box-shadow: 0 0 0 2px var(--var-ui-avatar-group-ringcolor); }
}
@layer components {
.var-ui-avatar-group__item:first-child { margin-left: 0; }
}
@layer components {
.var-ui-avatar-group__overflow { margin-left: calc(var(--var-ui-space-2) * -1); display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 var(--var-ui-space-1); border-radius: 50%; background-color: var(--var-ui-color-background-subtle); box-shadow: 0 0 0 2px var(--var-ui-avatar-group-ringcolor); font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-color-text-secondary); }
}
@property --var-ui-badge-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-badge-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-badge-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-badge-bordercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-badge-backgroundcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-badge-textcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-badge { --var-ui-badge-semantic: var(--var-ui-color-text-secondary); --var-ui-badge-solidbg: var(--var-ui-color-background-subtle); --var-ui-badge-solidfg: var(--var-ui-color-text-secondary); --var-ui-badge-bordercolor: var(--var-ui-color-border-default); --var-ui-badge-backgroundcolor: var(--var-ui-color-background-subtle); --var-ui-badge-textcolor: var(--var-ui-color-text-secondary); display: inline-flex; align-items: center; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); line-height: 1; padding: var(--var-ui-space-1) var(--var-ui-space-2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-badge-bordercolor); background-color: var(--var-ui-badge-backgroundcolor); color: var(--var-ui-badge-textcolor); }
}
@layer components {
.var-ui-badge[data-tone="neutral"] { --var-ui-badge-semantic: var(--var-ui-color-text-secondary); --var-ui-badge-solidbg: var(--var-ui-color-text-primary); --var-ui-badge-solidfg: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-badge[data-tone="accent"] { --var-ui-badge-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-badge-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-badge-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-badge[data-tone="success"] { --var-ui-badge-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-badge-solidbg: var(--var-ui-color-tone-success-background); --var-ui-badge-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-badge[data-tone="warning"] { --var-ui-badge-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-badge-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-badge-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-badge[data-tone="danger"] { --var-ui-badge-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-badge-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-badge-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-badge[data-tone="tip"] { --var-ui-badge-semantic: var(--var-ui-color-tone-info-foreground); --var-ui-badge-solidbg: var(--var-ui-color-tone-info-background); --var-ui-badge-solidfg: var(--var-ui-color-tone-info-foregroundOnBackground); }
}
@layer components {
.var-ui-badge[data-appearance="subtle"] { --var-ui-badge-bordercolor: color-mix(in srgb, var(--var-ui-badge-semantic) 38%, var(--var-ui-color-border-default)); --var-ui-badge-backgroundcolor: color-mix(in srgb, var(--var-ui-badge-semantic) 12%, var(--var-ui-color-background-surface)); --var-ui-badge-textcolor: var(--var-ui-badge-semantic); }
}
@layer components {
.var-ui-badge[data-appearance="solid"] { --var-ui-badge-bordercolor: var(--var-ui-badge-solidbg); --var-ui-badge-backgroundcolor: var(--var-ui-badge-solidbg); --var-ui-badge-textcolor: var(--var-ui-badge-solidfg); }
}
@layer components {
.var-ui-badge[data-appearance="outline"] { --var-ui-badge-bordercolor: var(--var-ui-badge-semantic); --var-ui-badge-backgroundcolor: transparent; --var-ui-badge-textcolor: var(--var-ui-badge-semantic); }
}
@property --var-ui-chip-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-bordercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-backgroundcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-textcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chip-removehoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-chip { --var-ui-chip-semantic: var(--var-ui-color-text-secondary); --var-ui-chip-solidbg: var(--var-ui-color-background-subtle); --var-ui-chip-solidfg: var(--var-ui-color-text-secondary); --var-ui-chip-bordercolor: var(--var-ui-color-border-default); --var-ui-chip-backgroundcolor: var(--var-ui-color-background-subtle); --var-ui-chip-textcolor: var(--var-ui-color-text-secondary); --var-ui-chip-removehoverbackground: var(--var-ui-color-background-elevated); display: inline-flex; align-items: center; gap: var(--var-ui-space-1); max-width: 100%; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); line-height: 1; padding: var(--var-ui-space-1) var(--var-ui-space-2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-chip-bordercolor); background-color: var(--var-ui-chip-backgroundcolor); color: var(--var-ui-chip-textcolor); }
}
@layer components {
.var-ui-chip[data-interactive] { cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
}
@layer components {
.var-ui-chip[data-interactive]:hover:not([data-disabled]) { background-color: var(--var-ui-color-background-elevated); }
}
@layer components {
.var-ui-chip[data-interactive]:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-chip[data-selected] { --var-ui-chip-bordercolor: var(--var-ui-chip-solidbg); --var-ui-chip-backgroundcolor: var(--var-ui-chip-solidbg); --var-ui-chip-textcolor: var(--var-ui-chip-solidfg); }
}
@layer components {
.var-ui-chip[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-chip[data-tone="neutral"] { --var-ui-chip-semantic: var(--var-ui-color-text-secondary); --var-ui-chip-solidbg: var(--var-ui-color-text-primary); --var-ui-chip-solidfg: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-chip[data-tone="accent"] { --var-ui-chip-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-chip-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-chip-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-chip[data-tone="success"] { --var-ui-chip-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-chip-solidbg: var(--var-ui-color-tone-success-background); --var-ui-chip-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-chip[data-tone="warning"] { --var-ui-chip-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-chip-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-chip-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-chip[data-tone="danger"] { --var-ui-chip-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-chip-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-chip-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-chip[data-tone="tip"] { --var-ui-chip-semantic: var(--var-ui-color-tone-info-foreground); --var-ui-chip-solidbg: var(--var-ui-color-tone-info-background); --var-ui-chip-solidfg: var(--var-ui-color-tone-info-foregroundOnBackground); }
}
@layer components {
.var-ui-chip[data-appearance="subtle"] { --var-ui-chip-bordercolor: color-mix(in srgb, var(--var-ui-chip-semantic) 38%, var(--var-ui-color-border-default)); --var-ui-chip-backgroundcolor: color-mix(in srgb, var(--var-ui-chip-semantic) 12%, var(--var-ui-color-background-surface)); --var-ui-chip-textcolor: var(--var-ui-chip-semantic); }
}
@layer components {
.var-ui-chip[data-appearance="solid"] { --var-ui-chip-bordercolor: var(--var-ui-chip-solidbg); --var-ui-chip-backgroundcolor: var(--var-ui-chip-solidbg); --var-ui-chip-textcolor: var(--var-ui-chip-solidfg); }
}
@layer components {
.var-ui-chip[data-appearance="outline"] { --var-ui-chip-bordercolor: var(--var-ui-chip-semantic); --var-ui-chip-backgroundcolor: transparent; --var-ui-chip-textcolor: var(--var-ui-chip-semantic); }
}
@layer components {
.var-ui-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-chip__removeButton { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; appearance: none; border: none; background: transparent; color: inherit; cursor: pointer; border-radius: var(--var-ui-radius-full); padding: 2px; margin-inline-end: calc(var(--var-ui-space-1) * -0.5); }
}
@layer components {
.var-ui-chip__removeButton:hover { background-color: var(--var-ui-chip-removehoverbackground); }
}
@layer components {
.var-ui-chip__removeButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--var-ui-space-2); }
}
@property --var-ui-banner-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-banner-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-banner-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-banner { --var-ui-banner-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-banner-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-banner-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); display: flex; align-items: center; gap: var(--var-ui-space-3); width: 100%; padding: var(--var-ui-space-3) var(--var-ui-space-4); font-size: var(--var-ui-fontSize-md); line-height: 1.5; }
}
@layer components {
.var-ui-banner[data-tone="info"] { --var-ui-banner-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-banner-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-banner-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-banner[data-tone="success"] { --var-ui-banner-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-banner-solidbg: var(--var-ui-color-tone-success-background); --var-ui-banner-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-banner[data-tone="warning"] { --var-ui-banner-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-banner-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-banner-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-banner[data-tone="danger"] { --var-ui-banner-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-banner-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-banner-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-banner[data-appearance="subtle"] { background-color: color-mix(in srgb, var(--var-ui-banner-semantic) 12%, var(--var-ui-color-background-surface)); color: var(--var-ui-color-text-primary); border-block-width: var(--var-ui-borderWidth-default); border-block-style: solid; border-block-color: var(--var-ui-banner-semantic); }
}
@layer components {
.var-ui-banner[data-appearance="solid"] { background-color: var(--var-ui-banner-solidbg); color: var(--var-ui-banner-solidfg); }
}
@layer components {
.var-ui-banner[data-appearance="outline"] { background-color: transparent; color: var(--var-ui-color-text-primary); border-block-width: var(--var-ui-borderWidth-default); border-block-style: solid; border-block-color: var(--var-ui-banner-semantic); }
}
@layer components {
.var-ui-banner__icon { flex-shrink: 0; display: inline-flex; color: var(--var-ui-banner-semantic); }
}
@layer components {
.var-ui-banner__icon[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-banner__content { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-banner__title { font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-banner-semantic); }
}
@layer components {
.var-ui-banner__title[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-banner__actions { display: flex; gap: var(--var-ui-space-2); flex-shrink: 0; }
}
@layer components {
.var-ui-banner__dismiss { appearance: none; border: none; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: var(--var-ui-space-1); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-banner__dismiss:hover { background-color: color-mix(in srgb, var(--var-ui-banner-semantic) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-banner__dismiss:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@property --var-ui-breadcrumbs-separator { syntax: "*"; inherits: true; initial-value: "/"; }
@property --var-ui-breadcrumbs-textcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-breadcrumbs-currentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-breadcrumbs { --var-ui-breadcrumbs-separator: "/"; --var-ui-breadcrumbs-textcolor: var(--var-ui-color-text-secondary); --var-ui-breadcrumbs-currentcolor: var(--var-ui-color-text-primary); display: block; }
}
@layer components {
.var-ui-breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-breadcrumbs-textcolor); }
}
@layer components {
.var-ui-breadcrumbs__item:not(:last-child)::after { content: var(--var-ui-breadcrumbs-separator); margin-inline-start: var(--var-ui-space-1); color: var(--var-ui-breadcrumbs-textcolor); }
}
@layer components {
.var-ui-breadcrumbs__item[data-current] { color: var(--var-ui-breadcrumbs-currentcolor); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-breadcrumbs__ellipsisItem { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-breadcrumbs-textcolor); }
}
@layer components {
.var-ui-breadcrumbs__ellipsisItem:not(:last-child)::after { content: var(--var-ui-breadcrumbs-separator); margin-inline-start: var(--var-ui-space-1); color: var(--var-ui-breadcrumbs-textcolor); }
}
@layer components {
.var-ui-breadcrumbs__link { color: inherit; text-decoration: none; appearance: none; border: none; background: transparent; padding: 0; font: inherit; cursor: pointer; }
}
@layer components {
.var-ui-breadcrumbs__link:hover { text-decoration: underline; }
}
@layer components {
.var-ui-breadcrumbs__link[data-disabled] { cursor: default; text-decoration: none; }
}
@property --var-ui-button-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-button-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-button-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-button-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-button-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-button-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-button { --var-ui-button-semantic: var(--var-ui-color-text-primary); --var-ui-button-solidbg: var(--var-ui-color-text-primary); --var-ui-button-solidfg: var(--var-ui-color-background-surface); --var-ui-button-border: var(--var-ui-color-border-default); --var-ui-button-background: var(--var-ui-color-background-surface); --var-ui-button-foreground: var(--var-ui-color-text-primary); appearance: none; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-button-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-button-background); color: var(--var-ui-button-foreground); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); box-sizing: border-box; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--var-ui-space-2); transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease; }
}
@layer components {
.var-ui-button:active { transform: translateY(1px); }
}
@layer components {
.var-ui-button:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-button[disabled] { opacity: 0.5; cursor: not-allowed; }
}
@layer components {
.var-ui-button[data-tone="neutral"] { --var-ui-button-semantic: var(--var-ui-color-text-primary); --var-ui-button-solidbg: var(--var-ui-color-text-primary); --var-ui-button-solidfg: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-button[data-tone="accent"] { --var-ui-button-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-button-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-button-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-button[data-tone="success"] { --var-ui-button-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-button-solidbg: var(--var-ui-color-tone-success-background); --var-ui-button-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-button[data-tone="warning"] { --var-ui-button-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-button-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-button-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-button[data-tone="danger"] { --var-ui-button-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-button-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-button-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-button[data-tone="info"] { --var-ui-button-semantic: var(--var-ui-color-tone-info-foreground); --var-ui-button-solidbg: var(--var-ui-color-tone-info-background); --var-ui-button-solidfg: var(--var-ui-color-tone-info-foregroundOnBackground); }
}
@layer components {
.var-ui-button[data-appearance="filled"] { --var-ui-button-border: var(--var-ui-button-solidbg); --var-ui-button-background: var(--var-ui-button-solidbg); --var-ui-button-foreground: var(--var-ui-button-solidfg); }
}
@layer components {
.var-ui-button[data-appearance="filled"]:hover:not([disabled]) { --var-ui-button-background: color-mix(in oklch, var(--var-ui-button-solidbg) 88%, black); --var-ui-button-border: color-mix(in oklch, var(--var-ui-button-solidbg) 88%, black); }
}
@layer components {
.var-ui-button[data-appearance="outline"] { --var-ui-button-border: var(--var-ui-button-semantic); --var-ui-button-background: transparent; --var-ui-button-foreground: var(--var-ui-button-semantic); }
}
@layer components {
.var-ui-button[data-appearance="outline"]:hover:not([disabled]) { --var-ui-button-background: color-mix(in srgb, var(--var-ui-button-semantic) 18%, var(--var-ui-color-background-surface)); --var-ui-button-border: var(--var-ui-button-semantic); }
}
@layer components {
.var-ui-button[data-appearance="subtle"] { --var-ui-button-border: color-mix(in srgb, var(--var-ui-button-semantic) 38%, var(--var-ui-color-border-default)); --var-ui-button-background: color-mix(in srgb, var(--var-ui-button-semantic) 12%, var(--var-ui-color-background-surface)); --var-ui-button-foreground: var(--var-ui-button-semantic); }
}
@layer components {
.var-ui-button[data-appearance="subtle"]:hover:not([disabled]) { --var-ui-button-border: var(--var-ui-button-semantic); }
}
@layer components {
.var-ui-button[data-appearance="ghost"] { --var-ui-button-border: transparent; --var-ui-button-background: transparent; --var-ui-button-foreground: var(--var-ui-button-semantic); }
}
@layer components {
.var-ui-button[data-appearance="ghost"]:hover:not([disabled]) { --var-ui-button-background: color-mix(in srgb, var(--var-ui-button-semantic) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-button[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-button[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-button[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-5); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-button[data-layout="icon"] { padding: 0; aspect-ratio: 1; width: auto; }
}
@layer components {
.var-ui-button[data-elevated] { box-shadow: var(--var-ui-shadow-md); }
}
@layer components {
.var-ui-button-group { display: inline-flex; align-items: stretch; }
}
@layer components {
.var-ui-button-group > * { border-radius: 0; position: relative; }
}
@layer components {
.var-ui-button-group > * + * { margin-inline-start: -1px; }
}
@layer components {
.var-ui-button-group > *:first-child { border-start-start-radius: var(--var-ui-radius-md); border-end-start-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-button-group > *:last-child { border-start-end-radius: var(--var-ui-radius-md); border-end-end-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-button-group > *:hover, .var-ui-button-group > *:focus-visible { z-index: 1; }
}
@property --var-ui-field-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-field-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-field-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-field { --var-ui-field-labelcolor: var(--var-ui-color-text-primary); --var-ui-field-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-field-errorcolor: var(--var-ui-color-tone-danger-foreground); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-field__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-field-labelcolor); }
}
@layer components {
.var-ui-field__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-field-descriptioncolor); }
}
@layer components {
.var-ui-field__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-field-errorcolor); }
}
@property --var-ui-calendar-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-navbuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-navbuttonhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-headercellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-cellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-cellhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-cellselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-cellselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-calendar-celldisabledcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-calendar { --var-ui-calendar-headingcolor: var(--var-ui-color-text-primary); --var-ui-calendar-navbuttoncolor: var(--var-ui-color-text-secondary); --var-ui-calendar-navbuttonhoverbackground: var(--var-ui-color-background-subtle); --var-ui-calendar-headercellcolor: var(--var-ui-color-text-secondary); --var-ui-calendar-cellcolor: var(--var-ui-color-text-primary); --var-ui-calendar-cellhoverbackground: var(--var-ui-color-background-subtle); --var-ui-calendar-cellselectedbackground: var(--var-ui-color-tone-accent-background); --var-ui-calendar-cellselectedcolor: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-calendar-celldisabledcolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-2); width: fit-content; }
}
@layer components {
.var-ui-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-2); }
}
@layer components {
.var-ui-calendar__heading { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-calendar-headingcolor); }
}
@layer components {
.var-ui-calendar__navButton { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-calendar-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-calendar__navButton[data-hovered] { background-color: var(--var-ui-calendar-navbuttonhoverbackground); }
}
@layer components {
.var-ui-calendar__navButton[data-disabled] { opacity: 0.4; cursor: not-allowed; }
}
@layer components {
.var-ui-calendar__grid { border-collapse: collapse; width: 100%; }
}
@layer components {
.var-ui-calendar__headerCell { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-calendar-headercellcolor); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-calendar__cell { text-align: center; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-calendar-cellcolor); padding: var(--var-ui-space-1); cursor: pointer; }
}
@layer components {
.var-ui-calendar__cell > * { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 auto; border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-calendar__cell[data-hovered] > * { background-color: var(--var-ui-calendar-cellhoverbackground); }
}
@layer components {
.var-ui-calendar__cell[data-selected] > * { background-color: var(--var-ui-calendar-cellselectedbackground); color: var(--var-ui-calendar-cellselectedcolor); }
}
@layer components {
.var-ui-calendar__cell[data-outside-month] { opacity: 0.4; }
}
@layer components {
.var-ui-calendar__cell[data-disabled] { color: var(--var-ui-calendar-celldisabledcolor); cursor: not-allowed; }
}
@property --var-ui-card-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-card-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-card-titlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-card-bodycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-card-linktitlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-card { --var-ui-card-border: var(--var-ui-color-border-default); --var-ui-card-background: var(--var-ui-color-background-surface); --var-ui-card-titlecolor: var(--var-ui-color-text-primary); --var-ui-card-bodycolor: var(--var-ui-color-text-secondary); --var-ui-card-linktitlecolor: var(--var-ui-color-tone-accent-foreground); display: flex; flex-direction: column; gap: var(--var-ui-space-2); padding: var(--var-ui-space-4); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-card-border); background-color: var(--var-ui-card-background); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
}
@layer components {
.var-ui-card__title { margin: 0; font-size: var(--var-ui-fontSize-lg); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-card-titlecolor); line-height: 1.3; }
}
@layer components {
.var-ui-card__body { margin: 0; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-card-bodycolor); line-height: 1.55; }
}
@layer components {
.var-ui-card__grid { display: grid; gap: var(--var-ui-space-4); grid-template-columns: 1fr; }
}
@layer components {
@media (min-width: 640px) { .var-ui-card__grid { grid-template-columns: repeat(2, 1fr); } }
}
@layer components {
.var-ui-card__linkRoot { text-decoration: none; color: inherit; cursor: pointer; }
}
@layer components {
.var-ui-card__linkRoot:hover { --var-ui-card-border: var(--var-ui-color-border-strong); box-shadow: var(--var-ui-shadow-xs); }
}
@layer components {
.var-ui-card__linkRoot:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-card__linkTitle { color: var(--var-ui-card-linktitlecolor); text-decoration: none; }
}
@layer components {
.var-ui-card__linkTitle:hover { text-decoration: underline; }
}
@layer components {
.var-ui-card__linkDescription { margin: 0; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-card-bodycolor); line-height: 1.55; }
}
@layer components {
.var-ui-card__linkHint { margin-top: auto; padding-top: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-card-bodycolor); }
}
@property --var-ui-carousel-itemwidth { syntax: "<length>"; inherits: true; initial-value: 280px; }
@property --var-ui-carousel-controlbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-carousel-controlborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-carousel { --var-ui-carousel-itemwidth: 280px; --var-ui-carousel-controlbackground: var(--var-ui-color-background-surface); --var-ui-carousel-controlborder: var(--var-ui-color-border-default); display: grid; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-carousel__viewport { display: grid; grid-auto-flow: column; grid-auto-columns: var(--var-ui-carousel-itemwidth); gap: var(--var-ui-space-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--var-ui-space-1); padding-block: var(--var-ui-space-1); }
}
@layer components {
.var-ui-carousel__viewport:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-carousel__item { scroll-snap-align: start; min-width: 0; }
}
@layer components {
.var-ui-carousel__controls { display: flex; gap: var(--var-ui-space-2); justify-content: flex-end; }
}
@layer components {
.var-ui-carousel__control { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-carousel-controlborder); background-color: var(--var-ui-carousel-controlbackground); cursor: pointer; }
}
@layer components {
.var-ui-carousel__control:hover { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-carousel__control:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-center { display: grid; place-items: center; }
}
@layer components {
.var-ui-center[data-inline] { display: inline-grid; }
}
@property --var-ui-chat-composer-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chat-composer-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-chat-composer { --var-ui-chat-composer-border: var(--var-ui-color-border-default); --var-ui-chat-composer-background: var(--var-ui-color-background-surface); display: flex; align-items: flex-end; gap: var(--var-ui-space-2); padding: var(--var-ui-space-2); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-chat-composer-border); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-chat-composer-background); }
}
@layer components {
.var-ui-chat-composer__inputRow { flex: 1; min-width: 0; display: flex; }
}
@layer components {
.var-ui-chat-composer__input { flex: 1; min-width: 0; resize: none; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--var-ui-fontSize-md); line-height: 22px; color: var(--var-ui-color-text-primary); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-chat-composer__input::placeholder { color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-chat-composer__actions { display: flex; align-items: center; gap: var(--var-ui-space-1); flex-shrink: 0; }
}
@property --var-ui-chat-layout-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chat-layout-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-chat-layout { --var-ui-chat-layout-background: var(--var-ui-color-background-surface); --var-ui-chat-layout-border: var(--var-ui-color-border-default); position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
}
@layer components {
.var-ui-chat-layout__messageArea { flex: 1; min-height: 0; overflow-y: auto; }
}
@layer components {
.var-ui-chat-layout__dock { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: var(--var-ui-space-2); padding: var(--var-ui-space-3); background-color: var(--var-ui-chat-layout-background); border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-chat-layout-border); }
}
@layer components {
.var-ui-chat-message { display: flex; align-items: flex-start; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-chat-message[data-sender="user"] { flex-direction: row-reverse; }
}
@layer components {
.var-ui-chat-message[data-sender="assistant"] { flex-direction: row; }
}
@layer components {
.var-ui-chat-message__avatar { flex-shrink: 0; }
}
@layer components {
.var-ui-chat-message__header { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-chat-message__header[data-sender="user"] { align-items: flex-end; }
}
@layer components {
.var-ui-chat-message__header[data-sender="assistant"] { align-items: flex-start; }
}
@layer components {
.var-ui-chat-message__name { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-chat-message__content { display: flex; flex-direction: column; gap: var(--var-ui-space-1); min-width: 0; }
}
@layer components {
.var-ui-chat-message__content[data-sender="user"] { align-items: flex-end; }
}
@layer components {
.var-ui-chat-message__content[data-sender="assistant"] { align-items: flex-start; }
}
@layer components {
.var-ui-chat-message__metadata { font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-chat-message__metadata[data-sender="user"] { align-self: flex-end; }
}
@layer components {
.var-ui-chat-message__metadata[data-sender="assistant"] { align-self: flex-start; }
}
@property --var-ui-chat-message-bubble-senderbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chat-message-bubble-sendertext { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-chat-message-bubble { --var-ui-chat-message-bubble-senderbackground: var(--var-ui-color-background-subtle); --var-ui-chat-message-bubble-sendertext: var(--var-ui-color-text-primary); display: inline-flex; flex-direction: column; max-width: min(80%, 480px); padding: var(--var-ui-space-3) var(--var-ui-space-4); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-chat-message-bubble-senderbackground); color: var(--var-ui-chat-message-bubble-sendertext); font-size: var(--var-ui-fontSize-md); line-height: 1.55; overflow-wrap: break-word; word-break: break-word; }
}
@layer components {
.var-ui-chat-message-bubble[data-sender="user"] { --var-ui-chat-message-bubble-senderbackground: var(--var-ui-color-tone-accent-background); --var-ui-chat-message-bubble-sendertext: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-chat-message-bubble[data-sender="assistant"] { --var-ui-chat-message-bubble-senderbackground: var(--var-ui-color-background-subtle); --var-ui-chat-message-bubble-sendertext: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-chat-message-bubble[data-variant="ghost"] { background-color: transparent; color: var(--var-ui-color-text-primary); padding: var(--var-ui-space-1) 0; }
}
@layer components {
.var-ui-chat-message-bubble[data-group="first"] { border-bottom-left-radius: var(--var-ui-radius-sm); border-bottom-right-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-chat-message-bubble[data-group="middle"] { border-top-left-radius: var(--var-ui-radius-sm); border-top-right-radius: var(--var-ui-radius-sm); border-bottom-left-radius: var(--var-ui-radius-sm); border-bottom-right-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-chat-message-bubble[data-group="last"] { border-top-left-radius: var(--var-ui-radius-sm); border-top-right-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-chat-message-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
}
@layer components {
.var-ui-chat-message-list__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
}
@layer components {
.var-ui-chat-message-list__inner[data-density="compact"] { gap: var(--var-ui-space-2); padding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-chat-message-list__inner[data-density="balanced"] { gap: var(--var-ui-space-4); padding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-chat-message-list__inner[data-density="spacious"] { gap: var(--var-ui-space-6); padding: var(--var-ui-space-6); }
}
@layer components {
.var-ui-chat-message-list__emptyState { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
}
@property --var-ui-chat-system-message-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-chat-system-message-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-chat-system-message { --var-ui-chat-system-message-color: var(--var-ui-color-text-secondary); --var-ui-chat-system-message-background: var(--var-ui-color-background-subtle); display: inline-flex; align-items: center; justify-content: center; gap: var(--var-ui-space-1); align-self: center; padding: var(--var-ui-space-1) var(--var-ui-space-3); border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-chat-system-message-background); color: var(--var-ui-chat-system-message-color); font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-chat-system-message[data-tone="accent"] { --var-ui-chat-system-message-color: var(--var-ui-color-tone-accent-foreground); --var-ui-chat-system-message-background: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-chat-system-message[data-tone="success"] { --var-ui-chat-system-message-color: var(--var-ui-color-tone-success-foreground); --var-ui-chat-system-message-background: color-mix(in srgb, var(--var-ui-color-tone-success-foreground) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-chat-system-message[data-tone="warning"] { --var-ui-chat-system-message-color: var(--var-ui-color-tone-warning-foreground); --var-ui-chat-system-message-background: color-mix(in srgb, var(--var-ui-color-tone-warning-foreground) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-chat-system-message[data-tone="danger"] { --var-ui-chat-system-message-color: var(--var-ui-color-tone-danger-foreground); --var-ui-chat-system-message-background: color-mix(in srgb, var(--var-ui-color-tone-danger-foreground) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-chat-system-message[data-tone="info"] { --var-ui-chat-system-message-color: var(--var-ui-color-tone-info-foreground); --var-ui-chat-system-message-background: color-mix(in srgb, var(--var-ui-color-tone-info-foreground) 12%, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-chat-system-message__icon { display: inline-flex; flex-shrink: 0; }
}
@layer components {
.var-ui-chat-system-message__text { margin: 0; }
}
@layer components {
.var-ui-chat-tool-calls { display: flex; flex-direction: column; gap: var(--var-ui-space-1); margin-top: var(--var-ui-space-2); }
}
@layer components {
.var-ui-chat-tool-calls__header { display: flex; align-items: center; gap: var(--var-ui-space-1); min-height: 24px; cursor: pointer; user-select: none; background: none; border: none; padding: 0; font: inherit; color: inherit; }
}
@layer components {
.var-ui-chat-tool-calls__statusIcon { display: inline-flex; flex-shrink: 0; }
}
@layer components {
.var-ui-chat-tool-calls__statusIcon[data-status="pending"] { color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-chat-tool-calls__statusIcon[data-status="running"] { color: var(--var-ui-color-tone-accent-foreground); }
}
@layer components {
.var-ui-chat-tool-calls__statusIcon[data-status="complete"] { color: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-chat-tool-calls__statusIcon[data-status="error"] { color: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-chat-tool-calls__name { font-size: var(--var-ui-fontSize-sm); font-family: var(--var-ui-fontFamily-mono); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-chat-tool-calls__target { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-chat-tool-calls__duration { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); flex-shrink: 0; }
}
@layer components {
.var-ui-chat-tool-calls__chevron { display: inline-flex; margin-left: auto; transition: transform 0.15s ease; }
}
@layer components {
.var-ui-chat-tool-calls__chevron[data-expanded] { transform: rotate(180deg); }
}
@layer components {
.var-ui-chat-tool-calls__list { display: flex; flex-direction: column; gap: var(--var-ui-space-1); padding-left: var(--var-ui-space-4); }
}
@layer components {
.var-ui-chat-tool-calls__detail { padding-left: var(--var-ui-space-4); padding-bottom: var(--var-ui-space-2); }
}
@property --var-ui-checkbox-boxborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-checkbox-boxbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-checkbox-boxforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-checkbox-grouplabelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-checkbox { --var-ui-checkbox-boxborder: var(--var-ui-color-border-strong); --var-ui-checkbox-boxbackground: var(--var-ui-color-background-surface); --var-ui-checkbox-boxforeground: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-checkbox-grouplabelcolor: var(--var-ui-color-text-primary); display: inline-flex; align-items: center; gap: var(--var-ui-space-2); cursor: pointer; }
}
@layer components {
.var-ui-checkbox__box { width: 18px; height: 18px; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-checkbox-boxborder); background-color: var(--var-ui-checkbox-boxbackground); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-checkbox-boxforeground); }
}
@layer components {
.var-ui-checkbox__box[data-selected] { --var-ui-checkbox-boxbackground: var(--var-ui-color-tone-accent-background); --var-ui-checkbox-boxborder: var(--var-ui-color-tone-accent-background); }
}
@layer components {
.var-ui-checkbox__label { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-checkbox__group { display: grid; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-checkbox__groupLabel { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-checkbox-grouplabelcolor); }
}
@property --var-ui-code-block-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-backgroundinline { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-backgroundheader { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-filenamecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-languagecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-copybuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-copybuttonhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-feedbackcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-linenumbercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-code-block-linehighlightbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-code-block { --var-ui-code-block-border: var(--var-ui-color-border-default); --var-ui-code-block-background: var(--var-ui-color-background-surface); --var-ui-code-block-backgroundinline: var(--var-ui-color-background-subtle); --var-ui-code-block-backgroundheader: var(--var-ui-color-background-subtle); --var-ui-code-block-filenamecolor: var(--var-ui-color-text-primary); --var-ui-code-block-languagecolor: var(--var-ui-color-text-secondary); --var-ui-code-block-copybuttoncolor: var(--var-ui-color-text-secondary); --var-ui-code-block-copybuttonhoverbackground: var(--var-ui-color-background-subtle); --var-ui-code-block-feedbackcolor: var(--var-ui-color-text-secondary); --var-ui-code-block-linenumbercolor: var(--var-ui-color-text-secondary); --var-ui-code-block-linehighlightbackground: var(--var-ui-color-background-subtle); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-code-block-border); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-code-block-background); overflow: hidden; box-shadow: var(--var-ui-shadow-lg); }
}
@layer components {
.var-ui-code-block__rootInline { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-code-block-border); padding: 2px 8px; background-color: var(--var-ui-code-block-backgroundinline); }
}
@layer components {
.var-ui-code-block__rootDiff { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-code-block__rootTerminal { background-color: var(--var-ui-color-text-primary); border-color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-code-block__header { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); padding-block: var(--var-ui-space-1); padding-inline: var(--var-ui-space-3); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-code-block-border); background-color: var(--var-ui-code-block-backgroundheader); }
}
@layer components {
.var-ui-code-block__headerTerminal { border-bottom-color: var(--var-ui-color-border-strong); background-color: var(--var-ui-code-block-backgroundheader); }
}
@layer components {
.var-ui-code-block__title { display: flex; align-items: center; gap: var(--var-ui-space-2); min-width: 0; }
}
@layer components {
.var-ui-code-block__filename { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-code-block-filenamecolor); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-code-block__language { font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-bold); font-family: var(--var-ui-fontFamily-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--var-ui-code-block-languagecolor); white-space: nowrap; }
}
@layer components {
.var-ui-code-block__languageTerminal { color: var(--var-ui-color-tone-accent-foregroundOnBackground); border-color: rgb(255 255 255 / 0.2); }
}
@layer components {
.var-ui-code-block__actions { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); flex-shrink: 0; }
}
@layer components {
.var-ui-code-block__copyButton { appearance: none; display: inline-flex; align-items: center; gap: var(--var-ui-space-1); border: none; background-color: transparent; color: var(--var-ui-code-block-copybuttoncolor); border-radius: var(--var-ui-radius-sm); padding-block: var(--var-ui-space-1); padding-inline: var(--var-ui-space-2); font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-semibold); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: var(--var-ui-transition-colorShift); }
}
@layer components {
.var-ui-code-block__copyButton:hover { color: var(--var-ui-code-block-filenamecolor); background-color: var(--var-ui-code-block-copybuttonhoverbackground); }
}
@layer components {
.var-ui-code-block__copyButton:focus-visible { outline: var(--var-ui-borderWidth-thin) solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-code-block__copyButton[data-copied] { color: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-code-block__copyButton[data-error] { color: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-code-block__copyButtonCopied { color: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-code-block__copyButtonError { color: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-code-block__feedback { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-code-block-feedbackcolor); min-height: 1lh; }
}
@layer components {
.var-ui-code-block__feedbackInline { display: inline-flex; align-items: center; margin-inline-start: var(--var-ui-space-1); }
}
@layer components {
.var-ui-code-block__feedbackToast { position: absolute; right: var(--var-ui-space-3); top: var(--var-ui-space-3); z-index: 1; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-code-block-border); background-color: var(--var-ui-code-block-background); border-radius: var(--var-ui-radius-md); padding: 2px var(--var-ui-space-2); box-shadow: var(--var-ui-shadow-sm); }
}
@layer components {
.var-ui-code-block__feedbackSuccess { color: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-code-block__feedbackError { color: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-code-block__body { padding: 0; background-color: var(--var-ui-code-block-background); }
}
@layer components {
.var-ui-code-block__bodyTerminal { color: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-code-block__bodyScrollable { overflow-x: auto; }
}
@layer components {
.var-ui-code-block__pre { margin: 0; padding: var(--var-ui-space-4); font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-sm); line-height: 1.6; overflow: auto; background-color: transparent; border: none; border-radius: 0; }
}
@layer components {
.var-ui-code-block__preTerminal { color: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-code-block__preWrap { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }
}
@layer components {
.var-ui-code-block__preScrollX { white-space: pre; overflow-x: auto; }
}
@layer components {
.var-ui-code-block__code { display: block; }
}
@layer components {
.var-ui-code-block__lines { display: grid; gap: 2px; }
}
@layer components {
.var-ui-code-block__line { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); padding-inline: var(--var-ui-space-2); }
}
@layer components {
.var-ui-code-block__lineNumber { min-width: 2ch; text-align: right; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-code-block-linenumbercolor); opacity: 0.8; user-select: none; }
}
@layer components {
.var-ui-code-block__lineContent { min-width: 0; }
}
@layer components {
.var-ui-code-block__lineHighlighted { background-color: var(--var-ui-code-block-linehighlightbackground); }
}
@layer components {
.var-ui-code-block__lineAdded { background-color: rgb(16 185 129 / 0.12); }
}
@layer components {
.var-ui-code-block__lineDeleted { background-color: rgb(248 113 113 / 0.12); }
}
@property --var-ui-accordion-group-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-accordion-group-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-accordion-group { --var-ui-accordion-group-border: var(--var-ui-color-border-default); --var-ui-accordion-group-background: var(--var-ui-color-background-surface); display: flex; flex-direction: column; min-width: 0; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-accordion-group-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-accordion-group-background); overflow: hidden; }
}
@layer components {
.var-ui-accordion-group[data-variant="flush"] { border-width: 0; border-radius: 0; background-color: transparent; }
}
@property --var-ui-collapsible-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-collapsible-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-collapsible-triggercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-collapsible-hoverbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-collapsible { --var-ui-collapsible-border: var(--var-ui-color-border-default); --var-ui-collapsible-background: var(--var-ui-color-background-surface); --var-ui-collapsible-triggercolor: var(--var-ui-color-text-primary); --var-ui-collapsible-hoverbg: var(--var-ui-color-background-subtle); display: flex; flex-direction: column; min-width: 0; }
}
@layer components {
.var-ui-collapsible[data-expanded] .var-ui-collapsible__triggerIcon { transform: rotate(180deg); }
}
@layer components {
.var-ui-collapsible:has([aria-expanded="true"]) .var-ui-collapsible__triggerIcon { transform: rotate(180deg); }
}
@layer components {
.var-ui-collapsible[data-variant="bordered"] { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-collapsible-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-collapsible-background); }
}
@layer components {
.var-ui-collapsible[data-variant="accordion"] { border-radius: 0; border-width: 0; border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-collapsible-border); }
}
@layer components {
.var-ui-collapsible[data-variant="accordion"]:last-child { border-bottom-width: 0; }
}
@layer components {
.var-ui-collapsible__trigger { appearance: none; display: inline-flex; align-items: center; gap: var(--var-ui-space-2); width: 100%; margin: 0; padding: var(--var-ui-space-2) var(--var-ui-space-3); border: none; background: transparent; color: var(--var-ui-collapsible-triggercolor); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); font-family: inherit; text-align: start; cursor: pointer; border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-collapsible__trigger:hover { background-color: var(--var-ui-collapsible-hoverbg); }
}
@layer components {
.var-ui-collapsible__trigger:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-collapsible__trigger[data-variant="accordion"] { padding: var(--var-ui-space-3) var(--var-ui-space-4); }
}
@layer components {
.var-ui-collapsible__triggerIcon { display: inline-flex; flex-shrink: 0; transition: transform 0.15s ease; }
}
@layer components {
.var-ui-collapsible__panel { padding: var(--var-ui-space-2) var(--var-ui-space-3) var(--var-ui-space-3); min-width: 0; }
}
@layer components {
.var-ui-collapsible__panel[data-variant="accordion"] { padding-inline: var(--var-ui-space-4); padding-block-end: var(--var-ui-space-4); padding-block-start: 0; }
}
@property --var-ui-color-field-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-field-swatchborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-color-field { --var-ui-color-field-labelcolor: var(--var-ui-color-text-primary); --var-ui-color-field-inputbackground: var(--var-ui-color-background-surface); --var-ui-color-field-inputborder: var(--var-ui-color-border-default); --var-ui-color-field-inputforeground: var(--var-ui-color-text-primary); --var-ui-color-field-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-color-field-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-color-field-swatchborder: var(--var-ui-color-border-default); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-color-field__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-field-labelcolor); }
}
@layer components {
.var-ui-color-field__inputWrapper { display: flex; align-items: center; gap: var(--var-ui-space-2); box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-field-inputborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-color-field-inputbackground); color: var(--var-ui-color-field-inputforeground); transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-color-field__inputWrapper:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-color-field__inputWrapper:focus-within { outline: 1px solid var(--var-ui-color-border-focus); box-shadow: 0 0 3px var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-color-field__inputWrapper[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-color-field__inputWrapper[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-color-field__inputWrapper[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-color-field__inputWrapper[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-color-field__swatchButton { position: relative; display: inline-flex; flex-shrink: 0; border: none; margin: 0; padding: 0; background-color: transparent; cursor: pointer; border-radius: var(--var-ui-radius-sm); line-height: 0; }
}
@layer components {
.var-ui-color-field__swatchButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-color-field__swatchButton:disabled { cursor: not-allowed; opacity: 0.5; }
}
@layer components {
.var-ui-color-field__swatchPreview { display: block; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-field-swatchborder); box-sizing: border-box; }
}
@layer components {
.var-ui-color-field__nativePicker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
}
@layer components {
.var-ui-color-field__input { flex: 1; min-width: 0; border: none; margin: 0; padding: 0; background-color: transparent; font-size: inherit; font-family: var(--var-ui-fontFamily-mono); color: var(--var-ui-color-field-inputforeground); outline: none; text-transform: uppercase; }
}
@layer components {
.var-ui-color-field__input:disabled { cursor: not-allowed; }
}
@layer components {
.var-ui-color-field__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-field-descriptioncolor); }
}
@layer components {
.var-ui-color-field__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-field-errorcolor); }
}
@property --var-ui-color-picker-panelheight { syntax: "<length>"; inherits: true; initial-value: 10rem; }
@property --var-ui-color-picker-sliderheight { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
@property --var-ui-color-picker-thumbsize { syntax: "<length>"; inherits: true; initial-value: 0.875rem; }
@property --var-ui-color-picker-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-picker-thumbborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-picker-thumbshadow { syntax: "*"; inherits: true; initial-value: none; }
@property --var-ui-color-picker-swatchsize { syntax: "<length>"; inherits: true; initial-value: 1.25rem; }
@property --var-ui-color-picker-swatchselectedring { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-picker-checkerlight { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-picker-checkerdark { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-color-picker { --var-ui-color-picker-panelheight: 10rem; --var-ui-color-picker-sliderheight: 0.75rem; --var-ui-color-picker-thumbsize: 0.875rem; --var-ui-color-picker-border: var(--var-ui-color-border-default); --var-ui-color-picker-thumbborder: var(--var-ui-color-background-surface); --var-ui-color-picker-thumbshadow: var(--var-ui-shadow-sm); --var-ui-color-picker-swatchsize: 1.25rem; --var-ui-color-picker-swatchselectedring: var(--var-ui-color-border-focus); --var-ui-color-picker-checkerlight: var(--var-ui-color-background-subtle); --var-ui-color-picker-checkerdark: var(--var-ui-color-border-subtle); display: grid; gap: var(--var-ui-space-3); width: 100%; min-width: 220px; }
}
@layer components {
.var-ui-color-picker__saturation { position: relative; width: 100%; height: var(--var-ui-color-picker-panelheight); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-picker-border); cursor: crosshair; touch-action: none; overflow: hidden; }
}
@layer components {
.var-ui-color-picker__saturationThumb { position: absolute; width: var(--var-ui-color-picker-thumbsize); height: var(--var-ui-color-picker-thumbsize); margin-inline-start: calc(var(--var-ui-color-picker-thumbsize) / -2); margin-top: calc(var(--var-ui-color-picker-thumbsize) / -2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-color-picker-thumbborder); box-shadow: var(--var-ui-color-picker-thumbshadow); pointer-events: none; box-sizing: border-box; }
}
@layer components {
.var-ui-color-picker__hue { position: relative; width: 100%; height: var(--var-ui-color-picker-sliderheight); border-radius: var(--var-ui-radius-full); cursor: pointer; touch-action: none; background-image: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); }
}
@layer components {
.var-ui-color-picker__hueThumb { position: absolute; top: 50%; width: var(--var-ui-color-picker-thumbsize); height: var(--var-ui-color-picker-thumbsize); margin-inline-start: calc(var(--var-ui-color-picker-thumbsize) / -2); margin-top: calc(var(--var-ui-color-picker-thumbsize) / -2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-color-picker-thumbborder); box-shadow: var(--var-ui-color-picker-thumbshadow); pointer-events: none; box-sizing: border-box; background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-color-picker__alpha { position: relative; width: 100%; height: var(--var-ui-color-picker-sliderheight); border-radius: var(--var-ui-radius-full); cursor: pointer; touch-action: none; background-color: var(--var-ui-color-picker-checkerlight); background-image: linear-gradient(45deg, var(--var-ui-color-picker-checkerdark) 25%, transparent 25%, transparent 75%, var(--var-ui-color-picker-checkerdark) 75%, var(--var-ui-color-picker-checkerdark)), linear-gradient(45deg, var(--var-ui-color-picker-checkerdark) 25%, transparent 25%, transparent 75%, var(--var-ui-color-picker-checkerdark) 75%, var(--var-ui-color-picker-checkerdark)); background-size: 8px 8px; background-position: 0 0, 4px 4px; overflow: hidden; }
}
@layer components {
.var-ui-color-picker__alphaThumb { position: absolute; top: 50%; width: var(--var-ui-color-picker-thumbsize); height: var(--var-ui-color-picker-thumbsize); margin-inline-start: calc(var(--var-ui-color-picker-thumbsize) / -2); margin-top: calc(var(--var-ui-color-picker-thumbsize) / -2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-color-picker-thumbborder); box-shadow: var(--var-ui-color-picker-thumbshadow); pointer-events: none; box-sizing: border-box; background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-color-picker__alphaGradient { position: absolute; inset: 0; border-radius: inherit; }
}
@layer components {
.var-ui-color-picker__swatches { display: grid; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-color-picker__swatches[data-swatch-columns="seven"] { grid-template-columns: repeat(7, 1fr); }
}
@layer components {
.var-ui-color-picker__swatches[data-swatch-columns="ten"] { grid-template-columns: repeat(10, 1fr); }
}
@layer components {
.var-ui-color-picker__swatch { width: var(--var-ui-color-picker-swatchsize); height: var(--var-ui-color-picker-swatchsize); border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-picker-border); padding: 0; cursor: pointer; box-sizing: border-box; }
}
@layer components {
.var-ui-color-picker__swatch[data-selected] { outline: 2px solid var(--var-ui-color-picker-swatchselectedring); outline-offset: 1px; }
}
@layer components {
.var-ui-color-picker__swatch:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@property --var-ui-color-swatch-size { syntax: "<length>"; inherits: true; initial-value: 1.5rem; }
@property --var-ui-color-swatch-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-color-swatch-selectedring { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-color-swatch { --var-ui-color-swatch-size: 1.5rem; --var-ui-color-swatch-border: var(--var-ui-color-border-default); --var-ui-color-swatch-selectedring: var(--var-ui-color-border-focus); display: inline-block; width: var(--var-ui-color-swatch-size); height: var(--var-ui-color-swatch-size); border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-swatch-border); box-sizing: border-box; }
}
@layer components {
.var-ui-color-swatch[data-selected] { outline: 2px solid var(--var-ui-color-swatch-selectedring); outline-offset: 1px; }
}
@layer components {
.var-ui-color-swatch[data-size="sm"] { --var-ui-color-swatch-size: 1rem; }
}
@layer components {
.var-ui-color-swatch[data-size="lg"] { --var-ui-color-swatch-size: 2rem; }
}
@property --var-ui-combobox-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-combobox-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-combobox { --var-ui-combobox-labelcolor: var(--var-ui-color-text-primary); --var-ui-combobox-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-combobox-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-combobox-inputbackground: var(--var-ui-color-background-surface); --var-ui-combobox-inputborder: var(--var-ui-color-border-default); --var-ui-combobox-inputforeground: var(--var-ui-color-text-primary); --var-ui-combobox-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-combobox-popoverbackground: var(--var-ui-color-background-surface); --var-ui-combobox-popoverborder: var(--var-ui-color-border-default); --var-ui-combobox-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-combobox-itemfocusedbackground: var(--var-ui-color-background-subtle); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-combobox__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-combobox-labelcolor); }
}
@layer components {
.var-ui-combobox__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-combobox-descriptioncolor); }
}
@layer components {
.var-ui-combobox__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-combobox-errorcolor); }
}
@layer components {
.var-ui-combobox__inputWrapper { display: flex; align-items: center; gap: var(--var-ui-space-2); width: 100%; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-combobox-inputborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-combobox-inputbackground); transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-combobox__inputWrapper:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-combobox__inputWrapper:focus-within { outline: 1px solid var(--var-ui-color-border-focus); box-shadow: 0 0 3px var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-combobox__inputWrapper[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-combobox__inputWrapper[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-combobox__inputWrapper[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-combobox__input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; font-size: inherit; color: var(--var-ui-combobox-inputforeground); }
}
@layer components {
.var-ui-combobox__input::placeholder { color: var(--var-ui-combobox-placeholdercolor); }
}
@layer components {
.var-ui-combobox__clearButton { display: inline-flex; flex-shrink: 0; color: var(--var-ui-color-text-secondary); cursor: pointer; border-radius: var(--var-ui-radius-sm); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-combobox__clearButton[data-hovered] { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-combobox__popover { --var-ui-combobox-popoverborder: var(--var-ui-color-border-default); --var-ui-combobox-popoverbackground: var(--var-ui-color-background-surface); --var-ui-combobox-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-combobox-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); z-index: var(--var-ui-zIndex-dropdown); box-sizing: border-box; width: var(--trigger-width); min-width: var(--trigger-width); max-height: 16rem; overflow: hidden; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-combobox-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-combobox-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); outline: none; }
}
@layer components {
.var-ui-combobox__listbox { display: flex; flex-direction: column; gap: var(--var-ui-space-1); max-height: calc(16rem - 2 * var(--var-ui-space-1)); overflow-y: auto; outline: none; }
}
@layer components {
.var-ui-combobox__item { font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; outline: none; }
}
@layer components {
.var-ui-combobox__item[data-focused], .var-ui-combobox__item[data-hovered] { background-color: var(--var-ui-combobox-itemfocusedbackground); }
}
@layer components {
.var-ui-combobox__item[data-selected] { color: var(--var-ui-combobox-itemselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-combobox__empty { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); padding: var(--var-ui-space-2) var(--var-ui-space-3); }
}
@property --var-ui-command-palette-backdropbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-dialogbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-dialogborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-inputrowborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-inputiconcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-inputplaceholder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-resultforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-resulthoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-resultselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-resultselectedforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-resultmetacolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-markbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-markforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-command-palette-emptycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-command-palette { --var-ui-command-palette-backdropbackground: var(--var-ui-color-overlay-backdrop); --var-ui-command-palette-dialogbackground: var(--var-ui-color-background-surface); --var-ui-command-palette-dialogborder: var(--var-ui-color-border-default); --var-ui-command-palette-inputrowborder: var(--var-ui-color-border-default); --var-ui-command-palette-inputiconcolor: var(--var-ui-color-text-placeholder); --var-ui-command-palette-inputforeground: var(--var-ui-color-text-primary); --var-ui-command-palette-inputplaceholder: var(--var-ui-color-text-placeholder); --var-ui-command-palette-resultforeground: var(--var-ui-color-navItem-foreground); --var-ui-command-palette-resulthoverbackground: var(--var-ui-color-navItem-hoverBackground); --var-ui-command-palette-resultselectedbackground: var(--var-ui-color-navItem-selectedBackground); --var-ui-command-palette-resultselectedforeground: var(--var-ui-color-navItem-selectedForeground); --var-ui-command-palette-resultmetacolor: var(--var-ui-color-text-secondary); --var-ui-command-palette-markbackground: var(--var-ui-color-tone-accent-subtleBackground); --var-ui-command-palette-markforeground: var(--var-ui-color-text-primary); --var-ui-command-palette-emptycolor: var(--var-ui-color-text-secondary); display: none; pointer-events: none; }
}
@layer components {
.var-ui-command-palette[open] { display: flex; pointer-events: auto; border: none; margin: 0; padding: max(12vh, 72px) var(--var-ui-space-4) var(--var-ui-space-5); max-width: none; max-height: none; width: 100%; height: 100%; background-color: transparent; color: inherit; z-index: var(--var-ui-zIndex-overlay); justify-content: center; align-items: flex-start; overflow: visible; }
}
@layer components {
.var-ui-command-palette[open]::backdrop { background-color: var(--var-ui-command-palette-backdropbackground); transition: var(--var-ui-transition-backdrop); }
}
@layer components {
@supports (backdrop-filter: blur(1px)) { .var-ui-command-palette[open]::backdrop { backdrop-filter: blur(10px); } }
}
@layer components {
.var-ui-command-palette__dialog { position: relative; z-index: var(--var-ui-zIndex-raised); width: min(560px, 100%); max-height: min(72vh, 640px); display: flex; flex-direction: column; font-family: var(--var-ui-fontFamily-body); background-color: var(--var-ui-command-palette-dialogbackground); border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-command-palette-dialogborder); box-shadow: var(--var-ui-shadow-xl); overflow: hidden; opacity: 0; transition: var(--var-ui-transition-panelEnter); }
}
@layer components {
.var-ui-command-palette__dialog[data-open] { opacity: 1; }
}
@layer components {
.var-ui-command-palette__dialog[data-starting-style], .var-ui-command-palette__dialog[data-ending-style] { opacity: 0; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-command-palette__dialog { transition: none; } }
}
@layer components {
html[data-mode="dark"] .var-ui-command-palette__dialog { box-shadow: none; }
}
@layer components {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-command-palette__dialog { box-shadow: none; } }
}
@layer components {
.var-ui-command-palette__inputRow { flex-shrink: 0; display: flex; align-items: center; gap: var(--var-ui-space-2); padding: var(--var-ui-space-3) var(--var-ui-space-4); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-command-palette-inputrowborder); }
}
@layer components {
.var-ui-command-palette__inputIcon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--var-ui-command-palette-inputiconcolor); line-height: 0; }
}
@layer components {
.var-ui-command-palette__input { flex: 1; min-width: 0; border: none; margin: 0; padding: 0; background-color: transparent; font-size: var(--var-ui-fontSize-lg); font-family: var(--var-ui-fontFamily-body); color: var(--var-ui-command-palette-inputforeground); outline: none; }
}
@layer components {
.var-ui-command-palette__input::placeholder { color: var(--var-ui-command-palette-inputplaceholder); }
}
@layer components {
.var-ui-command-palette__results { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: var(--var-ui-space-2); list-style: none; }
}
@layer components {
.var-ui-command-palette__result { margin: 0; }
}
@layer components {
.var-ui-command-palette__resultLink { display: block; padding: var(--var-ui-space-2) var(--var-ui-space-4); text-decoration: none; color: var(--var-ui-command-palette-resultforeground); transition: var(--var-ui-transition-surfaceFast); border-radius: var(--var-ui-radius-navItem); }
}
@layer components {
.var-ui-command-palette__resultLink:hover { background-color: var(--var-ui-command-palette-resulthoverbackground); }
}
@layer components {
.var-ui-command-palette__resultLinkActive { background-color: var(--var-ui-command-palette-resultselectedbackground); color: var(--var-ui-command-palette-resultselectedforeground); }
}
@layer components {
.var-ui-command-palette__resultTitle { display: block; font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); line-height: 1.35; margin-bottom: var(--var-ui-space-1); }
}
@layer components {
.var-ui-command-palette__resultMeta { display: block; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-command-palette-resultmetacolor); line-height: 1.35; }
}
@layer components {
.var-ui-command-palette__mark { font-family: inherit; background-color: var(--var-ui-command-palette-markbackground); color: var(--var-ui-command-palette-markforeground); border-radius: var(--var-ui-radius-sm); padding: 0 var(--var-ui-space-1); }
}
@layer components {
.var-ui-command-palette__empty { padding: var(--var-ui-space-4) var(--var-ui-space-4); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-command-palette-emptycolor); line-height: 1.5; }
}
@property --var-ui-copy-button-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-copy-button-hoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-copy-button-successcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-copy-button-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-copy-button__button { --var-ui-copy-button-color: var(--var-ui-color-text-secondary); --var-ui-copy-button-hoverbackground: var(--var-ui-color-background-subtle); --var-ui-copy-button-successcolor: var(--var-ui-color-tone-success-foreground); --var-ui-copy-button-errorcolor: var(--var-ui-color-tone-danger-foreground); }
}
@property --var-ui-dateinput-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-groupbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-groupborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-segmentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-segmentplaceholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-navbuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-navbuttonhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-headercellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-cellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-cellhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-cellselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-cellselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dateinput-celldisabledcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-dateInput { --var-ui-dateinput-labelcolor: var(--var-ui-color-text-primary); --var-ui-dateinput-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-dateinput-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-dateinput-groupbackground: var(--var-ui-color-background-surface); --var-ui-dateinput-groupborder: var(--var-ui-color-border-default); --var-ui-dateinput-segmentcolor: var(--var-ui-color-text-primary); --var-ui-dateinput-segmentplaceholdercolor: var(--var-ui-color-text-secondary); --var-ui-dateinput-popoverbackground: var(--var-ui-color-background-surface); --var-ui-dateinput-popoverborder: var(--var-ui-color-border-default); --var-ui-dateinput-headingcolor: var(--var-ui-color-text-primary); --var-ui-dateinput-navbuttoncolor: var(--var-ui-color-text-secondary); --var-ui-dateinput-navbuttonhoverbackground: var(--var-ui-color-background-subtle); --var-ui-dateinput-headercellcolor: var(--var-ui-color-text-secondary); --var-ui-dateinput-cellcolor: var(--var-ui-color-text-primary); --var-ui-dateinput-cellhoverbackground: var(--var-ui-color-background-subtle); --var-ui-dateinput-cellselectedbackground: var(--var-ui-color-tone-accent-background); --var-ui-dateinput-cellselectedcolor: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-dateinput-celldisabledcolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-dateInput__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-dateinput-labelcolor); }
}
@layer components {
.var-ui-dateInput__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-dateinput-descriptioncolor); }
}
@layer components {
.var-ui-dateInput__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-dateinput-errorcolor); }
}
@layer components {
.var-ui-dateInput__group { display: flex; align-items: center; gap: var(--var-ui-space-1); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-dateinput-groupborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); background-color: var(--var-ui-dateinput-groupbackground); width: fit-content; }
}
@layer components {
.var-ui-dateInput__group[data-focus-within] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-dateinput-groupborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-dateInput__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateInput__segment { font-size: var(--var-ui-fontSize-md); font-variant-numeric: tabular-nums; color: var(--var-ui-dateinput-segmentcolor); padding: 0 1px; }
}
@layer components {
.var-ui-dateInput__segment[data-placeholder] { color: var(--var-ui-dateinput-segmentplaceholdercolor); }
}
@layer components {
.var-ui-dateInput__segment[data-focused] { outline: none; background-color: var(--var-ui-color-background-subtle); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-dateInput__segment[data-disabled] { opacity: 0.6; }
}
@layer components {
.var-ui-dateInput__trigger { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-dateinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateInput__trigger[data-hovered] { background-color: var(--var-ui-dateinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateInput__trigger[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateInput__popover { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-dateinput-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-dateinput-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-3); width: 280px; }
}
@layer components {
.var-ui-dateInput__calendarHeader { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-2); }
}
@layer components {
.var-ui-dateInput__calendarHeading { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-dateinput-headingcolor); }
}
@layer components {
.var-ui-dateInput__calendarNavButton { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-dateinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateInput__calendarNavButton[data-hovered] { background-color: var(--var-ui-dateinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateInput__calendarNavButton[data-disabled] { opacity: 0.4; cursor: not-allowed; }
}
@layer components {
.var-ui-dateInput__calendarGrid { border-collapse: collapse; width: 100%; }
}
@layer components {
.var-ui-dateInput__calendarHeaderCell { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-dateinput-headercellcolor); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-dateInput__calendarCell { text-align: center; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-dateinput-cellcolor); padding: var(--var-ui-space-1); cursor: pointer; }
}
@layer components {
.var-ui-dateInput__calendarCell > * { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 auto; border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-dateInput__calendarCell[data-hovered] > * { background-color: var(--var-ui-dateinput-cellhoverbackground); }
}
@layer components {
.var-ui-dateInput__calendarCell[data-selected] > * { background-color: var(--var-ui-dateinput-cellselectedbackground); color: var(--var-ui-dateinput-cellselectedcolor); }
}
@layer components {
.var-ui-dateInput__calendarCell[data-outside-month] { opacity: 0.4; }
}
@layer components {
.var-ui-dateInput__calendarCell[data-disabled] { color: var(--var-ui-dateinput-celldisabledcolor); cursor: not-allowed; }
}
@property --var-ui-daterangeinput-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-groupbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-groupborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-segmentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-segmentplaceholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-navbuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-navbuttonhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-headercellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-cellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-cellhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-cellselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-cellselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-daterangeinput-celldisabledcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-dateRangeInput { --var-ui-daterangeinput-labelcolor: var(--var-ui-color-text-primary); --var-ui-daterangeinput-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-daterangeinput-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-daterangeinput-groupbackground: var(--var-ui-color-background-surface); --var-ui-daterangeinput-groupborder: var(--var-ui-color-border-default); --var-ui-daterangeinput-segmentcolor: var(--var-ui-color-text-primary); --var-ui-daterangeinput-segmentplaceholdercolor: var(--var-ui-color-text-secondary); --var-ui-daterangeinput-popoverbackground: var(--var-ui-color-background-surface); --var-ui-daterangeinput-popoverborder: var(--var-ui-color-border-default); --var-ui-daterangeinput-headingcolor: var(--var-ui-color-text-primary); --var-ui-daterangeinput-navbuttoncolor: var(--var-ui-color-text-secondary); --var-ui-daterangeinput-navbuttonhoverbackground: var(--var-ui-color-background-subtle); --var-ui-daterangeinput-headercellcolor: var(--var-ui-color-text-secondary); --var-ui-daterangeinput-cellcolor: var(--var-ui-color-text-primary); --var-ui-daterangeinput-cellhoverbackground: var(--var-ui-color-background-subtle); --var-ui-daterangeinput-cellselectedbackground: var(--var-ui-color-tone-accent-background); --var-ui-daterangeinput-cellselectedcolor: var(--var-ui-color-background-surface); --var-ui-daterangeinput-celldisabledcolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-dateRangeInput__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-daterangeinput-labelcolor); }
}
@layer components {
.var-ui-dateRangeInput__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-daterangeinput-descriptioncolor); }
}
@layer components {
.var-ui-dateRangeInput__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-daterangeinput-errorcolor); }
}
@layer components {
.var-ui-dateRangeInput__group { display: flex; align-items: center; gap: var(--var-ui-space-1); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-daterangeinput-groupborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); background-color: var(--var-ui-daterangeinput-groupbackground); width: fit-content; }
}
@layer components {
.var-ui-dateRangeInput__group[data-focus-within] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-daterangeinput-groupborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-dateRangeInput__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateRangeInput__segment { font-size: var(--var-ui-fontSize-md); font-variant-numeric: tabular-nums; color: var(--var-ui-daterangeinput-segmentcolor); padding: 0 1px; }
}
@layer components {
.var-ui-dateRangeInput__segment[data-placeholder] { color: var(--var-ui-daterangeinput-segmentplaceholdercolor); }
}
@layer components {
.var-ui-dateRangeInput__segment[data-focused] { outline: none; background-color: var(--var-ui-color-background-subtle); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-dateRangeInput__segment[data-disabled] { opacity: 0.6; }
}
@layer components {
.var-ui-dateRangeInput__separator { color: var(--var-ui-daterangeinput-descriptioncolor); padding: 0 var(--var-ui-space-1); }
}
@layer components {
.var-ui-dateRangeInput__trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-daterangeinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateRangeInput__trigger[data-hovered] { background-color: var(--var-ui-daterangeinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateRangeInput__trigger[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateRangeInput__popover { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-daterangeinput-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-daterangeinput-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-3); }
}
@layer components {
.var-ui-dateRangeInput__calendarHeader { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-2); }
}
@layer components {
.var-ui-dateRangeInput__calendarHeading { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-daterangeinput-headingcolor); }
}
@layer components {
.var-ui-dateRangeInput__calendarNavButton { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-daterangeinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateRangeInput__calendarNavButton[data-hovered] { background-color: var(--var-ui-daterangeinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateRangeInput__calendarNavButton[data-disabled] { opacity: 0.4; cursor: not-allowed; }
}
@layer components {
.var-ui-dateRangeInput__calendarGrid { border-collapse: collapse; width: 100%; }
}
@layer components {
.var-ui-dateRangeInput__calendarHeaderCell { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-daterangeinput-headercellcolor); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-dateRangeInput__calendarCell { text-align: center; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-daterangeinput-cellcolor); padding: var(--var-ui-space-1); cursor: pointer; }
}
@layer components {
.var-ui-dateRangeInput__calendarCell > * { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 auto; border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-dateRangeInput__calendarCell[data-hovered] > * { background-color: var(--var-ui-daterangeinput-cellhoverbackground); }
}
@layer components {
.var-ui-dateRangeInput__calendarCell[data-selected] > * { background-color: var(--var-ui-daterangeinput-cellselectedbackground); color: var(--var-ui-daterangeinput-cellselectedcolor); }
}
@layer components {
.var-ui-dateRangeInput__calendarCell[data-outside-month] { opacity: 0.4; }
}
@layer components {
.var-ui-dateRangeInput__calendarCell[data-disabled] { color: var(--var-ui-daterangeinput-celldisabledcolor); cursor: not-allowed; }
}
@property --var-ui-datetimeinput-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-groupbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-groupborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-segmentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-segmentplaceholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-navbuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-navbuttonhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-headercellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-cellcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-cellhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-cellselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-cellselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-datetimeinput-celldisabledcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-dateTimeInput { --var-ui-datetimeinput-labelcolor: var(--var-ui-color-text-primary); --var-ui-datetimeinput-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-datetimeinput-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-datetimeinput-groupbackground: var(--var-ui-color-background-surface); --var-ui-datetimeinput-groupborder: var(--var-ui-color-border-default); --var-ui-datetimeinput-segmentcolor: var(--var-ui-color-text-primary); --var-ui-datetimeinput-segmentplaceholdercolor: var(--var-ui-color-text-secondary); --var-ui-datetimeinput-popoverbackground: var(--var-ui-color-background-surface); --var-ui-datetimeinput-popoverborder: var(--var-ui-color-border-default); --var-ui-datetimeinput-headingcolor: var(--var-ui-color-text-primary); --var-ui-datetimeinput-navbuttoncolor: var(--var-ui-color-text-secondary); --var-ui-datetimeinput-navbuttonhoverbackground: var(--var-ui-color-background-subtle); --var-ui-datetimeinput-headercellcolor: var(--var-ui-color-text-secondary); --var-ui-datetimeinput-cellcolor: var(--var-ui-color-text-primary); --var-ui-datetimeinput-cellhoverbackground: var(--var-ui-color-background-subtle); --var-ui-datetimeinput-cellselectedbackground: var(--var-ui-color-tone-accent-background); --var-ui-datetimeinput-cellselectedcolor: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-datetimeinput-celldisabledcolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-dateTimeInput__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-datetimeinput-labelcolor); }
}
@layer components {
.var-ui-dateTimeInput__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-datetimeinput-descriptioncolor); }
}
@layer components {
.var-ui-dateTimeInput__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-datetimeinput-errorcolor); }
}
@layer components {
.var-ui-dateTimeInput__group { display: flex; align-items: center; gap: var(--var-ui-space-1); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-datetimeinput-groupborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); background-color: var(--var-ui-datetimeinput-groupbackground); width: fit-content; }
}
@layer components {
.var-ui-dateTimeInput__group[data-focus-within] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-datetimeinput-groupborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-dateTimeInput__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateTimeInput__segment { font-size: var(--var-ui-fontSize-md); font-variant-numeric: tabular-nums; color: var(--var-ui-datetimeinput-segmentcolor); padding: 0 1px; }
}
@layer components {
.var-ui-dateTimeInput__segment[data-placeholder] { color: var(--var-ui-datetimeinput-segmentplaceholdercolor); }
}
@layer components {
.var-ui-dateTimeInput__segment[data-focused] { outline: none; background-color: var(--var-ui-color-background-subtle); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-dateTimeInput__segment[data-disabled] { opacity: 0.6; }
}
@layer components {
.var-ui-dateTimeInput__trigger { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-datetimeinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateTimeInput__trigger[data-hovered] { background-color: var(--var-ui-datetimeinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateTimeInput__trigger[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-dateTimeInput__popover { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-datetimeinput-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-datetimeinput-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-3); width: 280px; }
}
@layer components {
.var-ui-dateTimeInput__calendarHeader { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-2); }
}
@layer components {
.var-ui-dateTimeInput__calendarHeading { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-datetimeinput-headingcolor); }
}
@layer components {
.var-ui-dateTimeInput__calendarNavButton { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--var-ui-radius-sm); color: var(--var-ui-datetimeinput-navbuttoncolor); cursor: pointer; }
}
@layer components {
.var-ui-dateTimeInput__calendarNavButton[data-hovered] { background-color: var(--var-ui-datetimeinput-navbuttonhoverbackground); }
}
@layer components {
.var-ui-dateTimeInput__calendarNavButton[data-disabled] { opacity: 0.4; cursor: not-allowed; }
}
@layer components {
.var-ui-dateTimeInput__calendarGrid { border-collapse: collapse; width: 100%; }
}
@layer components {
.var-ui-dateTimeInput__calendarHeaderCell { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-datetimeinput-headercellcolor); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-dateTimeInput__calendarCell { text-align: center; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-datetimeinput-cellcolor); padding: var(--var-ui-space-1); cursor: pointer; }
}
@layer components {
.var-ui-dateTimeInput__calendarCell > * { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 auto; border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-dateTimeInput__calendarCell[data-hovered] > * { background-color: var(--var-ui-datetimeinput-cellhoverbackground); }
}
@layer components {
.var-ui-dateTimeInput__calendarCell[data-selected] > * { background-color: var(--var-ui-datetimeinput-cellselectedbackground); color: var(--var-ui-datetimeinput-cellselectedcolor); }
}
@layer components {
.var-ui-dateTimeInput__calendarCell[data-outside-month] { opacity: 0.4; }
}
@layer components {
.var-ui-dateTimeInput__calendarCell[data-disabled] { color: var(--var-ui-datetimeinput-celldisabledcolor); cursor: not-allowed; }
}
@property --var-ui-description-list-termcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-description-list-detailscolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-description-list-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-description-list-termwidth { syntax: "<length>"; inherits: true; initial-value: 8rem; }
@property --var-ui-description-list-columns { syntax: "<integer>"; inherits: true; initial-value: 2; }
@layer components {
.var-ui-description-list { --var-ui-description-list-termcolor: var(--var-ui-color-text-secondary); --var-ui-description-list-detailscolor: var(--var-ui-color-text-primary); --var-ui-description-list-gap: var(--var-ui-space-4); --var-ui-description-list-termwidth: 8rem; --var-ui-description-list-columns: 2; display: grid; gap: var(--var-ui-description-list-gap); margin: 0; }
}
@layer components {
.var-ui-description-list[data-columns="single"] { grid-template-columns: 1fr; }
}
@layer components {
.var-ui-description-list[data-columns="multi"] { grid-template-columns: repeat(var(--var-ui-description-list-columns), minmax(0, 1fr)); }
}
@layer components {
.var-ui-description-list__title { grid-column: 1 / -1; margin: 0; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-description-list-termcolor); }
}
@layer components {
.var-ui-description-list__item { display: grid; gap: var(--var-ui-space-1); min-width: 0; }
}
@layer components {
.var-ui-description-list__item[data-label-position="start"] { grid-template-columns: var(--var-ui-description-list-termwidth) 1fr; align-items: baseline; }
}
@layer components {
.var-ui-description-list__item[data-label-position="top"] { display: flex; flex-direction: column; align-items: flex-start; }
}
@layer components {
.var-ui-description-list__term { margin: 0; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-description-list-termcolor); }
}
@layer components {
.var-ui-description-list__details { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-description-list-detailscolor); min-width: 0; }
}
@layer components {
.var-ui-description-list__toggle { grid-column: 1 / -1; justify-self: start; }
}
@property --var-ui-dialog-overlaybackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dialog-modalbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dialog-modalborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-dialog-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-dialog__overlay { --var-ui-dialog-overlaybackground: var(--var-ui-color-overlay-default); --var-ui-dialog-modalbackground: var(--var-ui-color-background-surface); --var-ui-dialog-modalborder: var(--var-ui-color-border-default); --var-ui-dialog-descriptioncolor: var(--var-ui-color-text-secondary); transition: var(--var-ui-transition-backdrop); transform-origin: var(--var-ui-transform-origin, center); position: fixed; inset: 0; background-color: var(--var-ui-dialog-overlaybackground); display: grid; place-items: center; padding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-dialog__overlay[data-starting-style], .var-ui-dialog__overlay[data-ending-style] { opacity: 0; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-dialog__overlay { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-dialog__overlay[data-starting-style], .var-ui-dialog__overlay[data-ending-style] { opacity: 1; } }
}
@layer components {
@supports (-webkit-touch-callout: none) { .var-ui-dialog__overlay { position: absolute; height: 100dvh; } }
}
@layer components {
.var-ui-dialog__modal { transition: var(--var-ui-transition-panelEnter), transform var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); transform-origin: var(--var-ui-transform-origin, center); width: min(480px, 100%); background-color: var(--var-ui-dialog-modalbackground); border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-dialog-modalborder); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-dialog__modal[data-starting-style], .var-ui-dialog__modal[data-ending-style] { opacity: 0; transform: scale(0.98); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-dialog__modal { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-dialog__modal[data-starting-style], .var-ui-dialog__modal[data-ending-style] { opacity: 1; } }
}
@layer components {
.var-ui-dialog__modal[data-role="alertdialog"] { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-dialog__content { display: grid; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-dialog__heading { font-size: 18px; font-weight: var(--var-ui-fontWeight-semibold); margin: 0; }
}
@layer components {
.var-ui-dialog__description { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-dialog-descriptioncolor); }
}
@layer components {
.var-ui-dialog__closeButton { appearance: none; border: none; background: transparent; color: var(--var-ui-color-text-secondary); cursor: pointer; display: inline-flex; padding: var(--var-ui-space-1); margin-right: calc(var(--var-ui-space-1) * -1); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-dialog__closeButton:hover { background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-dialog__closeButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-dialog__actions { display: flex; justify-content: flex-end; gap: var(--var-ui-space-2); margin-top: var(--var-ui-space-2); }
}
@property --var-ui-drawer-overlaybackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-drawer-panelbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-drawer-panelborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-drawer-panelwidth { syntax: "<length>"; inherits: true; initial-value: 400px; }
@property --var-ui-drawer-panelheight { syntax: "<length>"; inherits: true; initial-value: 50vh; }
@property --var-ui-drawer-headercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-drawer-closebuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-drawer__overlay { --var-ui-drawer-overlaybackground: var(--var-ui-color-overlay-default); --var-ui-drawer-panelbackground: var(--var-ui-color-background-surface); --var-ui-drawer-panelborder: var(--var-ui-color-border-default); --var-ui-drawer-panelwidth: 400px; --var-ui-drawer-panelheight: 50vh; --var-ui-drawer-headercolor: var(--var-ui-color-text-primary); --var-ui-drawer-closebuttoncolor: var(--var-ui-color-text-secondary); transition: var(--var-ui-transition-backdrop); transform-origin: var(--var-ui-transform-origin, center); position: fixed; inset: 0; background-color: var(--var-ui-drawer-overlaybackground); }
}
@layer components {
.var-ui-drawer__overlay[data-starting-style], .var-ui-drawer__overlay[data-ending-style] { opacity: 0; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-drawer__overlay { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-drawer__overlay[data-starting-style], .var-ui-drawer__overlay[data-ending-style] { opacity: 1; } }
}
@layer components {
@supports (-webkit-touch-callout: none) { .var-ui-drawer__overlay { position: absolute; height: 100dvh; } }
}
@layer components {
.var-ui-drawer__panel { transition: var(--var-ui-transition-backdrop); transform-origin: var(--var-ui-transform-origin, center); position: fixed; display: flex; flex-direction: column; background-color: var(--var-ui-drawer-panelbackground); box-shadow: var(--var-ui-shadow-lg); outline: none; max-width: 100vw; max-height: 100vh; }
}
@layer components {
.var-ui-drawer__panel[data-starting-style], .var-ui-drawer__panel[data-ending-style] { opacity: 0; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-drawer__panel { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-drawer__panel[data-starting-style], .var-ui-drawer__panel[data-ending-style] { opacity: 1; } }
}
@layer components {
.var-ui-drawer__panel[data-placement="start"] { top: 0; bottom: 0; inset-inline-start: 0; width: min(var(--var-ui-drawer-panelwidth), 92vw); border-inline-end-width: var(--var-ui-borderWidth-default); border-inline-end-style: solid; border-inline-end-color: var(--var-ui-drawer-panelborder); }
}
@layer components {
.var-ui-drawer__panel[data-placement="end"] { top: 0; bottom: 0; inset-inline-end: 0; width: min(var(--var-ui-drawer-panelwidth), 92vw); border-inline-start-width: var(--var-ui-borderWidth-default); border-inline-start-style: solid; border-inline-start-color: var(--var-ui-drawer-panelborder); }
}
@layer components {
.var-ui-drawer__panel[data-placement="bottom"] { inset-inline: 0; bottom: 0; height: min(var(--var-ui-drawer-panelheight), 92vh); border-block-start-width: var(--var-ui-borderWidth-default); border-block-start-style: solid; border-block-start-color: var(--var-ui-drawer-panelborder); border-start-start-radius: var(--var-ui-radius-lg); border-start-end-radius: var(--var-ui-radius-lg); }
}
@layer components {
.var-ui-drawer__panel[data-size="sm"] { --var-ui-drawer-panelwidth: 320px; --var-ui-drawer-panelheight: 40vh; }
}
@layer components {
.var-ui-drawer__panel[data-size="lg"] { --var-ui-drawer-panelwidth: 560px; --var-ui-drawer-panelheight: 70vh; }
}
@layer components {
.var-ui-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-3); padding: var(--var-ui-space-4); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-drawer-panelborder); color: var(--var-ui-drawer-headercolor); flex-shrink: 0; }
}
@layer components {
.var-ui-drawer__title { font-size: var(--var-ui-fontSize-lg); font-weight: var(--var-ui-fontWeight-semibold); margin: 0; min-width: 0; }
}
@layer components {
.var-ui-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-drawer__closeButton { appearance: none; border: none; background: transparent; color: var(--var-ui-drawer-closebuttoncolor); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: var(--var-ui-space-1); margin-inline-end: calc(var(--var-ui-space-1) * -1); border-radius: var(--var-ui-radius-sm); flex-shrink: 0; }
}
@layer components {
.var-ui-drawer__closeButton:hover { background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-drawer-headercolor); }
}
@layer components {
.var-ui-drawer__closeButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@property --var-ui-divider-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-divider { --var-ui-divider-color: var(--var-ui-color-border-default); border: none; margin: 0; background-color: var(--var-ui-divider-color); flex-shrink: 0; }
}
@layer components {
.var-ui-divider[data-orientation="horizontal"] { width: 100%; height: 1px; }
}
@layer components {
.var-ui-divider[data-orientation="vertical"] { width: 1px; height: auto; align-self: stretch; }
}
@property --var-ui-empty-state-iconcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-empty-state-iconbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-empty-state { --var-ui-empty-state-iconcolor: var(--var-ui-color-text-secondary); --var-ui-empty-state-iconbackground: var(--var-ui-color-background-subtle); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--var-ui-space-2); padding: var(--var-ui-space-8) var(--var-ui-space-4); }
}
@layer components {
.var-ui-empty-state__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--var-ui-empty-state-iconcolor); background-color: var(--var-ui-empty-state-iconbackground); margin-bottom: var(--var-ui-space-1); }
}
@layer components {
.var-ui-empty-state__title { margin: 0; font-size: var(--var-ui-fontSize-lg); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-empty-state__description { margin: 0; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-color-text-secondary); max-width: 40ch; }
}
@layer components {
.var-ui-empty-state__action { margin-top: var(--var-ui-space-2); }
}
@property --var-ui-file-input-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-dropzonebackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-dropzoneborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-filenamecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-file-input-iconcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-file-input { --var-ui-file-input-labelcolor: var(--var-ui-color-text-primary); --var-ui-file-input-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-file-input-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-file-input-dropzonebackground: var(--var-ui-color-background-surface); --var-ui-file-input-dropzoneborder: var(--var-ui-color-border-default); --var-ui-file-input-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-file-input-filenamecolor: var(--var-ui-color-text-primary); --var-ui-file-input-iconcolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-file-input__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-file-input-labelcolor); }
}
@layer components {
.var-ui-file-input__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-file-input-descriptioncolor); }
}
@layer components {
.var-ui-file-input__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-file-input-errorcolor); }
}
@layer components {
.var-ui-file-input__dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--var-ui-space-2); border-width: var(--var-ui-borderWidth-default); border-style: dashed; border-color: var(--var-ui-file-input-dropzoneborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-6) var(--var-ui-space-4); background-color: var(--var-ui-file-input-dropzonebackground); cursor: pointer; text-align: center; transition: background-color 140ms ease, border-color 140ms ease; }
}
@layer components {
.var-ui-file-input__dropzone[data-drag-over] { --var-ui-file-input-dropzoneborder: var(--var-ui-color-tone-accent-foreground); --var-ui-file-input-dropzonebackground: var(--var-ui-color-tone-accent-subtleBackground); }
}
@layer components {
.var-ui-file-input__dropzone[data-disabled] { opacity: 0.5; cursor: not-allowed; }
}
@layer components {
.var-ui-file-input__placeholderText { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-file-input-placeholdercolor); }
}
@layer components {
.var-ui-file-input__fileNameText { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-file-input-filenamecolor); }
}
@layer components {
.var-ui-file-input__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--var-ui-file-input-iconcolor); }
}
@layer components {
.var-ui-file-input__clearButton { appearance: none; border: none; border-radius: var(--var-ui-radius-sm); background-color: transparent; color: var(--var-ui-file-input-iconcolor); display: inline-flex; align-items: center; justify-content: center; padding: var(--var-ui-space-1); cursor: pointer; }
}
@layer components {
.var-ui-file-input__clearButton:hover { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-file-input__hiddenInput { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@property --var-ui-filetree-rootforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-rootborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-rootbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-nestedborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-rowcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-foldercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-filetree-filecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-fileTree { --var-ui-filetree-rootforeground: var(--var-ui-color-text-primary); --var-ui-filetree-rootborder: var(--var-ui-color-border-default); --var-ui-filetree-rootbackground: var(--var-ui-color-background-subtle); --var-ui-filetree-nestedborder: var(--var-ui-color-border-default); --var-ui-filetree-rowcolor: var(--var-ui-color-text-primary); --var-ui-filetree-foldercolor: var(--var-ui-color-text-primary); --var-ui-filetree-filecolor: var(--var-ui-color-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: var(--var-ui-fontSize-sm); line-height: 1.5; color: var(--var-ui-filetree-rootforeground); margin: var(--var-ui-space-3) 0; padding: var(--var-ui-space-3); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-filetree-rootborder); background-color: var(--var-ui-filetree-rootbackground); overflow-x: auto; }
}
@layer components {
.var-ui-fileTree__list { list-style: none; padding: 0; margin: 0; }
}
@layer components {
.var-ui-fileTree__item { list-style: none; margin: 0; padding: 0; }
}
@layer components {
.var-ui-fileTree__listNested { list-style: none; margin-top: var(--var-ui-space-1); margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: var(--var-ui-space-4); border-left-width: var(--var-ui-borderWidth-default); border-left-style: solid; border-left-color: var(--var-ui-filetree-nestedborder); }
}
@layer components {
.var-ui-fileTree__row { display: block; padding: var(--var-ui-space-1) 0; color: var(--var-ui-filetree-rowcolor); }
}
@layer components {
.var-ui-fileTree__folder { font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-filetree-foldercolor); }
}
@layer components {
.var-ui-fileTree__file { color: var(--var-ui-filetree-filecolor); }
}
@property --var-ui-grid-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-grid-mincolumnwidth { syntax: "<length>"; inherits: true; initial-value: 240px; }
@layer components {
.var-ui-grid { --var-ui-grid-gap: var(--var-ui-space-4); --var-ui-grid-mincolumnwidth: 240px; display: grid; gap: var(--var-ui-grid-gap); grid-template-columns: repeat(auto-fill, minmax(var(--var-ui-grid-mincolumnwidth), 1fr)); }
}
@layer components {
.var-ui-grid[data-columns="one"] { grid-template-columns: 1fr; }
}
@layer components {
.var-ui-grid[data-columns="two"] { grid-template-columns: repeat(2, 1fr); }
}
@layer components {
.var-ui-grid[data-columns="three"] { grid-template-columns: repeat(3, 1fr); }
}
@layer components {
.var-ui-grid[data-columns="four"] { grid-template-columns: repeat(4, 1fr); }
}
@layer components {
.var-ui-grid[data-gap="none"] { --var-ui-grid-gap: 0px; }
}
@layer components {
.var-ui-grid[data-gap="xs"] { --var-ui-grid-gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-grid[data-gap="sm"] { --var-ui-grid-gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-grid[data-gap="md"] { --var-ui-grid-gap: var(--var-ui-space-4); }
}
@layer components {
.var-ui-grid[data-gap="lg"] { --var-ui-grid-gap: var(--var-ui-space-5); }
}
@layer components {
.var-ui-grid[data-gap="xl"] { --var-ui-grid-gap: var(--var-ui-space-8); }
}
@property --var-ui-hover-card-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-hover-card-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-hover-card-titleforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-hover-card { --var-ui-hover-card-background: var(--var-ui-color-background-surface); --var-ui-hover-card-border: var(--var-ui-color-border-default); --var-ui-hover-card-titleforeground: var(--var-ui-color-text-primary); transition: var(--var-ui-transition-panelEnter), transform var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); transform-origin: var(--var-ui-transform-origin, center); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-hover-card-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-hover-card-background); box-shadow: var(--var-ui-shadow-md); min-width: 14rem; max-width: 22rem; outline: none; }
}
@layer components {
.var-ui-hover-card[data-starting-style], .var-ui-hover-card[data-ending-style] { opacity: 0; transform: scale(0.98); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-hover-card { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-hover-card[data-starting-style], .var-ui-hover-card[data-ending-style] { opacity: 1; } }
}
@layer components {
.var-ui-hover-card__title { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-hover-card-titleforeground); margin: 0; padding: var(--var-ui-space-4) var(--var-ui-space-4) var(--var-ui-space-3); }
}
@layer components {
.var-ui-hover-card__content { padding: var(--var-ui-space-3) var(--var-ui-space-4) var(--var-ui-space-4); outline: none; }
}
@property --var-ui-icon-size { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-icon-color { syntax: "*"; inherits: true; initial-value: currentColor; }
@layer components {
.var-ui-icon { --var-ui-icon-size: var(--var-ui-size-icon-md); --var-ui-icon-color: currentColor; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--var-ui-icon-size); height: var(--var-ui-icon-size); color: var(--var-ui-icon-color); }
}
@layer components {
.var-ui-icon svg { width: 100%; height: 100%; }
}
@layer components {
.var-ui-icon[data-mirror] { transform: scaleX(-1); }
}
@layer components {
.var-ui-icon[data-size="sm"] { --var-ui-icon-size: var(--var-ui-size-icon-sm); }
}
@layer components {
.var-ui-icon[data-size="md"] { --var-ui-icon-size: var(--var-ui-size-icon-md); }
}
@layer components {
.var-ui-icon[data-size="lg"] { --var-ui-icon-size: var(--var-ui-size-icon-lg); }
}
@layer components {
.var-ui-icon[data-size="inherit"] { --var-ui-icon-size: 1em; }
}
@property --var-ui-input-group-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-textbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-input-group-textforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-input-group { --var-ui-input-group-labelcolor: var(--var-ui-color-text-primary); --var-ui-input-group-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-input-group-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-input-group-inputbackground: var(--var-ui-color-background-surface); --var-ui-input-group-inputborder: var(--var-ui-color-border-default); --var-ui-input-group-inputforeground: var(--var-ui-color-text-primary); --var-ui-input-group-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-input-group-textbackground: var(--var-ui-color-background-subtle); --var-ui-input-group-textforeground: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-input-group__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-input-group-labelcolor); }
}
@layer components {
.var-ui-input-group__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-input-group-descriptioncolor); }
}
@layer components {
.var-ui-input-group__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-input-group-errorcolor); }
}
@layer components {
.var-ui-input-group__group { display: inline-flex; align-items: stretch; }
}
@layer components {
.var-ui-input-group__group > * { border-radius: 0; position: relative; }
}
@layer components {
.var-ui-input-group__group > * + * { margin-inline-start: -1px; }
}
@layer components {
.var-ui-input-group__group > *:first-child { border-start-start-radius: var(--var-ui-radius-md); border-end-start-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-input-group__group > *:last-child { border-start-end-radius: var(--var-ui-radius-md); border-end-end-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-input-group__group > *:focus-within, .var-ui-input-group__group > *:hover { z-index: 1; }
}
@layer components {
.var-ui-input-group__group[data-disabled] { opacity: 0.5; cursor: not-allowed; }
}
@layer components {
.var-ui-input-group__group[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-input-group__group[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-input-group__group[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-input-group__input { flex: 1; min-width: 0; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-input-group-inputborder); font-size: inherit; background-color: var(--var-ui-input-group-inputbackground); color: var(--var-ui-input-group-inputforeground); }
}
@layer components {
.var-ui-input-group__input:focus { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-input-group-inputborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-input-group__input::placeholder { color: var(--var-ui-input-group-placeholdercolor); }
}
@layer components {
.var-ui-input-group__input:disabled { cursor: not-allowed; }
}
@layer components {
.var-ui-input-group__input[data-size="sm"] { height: 100%; padding-block: 0; padding-inline: 0; }
}
@layer components {
.var-ui-input-group__input[data-size="md"] { height: 100%; padding-block: 0; padding-inline: 0; }
}
@layer components {
.var-ui-input-group__input[data-size="lg"] { height: 100%; padding-block: 0; padding-inline: 0; }
}
@layer components {
.var-ui-input-group__text { display: flex; align-items: center; padding-inline: var(--var-ui-space-2); background-color: var(--var-ui-input-group-textbackground); color: var(--var-ui-input-group-textforeground); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-input-group-inputborder); white-space: nowrap; flex-shrink: 0; }
}
@layer components {
.var-ui-input-group__text[data-size="sm"] { font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-input-group__text[data-size="md"] { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-input-group__text[data-size="lg"] { font-size: var(--var-ui-fontSize-lg); }
}
@property --var-ui-kbd-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-kbd-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-kbd { --var-ui-kbd-background: var(--var-ui-color-background-subtle); --var-ui-kbd-border: var(--var-ui-color-border-subtle); display: inline-block; padding: 1px var(--var-ui-space-1); font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-medium); line-height: var(--var-ui-lineHeight-normal); color: var(--var-ui-color-text-secondary); background-color: var(--var-ui-kbd-background); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-kbd-border); border-bottom-width: 2px; border-radius: var(--var-ui-radius-sm); white-space: nowrap; }
}
@layer components {
.var-ui-link { color: var(--var-ui-color-link-default); font-size: var(--var-ui-fontSize-md); text-decoration: none; font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-link:hover { text-decoration: underline; }
}
@layer components {
.var-ui-link:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-sm); }
}
@property --var-ui-list-root { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-hoverbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-pressbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-dividercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-list-itempaddingy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-list-itempaddingx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-list { --var-ui-list-root: transparent; --var-ui-list-labelcolor: var(--var-ui-color-text-primary); --var-ui-list-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-list-hoverbg: var(--var-ui-color-background-subtle); --var-ui-list-pressbg: var(--var-ui-color-background-elevated); --var-ui-list-dividercolor: var(--var-ui-color-border-default); --var-ui-list-itempaddingy: var(--var-ui-space-2); --var-ui-list-itempaddingx: var(--var-ui-space-3); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: var(--var-ui-list-root); }
}
@layer components {
.var-ui-list[data-list-style="disc"] { list-style: disc; padding-left: var(--var-ui-space-5); }
}
@layer components {
.var-ui-list[data-list-style="decimal"] { list-style: decimal; padding-left: var(--var-ui-space-5); }
}
@layer components {
.var-ui-list__header { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-list-labelcolor); padding: var(--var-ui-space-2) var(--var-ui-list-itempaddingx); }
}
@layer components {
.var-ui-list__item { display: flex; align-items: center; gap: var(--var-ui-space-3); position: relative; padding: var(--var-ui-list-itempaddingy) var(--var-ui-list-itempaddingx); color: var(--var-ui-list-labelcolor); }
}
@layer components {
.var-ui-list__item[data-interactive] { cursor: pointer; }
}
@layer components {
.var-ui-list__item[data-interactive]:hover { background-color: var(--var-ui-list-hoverbg); }
}
@layer components {
.var-ui-list__item[data-interactive]:active { background-color: var(--var-ui-list-pressbg); }
}
@layer components {
.var-ui-list__item[data-disabled] { opacity: var(--var-ui-opacity-disabled); pointer-events: none; }
}
@layer components {
[data-has-dividers] >.var-ui-list__item:not(:last-child) { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-list-dividercolor); }
}
@layer components {
.var-ui-list__item[data-density="compact"] { --var-ui-list-itempaddingy: var(--var-ui-space-1); --var-ui-list-itempaddingx: var(--var-ui-space-2); }
}
@layer components {
.var-ui-list__item[data-density="spacious"] { --var-ui-list-itempaddingy: var(--var-ui-space-3); --var-ui-list-itempaddingx: var(--var-ui-space-4); }
}
@layer components {
.var-ui-list__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-list-labelcolor); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-list__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-list-descriptioncolor); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-list__start { display: flex; flex-shrink: 0; align-items: center; }
}
@layer components {
.var-ui-list__end { display: flex; flex-shrink: 0; align-items: center; margin-left: auto; }
}
@layer components {
.var-ui-list__divider { display: none; }
}
@property --var-ui-loading-overlay-backdrop { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-loading-overlay { --var-ui-loading-overlay-backdrop: var(--var-ui-color-overlay-backdrop); }
}
@property --var-ui-layout-padding-outer-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-layout-padding-outer-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-layout-padding-inner-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-layout-padding-inner-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-layout-content-width { syntax: "<length> | none"; inherits: true; initial-value: none; }
@layer components {
.var-ui-layout { --var-ui-layout-padding-outer-x: var(--var-ui-space-4); --var-ui-layout-padding-outer-y: var(--var-ui-space-4); --var-ui-layout-padding-inner-x: var(--var-ui-space-4); --var-ui-layout-padding-inner-y: var(--var-ui-space-4); --var-ui-layout-content-width: none; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
}
@layer components {
.var-ui-layout[data-height="fill"] { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}
@layer components {
.var-ui-layout[data-height="auto"] { flex: none; }
}
@layer components {
.var-ui-layout__outer { margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px)); margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px)); margin-block-start: calc(-1 * var(--container-padding-block-start, 0px)); margin-block-end: calc(-1 * var(--container-padding-block-end, 0px)); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
}
@layer components {
.var-ui-layout__inner { --container-padding-inline-start: 0px; --container-padding-inline-end: 0px; --container-padding-block-start: 0px; --container-padding-block-end: 0px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
}
@layer components {
.var-ui-layout__middle { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
}
@property --var-ui-layout-header-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-layout-header__header { --var-ui-layout-header-border: var(--var-ui-color-border-default); flex-shrink: 0; min-width: 0; padding-inline: var(--var-ui-layout-padding-outer-x); padding-block-start: var(--var-ui-layout-padding-outer-y); padding-block-end: var(--var-ui-layout-padding-outer-y); }
}
@layer components {
.var-ui-layout-header__header[data-divider], [data-divider-header] .var-ui-layout-header__header { padding-block-end: var(--var-ui-layout-padding-inner-y); border-block-end-width: var(--var-ui-borderWidth-default); border-block-end-style: solid; border-block-end-color: var(--var-ui-layout-header-border); }
}
@layer components {
.var-ui-layout-header__headerInner { max-width: var(--var-ui-layout-content-width); margin-inline: auto; width: 100%; min-width: 0; }
}
@property --var-ui-layout-footer-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-layout-footer__footer { --var-ui-layout-footer-border: var(--var-ui-color-border-default); flex-shrink: 0; min-width: 0; padding-inline: var(--var-ui-layout-padding-outer-x); padding-block-end: var(--var-ui-layout-padding-outer-y); padding-block-start: var(--var-ui-layout-padding-outer-y); }
}
@layer components {
.var-ui-layout-footer__footer[data-divider], [data-divider-footer] .var-ui-layout-footer__footer { padding-block-start: var(--var-ui-layout-padding-inner-y); border-block-start-width: var(--var-ui-borderWidth-default); border-block-start-style: solid; border-block-start-color: var(--var-ui-layout-footer-border); }
}
@layer components {
.var-ui-layout-footer__footerInner { max-width: var(--var-ui-layout-content-width); margin-inline: auto; width: 100%; min-width: 0; }
}
@layer components {
.var-ui-layout-content__content { flex: 1 1 auto; min-width: 0; min-height: 0; padding-inline-start: var(--var-ui-layout-padding-outer-x); padding-inline-end: var(--var-ui-layout-padding-outer-x); padding-block-start: var(--var-ui-layout-padding-outer-y); padding-block-end: var(--var-ui-layout-padding-outer-y); }
}
@layer components {
[data-has-start] .var-ui-layout-content__content { padding-inline-start: var(--var-ui-layout-padding-inner-x); }
}
@layer components {
[data-has-end] .var-ui-layout-content__content { padding-inline-end: var(--var-ui-layout-padding-inner-x); }
}
@layer components {
[data-has-header] .var-ui-layout-content__content { padding-block-start: var(--var-ui-layout-padding-inner-y); }
}
@layer components {
[data-has-footer] .var-ui-layout-content__content { padding-block-end: var(--var-ui-layout-padding-inner-y); }
}
@layer components {
.var-ui-layout-content__content[data-is-scrollable] { overflow: auto; }
}
@layer components {
.var-ui-layout-content__content:not([data-is-scrollable]) { overflow: visible; }
}
@layer components {
.var-ui-layout-content__content[data-padding="0"] { padding: 0; }
}
@property --var-ui-layout-panel-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-layout-panel-overlaybackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-layout-panel-panelbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-layout-panel__panel { --var-ui-layout-panel-border: var(--var-ui-color-border-default); --var-ui-layout-panel-overlaybackground: var(--var-ui-color-overlay-backdrop); --var-ui-layout-panel-panelbackground: var(--var-ui-color-background-surface); flex-shrink: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-inline-start: var(--var-ui-layout-padding-outer-x); padding-inline-end: var(--var-ui-layout-padding-outer-x); padding-block-start: var(--var-ui-layout-padding-outer-y); padding-block-end: var(--var-ui-layout-padding-outer-y); }
}
@layer components {
[data-has-header] .var-ui-layout-panel__panel { padding-block-start: var(--var-ui-layout-padding-inner-y); }
}
@layer components {
[data-has-footer] .var-ui-layout-panel__panel { padding-block-end: var(--var-ui-layout-padding-inner-y); }
}
@layer components {
.var-ui-layout-panel__panel[data-side="start"] { padding-inline-start: var(--var-ui-layout-padding-outer-x); padding-inline-end: var(--var-ui-layout-padding-inner-x); }
}
@layer components {
[data-has-start] .var-ui-layout-panel__panel[data-side="start"] { padding-inline-start: var(--var-ui-layout-padding-inner-x); }
}
@layer components {
.var-ui-layout-panel__panel[data-side="end"] { padding-inline-start: var(--var-ui-layout-padding-inner-x); padding-inline-end: var(--var-ui-layout-padding-outer-x); }
}
@layer components {
[data-has-end] .var-ui-layout-panel__panel[data-side="end"] { padding-inline-end: var(--var-ui-layout-padding-inner-x); }
}
@layer components {
.var-ui-layout-panel__panel[data-is-scrollable] { overflow: auto; }
}
@layer components {
.var-ui-layout-panel__panel:not([data-is-scrollable]) { overflow: visible; }
}
@layer components {
.var-ui-layout-panel__panel[data-has-divider][data-side="start"] { border-inline-end-width: var(--var-ui-borderWidth-default); border-inline-end-style: solid; border-inline-end-color: var(--var-ui-layout-panel-border); }
}
@layer components {
.var-ui-layout-panel__panel[data-has-divider][data-side="end"] { border-inline-start-width: var(--var-ui-borderWidth-default); border-inline-start-style: solid; border-inline-start-color: var(--var-ui-layout-panel-border); }
}
@layer components {
.var-ui-layout-panel__panel:not([data-has-divider])[data-side="start"] { margin-inline-end: calc(-1 * var(--var-ui-layout-padding-inner-x)); }
}
@layer components {
.var-ui-layout-panel__panel:not([data-has-divider])[data-side="end"] { margin-inline-start: calc(-1 * var(--var-ui-layout-padding-inner-x)); }
}
@layer components {
.var-ui-layout-panel__panel[data-padding="0"] { padding: 0; }
}
@layer components {
.var-ui-layout-panel__overlay { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; background-color: var(--var-ui-layout-panel-panelbackground); box-shadow: var(--var-ui-shadow-lg); }
}
@layer components {
.var-ui-layout-panel__overlay[data-side="start"] { inset-inline-start: 0; border-inline-end-width: var(--var-ui-borderWidth-default); border-inline-end-style: solid; border-inline-end-color: var(--var-ui-layout-panel-border); }
}
@layer components {
.var-ui-layout-panel__overlay[data-side="end"] { inset-inline-end: 0; border-inline-start-width: var(--var-ui-borderWidth-default); border-inline-start-style: solid; border-inline-start-color: var(--var-ui-layout-panel-border); }
}
@layer components {
.var-ui-layout-panel__overlay[data-is-scrollable] { overflow: auto; }
}
@layer components {
.var-ui-layout-panel__overlay:not([data-is-scrollable]) { overflow: visible; }
}
@layer components {
.var-ui-layout-panel__overlayBackdrop { position: fixed; inset: 0; background-color: var(--var-ui-layout-panel-overlaybackground); }
}
@property --var-ui-menu-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-itemforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-itemdisabledforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-sectionheaderforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-separatorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-menu-dangerforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-menu__popover { --var-ui-menu-popoverbackground: var(--var-ui-color-background-surface); --var-ui-menu-popoverborder: var(--var-ui-color-border-default); --var-ui-menu-itemforeground: var(--var-ui-color-text-primary); --var-ui-menu-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-menu-itemdisabledforeground: var(--var-ui-color-text-secondary); --var-ui-menu-sectionheaderforeground: var(--var-ui-color-text-secondary); --var-ui-menu-separatorcolor: var(--var-ui-color-border-default); --var-ui-menu-dangerforeground: var(--var-ui-color-tone-danger-foreground); transition: var(--var-ui-transition-panelEnter), transform var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); transform-origin: var(--var-ui-transform-origin, center); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-menu-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-menu-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); min-width: 12rem; }
}
@layer components {
.var-ui-menu__popover[data-starting-style], .var-ui-menu__popover[data-ending-style] { opacity: 0; transform: scale(0.98); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-menu__popover { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-menu__popover[data-starting-style], .var-ui-menu__popover[data-ending-style] { opacity: 1; } }
}
@layer components {
.var-ui-menu__menu { outline: none; }
}
@layer components {
.var-ui-menu__section { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-menu__sectionHeader { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-menu-sectionheaderforeground); padding: var(--var-ui-space-1) var(--var-ui-space-3); }
}
@layer components {
.var-ui-menu__item { display: flex; align-items: center; gap: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; color: var(--var-ui-menu-itemforeground); outline: none; }
}
@layer components {
.var-ui-menu__item[data-focused] { background-color: var(--var-ui-menu-itemfocusedbackground); }
}
@layer components {
.var-ui-menu__item[data-disabled] { color: var(--var-ui-menu-itemdisabledforeground); cursor: not-allowed; }
}
@layer components {
.var-ui-menu__itemDanger { color: var(--var-ui-menu-dangerforeground); }
}
@layer components {
.var-ui-menu__itemLabel { flex: 1; min-width: 0; }
}
@layer components {
.var-ui-menu__itemShortcut { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-menu-sectionheaderforeground); }
}
@layer components {
.var-ui-menu__itemCheck { display: inline-flex; width: 1rem; flex-shrink: 0; }
}
@layer components {
.var-ui-menu__separator { height: 1px; margin: var(--var-ui-space-1) 0; background-color: var(--var-ui-menu-separatorcolor); }
}
@layer components {
.var-ui-menu__submenuChevron { display: inline-flex; margin-inline-start: auto; color: var(--var-ui-menu-sectionheaderforeground); }
}
@property --var-ui-mobile-nav-overlaybackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-panelbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-panelborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-panelwidth { syntax: "<length>"; inherits: true; initial-value: 320px; }
@property --var-ui-mobile-nav-headercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-togglecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-togglehoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-mobile-nav-closebuttoncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-mobile-nav__overlay { --var-ui-mobile-nav-overlaybackground: var(--var-ui-color-overlay-default); --var-ui-mobile-nav-panelbackground: var(--var-ui-color-background-surface); --var-ui-mobile-nav-panelborder: var(--var-ui-color-border-default); --var-ui-mobile-nav-panelwidth: 320px; --var-ui-mobile-nav-headercolor: var(--var-ui-color-text-primary); --var-ui-mobile-nav-togglecolor: var(--var-ui-color-text-secondary); --var-ui-mobile-nav-togglehoverbackground: var(--var-ui-color-background-subtle); --var-ui-mobile-nav-closebuttoncolor: var(--var-ui-color-text-secondary); position: fixed; inset: 0; background-color: var(--var-ui-mobile-nav-overlaybackground); }
}
@layer components {
.var-ui-mobile-nav__overlay:not([data-open]) { display: none; }
}
@layer components {
.var-ui-mobile-nav__panel { position: fixed; top: 0; bottom: 0; width: min(var(--var-ui-mobile-nav-panelwidth), 85vw); max-width: 85vw; display: flex; flex-direction: column; background-color: var(--var-ui-mobile-nav-panelbackground); box-shadow: var(--var-ui-shadow-lg); overflow-y: auto; transition: transform 200ms ease; }
}
@layer components {
.var-ui-mobile-nav__panel[data-side="start"] { inset-inline-start: 0; border-inline-end-width: var(--var-ui-borderWidth-default); border-inline-end-style: solid; border-inline-end-color: var(--var-ui-mobile-nav-panelborder); transform: translateX(0); }
}
@layer components {
.var-ui-mobile-nav__panel[data-side="start"]:not([data-open]) { transform: translateX(-100%); box-shadow: none; }
}
@layer components {
[dir="rtl"] .var-ui-mobile-nav__panel[data-side="start"]:not([data-open]) { transform: translateX(100%); }
}
@layer components {
.var-ui-mobile-nav__panel[data-side="end"] { inset-inline-end: 0; border-inline-start-width: var(--var-ui-borderWidth-default); border-inline-start-style: solid; border-inline-start-color: var(--var-ui-mobile-nav-panelborder); transform: translateX(0); }
}
@layer components {
.var-ui-mobile-nav__panel[data-side="end"]:not([data-open]) { transform: translateX(100%); box-shadow: none; }
}
@layer components {
[dir="rtl"] .var-ui-mobile-nav__panel[data-side="end"]:not([data-open]) { transform: translateX(-100%); }
}
@layer components {
.var-ui-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-3); padding: var(--var-ui-space-4); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-mobile-nav-panelborder); color: var(--var-ui-mobile-nav-headercolor); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); flex-shrink: 0; }
}
@layer components {
.var-ui-mobile-nav__closeButton { appearance: none; border: none; background: transparent; color: var(--var-ui-mobile-nav-closebuttoncolor); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: var(--var-ui-space-1); margin-inline-end: calc(var(--var-ui-space-1) * -1); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-mobile-nav__closeButton:hover { background-color: var(--var-ui-mobile-nav-togglehoverbackground); color: var(--var-ui-mobile-nav-headercolor); }
}
@layer components {
.var-ui-mobile-nav__closeButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-mobile-nav__toggle { appearance: none; border: none; background: transparent; color: var(--var-ui-mobile-nav-togglecolor); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-mobile-nav__toggle:hover { background-color: var(--var-ui-mobile-nav-togglehoverbackground); color: var(--var-ui-mobile-nav-headercolor); }
}
@layer components {
.var-ui-mobile-nav__toggle:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@property --var-ui-multiselector-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-triggerbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-triggerborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-triggerforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-multiselector-itemcheckboxborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-multiSelector { --var-ui-multiselector-labelcolor: var(--var-ui-color-text-primary); --var-ui-multiselector-triggerbackground: var(--var-ui-color-background-surface); --var-ui-multiselector-triggerborder: var(--var-ui-color-border-default); --var-ui-multiselector-triggerforeground: var(--var-ui-color-text-primary); --var-ui-multiselector-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-multiselector-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-multiselector-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-multiselector-popoverbackground: var(--var-ui-color-background-surface); --var-ui-multiselector-popoverborder: var(--var-ui-color-border-default); --var-ui-multiselector-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-multiselector-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-multiselector-itemcheckboxborder: var(--var-ui-color-border-default); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-multiSelector__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-multiselector-labelcolor); }
}
@layer components {
.var-ui-multiSelector__trigger { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); width: 100%; text-align: left; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-multiselector-triggerborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); background-color: var(--var-ui-multiselector-triggerbackground); color: var(--var-ui-multiselector-triggerforeground); font-size: var(--var-ui-fontSize-md); cursor: pointer; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-multiSelector__trigger:hover, .var-ui-multiSelector__trigger[data-hovered] { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-multiSelector__trigger[data-focus-visible]:not([data-pressed]) { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-multiSelector__trigger[data-pressed] { border-color: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-multiSelector__triggerValue { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-multiSelector__triggerValue[data-placeholder] { color: var(--var-ui-multiselector-placeholdercolor); }
}
@layer components {
.var-ui-multiSelector__triggerIcon { display: inline-flex; flex-shrink: 0; color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-multiSelector__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-multiselector-descriptioncolor); }
}
@layer components {
.var-ui-multiSelector__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-multiselector-errorcolor); }
}
@layer components {
.var-ui-multiSelector__popover { --var-ui-multiselector-popoverborder: var(--var-ui-color-border-default); --var-ui-multiselector-popoverbackground: var(--var-ui-color-background-surface); --var-ui-multiselector-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-multiselector-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); z-index: var(--var-ui-zIndex-dropdown); box-sizing: border-box; width: var(--trigger-width); min-width: var(--trigger-width); max-height: 16rem; overflow: hidden; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-multiselector-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-multiselector-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); outline: none; }
}
@layer components {
.var-ui-multiSelector__listbox { display: flex; flex-direction: column; gap: var(--var-ui-space-1); max-height: calc(16rem - 2 * var(--var-ui-space-1)); overflow-y: auto; outline: none; }
}
@layer components {
.var-ui-multiSelector__item { font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; outline: none; display: flex; align-items: center; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-multiSelector__item[data-focused], .var-ui-multiSelector__item[data-hovered] { background-color: var(--var-ui-multiselector-itemfocusedbackground); }
}
@layer components {
.var-ui-multiSelector__item[data-selected] { color: var(--var-ui-multiselector-itemselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-multiSelector__itemCheckbox { width: 1rem; height: 1rem; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-multiselector-itemcheckboxborder); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
}
@layer components {
.var-ui-multiSelector__itemCheckbox[data-selected] { background-color: var(--var-ui-multiselector-itemselectedcolor); }
}
@layer components {
.var-ui-multiSelector__itemLabel { flex: 1; min-width: 0; }
}
@property --var-ui-number-input-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-stepperbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-number-input-stepperforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-number-input { --var-ui-number-input-labelcolor: var(--var-ui-color-text-primary); --var-ui-number-input-inputbackground: var(--var-ui-color-background-surface); --var-ui-number-input-inputborder: var(--var-ui-color-border-default); --var-ui-number-input-inputforeground: var(--var-ui-color-text-primary); --var-ui-number-input-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-number-input-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-number-input-stepperbackground: var(--var-ui-color-background-subtle); --var-ui-number-input-stepperforeground: var(--var-ui-color-text-primary); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-number-input__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-number-input-labelcolor); }
}
@layer components {
.var-ui-number-input__group { display: flex; align-items: stretch; }
}
@layer components {
.var-ui-number-input__input { flex: 1; min-width: 0; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-number-input-inputborder); border-radius: var(--var-ui-radius-md) 0 0 var(--var-ui-radius-md); background-color: var(--var-ui-number-input-inputbackground); color: var(--var-ui-number-input-inputforeground); }
}
@layer components {
.var-ui-number-input__input:focus { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-number-input-inputborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-number-input__input[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-number-input__input[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-number-input__input[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-number-input__stepper { display: flex; flex-direction: column; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-number-input-inputborder); border-inline-start: none; border-radius: 0 var(--var-ui-radius-md) var(--var-ui-radius-md) 0; overflow: hidden; }
}
@layer components {
.var-ui-number-input__stepper button { appearance: none; border: none; background-color: var(--var-ui-number-input-stepperbackground); color: var(--var-ui-number-input-stepperforeground); padding: var(--var-ui-space-1) var(--var-ui-space-2); cursor: pointer; font-size: var(--var-ui-fontSize-sm); line-height: 1; }
}
@layer components {
.var-ui-number-input__stepper button:hover { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-number-input__stepper button:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: -2px; }
}
@layer components {
.var-ui-number-input__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-number-input-descriptioncolor); }
}
@layer components {
.var-ui-number-input__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-number-input-errorcolor); }
}
@property --var-ui-outline-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-outline-titlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-outline-linkcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-outline-linkactivecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-outline { --var-ui-outline-border: var(--var-ui-color-border-default); --var-ui-outline-titlecolor: var(--var-ui-color-text-secondary); --var-ui-outline-linkcolor: var(--var-ui-color-text-secondary); --var-ui-outline-linkactivecolor: var(--var-ui-color-text-primary); padding-inline-start: var(--var-ui-space-2); border-inline-start-width: var(--var-ui-borderWidth-default); border-inline-start-style: solid; border-inline-start-color: var(--var-ui-outline-border); }
}
@layer components {
.var-ui-outline__title { margin: 0; margin-bottom: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--var-ui-outline-titlecolor); }
}
@layer components {
.var-ui-outline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-outline__link { display: block; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-outline-linkcolor); text-decoration: none; }
}
@layer components {
.var-ui-outline__link:hover { color: var(--var-ui-outline-linkactivecolor); }
}
@layer components {
.var-ui-outline__linkActive { display: block; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-outline-linkactivecolor); font-weight: var(--var-ui-fontWeight-semibold); text-decoration: none; }
}
@layer components {
.var-ui-outline__linkNested { padding-inline-start: var(--var-ui-space-3); }
}
@property --var-ui-overflow-list-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-overflow-list { --var-ui-overflow-list-gap: var(--var-ui-space-3); display: flex; flex-direction: row; align-items: center; gap: var(--var-ui-overflow-list-gap); min-width: 0; overflow: hidden; }
}
@layer components {
.var-ui-overflow-list[data-gap="none"] { --var-ui-overflow-list-gap: 0px; }
}
@layer components {
.var-ui-overflow-list[data-gap="xs"] { --var-ui-overflow-list-gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-overflow-list[data-gap="sm"] { --var-ui-overflow-list-gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-overflow-list[data-gap="md"] { --var-ui-overflow-list-gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-overflow-list[data-gap="lg"] { --var-ui-overflow-list-gap: var(--var-ui-space-5); }
}
@layer components {
.var-ui-overflow-list[data-gap="xl"] { --var-ui-overflow-list-gap: var(--var-ui-space-8); }
}
@layer components {
.var-ui-overflow-list[data-fill-parent] { width: 100%; }
}
@layer components {
.var-ui-overflow-list__item { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
}
@layer components {
.var-ui-overflow-list__overflow { display: flex; align-items: center; flex-shrink: 0; }
}
@property --var-ui-overlay-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-overlay__backdrop { --var-ui-overlay-background: var(--var-ui-color-overlay-backdrop); transition: var(--var-ui-transition-backdrop); transform-origin: var(--var-ui-transform-origin, center); position: fixed; inset: 0; background-color: var(--var-ui-overlay-background); }
}
@layer components {
.var-ui-overlay__backdrop[data-starting-style], .var-ui-overlay__backdrop[data-ending-style] { opacity: 0; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-overlay__backdrop { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-overlay__backdrop[data-starting-style], .var-ui-overlay__backdrop[data-ending-style] { opacity: 1; } }
}
@layer components {
@supports (-webkit-touch-callout: none) { .var-ui-overlay__backdrop { position: absolute; height: 100dvh; } }
}
@layer components {
.var-ui-overlay__positioner { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--var-ui-space-4); }
}
@property --var-ui-pagination-textcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pagination-dotcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-pagination { --var-ui-pagination-textcolor: var(--var-ui-color-text-secondary); --var-ui-pagination-dotcolor: var(--var-ui-color-border-default); display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-4); flex-wrap: wrap; }
}
@layer components {
.var-ui-pagination__controls { display: flex; align-items: center; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; color: var(--var-ui-pagination-textcolor); font-size: var(--var-ui-fontSize-sm); user-select: none; }
}
@layer components {
.var-ui-pagination__ellipsis[data-size="sm"] { min-width: 1.5rem; height: 1.5rem; font-size: var(--var-ui-fontSize-xs); }
}
@layer components {
.var-ui-pagination__infoText { display: flex; align-items: center; white-space: nowrap; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-pagination-textcolor); }
}
@layer components {
.var-ui-pagination__dotsContainer { display: flex; align-items: center; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-pagination__dot { width: var(--var-ui-space-2); height: var(--var-ui-space-2); border-width: 0; padding: 0; border-radius: 50%; background-color: var(--var-ui-pagination-dotcolor); cursor: pointer; transition: background-color var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
.var-ui-pagination__dot:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-pagination__dot:disabled { cursor: not-allowed; opacity: 0.5; }
}
@layer components {
.var-ui-pagination__dot[data-size="sm"] { width: var(--var-ui-space-1); height: var(--var-ui-space-1); }
}
@layer components {
.var-ui-pagination__dotActive { background-color: var(--var-ui-color-tone-accent-background); }
}
@layer components {
.var-ui-pagination__pageSizeGroup { display: flex; align-items: center; gap: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-pagination-textcolor); }
}
@property --var-ui-password-field-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-togglecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-password-field-togglehoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-password-field { --var-ui-password-field-labelcolor: var(--var-ui-color-text-primary); --var-ui-password-field-inputbackground: var(--var-ui-color-background-surface); --var-ui-password-field-inputborder: var(--var-ui-color-border-default); --var-ui-password-field-inputforeground: var(--var-ui-color-text-primary); --var-ui-password-field-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-password-field-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-password-field-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-password-field-togglecolor: var(--var-ui-color-text-secondary); --var-ui-password-field-togglehoverbackground: var(--var-ui-color-background-subtle); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-password-field__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-password-field-labelcolor); }
}
@layer components {
.var-ui-password-field__inputWrapper { display: flex; align-items: center; gap: var(--var-ui-space-1); box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-password-field-inputborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-password-field-inputbackground); color: var(--var-ui-password-field-inputforeground); transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-password-field__inputWrapper:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-password-field__inputWrapper:focus-within { outline: 1px solid var(--var-ui-color-border-focus); box-shadow: 0 0 3px var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-password-field__inputWrapper[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-password-field__inputWrapper[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-password-field__inputWrapper[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-password-field__inputWrapper[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-password-field__input { flex: 1; min-width: 0; border: none; margin: 0; padding: 0; background-color: transparent; font-size: inherit; font-family: var(--var-ui-fontFamily-body); color: var(--var-ui-password-field-inputforeground); outline: none; }
}
@layer components {
.var-ui-password-field__input::placeholder { color: var(--var-ui-password-field-placeholdercolor); }
}
@layer components {
.var-ui-password-field__input:disabled { cursor: not-allowed; }
}
@layer components {
.var-ui-password-field__visibilityToggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; margin: 0; padding: var(--var-ui-space-1); border-radius: var(--var-ui-radius-sm); background-color: transparent; color: var(--var-ui-password-field-togglecolor); cursor: pointer; line-height: 0; }
}
@layer components {
.var-ui-password-field__visibilityToggle:hover { background-color: var(--var-ui-password-field-togglehoverbackground); }
}
@layer components {
.var-ui-password-field__visibilityToggle:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-password-field__visibilityToggle:disabled { cursor: not-allowed; opacity: 0.5; }
}
@layer components {
.var-ui-password-field__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-password-field-descriptioncolor); }
}
@layer components {
.var-ui-password-field__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-password-field-errorcolor); }
}
@property --var-ui-pin-input-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pin-input-cellbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pin-input-cellborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pin-input-cellforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pin-input-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-pin-input-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-pin-input { --var-ui-pin-input-labelcolor: var(--var-ui-color-text-primary); --var-ui-pin-input-cellbackground: var(--var-ui-color-background-surface); --var-ui-pin-input-cellborder: var(--var-ui-color-border-default); --var-ui-pin-input-cellforeground: var(--var-ui-color-text-primary); --var-ui-pin-input-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-pin-input-errorcolor: var(--var-ui-color-tone-danger-foreground); display: grid; gap: var(--var-ui-space-1); width: fit-content; }
}
@layer components {
.var-ui-pin-input__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-pin-input-labelcolor); }
}
@layer components {
.var-ui-pin-input__group { display: flex; align-items: center; gap: var(--var-ui-space-2); width: fit-content; }
}
@layer components {
.var-ui-pin-input__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-pin-input__cell { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-pin-input-cellborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-pin-input-cellbackground); color: var(--var-ui-pin-input-cellforeground); font-family: var(--var-ui-fontFamily-body); font-variant-numeric: tabular-nums; outline: none; }
}
@layer components {
.var-ui-pin-input__cell:focus { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-pin-input-cellborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-pin-input__cell:disabled { cursor: not-allowed; }
}
@layer components {
.var-ui-pin-input__cell[data-size="sm"] { box-sizing: border-box; width: var(--var-ui-size-control-sm); height: var(--var-ui-size-control-sm); min-width: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding: 0; text-align: center; }
}
@layer components {
.var-ui-pin-input__cell[data-size="md"] { box-sizing: border-box; width: var(--var-ui-size-control-md); height: var(--var-ui-size-control-md); min-width: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding: 0; text-align: center; }
}
@layer components {
.var-ui-pin-input__cell[data-size="lg"] { box-sizing: border-box; width: var(--var-ui-size-control-lg); height: var(--var-ui-size-control-lg); min-width: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding: 0; text-align: center; }
}
@layer components {
.var-ui-pin-input__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-pin-input-descriptioncolor); }
}
@layer components {
.var-ui-pin-input__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-pin-input-errorcolor); }
}
@property --var-ui-popover-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-popover-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-popover-titleforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-popover { --var-ui-popover-background: var(--var-ui-color-background-surface); --var-ui-popover-border: var(--var-ui-color-border-default); --var-ui-popover-titleforeground: var(--var-ui-color-text-primary); transition: var(--var-ui-transition-panelEnter), transform var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); transform-origin: var(--var-ui-transform-origin, center); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-popover-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-popover-background); box-shadow: var(--var-ui-shadow-md); min-width: 12rem; max-height: var(--var-ui-available-height, none); outline: none; }
}
@layer components {
.var-ui-popover[data-starting-style], .var-ui-popover[data-ending-style] { opacity: 0; transform: scale(0.98); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-popover { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-popover[data-starting-style], .var-ui-popover[data-ending-style] { opacity: 1; } }
}
@layer components {
.var-ui-popover__title { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-popover-titleforeground); margin: 0; padding: var(--var-ui-space-3) var(--var-ui-space-3) var(--var-ui-space-2); }
}
@layer components {
.var-ui-popover__content { padding: var(--var-ui-space-2) var(--var-ui-space-3) var(--var-ui-space-3); outline: none; }
}
@layer components {
.var-ui-popover__arrow { width: 8px; height: 8px; background-color: var(--var-ui-popover-background); transform: rotate(45deg); }
}
@layer components {
.var-ui-popover__arrow[data-placement="bottom"] { transform: translateY(50%) rotate(45deg); }
}
@layer components {
.var-ui-popover__arrow[data-placement="top"] { transform: translateY(-50%) rotate(45deg); }
}
@layer components {
.var-ui-popover__arrow[data-placement="left"] { transform: translateX(-50%) rotate(45deg); }
}
@layer components {
.var-ui-popover__arrow[data-placement="right"] { transform: translateX(50%) rotate(45deg); }
}
@keyframes var-ui-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
@property --var-ui-progress-bar-trackcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-progress-bar-fillcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-progress-bar { --var-ui-progress-bar-trackcolor: var(--var-ui-color-background-subtle); --var-ui-progress-bar-fillcolor: var(--var-ui-color-tone-accent-foreground); display: grid; gap: var(--var-ui-space-1); min-width: 160px; }
}
@layer components {
.var-ui-progress-bar[data-tone="accent"] { --var-ui-progress-bar-fillcolor: var(--var-ui-color-tone-accent-background); }
}
@layer components {
.var-ui-progress-bar[data-tone="success"] { --var-ui-progress-bar-fillcolor: var(--var-ui-color-tone-success-background); }
}
@layer components {
.var-ui-progress-bar[data-tone="warning"] { --var-ui-progress-bar-fillcolor: var(--var-ui-color-tone-warning-background); }
}
@layer components {
.var-ui-progress-bar[data-tone="danger"] { --var-ui-progress-bar-fillcolor: var(--var-ui-color-tone-danger-background); }
}
@layer components {
.var-ui-progress-bar__header { display: flex; justify-content: space-between; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-progress-bar__label { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-progress-bar__valueText { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-progress-bar__track { height: 6px; border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-progress-bar-trackcolor); overflow: hidden; }
}
@layer components {
.var-ui-progress-bar__fill { height: 100%; border-radius: inherit; background-color: var(--var-ui-progress-bar-fillcolor); transition: width var(--var-ui-duration-medium) var(--var-ui-easing-standard); }
}
@layer components {
.var-ui-progress-bar__fill[data-appearance="subtle"] { background-color: color-mix(in srgb, var(--var-ui-progress-bar-fillcolor) 55%, var(--var-ui-color-background-subtle)); }
}
@layer components {
.var-ui-progress-bar__fill[data-indeterminate] { width: 25%; animation: var-ui-progress-slide 1200ms ease-in-out infinite; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-progress-bar__fill[data-indeterminate] { animation: none; width: 100%; opacity: 0.5; } }
}
@property --var-ui-docs-prose-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-secondarycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-blockquoteborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-blockquotebackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-prebackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-preborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-inlinecodebackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-tableborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-tableheaderbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-docs-prose-tablecellborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer utilities {
.var-ui-docs-prose { --var-ui-docs-prose-foreground: var(--var-ui-color-text-primary); --var-ui-docs-prose-secondarycolor: var(--var-ui-color-text-secondary); --var-ui-docs-prose-blockquoteborder: var(--var-ui-color-border-strong); --var-ui-docs-prose-blockquotebackground: var(--var-ui-color-background-subtle); --var-ui-docs-prose-prebackground: var(--var-ui-color-background-subtle); --var-ui-docs-prose-preborder: var(--var-ui-color-border-default); --var-ui-docs-prose-inlinecodebackground: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 10%, var(--var-ui-color-background-subtle)); --var-ui-docs-prose-tableborder: var(--var-ui-color-border-strong); --var-ui-docs-prose-tableheaderbackground: var(--var-ui-color-background-subtle); --var-ui-docs-prose-tablecellborder: var(--var-ui-color-border-default); font-family: var(--var-ui-fontFamily-body); font-size: var(--var-ui-fontSize-md); line-height: 1.75; color: var(--var-ui-docs-prose-foreground); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-prose { line-height: 1.82; }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-prose { line-height: 1.82; } }
}
@layer utilities {
.var-ui-docs-prose h1 { font-family: var(--var-ui-fontFamily-display); font-style: italic; font-size: 28px; font-weight: var(--var-ui-fontWeight-bold); letter-spacing: var(--var-ui-letterSpacing-tight); line-height: 1.25; margin-top: 0; margin-bottom: var(--var-ui-space-3); color: var(--var-ui-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose h1 { font-size: 24px; margin-bottom: var(--var-ui-space-2); } }
}
@layer utilities {
.var-ui-docs-prose h2 { font-family: var(--var-ui-fontFamily-display); font-style: italic; font-size: 24px; font-weight: var(--var-ui-fontWeight-bold); letter-spacing: var(--var-ui-letterSpacing-tight); line-height: 1.25; margin-top: var(--var-ui-space-8); margin-bottom: var(--var-ui-space-3); padding-top: var(--var-ui-space-5); border-top: var(--var-ui-stroke-strong); color: var(--var-ui-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose h2 { font-size: 21px; margin-top: var(--var-ui-space-6); padding-top: var(--var-ui-space-4); } }
}
@layer utilities {
.var-ui-docs-prose > h2:first-of-type, .var-ui-docs-prose > h2:first-child { margin-top: var(--var-ui-space-4); padding-top: 0; border-top: none; }
}
@layer utilities {
.var-ui-docs-prose h2:first-child { margin-top: 0; }
}
@layer utilities {
.var-ui-docs-prose h3 { font-family: var(--var-ui-fontFamily-display); font-size: 17px; font-weight: var(--var-ui-fontWeight-semibold); line-height: 1.35; margin-top: var(--var-ui-space-5); margin-bottom: var(--var-ui-space-2); color: var(--var-ui-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose h3 { margin-top: var(--var-ui-space-4); } }
}
@layer utilities {
.var-ui-docs-prose h4, .var-ui-docs-prose h5, .var-ui-docs-prose h6 { font-family: var(--var-ui-fontFamily-display); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); margin-top: var(--var-ui-space-4); margin-bottom: var(--var-ui-space-1); color: var(--var-ui-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose h4, .var-ui-docs-prose h5, .var-ui-docs-prose h6 { margin-top: var(--var-ui-space-3); } }
}
@layer utilities {
.var-ui-docs-prose h2, .var-ui-docs-prose h3, .var-ui-docs-prose h4, .var-ui-docs-prose h5, .var-ui-docs-prose h6 { position: relative; }
}
@layer utilities {
.var-ui-docs-prose p { margin-bottom: var(--var-ui-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose p { margin-bottom: var(--var-ui-space-3); } }
}
@layer utilities {
.var-ui-docs-prose ul, .var-ui-docs-prose ol { margin-bottom: var(--var-ui-space-3); padding-left: var(--var-ui-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose ul, .var-ui-docs-prose ol { margin-bottom: var(--var-ui-space-2); padding-left: var(--var-ui-space-3); } }
}
@layer utilities {
.var-ui-docs-prose li { margin-bottom: var(--var-ui-space-1); }
}
@layer utilities {
.var-ui-docs-prose a { color: var(--var-ui-color-tone-accent-foreground); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 40%, transparent); font-weight: var(--var-ui-fontWeight-medium); transition: var(--var-ui-transition-colorShift); }
}
@layer utilities {
.var-ui-docs-prose a:hover { color: var(--var-ui-color-link-hover); text-decoration-color: currentColor; }
}
@layer utilities {
.var-ui-docs-prose a:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-sm); }
}
@layer utilities {
.var-ui-docs-prose code { font-family: var(--var-ui-fontFamily-mono); font-size: 0.92em; font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-link-hover); background-color: var(--var-ui-docs-prose-inlinecodebackground); padding: 1px var(--var-ui-space-1); border-radius: var(--var-ui-radius-sm); white-space: nowrap; }
}
@layer utilities {
.var-ui-docs-prose a code { color: inherit; background-color: var(--var-ui-docs-prose-inlinecodebackground); }
}
@layer utilities {
.var-ui-docs-prose a[data-alert-action] { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: currentColor; }
}
@layer utilities {
.var-ui-docs-prose a[data-alert-action]:hover { color: inherit; text-decoration: none; }
}
@layer utilities {
.var-ui-docs-prose pre:not([data-codeblock-pre]) { font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-sm); line-height: 1.6; background-color: var(--var-ui-docs-prose-prebackground); padding: var(--var-ui-space-3); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-docs-prose-preborder); overflow: auto; margin-bottom: var(--var-ui-space-3); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose pre:not([data-codeblock-pre]) { padding: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-2); } }
}
@layer utilities {
.var-ui-docs-prose pre code { background-color: transparent; padding: 0; border: none; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; white-space: pre; }
}
@layer utilities {
.var-ui-docs-prose [data-codeblock] { margin-block: var(--var-ui-space-5); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose [data-codeblock] { margin-block: var(--var-ui-space-4); } }
}
@layer utilities {
.var-ui-docs-prose [data-codeblock] + [data-codeblock] { margin-top: var(--var-ui-space-3); }
}
@layer utilities {
.var-ui-docs-prose [data-codeblock]:first-child { margin-top: 0; }
}
@layer utilities {
.var-ui-docs-prose [data-codeblock]:last-child { margin-bottom: 0; }
}
@layer utilities {
.var-ui-docs-prose blockquote { margin: var(--var-ui-space-5) 0; padding: var(--var-ui-space-4) var(--var-ui-space-5); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-docs-prose-blockquoteborder); background-color: var(--var-ui-docs-prose-blockquotebackground); box-shadow: var(--var-ui-shadow-sm); color: var(--var-ui-docs-prose-foreground); font-style: normal; }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose blockquote { margin: var(--var-ui-space-4) 0; padding: var(--var-ui-space-3) var(--var-ui-space-4); } }
}
@layer utilities {
.var-ui-docs-prose blockquote p { margin-bottom: var(--var-ui-space-2); }
}
@layer utilities {
.var-ui-docs-prose blockquote p:last-child { margin-bottom: 0; }
}
@layer utilities {
.var-ui-docs-prose kbd { font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); padding: 2px var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-strong); background-color: var(--var-ui-color-background-surface); box-shadow: 0 1px 0 var(--var-ui-color-border-default); white-space: nowrap; }
}
@layer utilities {
.var-ui-docs-prose [data-docs-badge] { display: inline-flex; align-items: center; box-sizing: border-box; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); line-height: 1.2; padding: 2px var(--var-ui-space-2); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-color-text-primary); vertical-align: 0.08em; }
}
@layer utilities {
.var-ui-docs-prose [data-docs-badge][data-docs-badge-tone="success"] { border-color: color-mix(in srgb, var(--var-ui-color-tone-success-foreground) 45%, var(--var-ui-color-border-default)); background-color: color-mix(in srgb, var(--var-ui-color-tone-success-foreground) 14%, var(--var-ui-color-background-surface)); color: color-mix(in srgb, var(--var-ui-color-tone-success-foreground) 85%, var(--var-ui-color-text-primary)); }
}
@layer utilities {
.var-ui-docs-prose [data-docs-badge][data-docs-badge-tone="warning"] { border-color: color-mix(in srgb, var(--var-ui-color-tone-warning-foreground) 45%, var(--var-ui-color-border-default)); background-color: color-mix(in srgb, var(--var-ui-color-tone-warning-foreground) 16%, var(--var-ui-color-background-surface)); color: color-mix(in srgb, var(--var-ui-color-tone-warning-foreground) 75%, var(--var-ui-color-text-primary)); }
}
@layer utilities {
.var-ui-docs-prose [data-docs-badge][data-docs-badge-tone="danger"] { border-color: color-mix(in srgb, var(--var-ui-color-tone-danger-foreground) 45%, var(--var-ui-color-border-default)); background-color: color-mix(in srgb, var(--var-ui-color-tone-danger-foreground) 12%, var(--var-ui-color-background-surface)); color: color-mix(in srgb, var(--var-ui-color-tone-danger-foreground) 80%, var(--var-ui-color-text-primary)); }
}
@layer utilities {
.var-ui-docs-prose [data-docs-badge][data-docs-badge-tone="info"] { border-color: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 45%, var(--var-ui-color-border-default)); background-color: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 12%, var(--var-ui-color-background-surface)); color: color-mix(in srgb, var(--var-ui-color-tone-accent-foreground) 75%, var(--var-ui-color-text-primary)); }
}
@layer utilities {
.var-ui-docs-prose hr { border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-color-border-default); border-right: none; border-bottom: none; border-left: none; margin: var(--var-ui-space-5) 0; }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-docs-prose hr { margin: var(--var-ui-space-4) 0; } }
}
@layer utilities {
.var-ui-docs-prose table { width: 100%; border-collapse: collapse; margin-block: var(--var-ui-space-4) var(--var-ui-space-5); font-size: var(--var-ui-fontSize-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-docs-prose-tableborder); }
}
@layer utilities {
.var-ui-docs-prose thead { background-color: var(--var-ui-docs-prose-tableheaderbackground); border-bottom-width: var(--var-ui-borderWidth-thick); border-bottom-style: solid; border-bottom-color: var(--var-ui-docs-prose-tableborder); }
}
@layer utilities {
.var-ui-docs-prose th, .var-ui-docs-prose td { text-align: left; padding: var(--var-ui-space-2) var(--var-ui-space-3); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-docs-prose-tablecellborder); vertical-align: top; }
}
@layer utilities {
.var-ui-docs-prose th { font-weight: var(--var-ui-fontWeight-bold); font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-color-text-primary); text-transform: uppercase; letter-spacing: var(--var-ui-letterSpacing-caps); font-family: var(--var-ui-fontFamily-mono); }
}
@layer utilities {
.var-ui-docs-prose tr:last-child td { border-bottom: none; }
}
@layer utilities {
.var-ui-docs-prose caption { caption-side: bottom; padding-top: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); text-align: left; }
}
@layer utilities {
.var-ui-docs-prose [data-prose-heading-anchor] { margin-left: var(--var-ui-space-2); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); text-decoration: none; opacity: 0; transition: opacity var(--duration-medium) var(--easing-standard), color var(--duration-medium) var(--easing-standard); }
}
@layer utilities {
.var-ui-docs-prose [data-prose-heading-anchor]::before { content: "#"; font-size: 0.85em; }
}
@layer utilities {
.var-ui-docs-prose :is(h1, h2, h3, h4, h5, h6):hover [data-prose-heading-anchor] { opacity: 1; }
}
@layer utilities {
.var-ui-docs-prose [data-prose-heading-anchor]:focus-visible { opacity: 1; outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-sm); }
}
@layer utilities {
.var-ui-docs-prose__tableWrap { overflow-x: auto; margin-bottom: var(--var-ui-space-3); -webkit-overflow-scrolling: touch; }
}
@property --var-ui-radio-controlborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-radio-indicatorbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-radio-grouplabelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-radio__group { --var-ui-radio-controlborder: var(--var-ui-color-border-strong); --var-ui-radio-indicatorbackground: transparent; --var-ui-radio-grouplabelcolor: var(--var-ui-color-text-primary); display: grid; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-radio__item { display: inline-flex; align-items: center; gap: var(--var-ui-space-2); cursor: pointer; }
}
@layer components {
.var-ui-radio__control { width: 18px; height: 18px; border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-radio-controlborder); display: inline-flex; align-items: center; justify-content: center; }
}
@layer components {
.var-ui-radio__control::before { content: ""; width: 8px; height: 8px; border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-radio-indicatorbackground); transition: background-color 120ms ease; }
}
@layer components {
.var-ui-radio__control[data-selected]::before { --var-ui-radio-indicatorbackground: var(--var-ui-color-tone-accent-background); }
}
@layer components {
.var-ui-radio__label { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-radio__groupLabel { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-radio-grouplabelcolor); }
}
@property --var-ui-resize-handle-linecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-resize-handle-pillcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-resize-handle-focusring { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-resize-handle { --var-ui-resize-handle-linecolor: var(--var-ui-color-border-default); --var-ui-resize-handle-pillcolor: var(--var-ui-color-border-strong); --var-ui-resize-handle-focusring: var(--var-ui-color-tone-accent-foreground); position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-color: var(--var-ui-resize-handle-linecolor); outline: none; }
}
@layer components {
.var-ui-resize-handle[data-orientation="horizontal"] { width: 1px; align-self: stretch; cursor: col-resize; }
}
@layer components {
.var-ui-resize-handle[data-orientation="vertical"] { height: 1px; width: 100%; cursor: row-resize; }
}
@layer components {
.var-ui-resize-handle[data-collapsed] { display: none; }
}
@layer components {
.var-ui-resize-handle:focus-visible { outline: 2px solid var(--var-ui-resize-handle-focusring); outline-offset: 2px; }
}
@layer components {
.var-ui-resize-handle__pill { width: 4px; height: 24px; border-radius: var(--var-ui-radius-sm); background-color: var(--var-ui-resize-handle-pillcolor); pointer-events: none; }
}
@layer components {
[data-orientation="vertical"] .var-ui-resize-handle__pill { width: 24px; height: 4px; }
}
@keyframes var-ui-scroll-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes var-ui-scroll-fade-out { from { opacity: 1; } to { opacity: 0; } }
@property --var-ui-scroll-area-fadesize { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --var-ui-scroll-area-fadecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-scroll-area { --var-ui-scroll-area-fadesize: 24px; --var-ui-scroll-area-fadecolor: var(--var-ui-color-background-surface); display: flex; flex-direction: column; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
}
@layer components {
@supports not (animation-timeline: scroll()) { .var-ui-scroll-area .var-ui-scroll-area__fadeTop,
              .var-ui-scroll-area .var-ui-scroll-area__fadeBottom,
              .var-ui-scroll-area .var-ui-scroll-area__fadeStart,
              .var-ui-scroll-area .var-ui-scroll-area__fadeEnd { opacity: 0.45; } }
}
@layer components {
.var-ui-scroll-area__viewport { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
}
@layer components {
.var-ui-scroll-area__viewport[data-orientation="vertical"] { overflow-x: hidden; overflow-y: auto; }
}
@layer components {
.var-ui-scroll-area__viewport[data-orientation="horizontal"] { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
}
@layer components {
.var-ui-scroll-area__viewport[data-orientation="both"] { overflow: auto; }
}
@layer components {
.var-ui-scroll-area__fadeTop { position: sticky; top: 0; align-self: stretch; width: 100%; flex-shrink: 0; height: var(--var-ui-scroll-area-fadesize); margin-block-end: calc(-1 * var(--var-ui-scroll-area-fadesize)); pointer-events: none; z-index: 1; opacity: 0; background-image: linear-gradient(to bottom, var(--var-ui-scroll-area-fadecolor), transparent); animation-duration: 1ms; animation-fill-mode: both; animation-timeline: scroll(nearest block); animation-name: var-ui-scroll-fade-in; animation-range: 1px var(--var-ui-scroll-area-fadesize); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-scroll-area__fadeTop { animation: none; opacity: 0; } }
}
@layer components {
.var-ui-scroll-area__fadeTop[data-fade="none"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeTop[data-fade="horizontal"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeBottom { position: sticky; bottom: 0; align-self: stretch; width: 100%; flex-shrink: 0; height: var(--var-ui-scroll-area-fadesize); margin-block-start: calc(-1 * var(--var-ui-scroll-area-fadesize)); pointer-events: none; z-index: 1; opacity: 0; background-image: linear-gradient(to top, var(--var-ui-scroll-area-fadecolor), transparent); animation-duration: 1ms; animation-fill-mode: both; animation-timeline: scroll(nearest block); animation-name: var-ui-scroll-fade-out; animation-range: exit 0% exit 100%; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-scroll-area__fadeBottom { animation: none; opacity: 0; } }
}
@layer components {
.var-ui-scroll-area__fadeBottom[data-fade="none"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeBottom[data-fade="horizontal"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeStart { position: sticky; inset-inline-start: 0; align-self: flex-start; flex-shrink: 0; width: var(--var-ui-scroll-area-fadesize); min-height: 100%; margin-inline-end: calc(-1 * var(--var-ui-scroll-area-fadesize)); pointer-events: none; z-index: 1; opacity: 0; background-image: linear-gradient(to right, var(--var-ui-scroll-area-fadecolor), transparent); animation-duration: 1ms; animation-fill-mode: both; animation-timeline: scroll(nearest inline); animation-name: var-ui-scroll-fade-in; animation-range: 1px var(--var-ui-scroll-area-fadesize); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-scroll-area__fadeStart { animation: none; opacity: 0; } }
}
@layer components {
.var-ui-scroll-area__fadeStart[data-fade="none"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeStart[data-fade="vertical"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeEnd { position: sticky; inset-inline-end: 0; align-self: flex-end; flex-shrink: 0; width: var(--var-ui-scroll-area-fadesize); min-height: 100%; margin-inline-start: calc(-1 * var(--var-ui-scroll-area-fadesize)); pointer-events: none; z-index: 1; opacity: 0; background-image: linear-gradient(to left, var(--var-ui-scroll-area-fadecolor), transparent); animation-duration: 1ms; animation-fill-mode: both; animation-timeline: scroll(nearest inline); animation-name: var-ui-scroll-fade-out; animation-range: exit 0% exit 100%; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-scroll-area__fadeEnd { animation: none; opacity: 0; } }
}
@layer components {
.var-ui-scroll-area__fadeEnd[data-fade="none"] { display: none; }
}
@layer components {
.var-ui-scroll-area__fadeEnd[data-fade="vertical"] { display: none; }
}
@property --var-ui-section-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-section-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-section { --var-ui-section-border: var(--var-ui-color-border-default); --var-ui-section-background: var(--var-ui-color-background-surface); display: grid; gap: var(--var-ui-space-3); padding: var(--var-ui-space-4); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-section-border); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-section-background); box-shadow: var(--var-ui-shadow-xs); }
}
@layer components {
.var-ui-section__title { margin: 0; font-size: var(--var-ui-fontSize-xl); font-weight: var(--var-ui-fontWeight-semibold); }
}
@property --var-ui-search-input-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-search-input-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-search-input-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-search-input-placeholder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-search-input-iconcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-search-input { --var-ui-search-input-background: var(--var-ui-color-background-surface); --var-ui-search-input-border: var(--var-ui-color-border-default); --var-ui-search-input-foreground: var(--var-ui-color-text-primary); --var-ui-search-input-placeholder: var(--var-ui-color-text-secondary); --var-ui-search-input-iconcolor: var(--var-ui-color-text-secondary); display: inline-flex; align-items: center; gap: var(--var-ui-space-2); min-width: min(220px, 100%); max-width: 100%; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-search-input-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-search-input-background); color: var(--var-ui-search-input-foreground); transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-search-input:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-search-input:focus-within { outline: 1px solid var(--var-ui-color-border-focus); box-shadow: 0 0 3px var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-search-input[data-variant="command"] { cursor: pointer; }
}
@layer components {
.var-ui-search-input[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-search-input[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-search-input[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-search-input__icon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--var-ui-search-input-iconcolor); line-height: 0; }
}
@layer components {
.var-ui-search-input__input { flex: 1; min-width: 0; border: none; margin: 0; padding: 0; background-color: transparent; font-size: inherit; font-family: var(--var-ui-fontFamily-body); color: var(--var-ui-search-input-foreground); outline: none; }
}
@layer components {
.var-ui-search-input__input::placeholder { color: var(--var-ui-search-input-placeholder); }
}
@layer components {
.var-ui-search-input__input::-webkit-search-cancel-button { display: none; }
}
@layer components {
.var-ui-search-input__input[data-size="sm"] { font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-search-input__input[data-size="md"] { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-search-input__input[data-size="lg"] { font-size: var(--var-ui-fontSize-lg); }
}
@layer components {
.var-ui-search-input__trigger { flex: 1; min-width: 0; display: flex; align-items: center; border: none; margin: 0; padding: 0; background-color: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; }
}
@layer components {
.var-ui-search-input__triggerLabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--var-ui-search-input-placeholder); }
}
@layer components {
.var-ui-search-input__triggerLabel[data-size="sm"] { font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-search-input__triggerLabel[data-size="md"] { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-search-input__triggerLabel[data-size="lg"] { font-size: var(--var-ui-fontSize-lg); }
}
@layer components {
.var-ui-search-input__shortcut { flex-shrink: 0; }
}
@property --var-ui-segmented-control-trackbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-segmented-control-indicatorbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-segmented-control-segmentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-segmented-control-segmentselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-segmented-control-indicatorx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-segmented-control-indicatorwidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-segmented-control-indicatoropacity { syntax: "<number>"; inherits: true; initial-value: 0; }
@layer components {
.var-ui-segmented-control { --var-ui-segmented-control-trackbackground: var(--var-ui-color-border-subtle); --var-ui-segmented-control-indicatorbackground: var(--var-ui-color-background-surface); --var-ui-segmented-control-segmentcolor: var(--var-ui-color-text-secondary); --var-ui-segmented-control-segmentselectedcolor: var(--var-ui-color-text-primary); --var-ui-segmented-control-indicatorx: 0px; --var-ui-segmented-control-indicatorwidth: 0px; --var-ui-segmented-control-indicatoropacity: 0; position: relative; display: inline-flex; align-items: stretch; box-sizing: border-box; padding: var(--var-ui-space-1); gap: 0; border-radius: var(--var-ui-radius-lg); border: none; background-color: var(--var-ui-segmented-control-trackbackground); isolation: isolate; }
}
@layer components {
html[data-mode="dark"] .var-ui-segmented-control::after { box-shadow: none; }
}
@layer components {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-segmented-control::after { box-shadow: none; } }
}
@layer components {
.var-ui-segmented-control::after { content: ""; position: absolute; top: var(--var-ui-space-1); bottom: var(--var-ui-space-1); inset-inline-start: 0; width: var(--var-ui-segmented-control-indicatorwidth); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-segmented-control-indicatorbackground); box-shadow: var(--var-ui-shadow-xs); pointer-events: none; opacity: var(--var-ui-segmented-control-indicatoropacity); z-index: 0; transform: translateX(var(--var-ui-segmented-control-indicatorx)); transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), width 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 80ms ease; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-segmented-control::after { transition: none; } }
}
@layer components {
.var-ui-segmented-control > * { position: relative; z-index: 1; flex: 1 1 auto; border: none; border-radius: var(--var-ui-radius-lg); background-color: transparent; color: var(--var-ui-segmented-control-segmentcolor); font-weight: var(--var-ui-fontWeight-normal); box-shadow: none; transition: color 80ms ease, font-weight 80ms ease; }
}
@layer components {
.var-ui-segmented-control > *:hover { background-color: transparent; border-color: transparent; }
}
@layer components {
.var-ui-segmented-control > *:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@layer components {
.var-ui-segmented-control > *[data-selected], .var-ui-segmented-control > *[aria-pressed="true"] { color: var(--var-ui-segmented-control-segmentselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); background-color: transparent; border-color: transparent; box-shadow: none; }
}
@layer components {
.var-ui-segmented-control > *[data-selected], .var-ui-segmented-control > *[aria-pressed="true"]:hover { background-color: transparent; border-color: transparent; }
}
@layer components {
.var-ui-segmented-control[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); }
}
@layer components {
.var-ui-segmented-control[data-size="sm"] > * { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding-inline: var(--var-ui-space-3); font-size: var(--var-ui-fontSize-sm); line-height: 1; min-width: calc(var(--var-ui-size-control-sm) - 2 * var(--var-ui-space-1)); }
}
@layer components {
.var-ui-segmented-control[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); }
}
@layer components {
.var-ui-segmented-control[data-size="md"] > * { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding-inline: var(--var-ui-space-4); font-size: var(--var-ui-fontSize-md); line-height: 1; min-width: calc(var(--var-ui-size-control-md) - 2 * var(--var-ui-space-1)); }
}
@layer components {
.var-ui-segmented-control[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); }
}
@layer components {
.var-ui-segmented-control[data-size="lg"] > * { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding-inline: var(--var-ui-space-4); font-size: var(--var-ui-fontSize-lg); line-height: 1; min-width: calc(var(--var-ui-size-control-lg) - 2 * var(--var-ui-space-1)); }
}
@property --var-ui-select-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-triggerbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-triggerborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-triggerforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-select-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-select { --var-ui-select-labelcolor: var(--var-ui-color-text-primary); --var-ui-select-triggerbackground: var(--var-ui-color-background-surface); --var-ui-select-triggerborder: var(--var-ui-color-border-default); --var-ui-select-triggerforeground: var(--var-ui-color-text-primary); --var-ui-select-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-select-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-select-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-select-popoverbackground: var(--var-ui-color-background-surface); --var-ui-select-popoverborder: var(--var-ui-color-border-default); --var-ui-select-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-select-itemfocusedbackground: var(--var-ui-color-background-subtle); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-select__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-select-labelcolor); }
}
@layer components {
.var-ui-select__trigger { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); width: 100%; text-align: left; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-select-triggerborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-select-triggerbackground); color: var(--var-ui-select-triggerforeground); cursor: pointer; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-select__trigger:hover, .var-ui-select__trigger[data-hovered] { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-select__trigger[data-focus-visible]:not([data-pressed]) { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-select__trigger[data-pressed] { border-color: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-select__trigger[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-select__trigger[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-select__trigger[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-select__selectValue { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-select__selectValue[data-placeholder] { color: var(--var-ui-select-placeholdercolor); }
}
@layer components {
.var-ui-select__triggerIcon { display: inline-flex; flex-shrink: 0; color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-select__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-select-descriptioncolor); }
}
@layer components {
.var-ui-select__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-select-errorcolor); }
}
@layer components {
.var-ui-select__popover { --var-ui-select-popoverborder: var(--var-ui-color-border-default); --var-ui-select-popoverbackground: var(--var-ui-color-background-surface); --var-ui-select-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-select-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); z-index: var(--var-ui-zIndex-dropdown); box-sizing: border-box; width: var(--trigger-width); min-width: var(--trigger-width); max-height: 16rem; overflow: hidden; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-select-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-select-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); outline: none; }
}
@layer components {
.var-ui-select__listbox { display: flex; flex-direction: column; gap: var(--var-ui-space-1); max-height: calc(16rem - 2 * var(--var-ui-space-1)); overflow-y: auto; outline: none; }
}
@layer components {
.var-ui-select__item { font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; outline: none; }
}
@layer components {
.var-ui-select__item[data-focused], .var-ui-select__item[data-hovered] { background-color: var(--var-ui-select-itemfocusedbackground); }
}
@layer components {
.var-ui-select__item[data-selected] { color: var(--var-ui-select-itemselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@property --var-ui-side-nav-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-sectiontitlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-itemcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-itemhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-itemselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-side-nav-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-side-nav { --var-ui-side-nav-background: var(--var-ui-color-background-surface); --var-ui-side-nav-border: var(--var-ui-color-border-default); --var-ui-side-nav-headingcolor: var(--var-ui-color-text-primary); --var-ui-side-nav-sectiontitlecolor: var(--var-ui-color-text-secondary); --var-ui-side-nav-itemcolor: var(--var-ui-color-navItem-foreground); --var-ui-side-nav-itemhoverbackground: var(--var-ui-color-navItem-hoverBackground); --var-ui-side-nav-itemselectedbackground: var(--var-ui-color-navItem-selectedBackground); --var-ui-side-nav-itemselectedcolor: var(--var-ui-color-navItem-selectedForeground); position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; height: 100%; background-color: var(--var-ui-side-nav-background); }
}
@layer components {
.var-ui-side-nav[data-collapsed] { align-items: center; width: 3.5rem; }
}
@layer components {
.var-ui-side-nav[data-collapsed] .var-ui-scroll-area__fadeTop { display: none; }
}
@layer components {
.var-ui-side-nav[data-collapsed] .var-ui-scroll-area__fadeBottom { display: none; }
}
@layer components {
.var-ui-side-nav__stickyTop { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--var-ui-space-2); padding: var(--var-ui-space-3); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-side-nav-border); background-color: var(--var-ui-side-nav-background); z-index: 1; }
}
@layer components {
[data-collapsed] .var-ui-side-nav__stickyTop { padding: var(--var-ui-space-2); border-bottom: none; }
}
@layer components {
.var-ui-side-nav__topContent { display: flex; flex-direction: column; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-side-nav__scrollArea { flex: 1 1 auto; min-height: 0; --var-ui-scroll-area-fadecolor: var(--var-ui-side-nav-background); }
}
@layer components {
[data-collapsed] .var-ui-side-nav__scrollArea { overflow: hidden; }
}
@layer components {
.var-ui-side-nav__scrollable { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--var-ui-space-4); padding: var(--var-ui-space-3); }
}
@layer components {
[data-collapsed] .var-ui-side-nav__scrollable { gap: var(--var-ui-space-2); padding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-side-nav__footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); padding: var(--var-ui-space-3); border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-side-nav-border); background-color: var(--var-ui-side-nav-background); }
}
@layer components {
[data-collapsed] .var-ui-side-nav__footer { justify-content: center; padding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-side-nav__footerIcons { display: flex; align-items: center; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-side-nav__heading { display: flex; align-items: center; gap: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-side-nav-headingcolor); }
}
@layer components {
.var-ui-side-nav__section { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-side-nav__section:not(:first-child) { margin-top: var(--var-ui-space-2); }
}
@layer components {
.var-ui-side-nav__sectionTitle { padding: var(--var-ui-space-1) var(--var-ui-space-2); font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--var-ui-side-nav-sectiontitlecolor); }
}
@layer components {
[data-collapsed] .var-ui-side-nav__sectionTitle { display: none; }
}
@layer components {
.var-ui-side-nav__item { display: flex; align-items: center; gap: var(--var-ui-space-2); padding: var(--var-ui-space-2) var(--var-ui-space-2); border-radius: var(--var-ui-radius-navItem); color: var(--var-ui-side-nav-itemcolor); text-decoration: none; cursor: pointer; outline: none; transition: background-color var(--var-ui-duration-fast) var(--var-ui-easing-standard), color var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
.var-ui-side-nav__item:hover:not([data-selected]):not([data-disabled]) { background-color: var(--var-ui-side-nav-itemhoverbackground); color: var(--var-ui-side-nav-itemcolor); }
}
@layer components {
.var-ui-side-nav__item:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-side-nav__item[data-selected] { background-color: var(--var-ui-side-nav-itemselectedbackground); color: var(--var-ui-side-nav-itemselectedcolor); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-side-nav__item[data-selected]:hover { background-color: var(--var-ui-side-nav-itemselectedbackground); color: var(--var-ui-side-nav-itemselectedcolor); }
}
@layer components {
.var-ui-side-nav__item:active:not([data-disabled]) { background-color: var(--var-ui-color-navItem-activeBackground); }
}
@layer components {
.var-ui-side-nav__item[data-selected]:active { background-color: var(--var-ui-side-nav-itemselectedbackground); }
}
@layer components {
.var-ui-side-nav__item[data-disabled] { color: var(--var-ui-side-nav-itemcolor); opacity: var(--var-ui-opacity-disabled); cursor: not-allowed; pointer-events: none; }
}
@layer components {
[data-collapsed] .var-ui-side-nav__item { justify-content: center; width: 2rem; min-width: 2rem; padding: var(--var-ui-space-2); }
}
@layer components {
[data-collapsed] .var-ui-side-nav__item:not(:has(svg, img)) { display: none; }
}
@layer components {
.var-ui-side-nav__itemLabel { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@layer components {
[data-collapsed] .var-ui-side-nav__itemLabel { display: none; }
}
@layer components {
.var-ui-side-nav__collapseButton { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--var-ui-radius-navItem); border: none; background-color: transparent; color: var(--var-ui-side-nav-itemcolor); cursor: pointer; }
}
@layer components {
.var-ui-side-nav__collapseButton:hover { background-color: var(--var-ui-side-nav-itemhoverbackground); }
}
@layer components {
.var-ui-side-nav__collapseButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@property --var-ui-simple-grid-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-simple-grid { --var-ui-simple-grid-gap: var(--var-ui-space-4); display: grid; gap: var(--var-ui-simple-grid-gap); }
}
@layer components {
.var-ui-simple-grid[data-cols="one"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="two"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="three"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="four"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="five"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="six"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-cols="eight"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@layer components {
.var-ui-simple-grid[data-spacing="none"] { --var-ui-simple-grid-gap: 0px; }
}
@layer components {
.var-ui-simple-grid[data-spacing="xs"] { --var-ui-simple-grid-gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-simple-grid[data-spacing="sm"] { --var-ui-simple-grid-gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-simple-grid[data-spacing="md"] { --var-ui-simple-grid-gap: var(--var-ui-space-4); }
}
@layer components {
.var-ui-simple-grid[data-spacing="lg"] { --var-ui-simple-grid-gap: var(--var-ui-space-5); }
}
@layer components {
.var-ui-simple-grid[data-spacing="xl"] { --var-ui-simple-grid-gap: var(--var-ui-space-8); }
}
@property --var-ui-tab-list-tabcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tab-list-tabselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tab-list-tabhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tab-list-indicatorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tab-list-dividercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-tab-list { --var-ui-tab-list-tabcolor: var(--var-ui-color-text-secondary); --var-ui-tab-list-tabselectedcolor: var(--var-ui-color-text-primary); --var-ui-tab-list-tabhoverbackground: var(--var-ui-color-background-subtle); --var-ui-tab-list-indicatorcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-tab-list-dividercolor: var(--var-ui-color-border-default); position: relative; display: inline-flex; align-items: stretch; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-tab-list[data-orientation="vertical"] { flex-direction: column; }
}
@layer components {
.var-ui-tab-list[data-layout="fill"] { display: flex; width: 100%; }
}
@layer components {
.var-ui-tab-list[data-layout="fill"] > * { flex: 1 1 auto; }
}
@layer components {
.var-ui-tab-list[data-has-divider][data-orientation="horizontal"] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-tab-list-dividercolor); }
}
@layer components {
.var-ui-tab-list[data-has-divider][data-orientation="vertical"] { border-inline-end-width: var(--var-ui-borderWidth-default); border-inline-end-style: solid; border-inline-end-color: var(--var-ui-tab-list-dividercolor); }
}
@layer components {
.var-ui-tab-list__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--var-ui-space-2); border: none; background-color: transparent; color: var(--var-ui-tab-list-tabcolor); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); text-decoration: none; cursor: pointer; outline: none; white-space: nowrap; padding-block: 0; padding-inline: var(--var-ui-space-3); }
}
@layer components {
.var-ui-tab-list__tab:hover { background-color: var(--var-ui-tab-list-tabhoverbackground); }
}
@layer components {
.var-ui-tab-list__tab:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-tab-list__tab[data-selected] { color: var(--var-ui-tab-list-tabselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-tab-list__tab[data-disabled] { color: var(--var-ui-tab-list-tabcolor); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
}
@layer components {
.var-ui-tab-list__tab[data-size="sm"] { min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-3); }
}
@layer components {
.var-ui-tab-list__tab[data-size="md"] { min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-4); }
}
@layer components {
.var-ui-tab-list__tab[data-size="lg"] { min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-5); }
}
@layer components {
.var-ui-tab-list__indicator { position: absolute; inset-inline-start: var(--var-ui-space-2); inset-inline-end: var(--var-ui-space-2); bottom: 0; height: 2px; border-radius: var(--var-ui-radius-sm); background-color: var(--var-ui-tab-list-indicatorcolor); opacity: 0; transition: opacity var(--var-ui-duration-fast) var(--var-ui-easing-standard); }
}
@layer components {
[data-selected] .var-ui-tab-list__indicator { opacity: 1; }
}
@layer components {
[data-orientation="vertical"] .var-ui-tab-list__indicator { inset-inline-start: 0; inset-inline-end: auto; top: var(--var-ui-space-2); bottom: var(--var-ui-space-2); width: 2px; height: auto; }
}
@layer components {
.var-ui-tab-list__menu { display: inline-flex; }
}
@layer components {
.var-ui-tab-list__menuTrigger { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); border: none; background-color: transparent; color: var(--var-ui-tab-list-tabcolor); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); cursor: pointer; outline: none; white-space: nowrap; padding-block: 0; padding-inline: var(--var-ui-space-3); }
}
@layer components {
.var-ui-tab-list__menuTrigger:hover { background-color: var(--var-ui-tab-list-tabhoverbackground); }
}
@layer components {
.var-ui-tab-list__menuTrigger:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-tab-list__menuTrigger[data-selected] { color: var(--var-ui-tab-list-tabselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-tab-list__menuTrigger[data-size="sm"] { min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-3); }
}
@layer components {
.var-ui-tab-list__menuTrigger[data-size="md"] { min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-4); }
}
@layer components {
.var-ui-tab-list__menuTrigger[data-size="lg"] { min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-5); }
}
@property --var-ui-top-nav-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-headingcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-itemcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-itemhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-itemselectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-menutriggercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-megapanelbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-megapanelborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-megaitemcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-megaitemhoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-featuredcardbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-top-nav-featuredcardborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-top-nav { --var-ui-top-nav-background: var(--var-ui-color-background-surface); --var-ui-top-nav-border: var(--var-ui-color-border-strong); --var-ui-top-nav-headingcolor: var(--var-ui-color-text-primary); --var-ui-top-nav-itemcolor: var(--var-ui-color-navItem-foreground); --var-ui-top-nav-itemhoverbackground: var(--var-ui-color-navItem-hoverBackground); --var-ui-top-nav-itemselectedbackground: var(--var-ui-color-navItem-selectedBackground); --var-ui-top-nav-itemselectedcolor: var(--var-ui-color-navItem-selectedForeground); --var-ui-top-nav-menutriggercolor: var(--var-ui-color-navItem-foreground); --var-ui-top-nav-megapanelbackground: var(--var-ui-color-background-surface); --var-ui-top-nav-megapanelborder: var(--var-ui-color-border-default); --var-ui-top-nav-megaitemcolor: var(--var-ui-color-text-primary); --var-ui-top-nav-megaitemhoverbackground: var(--var-ui-color-background-subtle); --var-ui-top-nav-featuredcardbackground: var(--var-ui-color-background-subtle); --var-ui-top-nav-featuredcardborder: var(--var-ui-color-border-default); position: relative; display: flex; align-items: center; gap: var(--var-ui-space-4); min-height: var(--var-ui-size-nav-bar); padding-block: 0; padding-inline: var(--var-ui-space-4); background-color: var(--var-ui-top-nav-background); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-top-nav-border); box-shadow: var(--var-ui-shadow-sm); }
}
@layer components {
.var-ui-top-nav[data-layout="grid"] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
}
@layer components {
.var-ui-top-nav__heading { display: flex; align-items: center; gap: var(--var-ui-space-2); flex-shrink: 0; font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-top-nav-headingcolor); }
}
@layer components {
.var-ui-top-nav__start { display: flex; align-items: center; gap: var(--var-ui-space-1); min-width: 0; }
}
@layer components {
[data-layout="grid"] .var-ui-top-nav__start { justify-self: start; }
}
@layer components {
.var-ui-top-nav__center { display: flex; align-items: center; justify-content: center; min-width: 0; }
}
@layer components {
[data-layout="grid"] .var-ui-top-nav__center { justify-self: center; }
}
@layer components {
.var-ui-top-nav__end { display: flex; align-items: center; gap: var(--var-ui-space-2); flex-shrink: 0; margin-inline-start: auto; }
}
@layer components {
[data-layout="grid"] .var-ui-top-nav__end { justify-self: end; margin-inline-start: 0; }
}
@layer components {
.var-ui-top-nav__item { display: inline-flex; align-items: center; gap: var(--var-ui-space-2); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-navItem); border: none; background-color: transparent; color: var(--var-ui-top-nav-itemcolor); font-size: var(--var-ui-fontSize-md); text-decoration: none; cursor: pointer; outline: none; white-space: nowrap; }
}
@layer components {
.var-ui-top-nav__item:hover { background-color: var(--var-ui-top-nav-itemhoverbackground); }
}
@layer components {
.var-ui-top-nav__item:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-top-nav__item[data-selected] { background-color: var(--var-ui-top-nav-itemselectedbackground); color: var(--var-ui-top-nav-itemselectedcolor); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-top-nav__item[data-disabled] { color: var(--var-ui-top-nav-itemcolor); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
}
@layer components {
.var-ui-top-nav__menuTrigger { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-navItem); border: none; background-color: transparent; color: var(--var-ui-top-nav-menutriggercolor); font-size: var(--var-ui-fontSize-md); cursor: pointer; outline: none; white-space: nowrap; }
}
@layer components {
.var-ui-top-nav__menuTrigger:hover { background-color: var(--var-ui-top-nav-itemhoverbackground); }
}
@layer components {
.var-ui-top-nav__menuTrigger:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-top-nav__menuTrigger[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
}
@layer components {
.var-ui-top-nav__megaPanel { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--var-ui-space-6); padding-block: var(--var-ui-space-6); padding-inline: var(--var-ui-space-6); background-color: var(--var-ui-top-nav-megapanelbackground); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-top-nav-megapanelborder); box-shadow: var(--var-ui-shadow-md); z-index: 1; }
}
@layer components {
.var-ui-top-nav__megaItem { display: flex; flex-direction: column; gap: var(--var-ui-space-1); padding: var(--var-ui-space-3); border-radius: var(--var-ui-radius-navItem); color: var(--var-ui-top-nav-megaitemcolor); text-decoration: none; cursor: pointer; outline: none; }
}
@layer components {
.var-ui-top-nav__megaItem:hover { background-color: var(--var-ui-top-nav-megaitemhoverbackground); }
}
@layer components {
.var-ui-top-nav__megaItem:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-top-nav__megaItem[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
}
@layer components {
.var-ui-top-nav__featuredCard { display: flex; flex-direction: column; gap: var(--var-ui-space-2); padding: var(--var-ui-space-4); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-top-nav-featuredcardbackground); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-top-nav-featuredcardborder); min-width: 16rem; }
}
@keyframes var-ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@property --var-ui-skeleton-basecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-skeleton-highlightcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-skeleton { --var-ui-skeleton-basecolor: var(--var-ui-color-background-subtle); --var-ui-skeleton-highlightcolor: var(--var-ui-color-background-surface); display: block; background-color: var(--var-ui-skeleton-basecolor); background-image: linear-gradient(90deg, var(--var-ui-skeleton-basecolor) 25%, var(--var-ui-skeleton-highlightcolor) 50%, var(--var-ui-skeleton-basecolor) 75%); background-size: 200% 100%; animation: var-ui-shimmer 1600ms ease-in-out infinite; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-skeleton { animation: none; background-image: none; } }
}
@layer components {
.var-ui-skeleton[data-shape="text"] { height: 1em; border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-skeleton[data-shape="rect"] { border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-skeleton[data-shape="circle"] { border-radius: 50%; aspect-ratio: 1; }
}
@property --var-ui-slider-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-trackbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-fillbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-thumbbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-thumbborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-outputcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-slider-trackheight { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-slider-thumbsize { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-slider-controlheight { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-slider-thumbborderwidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-slider-focusoutlinewidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-slider-focusoutlineoffset { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-slider { --var-ui-slider-labelcolor: var(--var-ui-color-text-primary); --var-ui-slider-trackbackground: var(--var-ui-color-background-subtle); --var-ui-slider-fillbackground: var(--var-ui-color-tone-accent-foreground); --var-ui-slider-thumbbackground: var(--var-ui-color-background-surface); --var-ui-slider-thumbborder: var(--var-ui-color-tone-accent-foreground); --var-ui-slider-outputcolor: var(--var-ui-color-text-secondary); --var-ui-slider-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-slider-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-slider-trackheight: var(--var-ui-space-1); --var-ui-slider-thumbsize: var(--var-ui-size-icon-md); --var-ui-slider-controlheight: var(--var-ui-size-icon-lg); --var-ui-slider-thumbborderwidth: var(--var-ui-borderWidth-thick); --var-ui-slider-focusoutlinewidth: var(--var-ui-borderWidth-thick); --var-ui-slider-focusoutlineoffset: var(--var-ui-space-1); display: grid; gap: var(--var-ui-space-1); min-width: calc(15 * var(--var-ui-space-4)); }
}
@layer components {
.var-ui-slider__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-slider-labelcolor); display: flex; align-items: center; justify-content: space-between; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-slider__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-slider-descriptioncolor); }
}
@layer components {
.var-ui-slider__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-slider-errorcolor); }
}
@layer components {
.var-ui-slider__control { position: relative; display: flex; align-items: center; width: 100%; height: var(--var-ui-slider-controlheight); }
}
@layer components {
.var-ui-slider__track { position: relative; width: 100%; height: var(--var-ui-slider-trackheight); border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-slider-trackbackground); overflow: hidden; pointer-events: none; }
}
@layer components {
.var-ui-slider__fill { height: 100%; border-radius: inherit; background-color: var(--var-ui-slider-fillbackground); pointer-events: none; }
}
@layer components {
.var-ui-slider__thumb { position: absolute; top: 50%; width: var(--var-ui-slider-thumbsize); height: var(--var-ui-slider-thumbsize); box-sizing: border-box; border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-slider-thumbborderwidth); border-style: solid; border-color: var(--var-ui-slider-thumbborder); background-color: var(--var-ui-slider-thumbbackground); box-shadow: var(--var-ui-shadow-sm); }
}
@layer components {
.var-ui-slider__thumb:focus-visible { outline: var(--var-ui-slider-focusoutlinewidth) solid var(--var-ui-color-border-focus); outline-offset: var(--var-ui-slider-focusoutlineoffset); }
}
@layer components {
.var-ui-slider__output { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-slider-outputcolor); }
}
@keyframes var-ui-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@property --var-ui-spinner-indicatorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-spinner-trackcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-spinner-size { syntax: "<length>"; inherits: true; initial-value: 20px; }
@layer components {
.var-ui-spinner { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-spinner-trackcolor: var(--var-ui-color-border-default); --var-ui-spinner-size: 20px; display: inline-block; width: var(--var-ui-spinner-size); height: var(--var-ui-spinner-size); border-radius: 50%; border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-spinner-trackcolor); border-top-color: var(--var-ui-spinner-indicatorcolor); animation: var-ui-spin 800ms linear infinite; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-spinner { animation-duration: 2400ms; } }
}
@layer components {
.var-ui-spinner[data-size="sm"] { --var-ui-spinner-size: 14px; }
}
@layer components {
.var-ui-spinner[data-size="md"] { --var-ui-spinner-size: 20px; }
}
@layer components {
.var-ui-spinner[data-size="lg"] { --var-ui-spinner-size: 32px; border-width: 3px; }
}
@layer components {
.var-ui-spinner[data-tone="accent"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-accent-foreground); }
}
@layer components {
.var-ui-spinner[data-tone="success"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-spinner[data-tone="warning"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-warning-foreground); }
}
@layer components {
.var-ui-spinner[data-tone="danger"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-spinner[data-tone="info"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-tone-info-foreground); }
}
@layer components {
.var-ui-spinner[data-tone="neutral"] { --var-ui-spinner-indicatorcolor: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-spinner[data-appearance="subtle"] { --var-ui-spinner-trackcolor: color-mix(in srgb, var(--var-ui-spinner-indicatorcolor) 12%, var(--var-ui-color-background-surface)); }
}
@property --var-ui-stack-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-stack { --var-ui-stack-gap: var(--var-ui-space-3); display: flex; flex-direction: column; gap: var(--var-ui-stack-gap); min-width: 0; }
}
@layer components {
.var-ui-stack[data-direction="row"] { flex-direction: row; }
}
@layer components {
.var-ui-stack[data-gap="none"] { --var-ui-stack-gap: 0px; }
}
@layer components {
.var-ui-stack[data-gap="xs"] { --var-ui-stack-gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-stack[data-gap="sm"] { --var-ui-stack-gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-stack[data-gap="md"] { --var-ui-stack-gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-stack[data-gap="lg"] { --var-ui-stack-gap: var(--var-ui-space-5); }
}
@layer components {
.var-ui-stack[data-gap="xl"] { --var-ui-stack-gap: var(--var-ui-space-8); }
}
@layer components {
.var-ui-stack[data-align="start"] { align-items: flex-start; }
}
@layer components {
.var-ui-stack[data-align="center"] { align-items: center; }
}
@layer components {
.var-ui-stack[data-align="end"] { align-items: flex-end; }
}
@layer components {
.var-ui-stack[data-align="stretch"] { align-items: stretch; }
}
@layer components {
.var-ui-stack[data-justify="start"] { justify-content: flex-start; }
}
@layer components {
.var-ui-stack[data-justify="center"] { justify-content: center; }
}
@layer components {
.var-ui-stack[data-justify="end"] { justify-content: flex-end; }
}
@layer components {
.var-ui-stack[data-justify="between"] { justify-content: space-between; }
}
@layer components {
.var-ui-stack[data-wrap="wrap"] { flex-wrap: wrap; }
}
@keyframes var-ui-status-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } to { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }
@property --var-ui-status-dot-size { syntax: "<length>"; inherits: true; initial-value: 8px; }
@layer components {
.var-ui-status-dot { --var-ui-status-dot-size: 8px; display: inline-block; width: var(--var-ui-status-dot-size); height: var(--var-ui-status-dot-size); border-radius: 50%; background-color: currentColor; color: var(--var-ui-color-text-secondary); flex-shrink: 0; box-sizing: border-box; }
}
@layer components {
.var-ui-status-dot[data-tone="accent"] { color: var(--var-ui-color-tone-accent-foreground); }
}
@layer components {
.var-ui-status-dot[data-tone="success"] { color: var(--var-ui-color-tone-success-foreground); }
}
@layer components {
.var-ui-status-dot[data-tone="warning"] { color: var(--var-ui-color-tone-warning-foreground); }
}
@layer components {
.var-ui-status-dot[data-tone="danger"] { color: var(--var-ui-color-tone-danger-foreground); }
}
@layer components {
.var-ui-status-dot[data-tone="info"] { color: var(--var-ui-color-tone-info-foreground); }
}
@layer components {
.var-ui-status-dot[data-appearance="outline"] { background-color: transparent; border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: currentColor; }
}
@layer components {
.var-ui-status-dot[data-appearance="subtle"] { background-color: color-mix(in srgb, currentColor 35%, transparent); }
}
@layer components {
.var-ui-status-dot[data-pulse] { animation: var-ui-status-pulse 1400ms ease-out infinite; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-status-dot[data-pulse] { animation: none; } }
}
@property --var-ui-steps-stepforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-steps-indicatorbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-steps-indicatorforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer utilities {
.var-ui-steps { --var-ui-steps-stepforeground: var(--var-ui-color-text-primary); --var-ui-steps-indicatorbackground: var(--var-ui-color-tone-accent-background); --var-ui-steps-indicatorforeground: var(--var-ui-color-tone-accent-foregroundOnBackground); list-style: none; padding: 0; margin: var(--var-ui-space-4) 0; counter-reset: docs-step; }
}
@layer utilities {
.var-ui-steps > li { position: relative; list-style: none; padding-left: calc(var(--var-ui-space-5) + var(--var-ui-space-3)); margin-bottom: var(--var-ui-space-5); counter-increment: docs-step; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-steps-stepforeground); line-height: 1.6; }
}
@layer utilities {
.var-ui-steps > li:last-child { margin-bottom: 0; }
}
@layer utilities {
.var-ui-steps > li::before { content: counter(docs-step); position: absolute; left: 0; top: 0; width: var(--var-ui-space-5); height: var(--var-ui-space-5); display: flex; align-items: center; justify-content: center; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-steps-indicatorforeground); background-color: var(--var-ui-steps-indicatorbackground); border-radius: var(--var-ui-radius-full); line-height: 1; }
}
@layer utilities {
.var-ui-steps > li :first-child { margin-top: 0; }
}
@layer utilities {
.var-ui-steps > li :last-child { margin-bottom: 0; }
}
@property --var-ui-switch-trackbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-switch-thumbbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-switch { --var-ui-switch-trackbackground: var(--var-ui-color-border-default); --var-ui-switch-thumbbackground: var(--var-ui-color-background-surface); display: inline-flex; align-items: center; gap: var(--var-ui-space-2); cursor: pointer; }
}
@layer components {
.var-ui-switch__track { position: relative; width: 40px; height: 24px; border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-switch-trackbackground); transition: background-color 140ms ease; }
}
@layer components {
.var-ui-switch__track[data-selected] { --var-ui-switch-trackbackground: var(--var-ui-color-tone-accent-background); }
}
@layer components {
.var-ui-switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-switch-thumbbackground); transition: transform 140ms ease; }
}
@layer components {
.var-ui-switch__thumb[data-selected] { transform: translateX(16px); }
}
@layer components {
.var-ui-switch__label { font-size: var(--var-ui-fontSize-md); }
}
@property --var-ui-table-headerbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-headercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-bodycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-captioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-bordercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-stripebg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-hoverbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-table-cellpaddingy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-table-cellpaddingx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-table { --var-ui-table-headerbg: var(--var-ui-color-background-surface); --var-ui-table-headercolor: var(--var-ui-color-text-secondary); --var-ui-table-bodycolor: var(--var-ui-color-text-primary); --var-ui-table-captioncolor: var(--var-ui-color-text-secondary); --var-ui-table-bordercolor: var(--var-ui-color-border-default); --var-ui-table-stripebg: var(--var-ui-color-background-subtle); --var-ui-table-hoverbg: var(--var-ui-color-background-elevated); --var-ui-table-cellpaddingy: var(--var-ui-space-2); --var-ui-table-cellpaddingx: var(--var-ui-space-3); position: relative; width: 100%; overflow-x: auto; }
}
@layer components {
.var-ui-table__table { width: 100%; border-collapse: collapse; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-table-bodycolor); }
}
@layer components {
.var-ui-table__table[data-layout="fixed"] { table-layout: fixed; }
}
@layer components {
.var-ui-table__caption { caption-side: top; text-align: left; padding: var(--var-ui-space-2) var(--var-ui-table-cellpaddingx); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-table-captioncolor); }
}
@layer components {
.var-ui-table__header[data-dividers="rows"] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__header[data-dividers="grid"] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__headerCell { position: relative; text-align: left; font-weight: var(--var-ui-fontWeight-semibold); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-table-headercolor); background-color: var(--var-ui-table-headerbg); padding: var(--var-ui-table-cellpaddingy) var(--var-ui-table-cellpaddingx); }
}
@layer components {
.var-ui-table__headerCell[data-align="center"] { text-align: center; }
}
@layer components {
.var-ui-table__headerCell[data-align="end"] { text-align: right; }
}
@layer components {
.var-ui-table__headerCell[data-density="compact"] { --var-ui-table-cellpaddingy: var(--var-ui-space-1); --var-ui-table-cellpaddingx: var(--var-ui-space-2); }
}
@layer components {
.var-ui-table__headerCell[data-density="spacious"] { --var-ui-table-cellpaddingy: var(--var-ui-space-3); --var-ui-table-cellpaddingx: var(--var-ui-space-4); }
}
@layer components {
.var-ui-table__headerCell[data-dividers="columns"]:not(:last-child) { border-right-width: var(--var-ui-borderWidth-default); border-right-style: solid; border-right-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__headerCell[data-dividers="grid"]:not(:last-child) { border-right-width: var(--var-ui-borderWidth-default); border-right-style: solid; border-right-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__headerCell[data-sticky-header] { position: sticky; top: 0; z-index: 1; background-color: var(--var-ui-table-headerbg); }
}
@layer components {
.var-ui-table__headerCell[data-text-overflow="truncate"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
}
@layer components {
.var-ui-table__resizeHandle { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: stretch; transform: translateX(50%); z-index: 2; }
}
@layer components {
.var-ui-table__row[data-dividers="rows"] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__row[data-dividers="grid"] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__row[data-is-striped]:nth-of-type(even) { background-color: var(--var-ui-table-stripebg); }
}
@layer components {
.var-ui-table__row[data-has-hover]:hover { background-color: var(--var-ui-table-hoverbg); }
}
@layer components {
.var-ui-table__cell { padding: var(--var-ui-table-cellpaddingy) var(--var-ui-table-cellpaddingx); color: var(--var-ui-table-bodycolor); }
}
@layer components {
.var-ui-table__cell[data-align="center"] { text-align: center; }
}
@layer components {
.var-ui-table__cell[data-align="end"] { text-align: right; }
}
@layer components {
.var-ui-table__cell[data-density="compact"] { --var-ui-table-cellpaddingy: var(--var-ui-space-1); --var-ui-table-cellpaddingx: var(--var-ui-space-2); }
}
@layer components {
.var-ui-table__cell[data-density="spacious"] { --var-ui-table-cellpaddingy: var(--var-ui-space-3); --var-ui-table-cellpaddingx: var(--var-ui-space-4); }
}
@layer components {
.var-ui-table__cell[data-dividers="columns"]:not(:last-child) { border-right-width: var(--var-ui-borderWidth-default); border-right-style: solid; border-right-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__cell[data-dividers="grid"]:not(:last-child) { border-right-width: var(--var-ui-borderWidth-default); border-right-style: solid; border-right-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__cell[data-text-overflow="truncate"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
}
@layer components {
.var-ui-table__footer { font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-table-headercolor); }
}
@layer components {
.var-ui-table__footer[data-dividers="rows"] { border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__footer[data-dividers="grid"] { border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-table-bordercolor); }
}
@layer components {
.var-ui-table__empty { padding: var(--var-ui-space-8); text-align: center; color: var(--var-ui-table-captioncolor); }
}
@property --var-ui-tabs-railcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tabs-railwidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tabs-railradius { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tabs-tabcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tabs-tabselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tabs-tabindicatorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tabs-indicatorx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tabs-indicatorwidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tabs-indicatoropacity { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-tabs-panelbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tabs-panelborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-tabs { --var-ui-tabs-railcolor: var(--var-ui-color-border-subtle); --var-ui-tabs-railwidth: var(--var-ui-borderWidth-thick); --var-ui-tabs-railradius: var(--var-ui-borderWidth-thick); --var-ui-tabs-tabcolor: var(--var-ui-color-text-secondary); --var-ui-tabs-tabselectedcolor: var(--var-ui-color-text-primary); --var-ui-tabs-tabindicatorcolor: var(--var-ui-color-text-primary); --var-ui-tabs-indicatorx: 0px; --var-ui-tabs-indicatorwidth: 0px; --var-ui-tabs-indicatoropacity: 0; --var-ui-tabs-panelbackground: var(--var-ui-color-background-subtle); --var-ui-tabs-panelborder: var(--var-ui-color-border-default); display: grid; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-tabs__list { position: relative; display: inline-flex; gap: var(--var-ui-space-1); --var-ui-tabs-indicatorx: 0px; --var-ui-tabs-indicatorwidth: 0px; --var-ui-tabs-indicatoropacity: 0; }
}
@layer components {
.var-ui-tabs__list::before { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: var(--var-ui-tabs-railwidth); border-radius: var(--var-ui-tabs-railradius); background-color: var(--var-ui-tabs-railcolor); pointer-events: none; }
}
@layer components {
.var-ui-tabs__list::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: var(--var-ui-tabs-indicatorwidth); height: var(--var-ui-tabs-railwidth); border-radius: var(--var-ui-tabs-railradius); background-color: var(--var-ui-tabs-tabindicatorcolor); pointer-events: none; opacity: var(--var-ui-tabs-indicatoropacity); z-index: 1; transform: translateX(var(--var-ui-tabs-indicatorx)); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-tabs__list::after { transition: none; } }
}
@layer components {
.var-ui-tabs__tab { border: none; background-color: transparent; padding: var(--var-ui-space-2) var(--var-ui-space-3); color: var(--var-ui-tabs-tabcolor); cursor: pointer; font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-tabs__tab[data-selected] { color: var(--var-ui-tabs-tabselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer components {
.var-ui-tabs__panel { padding: var(--var-ui-space-3); }
}
@property --var-ui-text-area-field-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-area-field-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-text-area-field { --var-ui-text-area-field-labelcolor: var(--var-ui-color-text-primary); --var-ui-text-area-field-inputbackground: var(--var-ui-color-background-surface); --var-ui-text-area-field-inputborder: var(--var-ui-color-border-default); --var-ui-text-area-field-inputforeground: var(--var-ui-color-text-primary); --var-ui-text-area-field-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-text-area-field-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-text-area-field-errorcolor: var(--var-ui-color-tone-danger-foreground); display: grid; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-text-area-field__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-text-area-field-labelcolor); }
}
@layer components {
.var-ui-text-area-field__input { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-text-area-field-inputborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); font-size: var(--var-ui-fontSize-md); background-color: var(--var-ui-text-area-field-inputbackground); color: var(--var-ui-text-area-field-inputforeground); min-height: 88px; resize: vertical; }
}
@layer components {
.var-ui-text-area-field__input:focus { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-text-area-field-inputborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-text-area-field__input::placeholder { color: var(--var-ui-text-area-field-placeholdercolor); }
}
@layer components {
.var-ui-text-area-field__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-text-area-field-descriptioncolor); }
}
@layer components {
.var-ui-text-area-field__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-text-area-field-errorcolor); }
}
@property --var-ui-text-field-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-field-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-text-field { --var-ui-text-field-labelcolor: var(--var-ui-color-text-primary); --var-ui-text-field-inputbackground: var(--var-ui-color-background-surface); --var-ui-text-field-inputborder: var(--var-ui-color-border-default); --var-ui-text-field-inputforeground: var(--var-ui-color-text-primary); --var-ui-text-field-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-text-field-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-text-field-errorcolor: var(--var-ui-color-tone-danger-foreground); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-text-field__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-text-field-labelcolor); }
}
@layer components {
.var-ui-text-field__input { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-text-field-inputborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-text-field-inputbackground); color: var(--var-ui-text-field-inputforeground); box-sizing: border-box; }
}
@layer components {
.var-ui-text-field__input:focus { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-text-field-inputborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-text-field__input::placeholder { color: var(--var-ui-text-field-placeholdercolor); }
}
@layer components {
.var-ui-text-field__input[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-text-field__input[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-text-field__input[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-text-field__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-text-field-descriptioncolor); }
}
@layer components {
.var-ui-text-field__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-text-field-errorcolor); }
}
@property --var-ui-thumbnail-size { syntax: "<length>"; inherits: true; initial-value: 64px; }
@property --var-ui-thumbnail-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-thumbnail { --var-ui-thumbnail-size: 64px; --var-ui-thumbnail-border: var(--var-ui-color-border-default); position: relative; display: inline-block; width: var(--var-ui-thumbnail-size); height: var(--var-ui-thumbnail-size); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-thumbnail-border); }
}
@layer components {
.var-ui-thumbnail[data-size="sm"] { --var-ui-thumbnail-size: 48px; }
}
@layer components {
.var-ui-thumbnail[data-size="md"] { --var-ui-thumbnail-size: 64px; }
}
@layer components {
.var-ui-thumbnail[data-size="lg"] { --var-ui-thumbnail-size: 96px; }
}
@layer components {
.var-ui-thumbnail__image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
}
@layer components {
.var-ui-thumbnail__dismiss { position: absolute; top: calc(var(--var-ui-space-2) * -1); right: calc(var(--var-ui-space-2) * -1); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-thumbnail-border); background-color: var(--var-ui-color-background-surface); cursor: pointer; padding: 0; }
}
@layer components {
.var-ui-thumbnail__dismiss:hover { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-thumbnail__dismiss:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@property --var-ui-timeinput-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-groupbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-groupborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-segmentcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeinput-segmentplaceholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-timeInput { --var-ui-timeinput-labelcolor: var(--var-ui-color-text-primary); --var-ui-timeinput-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-timeinput-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-timeinput-groupbackground: var(--var-ui-color-background-surface); --var-ui-timeinput-groupborder: var(--var-ui-color-border-default); --var-ui-timeinput-segmentcolor: var(--var-ui-color-text-primary); --var-ui-timeinput-segmentplaceholdercolor: var(--var-ui-color-text-secondary); display: grid; gap: var(--var-ui-space-1); min-width: 160px; }
}
@layer components {
.var-ui-timeInput__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-timeinput-labelcolor); }
}
@layer components {
.var-ui-timeInput__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-timeinput-descriptioncolor); }
}
@layer components {
.var-ui-timeInput__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-timeinput-errorcolor); }
}
@layer components {
.var-ui-timeInput__group { display: flex; align-items: center; gap: var(--var-ui-space-1); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-timeinput-groupborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); background-color: var(--var-ui-timeinput-groupbackground); width: fit-content; }
}
@layer components {
.var-ui-timeInput__group[data-focus-within] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-timeinput-groupborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-timeInput__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-timeInput__segment { font-size: var(--var-ui-fontSize-md); font-variant-numeric: tabular-nums; color: var(--var-ui-timeinput-segmentcolor); padding: 0 1px; }
}
@layer components {
.var-ui-timeInput__segment[data-placeholder] { color: var(--var-ui-timeinput-segmentplaceholdercolor); }
}
@layer components {
.var-ui-timeInput__segment[data-focused] { outline: none; background-color: var(--var-ui-color-background-subtle); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-timeInput__segment[data-disabled] { opacity: 0.6; }
}
@property --var-ui-toc-stickytop { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-stickymaxheightoffset { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-titlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toc-railcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toc-railwidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-railradius { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-indicatory { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-indicatorheight { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-toc-indicatoropacity { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --var-ui-toc-linkcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toc-linkhovercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toc-linkselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toc-linkselectedindicator { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-toc { --var-ui-toc-stickytop: var(--var-ui-space-5); --var-ui-toc-stickymaxheightoffset: var(--var-ui-space-6); --var-ui-toc-titlecolor: var(--var-ui-color-text-secondary); --var-ui-toc-railcolor: var(--var-ui-color-border-subtle); --var-ui-toc-railwidth: var(--var-ui-borderWidth-thick); --var-ui-toc-railradius: var(--var-ui-borderWidth-thick); --var-ui-toc-indicatory: 0px; --var-ui-toc-indicatorheight: 0px; --var-ui-toc-indicatoropacity: 0; --var-ui-toc-linkcolor: var(--var-ui-color-text-secondary); --var-ui-toc-linkhovercolor: var(--var-ui-color-text-primary); --var-ui-toc-linkselectedcolor: var(--var-ui-color-text-primary); --var-ui-toc-linkselectedindicator: var(--var-ui-color-text-primary); position: sticky; top: var(--var-ui-toc-stickytop); padding: var(--var-ui-space-6) var(--var-ui-space-5) var(--var-ui-space-8) var(--var-ui-space-4); max-height: calc(100dvh - var(--var-ui-toc-stickytop) - var(--var-ui-toc-stickymaxheightoffset)); overflow: auto; }
}
@layer components {
@media (max-width: 1280px) { .var-ui-toc { display: none; } }
}
@layer components {
.var-ui-toc__title { margin: 0 0 var(--var-ui-space-4); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-toc-titlecolor); }
}
@layer components {
.var-ui-toc__list { position: relative; margin: 0; padding: 0; padding-inline-start: var(--var-ui-space-3); list-style: none; display: flex; flex-direction: column; --var-ui-toc-indicatory: 0px; --var-ui-toc-indicatorheight: 0px; --var-ui-toc-indicatoropacity: 0; }
}
@layer components {
.var-ui-toc__list::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: var(--var-ui-toc-railwidth); border-radius: var(--var-ui-toc-railradius); background-color: var(--var-ui-toc-railcolor); pointer-events: none; }
}
@layer components {
.var-ui-toc__list::after { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: var(--var-ui-toc-railwidth); height: var(--var-ui-toc-indicatorheight); border-radius: var(--var-ui-toc-railradius); background-color: var(--var-ui-toc-linkselectedindicator); pointer-events: none; opacity: var(--var-ui-toc-indicatoropacity); z-index: 1; transform: translateY(var(--var-ui-toc-indicatory)); transition: transform 140ms ease, height 80ms ease, opacity 80ms ease; }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-toc__list::after { transition: none; } }
}
@layer components {
.var-ui-toc__item[data-nested] { padding-inline-start: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toc__link { display: block; padding-block: var(--var-ui-space-1); font-size: var(--var-ui-fontSize-sm); line-height: var(--var-ui-lineHeight-normal); font-weight: var(--var-ui-fontWeight-normal); color: var(--var-ui-toc-linkcolor); text-decoration: none; transition: color var(--var-ui-duration-medium) var(--var-ui-easing-standard), text-decoration-color var(--var-ui-duration-medium) var(--var-ui-easing-standard); }
}
@layer components {
.var-ui-toc__link:hover { color: var(--var-ui-toc-linkhovercolor); }
}
@layer components {
.var-ui-toc__link:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-toc__link[data-selected] { color: var(--var-ui-toc-linkselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@property --var-ui-timeline-line { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-bulletborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-bulletbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-bulletforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-titlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-timestampcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-timeline-bulletsize { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-timeline-linewidth { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-timeline { --var-ui-timeline-line: var(--var-ui-color-border-default); --var-ui-timeline-bulletborder: var(--var-ui-color-border-default); --var-ui-timeline-bulletbackground: var(--var-ui-color-background-surface); --var-ui-timeline-bulletforeground: var(--var-ui-color-text-secondary); --var-ui-timeline-titlecolor: var(--var-ui-color-text-primary); --var-ui-timeline-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-timeline-timestampcolor: var(--var-ui-color-text-secondary); --var-ui-timeline-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-timeline-bulletsize: var(--var-ui-space-3); --var-ui-timeline-linewidth: var(--var-ui-borderWidth-default); list-style: none; margin: 0; padding: 0; }
}
@layer components {
.var-ui-timeline__item { position: relative; display: grid; grid-template-columns: var(--var-ui-timeline-bulletsize) minmax(0, 1fr); column-gap: var(--var-ui-space-3); padding-bottom: var(--var-ui-space-4); }
}
@layer components {
.var-ui-timeline__item:last-child { padding-bottom: 0; }
}
@layer components {
.var-ui-timeline__item:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--var-ui-timeline-bulletsize) + var(--var-ui-space-1)); bottom: 0; left: calc((var(--var-ui-timeline-bulletsize) - var(--var-ui-timeline-linewidth)) / 2); width: var(--var-ui-timeline-linewidth); background-color: var(--var-ui-timeline-line); }
}
@layer components {
.var-ui-timeline__item[data-size="sm"] { --var-ui-timeline-bulletsize: var(--var-ui-space-2); }
}
@layer components {
.var-ui-timeline__bullet { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--var-ui-timeline-bulletsize); height: var(--var-ui-timeline-bulletsize); border-radius: var(--var-ui-radius-full); border-width: var(--var-ui-timeline-linewidth); border-style: solid; border-color: var(--var-ui-timeline-bulletborder); background-color: var(--var-ui-timeline-bulletbackground); color: var(--var-ui-timeline-bulletforeground); flex-shrink: 0; }
}
@layer components {
.var-ui-timeline__bullet[data-active] { --var-ui-timeline-bulletborder: var(--var-ui-timeline-solidbg); --var-ui-timeline-bulletbackground: var(--var-ui-timeline-solidbg); --var-ui-timeline-bulletforeground: var(--var-ui-timeline-solidfg); }
}
@layer components {
.var-ui-timeline__bullet[data-pending] { --var-ui-timeline-bulletborder: var(--var-ui-timeline-bulletborder); --var-ui-timeline-bulletbackground: var(--var-ui-timeline-bulletbackground); --var-ui-timeline-bulletforeground: var(--var-ui-timeline-bulletforeground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="accent"] { --var-ui-timeline-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="success"] { --var-ui-timeline-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-success-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="warning"] { --var-ui-timeline-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="danger"] { --var-ui-timeline-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="tip"] { --var-ui-timeline-semantic: var(--var-ui-color-tone-info-foreground); --var-ui-timeline-solidbg: var(--var-ui-color-tone-info-background); --var-ui-timeline-solidfg: var(--var-ui-color-tone-info-foregroundOnBackground); }
}
@layer components {
.var-ui-timeline__bullet[data-tone="neutral"] { --var-ui-timeline-semantic: var(--var-ui-color-text-secondary); --var-ui-timeline-solidbg: var(--var-ui-color-text-primary); --var-ui-timeline-solidfg: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-timeline__body { display: flex; flex-direction: column; gap: var(--var-ui-space-1); min-width: 0; padding-top: 2px; }
}
@layer components {
.var-ui-timeline__title { margin: 0; font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-timeline-titlecolor); line-height: 1.4; }
}
@layer components {
.var-ui-timeline__description { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-timeline-descriptioncolor); line-height: 1.5; }
}
@layer components {
.var-ui-timeline__timestamp { margin: 0; font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-timeline-timestampcolor); line-height: 1.4; }
}
@property --var-ui-toast-semantic { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toast-solidbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toast-solidfg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toast-titlecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toast-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toast-closecolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-toast__region { --var-ui-toast-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-toast-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-toast-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); --var-ui-toast-titlecolor: var(--var-ui-color-text-primary); --var-ui-toast-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-toast-closecolor: var(--var-ui-color-text-secondary); position: fixed; z-index: var(--var-ui-zIndex-toast); display: flex; flex-direction: column; gap: var(--var-ui-space-2); padding: var(--var-ui-space-4); pointer-events: none; max-width: min(24rem, calc(100vw - 2rem)); }
}
@layer components {
.var-ui-toast__region[data-placement="top-end"] { top: 0; right: 0; }
}
@layer components {
.var-ui-toast__region[data-placement="top-start"] { top: 0; left: 0; }
}
@layer components {
.var-ui-toast__region[data-placement="bottom-end"] { bottom: 0; right: 0; }
}
@layer components {
.var-ui-toast__region[data-placement="bottom-start"] { bottom: 0; left: 0; }
}
@layer components {
.var-ui-toast__item { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--var-ui-space-3); padding: var(--var-ui-space-3); border-radius: var(--var-ui-radius-md); box-shadow: var(--var-ui-shadow-md); outline: none; }
}
@layer components {
.var-ui-toast__item[data-focus-visible] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-toast__item[data-tone="info"] { --var-ui-toast-semantic: var(--var-ui-color-tone-accent-foreground); --var-ui-toast-solidbg: var(--var-ui-color-tone-accent-background); --var-ui-toast-solidfg: var(--var-ui-color-tone-accent-foregroundOnBackground); }
}
@layer components {
.var-ui-toast__item[data-tone="success"] { --var-ui-toast-semantic: var(--var-ui-color-tone-success-foreground); --var-ui-toast-solidbg: var(--var-ui-color-tone-success-background); --var-ui-toast-solidfg: var(--var-ui-color-tone-success-foregroundOnBackground); }
}
@layer components {
.var-ui-toast__item[data-tone="warning"] { --var-ui-toast-semantic: var(--var-ui-color-tone-warning-foreground); --var-ui-toast-solidbg: var(--var-ui-color-tone-warning-background); --var-ui-toast-solidfg: var(--var-ui-color-tone-warning-foregroundOnBackground); }
}
@layer components {
.var-ui-toast__item[data-tone="danger"] { --var-ui-toast-semantic: var(--var-ui-color-tone-danger-foreground); --var-ui-toast-solidbg: var(--var-ui-color-tone-danger-background); --var-ui-toast-solidfg: var(--var-ui-color-tone-danger-foregroundOnBackground); }
}
@layer components {
.var-ui-toast__item[data-appearance="subtle"] { background-color: color-mix(in srgb, var(--var-ui-toast-semantic) 12%, var(--var-ui-color-background-surface)); color: var(--var-ui-color-text-primary); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-toast-semantic); }
}
@layer components {
.var-ui-toast__item[data-appearance="solid"] { background-color: var(--var-ui-toast-solidbg); color: var(--var-ui-toast-solidfg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-toast-solidbg); }
}
@layer components {
.var-ui-toast__item[data-appearance="outline"] { background-color: transparent; color: var(--var-ui-color-text-primary); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-toast-semantic); }
}
@layer components {
.var-ui-toast__icon { flex-shrink: 0; display: inline-flex; margin-top: 2px; color: var(--var-ui-toast-semantic); }
}
@layer components {
.var-ui-toast__icon[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-toast__title { margin: 0; font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-toast-titlecolor); }
}
@layer components {
.var-ui-toast__title[data-appearance="solid"] { color: inherit; }
}
@layer components {
.var-ui-toast__description { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-toast-descriptioncolor); }
}
@layer components {
.var-ui-toast__close { flex-shrink: 0; appearance: none; border: none; background: transparent; color: var(--var-ui-toast-closecolor); cursor: pointer; display: inline-flex; padding: var(--var-ui-space-1); border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-toast__close:hover { background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-toast__close:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; }
}
@property --var-ui-toggle-button-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toggle-button-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toggle-button-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toggle-button-selectedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-toggle-button-selectedforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-toggle-button { --var-ui-toggle-button-border: var(--var-ui-color-border-default); --var-ui-toggle-button-background: var(--var-ui-color-background-surface); --var-ui-toggle-button-foreground: var(--var-ui-color-text-primary); --var-ui-toggle-button-selectedbackground: var(--var-ui-color-tone-accent-background); --var-ui-toggle-button-selectedforeground: var(--var-ui-color-tone-accent-foregroundOnBackground); appearance: none; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-toggle-button-border); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-toggle-button-background); color: var(--var-ui-toggle-button-foreground); font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--var-ui-space-2); transition: background-color 140ms ease, border-color 140ms ease; }
}
@layer components {
.var-ui-toggle-button:hover { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-toggle-button:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-toggle-button[data-selected] { --var-ui-toggle-button-background: var(--var-ui-toggle-button-selectedbackground); --var-ui-toggle-button-border: var(--var-ui-toggle-button-selectedbackground); --var-ui-toggle-button-foreground: var(--var-ui-toggle-button-selectedforeground); }
}
@layer components {
.var-ui-toggle-button[data-selected]:hover { --var-ui-toggle-button-background: var(--var-ui-color-link-hover); --var-ui-toggle-button-border: var(--var-ui-color-link-hover); }
}
@layer components {
.var-ui-toggle-button[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-toggle-button[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toggle-button[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-5); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toggle-button[data-segmented] { height: 100%; min-height: 0; padding-block: 0; border: none; border-radius: var(--var-ui-radius-full); background-color: transparent; --var-ui-toggle-button-foreground: var(--var-ui-color-text-secondary); font-weight: var(--var-ui-fontWeight-normal); box-shadow: none; transition: color 80ms ease; }
}
@layer components {
.var-ui-toggle-button[data-segmented]:hover { background-color: transparent; border-color: transparent; }
}
@layer components {
.var-ui-toggle-button[data-segmented][data-selected], .var-ui-toggle-button[data-segmented][aria-pressed="true"] { --var-ui-toggle-button-background: transparent; --var-ui-toggle-button-border: transparent; --var-ui-toggle-button-foreground: var(--var-ui-color-text-primary); font-weight: var(--var-ui-fontWeight-semibold); box-shadow: none; }
}
@layer components {
.var-ui-toggle-button[data-segmented][data-selected], .var-ui-toggle-button[data-segmented][aria-pressed="true"]:hover { --var-ui-toggle-button-background: transparent; --var-ui-toggle-button-border: transparent; }
}
@property --var-ui-tokenizer-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-groupbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-groupborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-tokenbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-tokenforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tokenizer-tokenremovehoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-tokenizer { --var-ui-tokenizer-labelcolor: var(--var-ui-color-text-primary); --var-ui-tokenizer-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-tokenizer-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-tokenizer-groupbackground: var(--var-ui-color-background-surface); --var-ui-tokenizer-groupborder: var(--var-ui-color-border-default); --var-ui-tokenizer-inputforeground: var(--var-ui-color-text-primary); --var-ui-tokenizer-popoverbackground: var(--var-ui-color-background-surface); --var-ui-tokenizer-popoverborder: var(--var-ui-color-border-default); --var-ui-tokenizer-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-tokenizer-tokenbackground: var(--var-ui-color-background-subtle); --var-ui-tokenizer-tokenforeground: var(--var-ui-color-text-primary); --var-ui-tokenizer-tokenremovehoverbackground: var(--var-ui-color-background-elevated); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-tokenizer__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-tokenizer-labelcolor); }
}
@layer components {
.var-ui-tokenizer__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-tokenizer-descriptioncolor); }
}
@layer components {
.var-ui-tokenizer__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-tokenizer-errorcolor); }
}
@layer components {
.var-ui-tokenizer__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--var-ui-space-1); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-tokenizer-groupborder); border-radius: var(--var-ui-radius-md); padding: var(--var-ui-space-2); background-color: var(--var-ui-tokenizer-groupbackground); }
}
@layer components {
.var-ui-tokenizer__group[data-focus-within] { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 1px; --var-ui-tokenizer-groupborder: var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-tokenizer__group[data-disabled] { opacity: 0.6; cursor: not-allowed; }
}
@layer components {
.var-ui-tokenizer__tokenList { display: contents; }
}
@layer components {
.var-ui-tokenizer__token { display: inline-flex; align-items: center; gap: var(--var-ui-space-1); padding: var(--var-ui-space-1) var(--var-ui-space-2); border-radius: var(--var-ui-radius-full); background-color: var(--var-ui-tokenizer-tokenbackground); color: var(--var-ui-tokenizer-tokenforeground); font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-tokenizer__tokenRemoveButton { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: inherit; }
}
@layer components {
.var-ui-tokenizer__tokenRemoveButton[data-hovered] { background-color: var(--var-ui-tokenizer-tokenremovehoverbackground); }
}
@layer components {
.var-ui-tokenizer__input { border: none; background: transparent; outline: none; flex: 1; min-width: 4rem; font-size: var(--var-ui-fontSize-md); color: var(--var-ui-tokenizer-inputforeground); }
}
@layer components {
.var-ui-tokenizer__popover { border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-tokenizer-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-tokenizer-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-tokenizer__item { font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; }
}
@layer components {
.var-ui-tokenizer__item[data-focused] { background-color: var(--var-ui-tokenizer-itemfocusedbackground); }
}
@layer components {
.var-ui-toolbar { display: flex; align-items: center; }
}
@layer components {
.var-ui-toolbar[data-size="sm"] { gap: var(--var-ui-space-1); min-height: var(--var-ui-size-control-sm); }
}
@layer components {
.var-ui-toolbar[data-size="md"] { gap: var(--var-ui-space-2); min-height: var(--var-ui-size-control-md); }
}
@layer components {
.var-ui-toolbar[data-size="lg"] { gap: var(--var-ui-space-2); min-height: var(--var-ui-size-control-lg); }
}
@layer components {
.var-ui-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
}
@layer components {
.var-ui-toolbar[data-layout="grid"] { display: grid; grid-template-columns: 1fr auto 1fr; }
}
@layer components {
.var-ui-toolbar__startSlot { display: flex; align-items: center; }
}
@layer components {
.var-ui-toolbar__startSlot[data-size="sm"] { gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-toolbar__startSlot[data-size="md"] { gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toolbar__startSlot[data-size="lg"] { gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toolbar__centerSlot { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
}
@layer components {
.var-ui-toolbar__endSlot { display: flex; align-items: center; }
}
@layer components {
.var-ui-toolbar__endSlot[data-size="sm"] { gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-toolbar__endSlot[data-size="md"] { gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-toolbar__endSlot[data-size="lg"] { gap: var(--var-ui-space-2); }
}
@property --var-ui-tree-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tree-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tree-hoverbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tree-selectedbg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tree-indentsize { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tree-rowpaddingy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --var-ui-tree-rowpaddingx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@layer components {
.var-ui-tree { --var-ui-tree-labelcolor: var(--var-ui-color-text-primary); --var-ui-tree-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-tree-hoverbg: var(--var-ui-color-background-subtle); --var-ui-tree-selectedbg: var(--var-ui-color-tone-accent-subtleBackground); --var-ui-tree-indentsize: var(--var-ui-space-4); --var-ui-tree-rowpaddingy: var(--var-ui-space-2); --var-ui-tree-rowpaddingx: var(--var-ui-space-2); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
}
@layer components {
.var-ui-tree__item { list-style: none; margin: 0; padding: 0; outline: none; }
}
@layer components {
.var-ui-tree__item:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-md); }
}
@layer components {
.var-ui-tree__row { display: flex; align-items: center; gap: var(--var-ui-space-2); padding: var(--var-ui-tree-rowpaddingy) var(--var-ui-tree-rowpaddingx); border-radius: var(--var-ui-radius-md); color: var(--var-ui-tree-labelcolor); cursor: default; min-width: 0; }
}
@layer components {
.var-ui-tree__row:hover { background-color: var(--var-ui-tree-hoverbg); }
}
@layer components {
.var-ui-tree__row[data-selected] { background-color: var(--var-ui-tree-selectedbg); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-tree__row[data-disabled] { opacity: var(--var-ui-opacity-disabled); pointer-events: none; }
}
@layer components {
.var-ui-tree__row[data-density="compact"] { --var-ui-tree-rowpaddingy: var(--var-ui-space-1); --var-ui-tree-rowpaddingx: var(--var-ui-space-2); }
}
@layer components {
.var-ui-tree__row[data-density="spacious"] { --var-ui-tree-rowpaddingy: var(--var-ui-space-3); --var-ui-tree-rowpaddingx: var(--var-ui-space-4); }
}
@layer components {
.var-ui-tree__toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer; color: inherit; transition: transform 0.15s ease; }
}
@layer components {
.var-ui-tree__toggle[data-expanded] { transform: rotate(90deg); }
}
@layer components {
[dir="rtl"] .var-ui-tree__toggle[data-expanded] { transform: rotate(-90deg); }
}
@layer components {
.var-ui-tree__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-tree-labelcolor); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-tree__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-tree-descriptioncolor); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.var-ui-tree__group { list-style: none; margin: 0; padding: 0; padding-left: var(--var-ui-tree-indentsize); }
}
@layer components {
.var-ui-tree__start { display: flex; flex-shrink: 0; align-items: center; }
}
@layer components {
.var-ui-tree__end { display: flex; flex-shrink: 0; align-items: center; margin-left: auto; }
}
@property --var-ui-tooltip-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-tooltip-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-tooltip { --var-ui-tooltip-background: var(--var-ui-color-text-primary); --var-ui-tooltip-foreground: var(--var-ui-color-background-surface); transition: var(--var-ui-transition-panelEnter), transform var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); transform-origin: var(--var-ui-transform-origin, center); background-color: var(--var-ui-tooltip-background); color: var(--var-ui-tooltip-foreground); font-size: var(--var-ui-fontSize-sm); padding: var(--var-ui-space-1) var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); box-shadow: var(--var-ui-shadow-sm); max-width: 16rem; line-height: 1.4; }
}
@layer components {
.var-ui-tooltip[data-starting-style], .var-ui-tooltip[data-ending-style] { opacity: 0; transform: scale(0.98); }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-tooltip { transition: none; transform: none; } }
}
@layer components {
@media (prefers-reduced-motion: reduce) { .var-ui-tooltip[data-starting-style], .var-ui-tooltip[data-ending-style] { opacity: 1; } }
}
@property --var-ui-typeahead-labelcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-descriptioncolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-errorcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-inputbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-inputborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-inputforeground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-placeholdercolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-popoverbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-popoverborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-itemselectedcolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-typeahead-itemfocusedbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-typeahead { --var-ui-typeahead-labelcolor: var(--var-ui-color-text-primary); --var-ui-typeahead-descriptioncolor: var(--var-ui-color-text-secondary); --var-ui-typeahead-errorcolor: var(--var-ui-color-tone-danger-foreground); --var-ui-typeahead-inputbackground: var(--var-ui-color-background-surface); --var-ui-typeahead-inputborder: var(--var-ui-color-border-default); --var-ui-typeahead-inputforeground: var(--var-ui-color-text-primary); --var-ui-typeahead-placeholdercolor: var(--var-ui-color-text-secondary); --var-ui-typeahead-popoverbackground: var(--var-ui-color-background-surface); --var-ui-typeahead-popoverborder: var(--var-ui-color-border-default); --var-ui-typeahead-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); --var-ui-typeahead-itemfocusedbackground: var(--var-ui-color-background-subtle); display: grid; gap: var(--var-ui-space-1); min-width: 240px; }
}
@layer components {
.var-ui-typeahead__label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-typeahead-labelcolor); }
}
@layer components {
.var-ui-typeahead__description { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-typeahead-descriptioncolor); }
}
@layer components {
.var-ui-typeahead__error { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-typeahead-errorcolor); }
}
@layer components {
.var-ui-typeahead__inputWrapper { display: flex; align-items: center; gap: var(--var-ui-space-2); width: 100%; box-sizing: border-box; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-typeahead-inputborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-typeahead-inputbackground); transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@layer components {
.var-ui-typeahead__inputWrapper:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-typeahead__inputWrapper:focus-within { outline: 1px solid var(--var-ui-color-border-focus); box-shadow: 0 0 3px var(--var-ui-color-border-focus); }
}
@layer components {
.var-ui-typeahead__inputWrapper[data-size="sm"] { box-sizing: border-box; height: var(--var-ui-size-control-sm); min-height: var(--var-ui-size-control-sm); font-size: var(--var-ui-fontSize-sm); padding-inline: var(--var-ui-space-2); padding-block: 0; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-typeahead__inputWrapper[data-size="md"] { box-sizing: border-box; height: var(--var-ui-size-control-md); min-height: var(--var-ui-size-control-md); font-size: var(--var-ui-fontSize-md); padding-inline: var(--var-ui-space-3); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-typeahead__inputWrapper[data-size="lg"] { box-sizing: border-box; height: var(--var-ui-size-control-lg); min-height: var(--var-ui-size-control-lg); font-size: var(--var-ui-fontSize-lg); padding-inline: var(--var-ui-space-4); padding-block: 0; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-typeahead__input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; font-size: inherit; color: var(--var-ui-typeahead-inputforeground); }
}
@layer components {
.var-ui-typeahead__input::placeholder { color: var(--var-ui-typeahead-placeholdercolor); }
}
@layer components {
.var-ui-typeahead__clearButton { display: inline-flex; flex-shrink: 0; color: var(--var-ui-color-text-secondary); cursor: pointer; border-radius: var(--var-ui-radius-sm); padding: var(--var-ui-space-1); }
}
@layer components {
.var-ui-typeahead__clearButton[data-hovered] { background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-typeahead__popover { --var-ui-typeahead-popoverborder: var(--var-ui-color-border-default); --var-ui-typeahead-popoverbackground: var(--var-ui-color-background-surface); --var-ui-typeahead-itemfocusedbackground: var(--var-ui-color-background-subtle); --var-ui-typeahead-itemselectedcolor: var(--var-ui-color-tone-accent-foreground); z-index: var(--var-ui-zIndex-dropdown); box-sizing: border-box; width: var(--trigger-width); min-width: var(--trigger-width); max-height: 16rem; overflow: hidden; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-typeahead-popoverborder); border-radius: var(--var-ui-radius-md); background-color: var(--var-ui-typeahead-popoverbackground); box-shadow: var(--var-ui-shadow-md); padding: var(--var-ui-space-1); outline: none; }
}
@layer components {
.var-ui-typeahead__listbox { display: flex; flex-direction: column; gap: var(--var-ui-space-1); max-height: calc(16rem - 2 * var(--var-ui-space-1)); overflow-y: auto; outline: none; }
}
@layer components {
.var-ui-typeahead__item { font-size: var(--var-ui-fontSize-md); padding: var(--var-ui-space-2) var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); cursor: pointer; outline: none; }
}
@layer components {
.var-ui-typeahead__item[data-focused], .var-ui-typeahead__item[data-hovered] { background-color: var(--var-ui-typeahead-itemfocusedbackground); }
}
@layer components {
.var-ui-typeahead__item[data-selected] { color: var(--var-ui-typeahead-itemselectedcolor); font-weight: var(--var-ui-fontWeight-semibold); }
}
@property --var-ui-heading-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-heading { --var-ui-heading-color: var(--var-ui-color-text-primary); margin: 0; color: var(--var-ui-heading-color); font-family: var(--var-ui-fontFamily-display); font-weight: var(--var-ui-fontWeight-semibold); line-height: var(--var-ui-lineHeight-tight); letter-spacing: -0.01em; }
}
@layer components {
.var-ui-heading[data-size="xs"] { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-heading[data-size="sm"] { font-size: var(--var-ui-fontSize-lg); }
}
@layer components {
.var-ui-heading[data-size="md"] { font-size: var(--var-ui-fontSize-xl); }
}
@layer components {
.var-ui-heading[data-size="lg"] { font-size: var(--var-ui-fontSize-2xl); }
}
@layer components {
.var-ui-heading[data-size="xl"] { font-size: var(--var-ui-fontSize-3xl); }
}
@layer components {
.var-ui-heading[data-size="display"] { font-size: var(--var-ui-fontSize-3xl); font-family: var(--var-ui-fontFamily-display); letter-spacing: -0.02em; }
}
@property --var-ui-text-block-color { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-text-block-secondarycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer components {
.var-ui-text-block { --var-ui-text-block-color: var(--var-ui-color-text-primary); --var-ui-text-block-secondarycolor: var(--var-ui-color-text-secondary); margin: 0; color: var(--var-ui-text-block-color); line-height: var(--var-ui-lineHeight-normal); }
}
@layer components {
.var-ui-text-block[data-size="sm"] { font-size: var(--var-ui-fontSize-sm); }
}
@layer components {
.var-ui-text-block[data-size="md"] { font-size: var(--var-ui-fontSize-md); }
}
@layer components {
.var-ui-text-block[data-size="lg"] { font-size: var(--var-ui-fontSize-lg); }
}
@layer components {
.var-ui-text-block[data-tone="secondary"] { color: var(--var-ui-text-block-secondarycolor); }
}
@layer components {
.var-ui-text-block[data-weight="normal"] { font-weight: var(--var-ui-fontWeight-normal); }
}
@layer components {
.var-ui-text-block[data-weight="medium"] { font-weight: var(--var-ui-fontWeight-medium); }
}
@layer components {
.var-ui-text-block[data-weight="semibold"] { font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer utilities {
.var-ui-hidden-always { display: none; }
}
@layer utilities {
.var-ui-hidden-base-true { display: none; }
}
@layer utilities {
.var-ui-hidden-base-false { display: contents; }
}
@layer utilities {
@media (min-width: 640px) { .var-ui-hidden-sm-true { display: none; } }
}
@layer utilities {
@media (min-width: 640px) { .var-ui-hidden-sm-false { display: contents; } }
}
@layer utilities {
@media (min-width: 768px) { .var-ui-hidden-md-true { display: none; } }
}
@layer utilities {
@media (min-width: 768px) { .var-ui-hidden-md-false { display: contents; } }
}
@layer utilities {
@media (min-width: 1024px) { .var-ui-hidden-lg-true { display: none; } }
}
@layer utilities {
@media (min-width: 1024px) { .var-ui-hidden-lg-false { display: contents; } }
}
@layer utilities {
@media (min-width: 1280px) { .var-ui-hidden-xl-true { display: none; } }
}
@layer utilities {
@media (min-width: 1280px) { .var-ui-hidden-xl-false { display: contents; } }
}
@property --var-ui-ds-layout-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-ds-layout-sectionborder { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-ds-layout-sectionbackground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer utilities {
.var-ui-ds-layout { --var-ui-ds-layout-foreground: var(--var-ui-color-text-primary); --var-ui-ds-layout-sectionborder: var(--var-ui-color-border-default); --var-ui-ds-layout-sectionbackground: var(--var-ui-color-background-surface); font-family: var(--var-ui-fontFamily-body); color: var(--var-ui-ds-layout-foreground); }
}
@layer utilities {
.var-ui-ds-layout--stack { display: grid; gap: var(--var-ui-space-5); }
}
@layer utilities {
.var-ui-ds-layout--section { display: grid; gap: var(--var-ui-space-3); padding: var(--var-ui-space-4); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-ds-layout-sectionborder); border-radius: var(--var-ui-radius-lg); background-color: var(--var-ui-ds-layout-sectionbackground); box-shadow: var(--var-ui-shadow-xs); }
}
@layer utilities {
.var-ui-ds-layout--row { display: flex; flex-wrap: wrap; gap: var(--var-ui-space-3); align-items: center; }
}
@property --var-ui-ds-text-foreground { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --var-ui-ds-text-secondarycolor { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer utilities {
.var-ui-ds-text { --var-ui-ds-text-foreground: var(--var-ui-color-text-primary); --var-ui-ds-text-secondarycolor: var(--var-ui-color-text-secondary); margin: 0; color: var(--var-ui-ds-text-foreground); }
}
@layer utilities {
.var-ui-ds-text--title { font-size: 28px; font-weight: var(--var-ui-fontWeight-semibold); letter-spacing: -0.02em; }
}
@layer utilities {
.var-ui-ds-text--subtitle { font-size: var(--var-ui-fontSize-lg); color: var(--var-ui-ds-text-secondarycolor); }
}
@layer utilities {
.var-ui-ds-text--sectionTitle { font-size: 20px; font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer utilities {
.var-ui-ds-text--label { font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-medium); }
}
@layer utilities {
.var-ui-ds-text--caption { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-ds-text-secondarycolor); }
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
}
@layer reset {
*:not(dialog) { margin: 0; }
}
@layer reset {
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
}
@layer reset {
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
}
@layer reset {
img, picture, video, canvas, svg { display: block; max-width: 100%; }
}
@layer reset {
input, button, textarea, select { font: inherit; }
}
@layer reset {
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}
@layer reset {
p { text-wrap: pretty; }
}
@layer reset {
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
}
@layer base {
html { scroll-behavior: smooth; }
}
@layer base {
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}
@layer base {
body { margin: 0; min-height: 100%; font-family: var(--var-ui-fontFamily-body); font-size: var(--var-ui-fontSize-md); line-height: var(--var-ui-lineHeight-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--var-ui-color-background-app); color: var(--var-ui-color-text-primary); }
}
@layer base {
h1, h2, h3, h4, h5, h6 { font-family: var(--var-ui-fontFamily-display); font-weight: var(--var-ui-fontWeight-semibold); line-height: var(--var-ui-lineHeight-tight); color: var(--var-ui-color-text-primary); }
}
@layer base {
h1 { font-size: var(--var-ui-fontSize-3xl); font-weight: var(--var-ui-fontWeight-bold); margin-bottom: var(--var-ui-space-3); }
}
@layer base {
h2 { font-size: var(--var-ui-fontSize-2xl); font-weight: var(--var-ui-fontWeight-bold); margin-top: var(--var-ui-space-6); margin-bottom: var(--var-ui-space-2); }
}
@layer base {
h3 { font-size: var(--var-ui-fontSize-xl); margin-top: var(--var-ui-space-5); margin-bottom: var(--var-ui-space-2); }
}
@layer base {
h4, h5, h6 { font-size: var(--var-ui-fontSize-lg); margin-top: var(--var-ui-space-4); margin-bottom: var(--var-ui-space-1); }
}
@layer base {
p { margin-bottom: var(--var-ui-space-3); }
}
@layer base {
p:last-child { margin-bottom: 0; }
}
@layer base {
a { color: var(--var-ui-color-link-default); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: var(--var-ui-fontWeight-medium); transition: var(--var-ui-transition-colorShift); }
}
@layer base {
a:hover { color: var(--var-ui-color-link-hover); }
}
@layer base {
a:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; border-radius: var(--var-ui-radius-sm); }
}
@layer base {
code { font-family: var(--var-ui-fontFamily-mono); font-size: 0.9em; font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-link-hover); }
}
@layer base {
a code { color: inherit; }
}
@layer base {
pre:not([data-codeblock-pre]) { font-family: var(--var-ui-fontFamily-mono); font-size: var(--var-ui-fontSize-sm); line-height: 1.6; background-color: var(--var-ui-color-background-subtle); padding: var(--var-ui-space-3); border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); overflow: auto; margin-bottom: var(--var-ui-space-3); }
}
@layer base {
pre code { background-color: transparent; padding: 0; border: none; font-size: inherit; font-weight: inherit; color: inherit; }
}
@layer base {
strong, b { font-weight: var(--var-ui-fontWeight-semibold); }
}
@layer base {
em, i { font-style: italic; }
}
@layer base {
small { font-size: var(--var-ui-fontSize-sm); }
}
@layer base {
hr { border: none; border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-color-border-default); margin: var(--var-ui-space-5) 0; }
}
@layer base {
ul, ol { margin-bottom: var(--var-ui-space-3); padding-left: var(--var-ui-space-4); }
}
@layer base {
li { margin-bottom: var(--var-ui-space-1); }
}
@layer base {
li:last-child { margin-bottom: 0; }
}
@layer base {
blockquote { margin: var(--var-ui-space-4) 0; padding-left: var(--var-ui-space-4); border-left-width: var(--var-ui-borderWidth-thick); border-left-style: solid; border-left-color: var(--var-ui-color-border-strong); color: var(--var-ui-color-text-secondary); }
}
@layer base {
table { width: 100%; border-collapse: collapse; margin-bottom: var(--var-ui-space-4); font-size: var(--var-ui-fontSize-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); }
}
@layer base {
th, td { text-align: left; padding: var(--var-ui-space-2) var(--var-ui-space-3); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); vertical-align: top; }
}
@layer base {
th { font-weight: var(--var-ui-fontWeight-semibold); background-color: var(--var-ui-color-background-subtle); }
}
@layer base {
tr:last-child td { border-bottom: none; }
}
@layer base {
caption { caption-side: bottom; padding-top: var(--var-ui-space-2); font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); text-align: left; }
}
@layer tokens {
.theme-var-ui-default { color-scheme: light dark; --var-ui-space-0: 0px; --var-ui-space-1: 4px; --var-ui-space-2: 8px; --var-ui-space-3: 12px; --var-ui-space-4: 16px; --var-ui-space-5: 24px; --var-ui-space-6: 32px; --var-ui-space-7: 28px; --var-ui-space-8: 48px; --var-ui-space-9: 36px; --var-ui-space-10: 40px; --var-ui-space-11: 44px; --var-ui-space-12: 64px; --var-ui-space-16: 64px; --var-ui-space-20: 80px; --var-ui-size-control-sm: 28px; --var-ui-size-control-md: 32px; --var-ui-size-control-lg: 36px; --var-ui-size-icon-sm: 14px; --var-ui-size-icon-md: 16px; --var-ui-size-icon-lg: 20px; --var-ui-size-nav-bar: 3.5rem; --var-ui-opacity-disabled: 0.5; --var-ui-opacity-muted: 0.6; --var-ui-letterSpacing-tight: -0.015em; --var-ui-letterSpacing-normal: 0; --var-ui-letterSpacing-wide: 0.025em; --var-ui-letterSpacing-caps: 0.06em; --var-ui-radius-none: 0; --var-ui-radius-sm: 3px; --var-ui-radius-md: 5px; --var-ui-radius-lg: 8px; --var-ui-radius-xl: 10px; --var-ui-radius-full: 9999px; --var-ui-radius-navItem: var(--var-ui-radius-md); --var-ui-borderWidth-thin: 1px; --var-ui-borderWidth-default: 1px; --var-ui-borderWidth-thick: 2px; --var-ui-fontFamily-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --var-ui-fontFamily-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --var-ui-fontFamily-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --var-ui-fontSize-xs: 10px; --var-ui-fontSize-sm: 12px; --var-ui-fontSize-md: 14px; --var-ui-fontSize-lg: 17px; --var-ui-fontSize-xl: 20px; --var-ui-fontSize-2xl: 24px; --var-ui-fontSize-3xl: 29px; --var-ui-fontWeight-normal: 400; --var-ui-fontWeight-medium: 500; --var-ui-fontWeight-semibold: 600; --var-ui-fontWeight-bold: 700; --var-ui-lineHeight-tight: 1.25; --var-ui-lineHeight-normal: 1.5; --var-ui-lineHeight-relaxed: 1.625; --var-ui-shadow-xs: 0.5px 1px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent); --var-ui-shadow-sm: 0.5px 1px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent), 1px 2px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent); --var-ui-shadow-md: 1px 2px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent), 2px 4px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent), 3px 6px 6px color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent); --var-ui-shadow-lg: 1px 2px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 7%, transparent), 2px 4px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 7%, transparent), 4px 8px 8px color-mix(in oklch, var(--var-ui-color-text-primary) 7%, transparent), 8px 16px 16px color-mix(in oklch, var(--var-ui-color-text-primary) 7%, transparent); --var-ui-shadow-xl: 1px 2px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent), 2px 4px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent), 4px 8px 8px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent), 8px 16px 16px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent), 16px 32px 32px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent); --var-ui-shadow-elevation-low: 0.5px 1px 1px color-mix(in oklch, var(--var-ui-color-text-primary) 7%, transparent); --var-ui-shadow-elevation-med: 1px 2px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent), 2px 4px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 6%, transparent); --var-ui-shadow-elevation-high: 1px 2px 2px color-mix(in oklch, var(--var-ui-color-text-primary) 5%, transparent), 2px 4px 4px color-mix(in oklch, var(--var-ui-color-text-primary) 5%, transparent), 3px 6px 6px color-mix(in oklch, var(--var-ui-color-text-primary) 5%, transparent); --var-ui-duration-fast: 80ms; --var-ui-duration-medium: 140ms; --var-ui-duration-slow: 220ms; --var-ui-duration-fast-min: 60ms; --var-ui-duration-fast-max: 105ms; --var-ui-duration-medium-min: 105ms; --var-ui-duration-medium-max: 185ms; --var-ui-duration-slow-min: 165ms; --var-ui-duration-slow-max: 295ms; --var-ui-easing-standard: ease; --var-ui-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --var-ui-transition-overlayFade: opacity var(--var-ui-duration-slow) var(--var-ui-easing-standard), visibility var(--var-ui-duration-slow) var(--var-ui-easing-standard); --var-ui-transition-panelEnter: opacity var(--var-ui-duration-slow) var(--var-ui-easing-emphasized); --var-ui-transition-backdrop: opacity var(--var-ui-duration-slow) var(--var-ui-easing-standard); --var-ui-transition-surfaceFast: background-color var(--var-ui-duration-fast) var(--var-ui-easing-standard); --var-ui-transition-colorShift: color var(--var-ui-duration-medium) var(--var-ui-easing-standard), text-decoration-color var(--var-ui-duration-medium) var(--var-ui-easing-standard); --var-ui-transition-controlSurface: background-color var(--var-ui-duration-medium) var(--var-ui-easing-standard), border-color var(--var-ui-duration-medium) var(--var-ui-easing-standard); --var-ui-breakpoint-sm: 640px; --var-ui-breakpoint-md: 768px; --var-ui-breakpoint-lg: 1024px; --var-ui-breakpoint-xl: 1280px; --var-ui-zIndex-base: 0; --var-ui-zIndex-raised: 1; --var-ui-zIndex-sticky: 10; --var-ui-zIndex-dropdown: 100; --var-ui-zIndex-overlay: 400; --var-ui-zIndex-toast: 500; --var-ui-zIndex-modal: 1000; --var-ui-zIndex-max: 9999; --var-ui-stroke-default: var(--var-ui-borderWidth-default) solid var(--var-ui-color-border-default); --var-ui-stroke-strong: var(--var-ui-borderWidth-default) solid var(--var-ui-color-border-strong); --var-ui-color-palette-rose-0: oklch(100% 0.027 2); --var-ui-color-palette-rose-1: oklch(98.01% 0.027 2); --var-ui-color-palette-rose-2: oklch(96.57% 0.065 2); --var-ui-color-palette-rose-3: oklch(91.21% 0.118 2); --var-ui-color-palette-rose-4: oklch(85.09% 0.163 2); --var-ui-color-palette-rose-5: oklch(63.85% 0.19 2); --var-ui-color-palette-rose-6: oklch(54.50% 0.19 2); --var-ui-color-palette-rose-7: oklch(46.60% 0.171 2); --var-ui-color-palette-rose-8: oklch(38.63% 0.129 2); --var-ui-color-palette-rose-9: oklch(33.19% 0.091 2); --var-ui-color-palette-rose-10: oklch(23.11% 0.061 2); --var-ui-color-palette-crimson-0: oklch(100% 0.029 5); --var-ui-color-palette-crimson-1: oklch(98.01% 0.029 5); --var-ui-color-palette-crimson-2: oklch(96.57% 0.071 5); --var-ui-color-palette-crimson-3: oklch(91.21% 0.13 5); --var-ui-color-palette-crimson-4: oklch(85.09% 0.181 5); --var-ui-color-palette-crimson-5: oklch(63.85% 0.21 5); --var-ui-color-palette-crimson-6: oklch(54.50% 0.21 5); --var-ui-color-palette-crimson-7: oklch(46.60% 0.189 5); --var-ui-color-palette-crimson-8: oklch(38.63% 0.143 5); --var-ui-color-palette-crimson-9: oklch(33.19% 0.101 5); --var-ui-color-palette-crimson-10: oklch(23.11% 0.067 5); --var-ui-color-palette-ruby-0: oklch(100% 0.028 12); --var-ui-color-palette-ruby-1: oklch(98.01% 0.028 12); --var-ui-color-palette-ruby-2: oklch(96.57% 0.068 12); --var-ui-color-palette-ruby-3: oklch(91.21% 0.124 12); --var-ui-color-palette-ruby-4: oklch(85.09% 0.172 12); --var-ui-color-palette-ruby-5: oklch(63.85% 0.2 12); --var-ui-color-palette-ruby-6: oklch(54.50% 0.2 12); --var-ui-color-palette-ruby-7: oklch(46.60% 0.18 12); --var-ui-color-palette-ruby-8: oklch(38.63% 0.136 12); --var-ui-color-palette-ruby-9: oklch(33.19% 0.096 12); --var-ui-color-palette-ruby-10: oklch(23.11% 0.064 12); --var-ui-color-palette-red-0: oklch(100% 0.029 27); --var-ui-color-palette-red-1: oklch(98.01% 0.029 27); --var-ui-color-palette-red-2: oklch(96.57% 0.071 27); --var-ui-color-palette-red-3: oklch(91.21% 0.13 27); --var-ui-color-palette-red-4: oklch(85.09% 0.181 27); --var-ui-color-palette-red-5: oklch(63.85% 0.21 27); --var-ui-color-palette-red-6: oklch(54.50% 0.21 27); --var-ui-color-palette-red-7: oklch(46.60% 0.189 27); --var-ui-color-palette-red-8: oklch(38.63% 0.143 27); --var-ui-color-palette-red-9: oklch(33.19% 0.101 27); --var-ui-color-palette-red-10: oklch(23.11% 0.067 27); --var-ui-color-palette-tomato-0: oklch(100% 0.028 35); --var-ui-color-palette-tomato-1: oklch(98.01% 0.028 35); --var-ui-color-palette-tomato-2: oklch(96.57% 0.068 35); --var-ui-color-palette-tomato-3: oklch(91.21% 0.124 35); --var-ui-color-palette-tomato-4: oklch(85.09% 0.172 35); --var-ui-color-palette-tomato-5: oklch(63.85% 0.2 35); --var-ui-color-palette-tomato-6: oklch(54.50% 0.2 35); --var-ui-color-palette-tomato-7: oklch(46.60% 0.18 35); --var-ui-color-palette-tomato-8: oklch(38.63% 0.136 35); --var-ui-color-palette-tomato-9: oklch(33.19% 0.096 35); --var-ui-color-palette-tomato-10: oklch(23.11% 0.064 35); --var-ui-color-palette-orange-0: oklch(100% 0.027 55); --var-ui-color-palette-orange-1: oklch(98.01% 0.027 55); --var-ui-color-palette-orange-2: oklch(96.57% 0.065 55); --var-ui-color-palette-orange-3: oklch(91.21% 0.118 55); --var-ui-color-palette-orange-4: oklch(85.09% 0.163 55); --var-ui-color-palette-orange-5: oklch(63.85% 0.19 55); --var-ui-color-palette-orange-6: oklch(54.50% 0.19 55); --var-ui-color-palette-orange-7: oklch(46.60% 0.171 55); --var-ui-color-palette-orange-8: oklch(38.63% 0.129 55); --var-ui-color-palette-orange-9: oklch(33.19% 0.091 55); --var-ui-color-palette-orange-10: oklch(23.11% 0.061 55); --var-ui-color-palette-amber-0: oklch(100% 0.024 72); --var-ui-color-palette-amber-1: oklch(98.01% 0.024 72); --var-ui-color-palette-amber-2: oklch(96.57% 0.058 72); --var-ui-color-palette-amber-3: oklch(91.21% 0.105 72); --var-ui-color-palette-amber-4: oklch(85.09% 0.146 72); --var-ui-color-palette-amber-5: oklch(63.85% 0.17 72); --var-ui-color-palette-amber-6: oklch(54.50% 0.17 72); --var-ui-color-palette-amber-7: oklch(46.60% 0.153 72); --var-ui-color-palette-amber-8: oklch(38.63% 0.116 72); --var-ui-color-palette-amber-9: oklch(33.19% 0.082 72); --var-ui-color-palette-amber-10: oklch(23.11% 0.054 72); --var-ui-color-palette-gold-0: oklch(100% 0.017 78); --var-ui-color-palette-gold-1: oklch(98.01% 0.017 78); --var-ui-color-palette-gold-2: oklch(96.57% 0.041 78); --var-ui-color-palette-gold-3: oklch(91.21% 0.074 78); --var-ui-color-palette-gold-4: oklch(85.09% 0.103 78); --var-ui-color-palette-gold-5: oklch(63.85% 0.12 78); --var-ui-color-palette-gold-6: oklch(54.50% 0.12 78); --var-ui-color-palette-gold-7: oklch(46.60% 0.108 78); --var-ui-color-palette-gold-8: oklch(38.63% 0.082 78); --var-ui-color-palette-gold-9: oklch(33.19% 0.058 78); --var-ui-color-palette-gold-10: oklch(23.11% 0.038 78); --var-ui-color-palette-yellow-0: oklch(100% 0.018 98); --var-ui-color-palette-yellow-1: oklch(98.01% 0.018 98); --var-ui-color-palette-yellow-2: oklch(96.57% 0.044 98); --var-ui-color-palette-yellow-3: oklch(91.21% 0.081 98); --var-ui-color-palette-yellow-4: oklch(85.09% 0.112 98); --var-ui-color-palette-yellow-5: oklch(63.85% 0.13 98); --var-ui-color-palette-yellow-6: oklch(54.50% 0.13 98); --var-ui-color-palette-yellow-7: oklch(46.60% 0.117 98); --var-ui-color-palette-yellow-8: oklch(38.63% 0.088 98); --var-ui-color-palette-yellow-9: oklch(33.19% 0.062 98); --var-ui-color-palette-yellow-10: oklch(23.11% 0.042 98); --var-ui-color-palette-lime-0: oklch(100% 0.028 128); --var-ui-color-palette-lime-1: oklch(98.01% 0.028 128); --var-ui-color-palette-lime-2: oklch(96.57% 0.068 128); --var-ui-color-palette-lime-3: oklch(91.21% 0.124 128); --var-ui-color-palette-lime-4: oklch(85.09% 0.172 128); --var-ui-color-palette-lime-5: oklch(63.85% 0.2 128); --var-ui-color-palette-lime-6: oklch(54.50% 0.2 128); --var-ui-color-palette-lime-7: oklch(46.60% 0.18 128); --var-ui-color-palette-lime-8: oklch(38.63% 0.136 128); --var-ui-color-palette-lime-9: oklch(33.19% 0.096 128); --var-ui-color-palette-lime-10: oklch(23.11% 0.064 128); --var-ui-color-palette-grass-0: oklch(100% 0.028 138); --var-ui-color-palette-grass-1: oklch(98.01% 0.028 138); --var-ui-color-palette-grass-2: oklch(96.57% 0.068 138); --var-ui-color-palette-grass-3: oklch(91.21% 0.124 138); --var-ui-color-palette-grass-4: oklch(85.09% 0.172 138); --var-ui-color-palette-grass-5: oklch(63.85% 0.2 138); --var-ui-color-palette-grass-6: oklch(54.50% 0.2 138); --var-ui-color-palette-grass-7: oklch(46.60% 0.18 138); --var-ui-color-palette-grass-8: oklch(38.63% 0.136 138); --var-ui-color-palette-grass-9: oklch(33.19% 0.096 138); --var-ui-color-palette-grass-10: oklch(23.11% 0.064 138); --var-ui-color-palette-green-0: oklch(100% 0.027 145); --var-ui-color-palette-green-1: oklch(98.01% 0.027 145); --var-ui-color-palette-green-2: oklch(96.57% 0.065 145); --var-ui-color-palette-green-3: oklch(91.21% 0.118 145); --var-ui-color-palette-green-4: oklch(85.09% 0.163 145); --var-ui-color-palette-green-5: oklch(63.85% 0.19 145); --var-ui-color-palette-green-6: oklch(54.50% 0.19 145); --var-ui-color-palette-green-7: oklch(46.60% 0.171 145); --var-ui-color-palette-green-8: oklch(38.63% 0.129 145); --var-ui-color-palette-green-9: oklch(33.19% 0.091 145); --var-ui-color-palette-green-10: oklch(23.11% 0.061 145); --var-ui-color-palette-emerald-0: oklch(100% 0.025 158); --var-ui-color-palette-emerald-1: oklch(98.01% 0.025 158); --var-ui-color-palette-emerald-2: oklch(96.57% 0.061 158); --var-ui-color-palette-emerald-3: oklch(91.21% 0.112 158); --var-ui-color-palette-emerald-4: oklch(85.09% 0.155 158); --var-ui-color-palette-emerald-5: oklch(63.85% 0.18 158); --var-ui-color-palette-emerald-6: oklch(54.50% 0.18 158); --var-ui-color-palette-emerald-7: oklch(46.60% 0.162 158); --var-ui-color-palette-emerald-8: oklch(38.63% 0.122 158); --var-ui-color-palette-emerald-9: oklch(33.19% 0.086 158); --var-ui-color-palette-emerald-10: oklch(23.11% 0.058 158); --var-ui-color-palette-jade-0: oklch(100% 0.022 168); --var-ui-color-palette-jade-1: oklch(98.01% 0.022 168); --var-ui-color-palette-jade-2: oklch(96.57% 0.054 168); --var-ui-color-palette-jade-3: oklch(91.21% 0.099 168); --var-ui-color-palette-jade-4: oklch(85.09% 0.138 168); --var-ui-color-palette-jade-5: oklch(63.85% 0.16 168); --var-ui-color-palette-jade-6: oklch(54.50% 0.16 168); --var-ui-color-palette-jade-7: oklch(46.60% 0.144 168); --var-ui-color-palette-jade-8: oklch(38.63% 0.109 168); --var-ui-color-palette-jade-9: oklch(33.19% 0.077 168); --var-ui-color-palette-jade-10: oklch(23.11% 0.051 168); --var-ui-color-palette-teal-0: oklch(100% 0.022 182); --var-ui-color-palette-teal-1: oklch(98.01% 0.022 182); --var-ui-color-palette-teal-2: oklch(96.57% 0.054 182); --var-ui-color-palette-teal-3: oklch(91.21% 0.099 182); --var-ui-color-palette-teal-4: oklch(85.09% 0.138 182); --var-ui-color-palette-teal-5: oklch(63.85% 0.16 182); --var-ui-color-palette-teal-6: oklch(54.50% 0.16 182); --var-ui-color-palette-teal-7: oklch(46.60% 0.144 182); --var-ui-color-palette-teal-8: oklch(38.63% 0.109 182); --var-ui-color-palette-teal-9: oklch(33.19% 0.077 182); --var-ui-color-palette-teal-10: oklch(23.11% 0.051 182); --var-ui-color-palette-mint-0: oklch(100% 0.02 188); --var-ui-color-palette-mint-1: oklch(98.01% 0.02 188); --var-ui-color-palette-mint-2: oklch(96.57% 0.048 188); --var-ui-color-palette-mint-3: oklch(91.21% 0.087 188); --var-ui-color-palette-mint-4: oklch(85.09% 0.12 188); --var-ui-color-palette-mint-5: oklch(63.85% 0.14 188); --var-ui-color-palette-mint-6: oklch(54.50% 0.14 188); --var-ui-color-palette-mint-7: oklch(46.60% 0.126 188); --var-ui-color-palette-mint-8: oklch(38.63% 0.095 188); --var-ui-color-palette-mint-9: oklch(33.19% 0.067 188); --var-ui-color-palette-mint-10: oklch(23.11% 0.045 188); --var-ui-color-palette-cyan-0: oklch(100% 0.024 200); --var-ui-color-palette-cyan-1: oklch(98.01% 0.024 200); --var-ui-color-palette-cyan-2: oklch(96.57% 0.058 200); --var-ui-color-palette-cyan-3: oklch(91.21% 0.105 200); --var-ui-color-palette-cyan-4: oklch(85.09% 0.146 200); --var-ui-color-palette-cyan-5: oklch(63.85% 0.17 200); --var-ui-color-palette-cyan-6: oklch(54.50% 0.17 200); --var-ui-color-palette-cyan-7: oklch(46.60% 0.153 200); --var-ui-color-palette-cyan-8: oklch(38.63% 0.116 200); --var-ui-color-palette-cyan-9: oklch(33.19% 0.082 200); --var-ui-color-palette-cyan-10: oklch(23.11% 0.054 200); --var-ui-color-palette-sky-0: oklch(100% 0.02 238); --var-ui-color-palette-sky-1: oklch(98.01% 0.02 238); --var-ui-color-palette-sky-2: oklch(96.57% 0.048 238); --var-ui-color-palette-sky-3: oklch(91.21% 0.087 238); --var-ui-color-palette-sky-4: oklch(85.09% 0.12 238); --var-ui-color-palette-sky-5: oklch(63.85% 0.14 238); --var-ui-color-palette-sky-6: oklch(54.50% 0.14 238); --var-ui-color-palette-sky-7: oklch(46.60% 0.126 238); --var-ui-color-palette-sky-8: oklch(38.63% 0.095 238); --var-ui-color-palette-sky-9: oklch(33.19% 0.067 238); --var-ui-color-palette-sky-10: oklch(23.11% 0.045 238); --var-ui-color-palette-blue-0: oklch(100% 0.031 262); --var-ui-color-palette-blue-1: oklch(98.01% 0.031 262); --var-ui-color-palette-blue-2: oklch(96.57% 0.075 262); --var-ui-color-palette-blue-3: oklch(91.21% 0.136 262); --var-ui-color-palette-blue-4: oklch(85.09% 0.189 262); --var-ui-color-palette-blue-5: oklch(63.85% 0.22 262); --var-ui-color-palette-blue-6: oklch(54.50% 0.22 262); --var-ui-color-palette-blue-7: oklch(46.60% 0.198 262); --var-ui-color-palette-blue-8: oklch(38.63% 0.15 262); --var-ui-color-palette-blue-9: oklch(33.19% 0.106 262); --var-ui-color-palette-blue-10: oklch(23.11% 0.07 262); --var-ui-color-palette-indigo-0: oklch(100% 0.028 274); --var-ui-color-palette-indigo-1: oklch(98.01% 0.028 274); --var-ui-color-palette-indigo-2: oklch(96.57% 0.068 274); --var-ui-color-palette-indigo-3: oklch(91.21% 0.124 274); --var-ui-color-palette-indigo-4: oklch(85.09% 0.172 274); --var-ui-color-palette-indigo-5: oklch(63.85% 0.2 274); --var-ui-color-palette-indigo-6: oklch(54.50% 0.2 274); --var-ui-color-palette-indigo-7: oklch(46.60% 0.18 274); --var-ui-color-palette-indigo-8: oklch(38.63% 0.136 274); --var-ui-color-palette-indigo-9: oklch(33.19% 0.096 274); --var-ui-color-palette-indigo-10: oklch(23.11% 0.064 274); --var-ui-color-palette-iris-0: oklch(100% 0.025 277); --var-ui-color-palette-iris-1: oklch(98.01% 0.025 277); --var-ui-color-palette-iris-2: oklch(96.57% 0.061 277); --var-ui-color-palette-iris-3: oklch(91.21% 0.112 277); --var-ui-color-palette-iris-4: oklch(85.09% 0.155 277); --var-ui-color-palette-iris-5: oklch(63.85% 0.18 277); --var-ui-color-palette-iris-6: oklch(54.50% 0.18 277); --var-ui-color-palette-iris-7: oklch(46.60% 0.162 277); --var-ui-color-palette-iris-8: oklch(38.63% 0.122 277); --var-ui-color-palette-iris-9: oklch(33.19% 0.086 277); --var-ui-color-palette-iris-10: oklch(23.11% 0.058 277); --var-ui-color-palette-violet-0: oklch(100% 0.031 294); --var-ui-color-palette-violet-1: oklch(98.01% 0.031 294); --var-ui-color-palette-violet-2: oklch(96.57% 0.075 294); --var-ui-color-palette-violet-3: oklch(91.21% 0.136 294); --var-ui-color-palette-violet-4: oklch(85.09% 0.189 294); --var-ui-color-palette-violet-5: oklch(63.85% 0.22 294); --var-ui-color-palette-violet-6: oklch(54.50% 0.22 294); --var-ui-color-palette-violet-7: oklch(46.60% 0.198 294); --var-ui-color-palette-violet-8: oklch(38.63% 0.15 294); --var-ui-color-palette-violet-9: oklch(33.19% 0.106 294); --var-ui-color-palette-violet-10: oklch(23.11% 0.07 294); --var-ui-color-palette-purple-0: oklch(100% 0.031 302); --var-ui-color-palette-purple-1: oklch(98.01% 0.031 302); --var-ui-color-palette-purple-2: oklch(96.57% 0.075 302); --var-ui-color-palette-purple-3: oklch(91.21% 0.136 302); --var-ui-color-palette-purple-4: oklch(85.09% 0.189 302); --var-ui-color-palette-purple-5: oklch(63.85% 0.22 302); --var-ui-color-palette-purple-6: oklch(54.50% 0.22 302); --var-ui-color-palette-purple-7: oklch(46.60% 0.198 302); --var-ui-color-palette-purple-8: oklch(38.63% 0.15 302); --var-ui-color-palette-purple-9: oklch(33.19% 0.106 302); --var-ui-color-palette-purple-10: oklch(23.11% 0.07 302); --var-ui-color-palette-plum-0: oklch(100% 0.025 315); --var-ui-color-palette-plum-1: oklch(98.01% 0.025 315); --var-ui-color-palette-plum-2: oklch(96.57% 0.061 315); --var-ui-color-palette-plum-3: oklch(91.21% 0.112 315); --var-ui-color-palette-plum-4: oklch(85.09% 0.155 315); --var-ui-color-palette-plum-5: oklch(63.85% 0.18 315); --var-ui-color-palette-plum-6: oklch(54.50% 0.18 315); --var-ui-color-palette-plum-7: oklch(46.60% 0.162 315); --var-ui-color-palette-plum-8: oklch(38.63% 0.122 315); --var-ui-color-palette-plum-9: oklch(33.19% 0.086 315); --var-ui-color-palette-plum-10: oklch(23.11% 0.058 315); --var-ui-color-palette-fuchsia-0: oklch(100% 0.031 328); --var-ui-color-palette-fuchsia-1: oklch(98.01% 0.031 328); --var-ui-color-palette-fuchsia-2: oklch(96.57% 0.075 328); --var-ui-color-palette-fuchsia-3: oklch(91.21% 0.136 328); --var-ui-color-palette-fuchsia-4: oklch(85.09% 0.189 328); --var-ui-color-palette-fuchsia-5: oklch(63.85% 0.22 328); --var-ui-color-palette-fuchsia-6: oklch(54.50% 0.22 328); --var-ui-color-palette-fuchsia-7: oklch(46.60% 0.198 328); --var-ui-color-palette-fuchsia-8: oklch(38.63% 0.15 328); --var-ui-color-palette-fuchsia-9: oklch(33.19% 0.106 328); --var-ui-color-palette-fuchsia-10: oklch(23.11% 0.07 328); --var-ui-color-palette-pink-0: oklch(100% 0.025 348); --var-ui-color-palette-pink-1: oklch(98.01% 0.025 348); --var-ui-color-palette-pink-2: oklch(96.57% 0.061 348); --var-ui-color-palette-pink-3: oklch(91.21% 0.112 348); --var-ui-color-palette-pink-4: oklch(85.09% 0.155 348); --var-ui-color-palette-pink-5: oklch(63.85% 0.18 348); --var-ui-color-palette-pink-6: oklch(54.50% 0.18 348); --var-ui-color-palette-pink-7: oklch(46.60% 0.162 348); --var-ui-color-palette-pink-8: oklch(38.63% 0.122 348); --var-ui-color-palette-pink-9: oklch(33.19% 0.086 348); --var-ui-color-palette-pink-10: oklch(23.11% 0.058 348); --var-ui-color-palette-bronze-0: oklch(100% 0.017 58); --var-ui-color-palette-bronze-1: oklch(98.01% 0.017 58); --var-ui-color-palette-bronze-2: oklch(96.57% 0.041 58); --var-ui-color-palette-bronze-3: oklch(91.21% 0.074 58); --var-ui-color-palette-bronze-4: oklch(85.09% 0.103 58); --var-ui-color-palette-bronze-5: oklch(63.85% 0.12 58); --var-ui-color-palette-bronze-6: oklch(54.50% 0.12 58); --var-ui-color-palette-bronze-7: oklch(46.60% 0.108 58); --var-ui-color-palette-bronze-8: oklch(38.63% 0.082 58); --var-ui-color-palette-bronze-9: oklch(33.19% 0.058 58); --var-ui-color-palette-bronze-10: oklch(23.11% 0.038 58); --var-ui-color-palette-brown-0: oklch(100% 0.013 48); --var-ui-color-palette-brown-1: oklch(98.01% 0.013 48); --var-ui-color-palette-brown-2: oklch(96.57% 0.031 48); --var-ui-color-palette-brown-3: oklch(91.21% 0.056 48); --var-ui-color-palette-brown-4: oklch(85.09% 0.077 48); --var-ui-color-palette-brown-5: oklch(63.85% 0.09 48); --var-ui-color-palette-brown-6: oklch(54.50% 0.09 48); --var-ui-color-palette-brown-7: oklch(46.60% 0.081 48); --var-ui-color-palette-brown-8: oklch(38.63% 0.061 48); --var-ui-color-palette-brown-9: oklch(33.19% 0.043 48); --var-ui-color-palette-brown-10: oklch(23.11% 0.029 48); --var-ui-color-palette-taupe-0: oklch(100% 0.003 42); --var-ui-color-palette-taupe-1: oklch(98.01% 0.003 42); --var-ui-color-palette-taupe-2: oklch(96.57% 0.007 42); --var-ui-color-palette-taupe-3: oklch(91.21% 0.014 42); --var-ui-color-palette-taupe-4: oklch(85.09% 0.019 42); --var-ui-color-palette-taupe-5: oklch(63.85% 0.022 42); --var-ui-color-palette-taupe-6: oklch(54.50% 0.022 42); --var-ui-color-palette-taupe-7: oklch(46.60% 0.02 42); --var-ui-color-palette-taupe-8: oklch(38.63% 0.015 42); --var-ui-color-palette-taupe-9: oklch(33.19% 0.011 42); --var-ui-color-palette-taupe-10: oklch(23.11% 0.007 42); --var-ui-color-palette-stone-0: oklch(100% 0.003 55); --var-ui-color-palette-stone-1: oklch(98.01% 0.003 55); --var-ui-color-palette-stone-2: oklch(96.57% 0.007 55); --var-ui-color-palette-stone-3: oklch(91.21% 0.014 55); --var-ui-color-palette-stone-4: oklch(85.09% 0.019 55); --var-ui-color-palette-stone-5: oklch(63.85% 0.022 55); --var-ui-color-palette-stone-6: oklch(54.50% 0.022 55); --var-ui-color-palette-stone-7: oklch(46.60% 0.02 55); --var-ui-color-palette-stone-8: oklch(38.63% 0.015 55); --var-ui-color-palette-stone-9: oklch(33.19% 0.011 55); --var-ui-color-palette-stone-10: oklch(23.11% 0.007 55); --var-ui-color-palette-sand-0: oklch(100% 0.003 72); --var-ui-color-palette-sand-1: oklch(98.01% 0.003 72); --var-ui-color-palette-sand-2: oklch(96.57% 0.008 72); --var-ui-color-palette-sand-3: oklch(91.21% 0.015 72); --var-ui-color-palette-sand-4: oklch(85.09% 0.021 72); --var-ui-color-palette-sand-5: oklch(63.85% 0.024 72); --var-ui-color-palette-sand-6: oklch(54.50% 0.024 72); --var-ui-color-palette-sand-7: oklch(46.60% 0.022 72); --var-ui-color-palette-sand-8: oklch(38.63% 0.016 72); --var-ui-color-palette-sand-9: oklch(33.19% 0.012 72); --var-ui-color-palette-sand-10: oklch(23.11% 0.008 72); --var-ui-color-palette-olive-0: oklch(100% 0.003 118); --var-ui-color-palette-olive-1: oklch(98.01% 0.003 118); --var-ui-color-palette-olive-2: oklch(96.57% 0.007 118); --var-ui-color-palette-olive-3: oklch(91.21% 0.014 118); --var-ui-color-palette-olive-4: oklch(85.09% 0.019 118); --var-ui-color-palette-olive-5: oklch(63.85% 0.022 118); --var-ui-color-palette-olive-6: oklch(54.50% 0.022 118); --var-ui-color-palette-olive-7: oklch(46.60% 0.02 118); --var-ui-color-palette-olive-8: oklch(38.63% 0.015 118); --var-ui-color-palette-olive-9: oklch(33.19% 0.011 118); --var-ui-color-palette-olive-10: oklch(23.11% 0.007 118); --var-ui-color-palette-sage-0: oklch(100% 0.003 145); --var-ui-color-palette-sage-1: oklch(98.01% 0.003 145); --var-ui-color-palette-sage-2: oklch(96.57% 0.007 145); --var-ui-color-palette-sage-3: oklch(91.21% 0.014 145); --var-ui-color-palette-sage-4: oklch(85.09% 0.019 145); --var-ui-color-palette-sage-5: oklch(63.85% 0.022 145); --var-ui-color-palette-sage-6: oklch(54.50% 0.022 145); --var-ui-color-palette-sage-7: oklch(46.60% 0.02 145); --var-ui-color-palette-sage-8: oklch(38.63% 0.015 145); --var-ui-color-palette-sage-9: oklch(33.19% 0.011 145); --var-ui-color-palette-sage-10: oklch(23.11% 0.007 145); --var-ui-color-palette-mist-0: oklch(100% 0.003 215); --var-ui-color-palette-mist-1: oklch(98.01% 0.003 215); --var-ui-color-palette-mist-2: oklch(96.57% 0.007 215); --var-ui-color-palette-mist-3: oklch(91.21% 0.014 215); --var-ui-color-palette-mist-4: oklch(85.09% 0.019 215); --var-ui-color-palette-mist-5: oklch(63.85% 0.022 215); --var-ui-color-palette-mist-6: oklch(54.50% 0.022 215); --var-ui-color-palette-mist-7: oklch(46.60% 0.02 215); --var-ui-color-palette-mist-8: oklch(38.63% 0.015 215); --var-ui-color-palette-mist-9: oklch(33.19% 0.011 215); --var-ui-color-palette-mist-10: oklch(23.11% 0.007 215); --var-ui-color-palette-slate-0: oklch(100% 0.004 260); --var-ui-color-palette-slate-1: oklch(98.01% 0.004 260); --var-ui-color-palette-slate-2: oklch(96.57% 0.01 260); --var-ui-color-palette-slate-3: oklch(91.21% 0.017 260); --var-ui-color-palette-slate-4: oklch(85.09% 0.024 260); --var-ui-color-palette-slate-5: oklch(63.85% 0.028 260); --var-ui-color-palette-slate-6: oklch(54.50% 0.028 260); --var-ui-color-palette-slate-7: oklch(46.60% 0.025 260); --var-ui-color-palette-slate-8: oklch(38.63% 0.019 260); --var-ui-color-palette-slate-9: oklch(33.19% 0.013 260); --var-ui-color-palette-slate-10: oklch(23.11% 0.009 260); --var-ui-color-palette-gray-0: oklch(100% 0.002 264); --var-ui-color-palette-gray-1: oklch(98.01% 0.002 264); --var-ui-color-palette-gray-2: oklch(96.57% 0.005 264); --var-ui-color-palette-gray-3: oklch(91.21% 0.009 264); --var-ui-color-palette-gray-4: oklch(85.09% 0.012 264); --var-ui-color-palette-gray-5: oklch(63.85% 0.014 264); --var-ui-color-palette-gray-6: oklch(54.50% 0.014 264); --var-ui-color-palette-gray-7: oklch(46.60% 0.013 264); --var-ui-color-palette-gray-8: oklch(38.63% 0.01 264); --var-ui-color-palette-gray-9: oklch(33.19% 0.007 264); --var-ui-color-palette-gray-10: oklch(23.11% 0.004 264); --var-ui-color-palette-zinc-0: oklch(100% 0.002 268); --var-ui-color-palette-zinc-1: oklch(98.01% 0.002 268); --var-ui-color-palette-zinc-2: oklch(96.57% 0.005 268); --var-ui-color-palette-zinc-3: oklch(91.21% 0.009 268); --var-ui-color-palette-zinc-4: oklch(85.09% 0.013 268); --var-ui-color-palette-zinc-5: oklch(63.85% 0.015 268); --var-ui-color-palette-zinc-6: oklch(54.50% 0.015 268); --var-ui-color-palette-zinc-7: oklch(46.60% 0.013 268); --var-ui-color-palette-zinc-8: oklch(38.63% 0.01 268); --var-ui-color-palette-zinc-9: oklch(33.19% 0.007 268); --var-ui-color-palette-zinc-10: oklch(23.11% 0.005 268); --var-ui-color-palette-mauve-0: oklch(100% 0.004 285); --var-ui-color-palette-mauve-1: oklch(98.01% 0.004 285); --var-ui-color-palette-mauve-2: oklch(96.57% 0.009 285); --var-ui-color-palette-mauve-3: oklch(91.21% 0.015 285); --var-ui-color-palette-mauve-4: oklch(85.09% 0.022 285); --var-ui-color-palette-mauve-5: oklch(63.85% 0.025 285); --var-ui-color-palette-mauve-6: oklch(54.50% 0.025 285); --var-ui-color-palette-mauve-7: oklch(46.60% 0.023 285); --var-ui-color-palette-mauve-8: oklch(38.63% 0.017 285); --var-ui-color-palette-mauve-9: oklch(33.19% 0.012 285); --var-ui-color-palette-mauve-10: oklch(23.11% 0.008 285); --var-ui-color-palette-neutral-0: oklch(100% 0 0); --var-ui-color-palette-neutral-1: oklch(98.01% 0 0); --var-ui-color-palette-neutral-2: oklch(96.57% 0 0); --var-ui-color-palette-neutral-3: oklch(91.21% 0 0); --var-ui-color-palette-neutral-4: oklch(85.09% 0 0); --var-ui-color-palette-neutral-5: oklch(63.85% 0 0); --var-ui-color-palette-neutral-6: oklch(54.50% 0 0); --var-ui-color-palette-neutral-7: oklch(46.60% 0 0); --var-ui-color-palette-neutral-8: oklch(38.63% 0 0); --var-ui-color-palette-neutral-9: oklch(33.19% 0 0); --var-ui-color-palette-neutral-10: oklch(23.11% 0 0); --var-ui-color-background-app: light-dark(var(--var-ui-color-palette-neutral-0), var(--var-ui-color-palette-slate-10)); --var-ui-color-background-surface: light-dark(var(--var-ui-color-palette-neutral-0), var(--var-ui-color-palette-slate-10)); --var-ui-color-background-subtle: light-dark(var(--var-ui-color-palette-neutral-1), var(--var-ui-color-palette-slate-9)); --var-ui-color-background-elevated: light-dark(var(--var-ui-color-palette-neutral-1), var(--var-ui-color-palette-slate-9)); --var-ui-color-background-popover: var(--var-ui-color-background-elevated); --var-ui-color-background-muted: var(--var-ui-color-background-subtle); --var-ui-color-background-secondary: light-dark(var(--var-ui-color-palette-neutral-2), var(--var-ui-color-palette-neutral-8)); --var-ui-color-background-tertiary: light-dark(var(--var-ui-color-palette-neutral-3), var(--var-ui-color-palette-neutral-7)); --var-ui-color-text-primary: light-dark(#14110D, var(--var-ui-color-palette-slate-1)); --var-ui-color-text-secondary: light-dark(var(--var-ui-color-palette-stone-8), var(--var-ui-color-palette-slate-3)); --var-ui-color-text-disabled: color-mix(in oklch, var(--var-ui-color-text-secondary) 45%, transparent); --var-ui-color-text-placeholder: color-mix(in oklch, var(--var-ui-color-text-secondary) 55%, transparent); --var-ui-color-tone-accent-background: light-dark(var(--var-ui-color-palette-plum-8), var(--var-ui-color-palette-plum-7)); --var-ui-color-tone-accent-foreground: light-dark(var(--var-ui-color-palette-plum-7), var(--var-ui-color-palette-plum-4)); --var-ui-color-tone-accent-subtleBackground: light-dark(color-mix(in oklch, var(--var-ui-color-palette-plum-7) 12%, transparent), color-mix(in oklch, var(--var-ui-color-palette-plum-4) 12%, transparent)); --var-ui-color-tone-accent-border: light-dark(color-mix(in oklch, var(--var-ui-color-palette-plum-7) 38%, transparent), color-mix(in oklch, var(--var-ui-color-palette-plum-4) 38%, transparent)); --var-ui-color-tone-accent-foregroundOnBackground: var(--var-ui-color-palette-neutral-1); --var-ui-color-tone-success-background: light-dark(var(--var-ui-color-palette-green-8), var(--var-ui-color-palette-green-7)); --var-ui-color-tone-success-foreground: light-dark(var(--var-ui-color-palette-green-7), var(--var-ui-color-palette-green-4)); --var-ui-color-tone-success-subtleBackground: light-dark(color-mix(in oklch, var(--var-ui-color-palette-green-7) 12%, transparent), color-mix(in oklch, var(--var-ui-color-palette-green-4) 12%, transparent)); --var-ui-color-tone-success-border: light-dark(color-mix(in oklch, var(--var-ui-color-palette-green-7) 38%, transparent), color-mix(in oklch, var(--var-ui-color-palette-green-4) 38%, transparent)); --var-ui-color-tone-success-foregroundOnBackground: var(--var-ui-color-palette-neutral-1); --var-ui-color-tone-warning-background: light-dark(var(--var-ui-color-palette-amber-8), var(--var-ui-color-palette-amber-4)); --var-ui-color-tone-warning-foreground: light-dark(var(--var-ui-color-palette-amber-7), var(--var-ui-color-palette-amber-4)); --var-ui-color-tone-warning-subtleBackground: light-dark(color-mix(in oklch, var(--var-ui-color-palette-amber-7) 12%, transparent), color-mix(in oklch, var(--var-ui-color-palette-amber-4) 12%, transparent)); --var-ui-color-tone-warning-border: light-dark(color-mix(in oklch, var(--var-ui-color-palette-amber-7) 38%, transparent), color-mix(in oklch, var(--var-ui-color-palette-amber-4) 38%, transparent)); --var-ui-color-tone-warning-foregroundOnBackground: light-dark(var(--var-ui-color-palette-neutral-1), var(--var-ui-color-palette-stone-10)); --var-ui-color-tone-danger-background: light-dark(var(--var-ui-color-palette-red-8), var(--var-ui-color-palette-red-7)); --var-ui-color-tone-danger-foreground: light-dark(var(--var-ui-color-palette-red-7), var(--var-ui-color-palette-red-4)); --var-ui-color-tone-danger-subtleBackground: light-dark(color-mix(in oklch, var(--var-ui-color-palette-red-7) 12%, transparent), color-mix(in oklch, var(--var-ui-color-palette-red-4) 12%, transparent)); --var-ui-color-tone-danger-border: light-dark(color-mix(in oklch, var(--var-ui-color-palette-red-7) 38%, transparent), color-mix(in oklch, var(--var-ui-color-palette-red-4) 38%, transparent)); --var-ui-color-tone-danger-foregroundOnBackground: var(--var-ui-color-palette-neutral-1); --var-ui-color-tone-info-background: light-dark(var(--var-ui-color-palette-blue-8), var(--var-ui-color-palette-blue-7)); --var-ui-color-tone-info-foreground: light-dark(var(--var-ui-color-palette-blue-7), var(--var-ui-color-palette-blue-4)); --var-ui-color-tone-info-subtleBackground: light-dark(color-mix(in oklch, var(--var-ui-color-palette-blue-7) 12%, transparent), color-mix(in oklch, var(--var-ui-color-palette-blue-4) 12%, transparent)); --var-ui-color-tone-info-border: light-dark(color-mix(in oklch, var(--var-ui-color-palette-blue-7) 38%, transparent), color-mix(in oklch, var(--var-ui-color-palette-blue-4) 38%, transparent)); --var-ui-color-tone-info-foregroundOnBackground: var(--var-ui-color-palette-neutral-1); --var-ui-color-border-default: light-dark(var(--var-ui-color-palette-neutral-3), var(--var-ui-color-palette-slate-8)); --var-ui-color-border-strong: light-dark(var(--var-ui-color-palette-neutral-4), var(--var-ui-color-palette-slate-7)); --var-ui-color-border-focus: light-dark(var(--var-ui-color-palette-blue-5), var(--var-ui-color-palette-blue-6)); --var-ui-color-border-subtle: light-dark(var(--var-ui-color-palette-neutral-2), var(--var-ui-color-palette-slate-9)); --var-ui-color-link-default: var(--var-ui-color-tone-accent-foreground); --var-ui-color-link-hover: light-dark(var(--var-ui-color-palette-plum-8), var(--var-ui-color-palette-plum-3)); --var-ui-color-navItem-foreground: var(--var-ui-color-text-secondary); --var-ui-color-navItem-background: transparent; --var-ui-color-navItem-hoverBackground: var(--var-ui-color-background-subtle); --var-ui-color-navItem-activeBackground: var(--var-ui-color-tone-accent-subtleBackground); --var-ui-color-navItem-selectedBackground: light-dark(var(--var-ui-color-tone-accent-subtleBackground), color-mix(in srgb, var(--var-ui-color-tone-accent-subtleBackground) 50%, transparent)); --var-ui-color-navItem-selectedForeground: var(--var-ui-color-tone-accent-foreground); --var-ui-color-ring-default: color-mix(in oklch, var(--var-ui-color-tone-accent-foreground) 45%, transparent); --var-ui-color-overlay-default: light-dark(color-mix(in oklch, var(--var-ui-color-palette-slate-10) 55%, transparent), color-mix(in oklch, var(--var-ui-color-palette-slate-10) 70%, transparent)); --var-ui-color-overlay-panel: var(--var-ui-color-background-elevated); --var-ui-color-overlay-backdrop: color-mix(in oklch, var(--var-ui-color-overlay-default) 60%, transparent); --var-ui-color-overlay-hover: color-mix(in oklch, var(--var-ui-color-text-primary) 8%, transparent); --var-ui-color-overlay-pressed: color-mix(in oklch, var(--var-ui-color-text-primary) 14%, transparent); --var-ui-color-skeleton-default: color-mix(in oklch, var(--var-ui-color-background-subtle) 80%, var(--var-ui-color-border-default)); --var-ui-color-track-default: color-mix(in oklch, var(--var-ui-color-background-subtle) 65%, var(--var-ui-color-border-default)); --var-ui-color-code-base: light-dark(var(--var-ui-color-palette-gray-10), var(--var-ui-color-palette-gray-3)); --var-ui-color-code-keyword: light-dark(var(--var-ui-color-palette-purple-6), var(--var-ui-color-palette-violet-4)); --var-ui-color-code-title: light-dark(var(--var-ui-color-palette-blue-6), var(--var-ui-color-palette-blue-4)); --var-ui-color-code-attr: light-dark(var(--var-ui-color-palette-amber-6), var(--var-ui-color-palette-amber-4)); --var-ui-color-code-string: light-dark(var(--var-ui-color-palette-teal-6), var(--var-ui-color-palette-teal-4)); --var-ui-color-code-builtIn: light-dark(var(--var-ui-color-palette-orange-6), var(--var-ui-color-palette-orange-4)); --var-ui-color-code-comment: light-dark(var(--var-ui-color-palette-gray-5), var(--var-ui-color-palette-gray-4)); --var-ui-color-code-name: light-dark(var(--var-ui-color-palette-red-6), var(--var-ui-color-palette-red-4)); --var-ui-color-code-section: light-dark(var(--var-ui-color-palette-indigo-6), var(--var-ui-color-palette-indigo-4)); --var-ui-color-code-bullet: light-dark(var(--var-ui-color-palette-amber-6), var(--var-ui-color-palette-amber-5)); --var-ui-color-code-addition: light-dark(var(--var-ui-color-palette-teal-6), var(--var-ui-color-palette-teal-4)); --var-ui-color-code-additionBackground: light-dark(var(--var-ui-color-palette-emerald-1), var(--var-ui-color-palette-emerald-10)); --var-ui-color-code-deletion: light-dark(var(--var-ui-color-palette-red-6), var(--var-ui-color-palette-red-4)); --var-ui-color-code-deletionBackground: light-dark(var(--var-ui-color-palette-red-1), var(--var-ui-color-palette-red-10)); }
}
@layer utilities {
.var-ui-docs-hljs { color-scheme: inherit; }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs { color: var(--var-ui-color-palette-gray-10); background: transparent; display: block; overflow-x: auto; }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-keyword, .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-keyword, .var-ui-docs-hljs [data-codeblock] .hljs-template-tag, .var-ui-docs-hljs [data-codeblock] .hljs-template-variable, .var-ui-docs-hljs [data-codeblock] .hljs-type, .var-ui-docs-hljs [data-codeblock] .hljs-variable.language_ { color: var(--var-ui-color-palette-purple-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-title, .var-ui-docs-hljs [data-codeblock] .hljs-title.class_, .var-ui-docs-hljs [data-codeblock] .hljs-title.class_.inherited__, .var-ui-docs-hljs [data-codeblock] .hljs-title.function_ { color: var(--var-ui-color-palette-blue-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-attr, .var-ui-docs-hljs [data-codeblock] .hljs-attribute, .var-ui-docs-hljs [data-codeblock] .hljs-literal, .var-ui-docs-hljs [data-codeblock] .hljs-meta, .var-ui-docs-hljs [data-codeblock] .hljs-number, .var-ui-docs-hljs [data-codeblock] .hljs-operator, .var-ui-docs-hljs [data-codeblock] .hljs-variable, .var-ui-docs-hljs [data-codeblock] .hljs-selector-attr, .var-ui-docs-hljs [data-codeblock] .hljs-selector-class, .var-ui-docs-hljs [data-codeblock] .hljs-selector-id { color: var(--var-ui-color-palette-amber-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-regexp, .var-ui-docs-hljs [data-codeblock] .hljs-string, .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-string { color: var(--var-ui-color-palette-teal-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-built_in, .var-ui-docs-hljs [data-codeblock] .hljs-symbol { color: var(--var-ui-color-palette-orange-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-comment, .var-ui-docs-hljs [data-codeblock] .hljs-code, .var-ui-docs-hljs [data-codeblock] .hljs-formula { color: var(--var-ui-color-palette-gray-5); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-name, .var-ui-docs-hljs [data-codeblock] .hljs-quote, .var-ui-docs-hljs [data-codeblock] .hljs-selector-tag, .var-ui-docs-hljs [data-codeblock] .hljs-selector-pseudo { color: var(--var-ui-color-palette-red-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-subst { color: var(--var-ui-color-palette-gray-10); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-section { color: var(--var-ui-color-palette-indigo-6); font-weight: bold; }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-bullet { color: var(--var-ui-color-palette-amber-6); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-emphasis { color: var(--var-ui-color-palette-gray-10); font-style: italic; }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-strong { color: var(--var-ui-color-palette-gray-10); font-weight: bold; }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-addition { color: var(--var-ui-color-palette-teal-6); background-color: var(--var-ui-color-palette-emerald-1); }
}
@layer utilities {
.var-ui-docs-hljs [data-codeblock] .hljs-deletion { color: var(--var-ui-color-palette-red-6); background-color: var(--var-ui-color-palette-red-1); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs { color: var(--var-ui-color-palette-gray-3); background: transparent; display: block; overflow-x: auto; }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-keyword, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-keyword, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-template-tag, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-template-variable, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-type, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-variable.language_ { color: var(--var-ui-color-palette-violet-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-title, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-title.class_, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-title.class_.inherited__, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-title.function_ { color: var(--var-ui-color-palette-blue-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-attr, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-attribute, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-literal, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-meta, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-number, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-operator, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-variable, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-selector-attr, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-selector-class, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-selector-id { color: var(--var-ui-color-palette-amber-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-regexp, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-string, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-string { color: var(--var-ui-color-palette-teal-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-built_in, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-symbol { color: var(--var-ui-color-palette-orange-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-comment, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-code, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-formula { color: var(--var-ui-color-palette-gray-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-name, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-quote, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-selector-tag, html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-selector-pseudo { color: var(--var-ui-color-palette-red-4); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-subst { color: var(--var-ui-color-palette-gray-3); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-section { color: var(--var-ui-color-palette-indigo-4); font-weight: bold; }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-bullet { color: var(--var-ui-color-palette-amber-5); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-emphasis { color: var(--var-ui-color-palette-gray-3); font-style: italic; }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-strong { color: var(--var-ui-color-palette-gray-3); font-weight: bold; }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-addition { color: var(--var-ui-color-palette-teal-4); background-color: var(--var-ui-color-palette-emerald-10); }
}
@layer utilities {
html[data-mode="dark"] .var-ui-docs-hljs [data-codeblock] .hljs-deletion { color: var(--var-ui-color-palette-red-4); background-color: var(--var-ui-color-palette-red-10); }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs { color: var(--var-ui-color-palette-gray-3); background: transparent; display: block; overflow-x: auto; } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-keyword, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-keyword, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-template-tag, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-template-variable, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-type, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-variable.language_ { color: var(--var-ui-color-palette-violet-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-title, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-title.class_, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-title.class_.inherited__, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-title.function_ { color: var(--var-ui-color-palette-blue-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-attr, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-attribute, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-literal, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-meta, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-number, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-operator, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-variable, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-selector-attr, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-selector-class, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-selector-id { color: var(--var-ui-color-palette-amber-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-regexp, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-string, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-meta .hljs-string { color: var(--var-ui-color-palette-teal-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-built_in, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-symbol { color: var(--var-ui-color-palette-orange-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-comment, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-code, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-formula { color: var(--var-ui-color-palette-gray-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-name, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-quote, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-selector-tag, html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-selector-pseudo { color: var(--var-ui-color-palette-red-4); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-subst { color: var(--var-ui-color-palette-gray-3); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-section { color: var(--var-ui-color-palette-indigo-4); font-weight: bold; } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-bullet { color: var(--var-ui-color-palette-amber-5); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-emphasis { color: var(--var-ui-color-palette-gray-3); font-style: italic; } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-strong { color: var(--var-ui-color-palette-gray-3); font-weight: bold; } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-addition { color: var(--var-ui-color-palette-teal-4); background-color: var(--var-ui-color-palette-emerald-10); } }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .var-ui-docs-hljs [data-codeblock] .hljs-deletion { color: var(--var-ui-color-palette-red-4); background-color: var(--var-ui-color-palette-red-10); } }
}
@layer utilities {
.var-ui-home-bento__switcher { display: flex; flex-wrap: wrap; gap: var(--var-ui-space-2); margin-bottom: var(--var-ui-space-4); }
}
@layer utilities {
.var-ui-home-bento__switcherPill { display: inline-flex; align-items: center; gap: var(--var-ui-space-2); height: 2.25rem; padding-inline: var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-surface); color: var(--var-ui-color-text-secondary); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); cursor: pointer; }
}
@layer utilities {
.var-ui-home-bento__switcherPill:hover { color: var(--var-ui-color-text-primary); background-color: var(--var-ui-color-background-subtle); }
}
@layer utilities {
.var-ui-home-bento__switcherPillActive { display: inline-flex; align-items: center; gap: var(--var-ui-space-2); height: 2.25rem; padding-inline: var(--var-ui-space-3); border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-tone-accent-foreground); background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-color-text-primary); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); cursor: pointer; }
}
@layer utilities {
.var-ui-home-bento__switcherSwatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 999px; border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); flex-shrink: 0; }
}
@layer utilities {
.var-ui-home-bento__showcase { border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-app); padding: var(--var-ui-space-4); margin-bottom: var(--var-ui-space-8); }
}
@layer utilities {
.var-ui-home-bento__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--var-ui-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-home-bento__grid { grid-template-columns: 1fr; } }
}
@layer utilities {
.var-ui-home-bento__tile { display: flex; flex-direction: column; gap: var(--var-ui-space-3); min-width: 0; border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-surface); padding: var(--var-ui-space-4); overflow: hidden; }
}
@layer utilities {
.var-ui-home-bento__tileSpan2 { grid-column: span 2; }
}
@layer utilities {
@media (max-width: 768px) { .var-ui-home-bento__tileSpan2 { grid-column: span 1; } }
}
@layer utilities {
.var-ui-home-bento__tileRowSpan2 { grid-row: span 2; }
}
@layer utilities {
.var-ui-home-bento__tileSpanFull { grid-column: 1 / -1; }
}
@layer components {
.var-ui-component-configurator { margin-block: 1.5rem; display: flex; flex-direction: column; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-component-configurator__workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); gap: 0; border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-surface); overflow: hidden; }
}
@layer components {
@media (max-width: 768px) { .var-ui-component-configurator__workspace { grid-template-columns: 1fr; } }
}
@layer components {
.var-ui-component-configurator__preview { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: var(--var-ui-space-6); border-right-width: var(--var-ui-borderWidth-default); border-right-style: solid; border-right-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-app); }
}
@layer components {
@media (max-width: 768px) { .var-ui-component-configurator__preview { border-right: none; border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); } }
}
@layer components {
.var-ui-component-configurator__previewInner { display: flex; align-items: center; justify-content: center; }
}
@layer components {
.var-ui-component-configurator__controls { display: flex; flex-direction: column; gap: var(--var-ui-space-4); padding: var(--var-ui-space-4); min-width: 0; background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-component-configurator__controlGroup { display: flex; flex-direction: column; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-component-configurator__controlLabel { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-component-configurator__toneGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-component-configurator__appearanceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-component-configurator__sizeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-component-configurator__toneSwatch { position: relative; aspect-ratio: 1; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: transparent; cursor: pointer; padding: 0; }
}
@layer components {
.var-ui-component-configurator__toneSwatch:hover { border-color: var(--var-ui-color-border-strong); }
}
@layer components {
.var-ui-component-configurator__toneSwatch:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-component-configurator__toneSwatchActive { position: relative; aspect-ratio: 1; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-thick); border-style: solid; border-color: var(--var-ui-color-text-primary); cursor: pointer; padding: 0; }
}
@layer components {
.var-ui-component-configurator__toneSwatchActive:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-component-configurator__toneCheck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; font-weight: var(--var-ui-fontWeight-bold); text-shadow: 0 1px 2px rgb(0 0 0 / 40%); }
}
@layer components {
.var-ui-component-configurator__optionButton { min-width: 0; min-height: 2rem; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-subtle); color: var(--var-ui-color-text-primary); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); cursor: pointer; padding-inline: var(--var-ui-space-2); padding-block: var(--var-ui-space-1); }
}
@layer components {
.var-ui-component-configurator__optionButton:hover { border-color: var(--var-ui-color-border-strong); background-color: var(--var-ui-color-background-elevated); }
}
@layer components {
.var-ui-component-configurator__optionButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-component-configurator__optionButtonActive { min-width: 0; min-height: 2rem; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-text-primary); background-color: var(--var-ui-color-background-elevated); color: var(--var-ui-color-text-primary); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-semibold); cursor: pointer; padding-inline: var(--var-ui-space-2); padding-block: var(--var-ui-space-1); }
}
@layer components {
.var-ui-component-configurator__optionButtonActive:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-component-configurator__code { border-radius: var(--var-ui-radius-lg); overflow: hidden; }
}
@layer components {
.var-ui-theme-playground { display: flex; flex-direction: column; gap: var(--var-ui-space-3); height: 100%; min-height: 0; }
}
@layer components {
.var-ui-theme-playground__workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; background-color: var(--var-ui-color-background-surface); overflow: hidden; }
}
@layer components {
.var-ui-theme-playground__preview { display: flex; flex-direction: column; flex: 1; min-height: 0; background-color: var(--var-ui-color-background-app); }
}
@layer components {
.var-ui-theme-playground__previewInner { flex: 1; min-height: 0; padding: var(--var-ui-space-4); overflow: auto; }
}
@layer components {
.var-ui-theme-playground__previewFrame { width: 100%; }
}
@layer components {
.var-ui-theme-playground__previewFrameMobile { width: 100%; max-width: 24rem; margin-inline: auto; }
}
@layer components {
.var-ui-theme-playground__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--var-ui-space-2); padding: var(--var-ui-space-3); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); }
}
@layer components {
.var-ui-theme-playground__code { flex-shrink: 0; height: 14rem; max-height: 14rem; border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); overflow: hidden; }
}
@layer components {
.var-ui-theme-playground__code [data-codeblock] { display: flex; flex-direction: column; height: 100%; max-height: 100%; border: none; box-shadow: none; border-radius: 0; }
}
@layer components {
.var-ui-theme-playground__code [data-codeblock-header] { flex-shrink: 0; }
}
@layer components {
.var-ui-theme-playground__code [data-codeblock-body] { flex: 1; min-height: 0; overflow: auto; }
}
@layer components {
.var-ui-theme-playground__controlGroup { display: flex; flex-direction: column; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-theme-playground__controlLabel { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-theme-playground__controlTabs { display: flex; flex-direction: column; gap: var(--var-ui-space-3); min-height: 0; }
}
@layer components {
.var-ui-theme-playground__baseStyles { display: flex; flex-direction: column; gap: var(--var-ui-space-4); }
}
@layer components {
.var-ui-theme-playground__colorList { display: flex; flex-direction: column; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-theme-playground__colorField { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-theme-playground__colorFieldLabel { font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-color-text-secondary); }
}
@layer components {
.var-ui-theme-playground__colorRow { display: flex; align-items: center; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-theme-playground__colorSwatch { width: 1.5rem; height: 1.5rem; border-radius: var(--var-ui-radius-sm); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); flex-shrink: 0; }
}
@layer components {
.var-ui-theme-playground__deferredTab { font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); line-height: var(--var-ui-lineHeight-relaxed); }
}
@layer components {
.var-ui-demo-chrome { margin-block: 1.5rem; display: flex; flex-direction: column; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-demo-chrome__card { border-radius: var(--var-ui-radius-lg); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-surface); overflow: hidden; }
}
@layer components {
.var-ui-demo-chrome__preview { display: flex; align-items: center; justify-content: center; min-height: 9rem; padding: var(--var-ui-space-8) var(--var-ui-space-6); background-color: var(--var-ui-color-background-app); }
}
@layer components {
.var-ui-demo-chrome__previewInner { display: flex; align-items: center; justify-content: center; width: 100%; }
}
@layer components {
.var-ui-demo-chrome__code { position: relative; border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-color-border-default); }
}
@layer components {
.var-ui-demo-chrome__codeBlock [data-codeblock] { border: none; border-radius: 0; box-shadow: none; background-color: transparent; }
}
@layer components {
.var-ui-demo-chrome__codeBlock [data-codeblock-header] { border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); background-color: var(--var-ui-color-background-subtle); }
}
@layer components {
.var-ui-demo-chrome__codeBlock[data-demo-framework="react"] [data-codeblock-header] [class*="code-block__title"]::before { content: "TS"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-inline-end: var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); font-size: 0.5625rem; font-weight: var(--var-ui-fontWeight-bold); font-family: var(--var-ui-fontFamily-body); letter-spacing: -0.02em; line-height: 1; color: var(--var-ui-color-tone-accent-foregroundOnBackground); background-color: #3178c6; }
}
@layer components {
.var-ui-demo-chrome__codeBlock[data-demo-framework="astro"] [data-codeblock-header] [class*="code-block__title"]::before { content: "A"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-inline-end: var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); font-size: 0.625rem; font-weight: var(--var-ui-fontWeight-bold); font-family: var(--var-ui-fontFamily-body); line-height: 1; color: var(--var-ui-color-tone-accent-foregroundOnBackground); background-color: #ff5d01; }
}
@layer components {
.var-ui-demo-chrome__codeBlock[data-demo-framework="html"] [data-codeblock-header] [class*="code-block__title"]::before { content: "5"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-inline-end: var(--var-ui-space-2); border-radius: var(--var-ui-radius-sm); font-size: 0.5625rem; font-weight: var(--var-ui-fontWeight-bold); font-family: var(--var-ui-fontFamily-body); line-height: 1; color: var(--var-ui-color-tone-accent-foregroundOnBackground); background-color: #e34c26; }
}
@layer components {
.var-ui-demo-chrome__codeBlock [data-codeblock-header] [class*="code-block__title"] { display: inline-flex; align-items: center; }
}
@layer components {
.var-ui-demo-chrome__codeBlock [data-codeblock-header] [class*="code-block__language"] { display: none; }
}
@layer components {
.var-ui-demo-chrome__codeBlock [data-codeblock-copy-text] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@layer components {
.var-ui-demo-chrome__codeFade { position: absolute; inset-inline: 0; bottom: 2.75rem; height: 3.5rem; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--var-ui-color-background-surface)); }
}
@layer components {
.var-ui-demo-chrome__expand { display: flex; justify-content: center; padding-block: var(--var-ui-space-2); border-top-width: var(--var-ui-borderWidth-default); border-top-style: solid; border-top-color: var(--var-ui-color-border-default); }
}
@layer components {
.var-ui-demo-chrome__expandButton { appearance: none; border: none; background: transparent; padding: var(--var-ui-space-1) var(--var-ui-space-3); font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); font-family: inherit; color: var(--var-ui-color-tone-accent-foreground); cursor: pointer; border-radius: var(--var-ui-radius-sm); }
}
@layer components {
.var-ui-demo-chrome__expandButton:hover { text-decoration: underline; }
}
@layer components {
.var-ui-demo-chrome__expandButton:focus-visible { outline: 2px solid var(--var-ui-color-border-focus); outline-offset: 2px; }
}
@layer components {
.var-ui-color-swatches { display: flex; flex-direction: column; gap: var(--var-ui-space-8); margin-block: 1.5rem; }
}
@layer components {
.var-ui-color-swatches__section { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-color-swatches__sectionTitle { margin: 0; font-size: var(--var-ui-fontSize-lg); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-color-swatches__sectionDescription { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); line-height: var(--var-ui-lineHeight-relaxed); }
}
@layer components {
.var-ui-color-swatches__paletteFamily { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: var(--var-ui-space-3); }
}
@layer components {
@media (max-width: 640px) { .var-ui-color-swatches__paletteFamily { grid-template-columns: 1fr; gap: var(--var-ui-space-2); } }
}
@layer components {
.var-ui-color-swatches__paletteFamilyName { font-size: var(--var-ui-fontSize-sm); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); text-transform: capitalize; }
}
@layer components {
.var-ui-color-swatches__paletteRamp { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--var-ui-space-1); }
}
@layer components {
@media (max-width: 768px) { .var-ui-color-swatches__paletteRamp { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
}
@layer components {
@media (max-width: 640px) { .var-ui-color-swatches__paletteRamp { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
}
@layer components {
.var-ui-color-swatches__paletteSwatch { display: flex; flex-direction: column; align-items: stretch; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-color-swatches__paletteStep { aspect-ratio: 1; border-radius: var(--var-ui-radius-sm); cursor: default; }
}
@layer components {
.var-ui-color-swatches__semanticGroup { display: flex; flex-direction: column; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-color-swatches__semanticGroupTitle { margin: 0; font-size: var(--var-ui-fontSize-md); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-color-text-primary); text-transform: capitalize; }
}
@layer components {
.var-ui-color-swatches__semanticGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-color-swatches__semanticCard { display: flex; flex-direction: column; border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); overflow: hidden; background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-color-swatches__semanticPreview { height: 3.5rem; border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); }
}
@layer components {
.var-ui-color-swatches__semanticMeta { display: flex; flex-direction: column; gap: var(--var-ui-space-1); padding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-color-swatches__semanticToken { font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-primary); font-family: var(--var-ui-fontFamily-mono); word-break: break-word; }
}
@layer components {
.var-ui-color-swatches__semanticVar { font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-color-text-secondary); font-family: var(--var-ui-fontFamily-mono); word-break: break-all; }
}
@layer components {
.var-ui-shadow-swatches { display: flex; flex-direction: column; gap: var(--var-ui-space-8); margin-block: 1.5rem; }
}
@layer components {
.var-ui-shadow-swatches__section { display: flex; flex-direction: column; gap: var(--var-ui-space-1); }
}
@layer components {
.var-ui-shadow-swatches__sectionTitle { margin: 0; font-size: var(--var-ui-fontSize-lg); font-weight: var(--var-ui-fontWeight-semibold); color: var(--var-ui-color-text-primary); }
}
@layer components {
.var-ui-shadow-swatches__sectionDescription { margin: 0; font-size: var(--var-ui-fontSize-sm); color: var(--var-ui-color-text-secondary); line-height: var(--var-ui-lineHeight-relaxed); }
}
@layer components {
.var-ui-shadow-swatches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-shadow-swatches__card { display: flex; flex-direction: column; border-radius: var(--var-ui-radius-md); border-width: var(--var-ui-borderWidth-default); border-style: solid; border-color: var(--var-ui-color-border-default); overflow: hidden; background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-shadow-swatches__preview { display: flex; align-items: center; justify-content: center; min-height: 6.5rem; padding: var(--var-ui-space-5); background-color: var(--var-ui-color-background-subtle); border-bottom-width: var(--var-ui-borderWidth-default); border-bottom-style: solid; border-bottom-color: var(--var-ui-color-border-default); }
}
@layer components {
.var-ui-shadow-swatches__previewSurface { width: 4.5rem; height: 3rem; border-radius: var(--var-ui-radius-sm); background-color: var(--var-ui-color-background-surface); }
}
@layer components {
.var-ui-shadow-swatches__meta { display: flex; flex-direction: column; gap: var(--var-ui-space-1); padding: var(--var-ui-space-2); }
}
@layer components {
.var-ui-shadow-swatches__token { font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-primary); font-family: var(--var-ui-fontFamily-mono); word-break: break-word; }
}
@layer components {
.var-ui-shadow-swatches__cssVar { font-size: var(--var-ui-fontSize-xs); color: var(--var-ui-color-text-secondary); font-family: var(--var-ui-fontFamily-mono); word-break: break-all; }
}
@layer components {
.var-ui-playground-shell { height: 100%; min-height: 0; min-width: 0; }
}
@layer components {
.var-ui-playground-shell__layout { height: 100%; min-height: 0; min-width: 0; }
}
@layer components {
.var-ui-playground-sidebar { display: flex; flex-direction: column; gap: var(--var-ui-space-4); padding: var(--var-ui-space-4); }
}
@layer components {
.var-ui-playground-sidebar__controlGroup { display: flex; flex-direction: column; gap: var(--var-ui-space-2); }
}
@layer components {
.var-ui-playground-sidebar__controlLabel { font-size: var(--var-ui-fontSize-xs); font-weight: var(--var-ui-fontWeight-medium); color: var(--var-ui-color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
}
@layer components {
.var-ui-playground-sidebar__editorTabs { display: flex; flex-direction: column; gap: var(--var-ui-space-3); }
}
@layer components {
.var-ui-playground-sidebar__navLinks { display: flex; flex-wrap: wrap; gap: var(--var-ui-space-3); }
}
@layer utilities {
.var-ui-docs-theme-picker { position: fixed; right: var(--var-ui-space-6); bottom: var(--var-ui-space-6); z-index: 40; }
}
@layer utilities {
.var-ui-docs-theme-picker__itemSwatch { display: block; width: 0.875rem; height: 0.875rem; border-radius: var(--var-ui-radius-full); flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--var-ui-color-border-default); }
}
@layer tokens {
article :is(h2, h3)[id] { scroll-margin-top: calc(var(--docs-header-height, 3.5rem) + 1rem); }
}