@lets-ui/css 0.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +21 -0
  3. package/dist/letsui.css +3751 -0
  4. package/dist/letsui.min.css +2 -0
  5. package/package.json +101 -0
package/dist/letsui.css ADDED
@@ -0,0 +1,3751 @@
1
+ @charset "UTF-8";
2
+ /* -------------------------------------------
3
+ * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
4
+ * ------------------------------------------- */
5
+ :root {
6
+ color-scheme: light dark;
7
+ --lui-border-radius-circle: 1000000px;
8
+ --lui-border-radius-lg: var(--lui-brand-border-radius-lg);
9
+ --lui-border-radius-md: var(--lui-brand-border-radius-md);
10
+ --lui-border-radius-none: 0;
11
+ --lui-border-radius-sm: var(--lui-brand-border-radius-sm);
12
+ --lui-border-radius-xs: var(--lui-brand-border-radius-xs);
13
+ --lui-border-width-0: 0;
14
+ --lui-border-width-1: 1px;
15
+ --lui-border-width-2: 2px;
16
+ --lui-brand-border-radius-lg: 16px;
17
+ --lui-brand-border-radius-md: 12px;
18
+ --lui-brand-border-radius-sm: 8px;
19
+ --lui-brand-border-radius-xs: 4px;
20
+ --lui-brand-color-primary-1: color(srgb 0.929412 0.839216 1);
21
+ --lui-brand-color-primary-2: color(srgb 0.85098 0.678431 1);
22
+ --lui-brand-color-primary-3: color(srgb 0.756863 0.517647 1);
23
+ --lui-brand-color-primary-4: color(srgb 0.529412 0.2 1);
24
+ --lui-brand-color-primary-5: color(srgb 0.407843 0.145098 0.858824);
25
+ --lui-brand-color-primary-6: color(srgb 0.301961 0.098039 0.717647);
26
+ --lui-brand-color-primary-7: color(srgb 0.207843 0.062745 0.576471);
27
+ --lui-brand-color-primary-8: color(srgb 0.145098 0.035294 0.478431);
28
+ --lui-brand-color-secondary-1: color(srgb 0.945098 0.94902 0.964706);
29
+ --lui-brand-color-secondary-2: color(srgb 0.854902 0.862745 0.894118);
30
+ --lui-brand-color-secondary-3: color(srgb 0.74902 0.764706 0.811765);
31
+ --lui-brand-color-secondary-4: color(srgb 0.423529 0.439216 0.505882);
32
+ --lui-brand-color-secondary-5: color(srgb 0.333333 0.34902 0.411765);
33
+ --lui-brand-color-secondary-6: color(srgb 0.247059 0.262745 0.321569);
34
+ --lui-brand-color-secondary-7: color(srgb 0.168627 0.180392 0.231373);
35
+ --lui-brand-color-secondary-8: color(srgb 0.101961 0.109804 0.14902);
36
+ --lui-brand-opacity-disabled: 0.4;
37
+ --lui-brand-typography-font-family-body: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
38
+ --lui-brand-typography-font-family-heading: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
39
+ --lui-brand-typography-font-size-1xl: clamp(1.402rem, 1.21rem + 0.96vw, 2.074rem);
40
+ --lui-brand-typography-font-size-1xs: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
41
+ --lui-brand-typography-font-size-2xl: clamp(1.577rem, 1.3167rem + 1.3014vw, 2.488rem);
42
+ --lui-brand-typography-font-size-2xs: clamp(0.778rem, 0.7623rem + 0.0786vw, 0.833rem);
43
+ --lui-brand-typography-font-size-3xl: clamp(2.245rem, 1.6579rem + 2.9357vw, 4.3rem);
44
+ --lui-brand-typography-font-size-3xs: clamp(0.691rem, 0.6901rem + 0.0043vw, 0.694rem);
45
+ --lui-brand-typography-font-size-lg: clamp(1.246rem, 1.1083rem + 0.6886vw, 1.728rem);
46
+ --lui-brand-typography-font-size-md: clamp(1.107rem, 1.0119rem + 0.4757vw, 1.44rem);
47
+ --lui-brand-typography-font-size-sm: clamp(0.984rem, 0.9223rem + 0.3086vw, 1.2rem);
48
+ --lui-brand-typography-line-height-body: 1.5;
49
+ --lui-brand-typography-line-height-heading: 1.2;
50
+ --lui-brand-typography-weight-block-title: var(--lui-typography-weight-medium);
51
+ --lui-brand-typography-weight-display: var(--lui-typography-weight-light);
52
+ --lui-brand-typography-weight-headline: var(--lui-typography-weight-semibold);
53
+ --lui-brand-typography-weight-overtitle: var(--lui-typography-weight-semibold);
54
+ --lui-brand-typography-weight-subheadline: var(--lui-typography-weight-regular);
55
+ --lui-brand-typography-weight-subtitle: var(--lui-typography-weight-regular);
56
+ --lui-brand-typography-weight-title: var(--lui-typography-weight-semibold);
57
+ --lui-color-blue-1: color(srgb 0.921569 0.968627 1);
58
+ --lui-color-blue-2: color(srgb 0.701961 0.870588 0.992157);
59
+ --lui-color-blue-3: color(srgb 0.494118 0.772549 0.984314);
60
+ --lui-color-blue-4: color(srgb 0.2 0.607843 0.941176);
61
+ --lui-color-blue-5: color(srgb 0.109804 0.537255 0.894118);
62
+ --lui-color-blue-6: color(srgb 0.047059 0.439216 0.776471);
63
+ --lui-color-blue-7: color(srgb 0.011765 0.262745 0.482353);
64
+ --lui-color-blue-8: color(srgb 0 0.105882 0.2);
65
+ --lui-color-caution-background-container: var(--lui-color-orange-5);
66
+ --lui-color-caution-background-surface: var(--lui-color-orange-1);
67
+ --lui-color-caution-border-stroke: var(--lui-color-orange-5);
68
+ --lui-color-caution-icon-default: var(--lui-color-orange-5);
69
+ --lui-color-danger-background-container: var(--lui-color-red-5);
70
+ --lui-color-danger-background-surface: var(--lui-color-red-1);
71
+ --lui-color-danger-border-stroke: var(--lui-color-red-5);
72
+ --lui-color-danger-icon-default: var(--lui-color-red-5);
73
+ --lui-color-danger-text-error: var(--lui-color-red-5);
74
+ --lui-color-gray-1: color(srgb 1 1 1);
75
+ --lui-color-gray-2: color(srgb 0.933333 0.92549 0.945098);
76
+ --lui-color-gray-3: color(srgb 0.780392 0.792157 0.831373);
77
+ --lui-color-gray-4: color(srgb 0.423529 0.439216 0.505882);
78
+ --lui-color-gray-5: color(srgb 0.329412 0.345098 0.403922);
79
+ --lui-color-gray-6: color(srgb 0.239216 0.254902 0.301961);
80
+ --lui-color-gray-7: color(srgb 0.156863 0.168627 0.2);
81
+ --lui-color-gray-8: color(srgb 0.07451 0.082353 0.098039);
82
+ --lui-color-green-1: color(srgb 0.901961 1 0.917647);
83
+ --lui-color-green-2: color(srgb 0.662745 0.937255 0.709804);
84
+ --lui-color-green-3: color(srgb 0.462745 0.87451 0.529412);
85
+ --lui-color-green-4: color(srgb 0.176471 0.662745 0.262745);
86
+ --lui-color-green-5: color(srgb 0.098039 0.509804 0.172549);
87
+ --lui-color-green-6: color(srgb 0.047059 0.360784 0.105882);
88
+ --lui-color-green-7: color(srgb 0.019608 0.211765 0.058824);
89
+ --lui-color-green-8: color(srgb 0.003922 0.058824 0.015686);
90
+ --lui-color-info-background-container: var(--lui-color-blue-5);
91
+ --lui-color-info-background-surface: var(--lui-color-blue-1);
92
+ --lui-color-info-border-stroke: var(--lui-color-blue-5);
93
+ --lui-color-info-icon-default: var(--lui-color-blue-5);
94
+ --lui-color-link-default: var(--lui-brand-color-primary-5);
95
+ --lui-color-link-visited: var(--lui-brand-color-primary-7);
96
+ --lui-color-neutral-background-container: var(--lui-color-gray-3);
97
+ --lui-color-neutral-background-overlay: var(--lui-color-gray-8);
98
+ --lui-color-neutral-background-surface: var(--lui-color-gray-1);
99
+ --lui-color-neutral-border-divisor: var(--lui-color-gray-2);
100
+ --lui-color-neutral-border-stroke: var(--lui-color-gray-5);
101
+ --lui-color-neutral-icon-default: var(--lui-color-gray-8);
102
+ --lui-color-neutral-icon-inverse: var(--lui-color-gray-1);
103
+ --lui-color-neutral-text-body: var(--lui-color-gray-7);
104
+ --lui-color-neutral-text-heading: var(--lui-color-gray-8);
105
+ --lui-color-neutral-text-inverse: var(--lui-color-gray-1);
106
+ --lui-color-orange-1: color(srgb 1 0.772549 0.678431);
107
+ --lui-color-orange-2: color(srgb 1 0.670588 0.490196);
108
+ --lui-color-orange-3: color(srgb 1 0.603922 0.313725);
109
+ --lui-color-orange-4: color(srgb 0.862745 0.45098 0.05098);
110
+ --lui-color-orange-5: color(srgb 0.729412 0.360784 0);
111
+ --lui-color-orange-6: color(srgb 0.592157 0.290196 0);
112
+ --lui-color-orange-7: color(srgb 0.454902 0.219608 0);
113
+ --lui-color-orange-8: color(srgb 0.321569 0.14902 0);
114
+ --lui-color-primary-background-container: var(--lui-brand-color-primary-5);
115
+ --lui-color-primary-background-surface: var(--lui-brand-color-primary-1);
116
+ --lui-color-primary-border-stroke: var(--lui-brand-color-primary-5);
117
+ --lui-color-primary-icon-default: var(--lui-brand-color-primary-5);
118
+ --lui-color-red-1: color(srgb 1 0.858824 0.858824);
119
+ --lui-color-red-2: color(srgb 0.992157 0.662745 0.662745);
120
+ --lui-color-red-3: color(srgb 0.988235 0.47451 0.47451);
121
+ --lui-color-red-4: color(srgb 0.831373 0.2 0.196078);
122
+ --lui-color-red-5: color(srgb 0.682353 0.12549 0.117647);
123
+ --lui-color-red-6: color(srgb 0.537255 0.078431 0.070588);
124
+ --lui-color-red-7: color(srgb 0.388235 0.05098 0.043137);
125
+ --lui-color-red-8: color(srgb 0.239216 0.031373 0.023529);
126
+ --lui-color-secondary-background-container: var(--lui-brand-color-secondary-5);
127
+ --lui-color-secondary-background-surface: var(--lui-brand-color-secondary-1);
128
+ --lui-color-secondary-border-stroke: var(--lui-brand-color-secondary-5);
129
+ --lui-color-secondary-icon-default: var(--lui-brand-color-secondary-5);
130
+ --lui-color-success-background-container: var(--lui-color-green-5);
131
+ --lui-color-success-background-surface: var(--lui-color-green-1);
132
+ --lui-color-success-border-stroke: var(--lui-color-green-5);
133
+ --lui-color-success-icon-default: var(--lui-color-green-5);
134
+ --lui-color-violet-1: color(srgb 0.929412 0.839216 1);
135
+ --lui-color-violet-2: color(srgb 0.85098 0.678431 1);
136
+ --lui-color-violet-3: color(srgb 0.756863 0.517647 1);
137
+ --lui-color-violet-4: color(srgb 0.529412 0.2 1);
138
+ --lui-color-violet-5: color(srgb 0.407843 0.145098 0.858824);
139
+ --lui-color-violet-6: color(srgb 0.301961 0.098039 0.717647);
140
+ --lui-color-violet-7: color(srgb 0.207843 0.062745 0.576471);
141
+ --lui-color-violet-8: color(srgb 0.145098 0.035294 0.478431);
142
+ --lui-elevation-base: 0 0 8px 0 color(srgb 0 0 0 / 0.02), 0 4px 12px 0 color(srgb 0 0 0 / 0.04);
143
+ --lui-elevation-floating: 0 0 8px 0 color(srgb 0 0 0 / 0.08), 0 12px 20px 0 color(srgb 0 0 0 / 0.12);
144
+ --lui-elevation-hovered: 0 0 8px 0 color(srgb 0 0 0 / 0.04), 0 8px 16px 0 color(srgb 0 0 0 / 0.08);
145
+ --lui-elevation-overlay: 0 1px 8px 0 color(srgb 0 0 0 / 0.04), 0 16px 24px 0 color(srgb 0 0 0 / 0.16);
146
+ --lui-opacity-0: 0;
147
+ --lui-opacity-100: 1;
148
+ --lui-opacity-disabled: var(--lui-brand-opacity-disabled);
149
+ --lui-opacity-hidden: var(--lui-opacity-0);
150
+ --lui-opacity-visible: var(--lui-opacity-100);
151
+ --lui-spacing-fixed-0: 0;
152
+ --lui-spacing-fixed-8: 8px;
153
+ --lui-spacing-fixed-16: 16px;
154
+ --lui-spacing-fixed-24: 24px;
155
+ --lui-spacing-fixed-32: 32px;
156
+ --lui-spacing-fixed-40: 40px;
157
+ --lui-spacing-fluid-2: clamp(0.1125rem, 0.109rem + 0.001vw, 0.125rem);
158
+ --lui-spacing-fluid-4: clamp(0.225rem, 0.218rem + 0.002vw, 0.25rem);
159
+ --lui-spacing-fluid-8: clamp(0.45rem, 0.436rem + 0.004vw, 0.5rem);
160
+ --lui-spacing-fluid-12: clamp(0.675rem, 0.655rem + 0.006vw, 0.75rem);
161
+ --lui-spacing-fluid-16: clamp(0.9rem, 0.874rem + 0.008vw, 1rem);
162
+ --lui-spacing-fluid-20: clamp(1.125rem, 1.093rem + 0.01vw, 1.25rem);
163
+ --lui-spacing-fluid-24: clamp(1.35rem, 1.311rem + 0.012vw, 1.5rem);
164
+ --lui-spacing-fluid-32: clamp(1.8rem, 1.748rem + 0.016vw, 2rem);
165
+ --lui-spacing-fluid-40: clamp(2.25rem, 2.186rem + 0.02vw, 2.5rem);
166
+ --lui-spacing-fluid-48: clamp(2.7rem, 2.623rem + 0.024vw, 3rem);
167
+ --lui-spacing-fluid-56: clamp(3.15rem, 3.061rem + 0.028vw, 3.5rem);
168
+ --lui-spacing-fluid-64: clamp(3.6rem, 3.498rem + 0.032vw, 4rem);
169
+ --lui-spacing-fluid-72: clamp(4.05rem, 3.936rem + 0.036vw, 4.5rem);
170
+ --lui-spacing-fluid-80: clamp(4.5rem, 4.374rem + 0.04vw, 5rem);
171
+ --lui-typography-case-lowercase: lowercase;
172
+ --lui-typography-case-none: none;
173
+ --lui-typography-case-uppercase: uppercase;
174
+ --lui-typography-decoration-line-through: line-through;
175
+ --lui-typography-decoration-none: none;
176
+ --lui-typography-decoration-underline: underline;
177
+ --lui-typography-line-height-lg: 1.5;
178
+ --lui-typography-line-height-md: 1.2;
179
+ --lui-typography-line-height-sm: 1.125;
180
+ --lui-typography-scale-block-title-font-family: var(--lui-brand-typography-font-family-heading);
181
+ --lui-typography-scale-block-title-font-size: 16px;
182
+ --lui-typography-scale-block-title-font-weight: var(--lui-brand-typography-weight-block-title);
183
+ --lui-typography-scale-block-title-line-height: var(--lui-brand-typography-line-height-heading);
184
+ --lui-typography-scale-block-title-letter-spacing: var(--lui-typography-tracking-default);
185
+ --lui-typography-scale-block-title: var(--lui-typography-scale-block-title-font-weight) var(--lui-typography-scale-block-title-font-size)/var(--lui-typography-scale-block-title-line-height) var(--lui-typography-scale-block-title-font-family);
186
+ --lui-typography-scale-body-lg-font-family: var(--lui-brand-typography-font-family-body);
187
+ --lui-typography-scale-body-lg-font-size: 16px;
188
+ --lui-typography-scale-body-lg-font-weight: var(--lui-typography-weight-regular);
189
+ --lui-typography-scale-body-lg-line-height: var(--lui-brand-typography-line-height-body);
190
+ --lui-typography-scale-body-lg-letter-spacing: var(--lui-typography-tracking-default);
191
+ --lui-typography-scale-body-lg: var(--lui-typography-scale-body-lg-font-weight) var(--lui-typography-scale-body-lg-font-size)/var(--lui-typography-scale-body-lg-line-height) var(--lui-typography-scale-body-lg-font-family);
192
+ --lui-typography-scale-body-md-font-family: var(--lui-brand-typography-font-family-body);
193
+ --lui-typography-scale-body-md-font-size: 16px;
194
+ --lui-typography-scale-body-md-font-weight: var(--lui-typography-weight-regular);
195
+ --lui-typography-scale-body-md-line-height: var(--lui-brand-typography-line-height-body);
196
+ --lui-typography-scale-body-md-letter-spacing: var(--lui-typography-tracking-default);
197
+ --lui-typography-scale-body-md: var(--lui-typography-scale-body-md-font-weight) var(--lui-typography-scale-body-md-font-size)/var(--lui-typography-scale-body-md-line-height) var(--lui-typography-scale-body-md-font-family);
198
+ --lui-typography-scale-body-sm-font-family: var(--lui-brand-typography-font-family-body);
199
+ --lui-typography-scale-body-sm-font-size: 16px;
200
+ --lui-typography-scale-body-sm-font-weight: var(--lui-typography-weight-regular);
201
+ --lui-typography-scale-body-sm-line-height: var(--lui-brand-typography-line-height-body);
202
+ --lui-typography-scale-body-sm-letter-spacing: var(--lui-typography-tracking-default);
203
+ --lui-typography-scale-body-sm: var(--lui-typography-scale-body-sm-font-weight) var(--lui-typography-scale-body-sm-font-size)/var(--lui-typography-scale-body-sm-line-height) var(--lui-typography-scale-body-sm-font-family);
204
+ --lui-typography-scale-display-font-family: var(--lui-brand-typography-font-family-heading);
205
+ --lui-typography-scale-display-font-size: 16px;
206
+ --lui-typography-scale-display-font-weight: var(--lui-brand-typography-weight-display);
207
+ --lui-typography-scale-display-line-height: var(--lui-brand-typography-line-height-heading);
208
+ --lui-typography-scale-display-letter-spacing: var(--lui-typography-tracking-default);
209
+ --lui-typography-scale-display: var(--lui-typography-scale-display-font-weight) var(--lui-typography-scale-display-font-size)/var(--lui-typography-scale-display-line-height) var(--lui-typography-scale-display-font-family);
210
+ --lui-typography-scale-headline-font-family: var(--lui-brand-typography-font-family-heading);
211
+ --lui-typography-scale-headline-font-size: 16px;
212
+ --lui-typography-scale-headline-font-weight: var(--lui-brand-typography-weight-headline);
213
+ --lui-typography-scale-headline-line-height: var(--lui-brand-typography-line-height-heading);
214
+ --lui-typography-scale-headline-letter-spacing: var(--lui-typography-tracking-default);
215
+ --lui-typography-scale-headline: var(--lui-typography-scale-headline-font-weight) var(--lui-typography-scale-headline-font-size)/var(--lui-typography-scale-headline-line-height) var(--lui-typography-scale-headline-font-family);
216
+ --lui-typography-scale-overtitle-font-family: var(--lui-brand-typography-font-family-heading);
217
+ --lui-typography-scale-overtitle-font-size: 16px;
218
+ --lui-typography-scale-overtitle-font-weight: var(--lui-brand-typography-weight-overtitle);
219
+ --lui-typography-scale-overtitle-line-height: var(--lui-brand-typography-line-height-heading);
220
+ --lui-typography-scale-overtitle-letter-spacing: var(--lui-typography-tracking-default);
221
+ --lui-typography-scale-overtitle-text-case: var(--lui-typography-case-uppercase);
222
+ --lui-typography-scale-overtitle: var(--lui-typography-scale-overtitle-font-weight) var(--lui-typography-scale-overtitle-font-size)/var(--lui-typography-scale-overtitle-line-height) var(--lui-typography-scale-overtitle-font-family);
223
+ --lui-typography-scale-subheadline-font-family: var(--lui-brand-typography-font-family-heading);
224
+ --lui-typography-scale-subheadline-font-size: 16px;
225
+ --lui-typography-scale-subheadline-font-weight: var(--lui-brand-typography-weight-subheadline);
226
+ --lui-typography-scale-subheadline-line-height: var(--lui-brand-typography-line-height-heading);
227
+ --lui-typography-scale-subheadline-letter-spacing: var(--lui-typography-tracking-default);
228
+ --lui-typography-scale-subheadline: var(--lui-typography-scale-subheadline-font-weight) var(--lui-typography-scale-subheadline-font-size)/var(--lui-typography-scale-subheadline-line-height) var(--lui-typography-scale-subheadline-font-family);
229
+ --lui-typography-scale-subtitle-font-family: var(--lui-brand-typography-font-family-heading);
230
+ --lui-typography-scale-subtitle-font-size: 16px;
231
+ --lui-typography-scale-subtitle-font-weight: var(--lui-brand-typography-weight-subtitle);
232
+ --lui-typography-scale-subtitle-line-height: var(--lui-brand-typography-line-height-heading);
233
+ --lui-typography-scale-subtitle-letter-spacing: var(--lui-typography-tracking-default);
234
+ --lui-typography-scale-subtitle: var(--lui-typography-scale-subtitle-font-weight) var(--lui-typography-scale-subtitle-font-size)/var(--lui-typography-scale-subtitle-line-height) var(--lui-typography-scale-subtitle-font-family);
235
+ --lui-typography-scale-title-font-family: var(--lui-brand-typography-font-family-heading);
236
+ --lui-typography-scale-title-font-size: 16px;
237
+ --lui-typography-scale-title-font-weight: var(--lui-brand-typography-weight-title);
238
+ --lui-typography-scale-title-line-height: var(--lui-brand-typography-line-height-heading);
239
+ --lui-typography-scale-title-letter-spacing: var(--lui-typography-tracking-default);
240
+ --lui-typography-scale-title: var(--lui-typography-scale-title-font-weight) var(--lui-typography-scale-title-font-size)/var(--lui-typography-scale-title-line-height) var(--lui-typography-scale-title-font-family);
241
+ --lui-typography-tracking-default: 0;
242
+ --lui-typography-tracking-tighter: -1px;
243
+ --lui-typography-tracking-tightest: -2px;
244
+ --lui-typography-tracking-wider: 1px;
245
+ --lui-typography-tracking-widest: 2px;
246
+ --lui-typography-weight-bold: 700;
247
+ --lui-typography-weight-light: 300;
248
+ --lui-typography-weight-medium: 500;
249
+ --lui-typography-weight-regular: 400;
250
+ --lui-typography-weight-semibold: 600;
251
+ }
252
+
253
+ @media (prefers-color-scheme: light) {
254
+ :root {
255
+ color-scheme: light;
256
+ --lui-brand-color-primary-1: color(srgb 0.929412 0.839216 1);
257
+ --lui-brand-color-primary-2: color(srgb 0.85098 0.678431 1);
258
+ --lui-brand-color-primary-3: color(srgb 0.756863 0.517647 1);
259
+ --lui-brand-color-primary-4: color(srgb 0.529412 0.2 1);
260
+ --lui-brand-color-primary-5: color(srgb 0.407843 0.145098 0.858824);
261
+ --lui-brand-color-primary-6: color(srgb 0.301961 0.098039 0.717647);
262
+ --lui-brand-color-primary-7: color(srgb 0.207843 0.062745 0.576471);
263
+ --lui-brand-color-primary-8: color(srgb 0.145098 0.035294 0.478431);
264
+ --lui-brand-color-secondary-1: color(srgb 0.945098 0.94902 0.964706);
265
+ --lui-brand-color-secondary-2: color(srgb 0.854902 0.862745 0.894118);
266
+ --lui-brand-color-secondary-3: color(srgb 0.74902 0.764706 0.811765);
267
+ --lui-brand-color-secondary-4: color(srgb 0.423529 0.439216 0.505882);
268
+ --lui-brand-color-secondary-5: color(srgb 0.333333 0.34902 0.411765);
269
+ --lui-brand-color-secondary-6: color(srgb 0.247059 0.262745 0.321569);
270
+ --lui-brand-color-secondary-7: color(srgb 0.168627 0.180392 0.231373);
271
+ --lui-brand-color-secondary-8: color(srgb 0.101961 0.109804 0.14902);
272
+ --lui-color-blue-1: color(srgb 0.921569 0.968627 1);
273
+ --lui-color-blue-2: color(srgb 0.701961 0.870588 0.992157);
274
+ --lui-color-blue-3: color(srgb 0.494118 0.772549 0.984314);
275
+ --lui-color-blue-4: color(srgb 0.2 0.607843 0.941176);
276
+ --lui-color-blue-5: color(srgb 0.109804 0.537255 0.894118);
277
+ --lui-color-blue-6: color(srgb 0.047059 0.439216 0.776471);
278
+ --lui-color-blue-7: color(srgb 0.011765 0.262745 0.482353);
279
+ --lui-color-blue-8: color(srgb 0 0.105882 0.2);
280
+ --lui-color-gray-1: color(srgb 1 1 1);
281
+ --lui-color-gray-2: color(srgb 0.933333 0.92549 0.945098);
282
+ --lui-color-gray-3: color(srgb 0.780392 0.792157 0.831373);
283
+ --lui-color-gray-4: color(srgb 0.423529 0.439216 0.505882);
284
+ --lui-color-gray-5: color(srgb 0.329412 0.345098 0.403922);
285
+ --lui-color-gray-6: color(srgb 0.239216 0.254902 0.301961);
286
+ --lui-color-gray-7: color(srgb 0.156863 0.168627 0.2);
287
+ --lui-color-gray-8: color(srgb 0.07451 0.082353 0.098039);
288
+ --lui-color-green-1: color(srgb 0.901961 1 0.917647);
289
+ --lui-color-green-2: color(srgb 0.662745 0.937255 0.709804);
290
+ --lui-color-green-3: color(srgb 0.462745 0.87451 0.529412);
291
+ --lui-color-green-4: color(srgb 0.176471 0.662745 0.262745);
292
+ --lui-color-green-5: color(srgb 0.098039 0.509804 0.172549);
293
+ --lui-color-green-6: color(srgb 0.047059 0.360784 0.105882);
294
+ --lui-color-green-7: color(srgb 0.019608 0.211765 0.058824);
295
+ --lui-color-green-8: color(srgb 0.003922 0.058824 0.015686);
296
+ --lui-color-orange-1: color(srgb 1 0.772549 0.678431);
297
+ --lui-color-orange-2: color(srgb 1 0.670588 0.490196);
298
+ --lui-color-orange-3: color(srgb 1 0.603922 0.313725);
299
+ --lui-color-orange-4: color(srgb 0.862745 0.45098 0.05098);
300
+ --lui-color-orange-5: color(srgb 0.729412 0.360784 0);
301
+ --lui-color-orange-6: color(srgb 0.592157 0.290196 0);
302
+ --lui-color-orange-7: color(srgb 0.454902 0.219608 0);
303
+ --lui-color-orange-8: color(srgb 0.321569 0.14902 0);
304
+ --lui-color-red-1: color(srgb 1 0.858824 0.858824);
305
+ --lui-color-red-2: color(srgb 0.992157 0.662745 0.662745);
306
+ --lui-color-red-3: color(srgb 0.988235 0.47451 0.47451);
307
+ --lui-color-red-4: color(srgb 0.831373 0.2 0.196078);
308
+ --lui-color-red-5: color(srgb 0.682353 0.12549 0.117647);
309
+ --lui-color-red-6: color(srgb 0.537255 0.078431 0.070588);
310
+ --lui-color-red-7: color(srgb 0.388235 0.05098 0.043137);
311
+ --lui-color-red-8: color(srgb 0.239216 0.031373 0.023529);
312
+ --lui-color-violet-1: color(srgb 0.929412 0.839216 1);
313
+ --lui-color-violet-2: color(srgb 0.85098 0.678431 1);
314
+ --lui-color-violet-3: color(srgb 0.756863 0.517647 1);
315
+ --lui-color-violet-4: color(srgb 0.529412 0.2 1);
316
+ --lui-color-violet-5: color(srgb 0.407843 0.145098 0.858824);
317
+ --lui-color-violet-6: color(srgb 0.301961 0.098039 0.717647);
318
+ --lui-color-violet-7: color(srgb 0.207843 0.062745 0.576471);
319
+ --lui-color-violet-8: color(srgb 0.145098 0.035294 0.478431);
320
+ --lui-color-primary-background-surface: var(--lui-brand-color-primary-1);
321
+ --lui-color-link-default: var(--lui-brand-color-primary-5);
322
+ --lui-color-primary-background-container: var(--lui-brand-color-primary-5);
323
+ --lui-color-primary-border-stroke: var(--lui-brand-color-primary-5);
324
+ --lui-color-primary-icon-default: var(--lui-brand-color-primary-5);
325
+ --lui-color-link-visited: var(--lui-brand-color-primary-7);
326
+ --lui-color-secondary-background-surface: var(--lui-brand-color-secondary-1);
327
+ --lui-color-secondary-background-container: var(--lui-brand-color-secondary-5);
328
+ --lui-color-secondary-border-stroke: var(--lui-brand-color-secondary-5);
329
+ --lui-color-secondary-icon-default: var(--lui-brand-color-secondary-5);
330
+ --lui-color-info-background-surface: var(--lui-color-blue-1);
331
+ --lui-color-info-background-container: var(--lui-color-blue-5);
332
+ --lui-color-info-border-stroke: var(--lui-color-blue-5);
333
+ --lui-color-info-icon-default: var(--lui-color-blue-5);
334
+ --lui-color-neutral-background-surface: var(--lui-color-gray-1);
335
+ --lui-color-neutral-icon-inverse: var(--lui-color-gray-1);
336
+ --lui-color-neutral-text-inverse: var(--lui-color-gray-1);
337
+ --lui-color-neutral-border-divisor: var(--lui-color-gray-2);
338
+ --lui-color-neutral-background-container: var(--lui-color-gray-3);
339
+ --lui-color-neutral-border-stroke: var(--lui-color-gray-5);
340
+ --lui-color-neutral-text-body: var(--lui-color-gray-7);
341
+ --lui-color-neutral-background-overlay: var(--lui-color-gray-8);
342
+ --lui-color-neutral-icon-default: var(--lui-color-gray-8);
343
+ --lui-color-neutral-text-heading: var(--lui-color-gray-8);
344
+ --lui-color-success-background-surface: var(--lui-color-green-1);
345
+ --lui-color-success-background-container: var(--lui-color-green-5);
346
+ --lui-color-success-border-stroke: var(--lui-color-green-5);
347
+ --lui-color-success-icon-default: var(--lui-color-green-5);
348
+ --lui-color-caution-background-surface: var(--lui-color-orange-1);
349
+ --lui-color-caution-background-container: var(--lui-color-orange-5);
350
+ --lui-color-caution-border-stroke: var(--lui-color-orange-5);
351
+ --lui-color-caution-icon-default: var(--lui-color-orange-5);
352
+ --lui-color-danger-background-surface: var(--lui-color-red-1);
353
+ --lui-color-danger-background-container: var(--lui-color-red-5);
354
+ --lui-color-danger-border-stroke: var(--lui-color-red-5);
355
+ --lui-color-danger-icon-default: var(--lui-color-red-5);
356
+ --lui-color-danger-text-error: var(--lui-color-red-5);
357
+ }
358
+ }
359
+ [data-theme=light] {
360
+ color-scheme: light;
361
+ --lui-brand-color-primary-1: color(srgb 0.929412 0.839216 1);
362
+ --lui-brand-color-primary-2: color(srgb 0.85098 0.678431 1);
363
+ --lui-brand-color-primary-3: color(srgb 0.756863 0.517647 1);
364
+ --lui-brand-color-primary-4: color(srgb 0.529412 0.2 1);
365
+ --lui-brand-color-primary-5: color(srgb 0.407843 0.145098 0.858824);
366
+ --lui-brand-color-primary-6: color(srgb 0.301961 0.098039 0.717647);
367
+ --lui-brand-color-primary-7: color(srgb 0.207843 0.062745 0.576471);
368
+ --lui-brand-color-primary-8: color(srgb 0.145098 0.035294 0.478431);
369
+ --lui-brand-color-secondary-1: color(srgb 0.945098 0.94902 0.964706);
370
+ --lui-brand-color-secondary-2: color(srgb 0.854902 0.862745 0.894118);
371
+ --lui-brand-color-secondary-3: color(srgb 0.74902 0.764706 0.811765);
372
+ --lui-brand-color-secondary-4: color(srgb 0.423529 0.439216 0.505882);
373
+ --lui-brand-color-secondary-5: color(srgb 0.333333 0.34902 0.411765);
374
+ --lui-brand-color-secondary-6: color(srgb 0.247059 0.262745 0.321569);
375
+ --lui-brand-color-secondary-7: color(srgb 0.168627 0.180392 0.231373);
376
+ --lui-brand-color-secondary-8: color(srgb 0.101961 0.109804 0.14902);
377
+ --lui-color-blue-1: color(srgb 0.921569 0.968627 1);
378
+ --lui-color-blue-2: color(srgb 0.701961 0.870588 0.992157);
379
+ --lui-color-blue-3: color(srgb 0.494118 0.772549 0.984314);
380
+ --lui-color-blue-4: color(srgb 0.2 0.607843 0.941176);
381
+ --lui-color-blue-5: color(srgb 0.109804 0.537255 0.894118);
382
+ --lui-color-blue-6: color(srgb 0.047059 0.439216 0.776471);
383
+ --lui-color-blue-7: color(srgb 0.011765 0.262745 0.482353);
384
+ --lui-color-blue-8: color(srgb 0 0.105882 0.2);
385
+ --lui-color-gray-1: color(srgb 1 1 1);
386
+ --lui-color-gray-2: color(srgb 0.933333 0.92549 0.945098);
387
+ --lui-color-gray-3: color(srgb 0.780392 0.792157 0.831373);
388
+ --lui-color-gray-4: color(srgb 0.423529 0.439216 0.505882);
389
+ --lui-color-gray-5: color(srgb 0.329412 0.345098 0.403922);
390
+ --lui-color-gray-6: color(srgb 0.239216 0.254902 0.301961);
391
+ --lui-color-gray-7: color(srgb 0.156863 0.168627 0.2);
392
+ --lui-color-gray-8: color(srgb 0.07451 0.082353 0.098039);
393
+ --lui-color-green-1: color(srgb 0.901961 1 0.917647);
394
+ --lui-color-green-2: color(srgb 0.662745 0.937255 0.709804);
395
+ --lui-color-green-3: color(srgb 0.462745 0.87451 0.529412);
396
+ --lui-color-green-4: color(srgb 0.176471 0.662745 0.262745);
397
+ --lui-color-green-5: color(srgb 0.098039 0.509804 0.172549);
398
+ --lui-color-green-6: color(srgb 0.047059 0.360784 0.105882);
399
+ --lui-color-green-7: color(srgb 0.019608 0.211765 0.058824);
400
+ --lui-color-green-8: color(srgb 0.003922 0.058824 0.015686);
401
+ --lui-color-orange-1: color(srgb 1 0.772549 0.678431);
402
+ --lui-color-orange-2: color(srgb 1 0.670588 0.490196);
403
+ --lui-color-orange-3: color(srgb 1 0.603922 0.313725);
404
+ --lui-color-orange-4: color(srgb 0.862745 0.45098 0.05098);
405
+ --lui-color-orange-5: color(srgb 0.729412 0.360784 0);
406
+ --lui-color-orange-6: color(srgb 0.592157 0.290196 0);
407
+ --lui-color-orange-7: color(srgb 0.454902 0.219608 0);
408
+ --lui-color-orange-8: color(srgb 0.321569 0.14902 0);
409
+ --lui-color-red-1: color(srgb 1 0.858824 0.858824);
410
+ --lui-color-red-2: color(srgb 0.992157 0.662745 0.662745);
411
+ --lui-color-red-3: color(srgb 0.988235 0.47451 0.47451);
412
+ --lui-color-red-4: color(srgb 0.831373 0.2 0.196078);
413
+ --lui-color-red-5: color(srgb 0.682353 0.12549 0.117647);
414
+ --lui-color-red-6: color(srgb 0.537255 0.078431 0.070588);
415
+ --lui-color-red-7: color(srgb 0.388235 0.05098 0.043137);
416
+ --lui-color-red-8: color(srgb 0.239216 0.031373 0.023529);
417
+ --lui-color-violet-1: color(srgb 0.929412 0.839216 1);
418
+ --lui-color-violet-2: color(srgb 0.85098 0.678431 1);
419
+ --lui-color-violet-3: color(srgb 0.756863 0.517647 1);
420
+ --lui-color-violet-4: color(srgb 0.529412 0.2 1);
421
+ --lui-color-violet-5: color(srgb 0.407843 0.145098 0.858824);
422
+ --lui-color-violet-6: color(srgb 0.301961 0.098039 0.717647);
423
+ --lui-color-violet-7: color(srgb 0.207843 0.062745 0.576471);
424
+ --lui-color-violet-8: color(srgb 0.145098 0.035294 0.478431);
425
+ --lui-color-primary-background-surface: var(--lui-brand-color-primary-1);
426
+ --lui-color-link-default: var(--lui-brand-color-primary-5);
427
+ --lui-color-primary-background-container: var(--lui-brand-color-primary-5);
428
+ --lui-color-primary-border-stroke: var(--lui-brand-color-primary-5);
429
+ --lui-color-primary-icon-default: var(--lui-brand-color-primary-5);
430
+ --lui-color-link-visited: var(--lui-brand-color-primary-7);
431
+ --lui-color-secondary-background-surface: var(--lui-brand-color-secondary-1);
432
+ --lui-color-secondary-background-container: var(--lui-brand-color-secondary-5);
433
+ --lui-color-secondary-border-stroke: var(--lui-brand-color-secondary-5);
434
+ --lui-color-secondary-icon-default: var(--lui-brand-color-secondary-5);
435
+ --lui-color-info-background-surface: var(--lui-color-blue-1);
436
+ --lui-color-info-background-container: var(--lui-color-blue-5);
437
+ --lui-color-info-border-stroke: var(--lui-color-blue-5);
438
+ --lui-color-info-icon-default: var(--lui-color-blue-5);
439
+ --lui-color-neutral-background-surface: var(--lui-color-gray-1);
440
+ --lui-color-neutral-icon-inverse: var(--lui-color-gray-1);
441
+ --lui-color-neutral-text-inverse: var(--lui-color-gray-1);
442
+ --lui-color-neutral-border-divisor: var(--lui-color-gray-2);
443
+ --lui-color-neutral-background-container: var(--lui-color-gray-3);
444
+ --lui-color-neutral-border-stroke: var(--lui-color-gray-5);
445
+ --lui-color-neutral-text-body: var(--lui-color-gray-7);
446
+ --lui-color-neutral-background-overlay: var(--lui-color-gray-8);
447
+ --lui-color-neutral-icon-default: var(--lui-color-gray-8);
448
+ --lui-color-neutral-text-heading: var(--lui-color-gray-8);
449
+ --lui-color-success-background-surface: var(--lui-color-green-1);
450
+ --lui-color-success-background-container: var(--lui-color-green-5);
451
+ --lui-color-success-border-stroke: var(--lui-color-green-5);
452
+ --lui-color-success-icon-default: var(--lui-color-green-5);
453
+ --lui-color-caution-background-surface: var(--lui-color-orange-1);
454
+ --lui-color-caution-background-container: var(--lui-color-orange-5);
455
+ --lui-color-caution-border-stroke: var(--lui-color-orange-5);
456
+ --lui-color-caution-icon-default: var(--lui-color-orange-5);
457
+ --lui-color-danger-background-surface: var(--lui-color-red-1);
458
+ --lui-color-danger-background-container: var(--lui-color-red-5);
459
+ --lui-color-danger-border-stroke: var(--lui-color-red-5);
460
+ --lui-color-danger-icon-default: var(--lui-color-red-5);
461
+ --lui-color-danger-text-error: var(--lui-color-red-5);
462
+ }
463
+
464
+ @media (prefers-color-scheme: dark) {
465
+ :root {
466
+ color-scheme: dark;
467
+ --lui-brand-color-primary-1: color(srgb 0.145098 0.035294 0.478431);
468
+ --lui-brand-color-primary-2: color(srgb 0.207843 0.062745 0.576471);
469
+ --lui-brand-color-primary-3: color(srgb 0.301961 0.098039 0.717647);
470
+ --lui-brand-color-primary-4: color(srgb 0.529412 0.2 1);
471
+ --lui-brand-color-primary-5: color(srgb 0.670588 0.4 1);
472
+ --lui-brand-color-primary-6: color(srgb 0.756863 0.517647 1);
473
+ --lui-brand-color-primary-7: color(srgb 0.85098 0.678431 1);
474
+ --lui-brand-color-primary-8: color(srgb 0.929412 0.839216 1);
475
+ --lui-brand-color-secondary-1: color(srgb 0.101961 0.109804 0.14902);
476
+ --lui-brand-color-secondary-2: color(srgb 0.168627 0.180392 0.231373);
477
+ --lui-brand-color-secondary-3: color(srgb 0.247059 0.262745 0.321569);
478
+ --lui-brand-color-secondary-4: color(srgb 0.423529 0.439216 0.505882);
479
+ --lui-brand-color-secondary-5: color(srgb 0.619608 0.639216 0.701961);
480
+ --lui-brand-color-secondary-6: color(srgb 0.74902 0.764706 0.811765);
481
+ --lui-brand-color-secondary-7: color(srgb 0.854902 0.862745 0.894118);
482
+ --lui-brand-color-secondary-8: color(srgb 0.945098 0.94902 0.964706);
483
+ --lui-color-blue-1: color(srgb 0 0.105882 0.2);
484
+ --lui-color-blue-2: color(srgb 0.031373 0.329412 0.584314);
485
+ --lui-color-blue-3: color(srgb 0.090196 0.478431 0.807843);
486
+ --lui-color-blue-4: color(srgb 0.215686 0.607843 0.92549);
487
+ --lui-color-blue-5: color(srgb 0.309804 0.666667 0.952941);
488
+ --lui-color-blue-6: color(srgb 0.533333 0.784314 0.972549);
489
+ --lui-color-blue-7: color(srgb 0.741176 0.886275 0.988235);
490
+ --lui-color-blue-8: color(srgb 0.921569 0.968627 1);
491
+ --lui-color-gray-1: color(srgb 0.07451 0.082353 0.101961);
492
+ --lui-color-gray-2: color(srgb 0.164706 0.176471 0.211765);
493
+ --lui-color-gray-3: color(srgb 0.254902 0.27451 0.32549);
494
+ --lui-color-gray-4: color(srgb 0.447059 0.478431 0.54902);
495
+ --lui-color-gray-5: color(srgb 0.556863 0.588235 0.662745);
496
+ --lui-color-gray-6: color(srgb 0.690196 0.717647 0.776471);
497
+ --lui-color-gray-7: color(srgb 0.835294 0.85098 0.886275);
498
+ --lui-color-gray-8: color(srgb 0.980392 0.988235 1);
499
+ --lui-color-green-1: color(srgb 0.003922 0.058824 0.015686);
500
+ --lui-color-green-2: color(srgb 0.023529 0.176471 0.054902);
501
+ --lui-color-green-3: color(srgb 0.05098 0.294118 0.101961);
502
+ --lui-color-green-4: color(srgb 0.152941 0.529412 0.223529);
503
+ --lui-color-green-5: color(srgb 0.239216 0.647059 0.317647);
504
+ --lui-color-green-6: color(srgb 0.435294 0.764706 0.494118);
505
+ --lui-color-green-7: color(srgb 0.662745 0.882353 0.698039);
506
+ --lui-color-green-8: color(srgb 0.901961 1 0.917647);
507
+ --lui-color-orange-1: color(srgb 0.321569 0.14902 0);
508
+ --lui-color-orange-2: color(srgb 0.403922 0.184314 0);
509
+ --lui-color-orange-3: color(srgb 0.490196 0.219608 0);
510
+ --lui-color-orange-4: color(srgb 0.658824 0.309804 0.054902);
511
+ --lui-color-orange-5: color(srgb 0.745098 0.372549 0.121569);
512
+ --lui-color-orange-6: color(srgb 0.831373 0.486275 0.294118);
513
+ --lui-color-orange-7: color(srgb 0.913725 0.623529 0.486275);
514
+ --lui-color-orange-8: color(srgb 1 0.772549 0.678431);
515
+ --lui-color-red-1: color(srgb 0.239216 0.031373 0.023529);
516
+ --lui-color-red-2: color(srgb 0.333333 0.058824 0.047059);
517
+ --lui-color-red-3: color(srgb 0.431373 0.094118 0.082353);
518
+ --lui-color-red-4: color(srgb 0.619608 0.192157 0.180392);
519
+ --lui-color-red-5: color(srgb 0.713725 0.27451 0.262745);
520
+ --lui-color-red-6: color(srgb 0.811765 0.45098 0.447059);
521
+ --lui-color-red-7: color(srgb 0.905882 0.654902 0.65098);
522
+ --lui-color-red-8: color(srgb 1 0.858824 0.858824);
523
+ --lui-color-violet-1: color(srgb 0.145098 0.035294 0.478431);
524
+ --lui-color-violet-2: color(srgb 0.207843 0.062745 0.576471);
525
+ --lui-color-violet-3: color(srgb 0.301961 0.098039 0.717647);
526
+ --lui-color-violet-4: color(srgb 0.615686 0.341176 1);
527
+ --lui-color-violet-5: color(srgb 0.721569 0.4 1);
528
+ --lui-color-violet-6: color(srgb 0.756863 0.517647 1);
529
+ --lui-color-violet-7: color(srgb 0.85098 0.678431 1);
530
+ --lui-color-violet-8: color(srgb 0.929412 0.839216 1);
531
+ --lui-color-primary-background-surface: var(--lui-brand-color-primary-1);
532
+ --lui-color-link-default: var(--lui-brand-color-primary-5);
533
+ --lui-color-primary-background-container: var(--lui-brand-color-primary-5);
534
+ --lui-color-primary-border-stroke: var(--lui-brand-color-primary-5);
535
+ --lui-color-primary-icon-default: var(--lui-brand-color-primary-5);
536
+ --lui-color-link-visited: var(--lui-brand-color-primary-7);
537
+ --lui-color-secondary-background-surface: var(--lui-brand-color-secondary-1);
538
+ --lui-color-secondary-background-container: var(--lui-brand-color-secondary-5);
539
+ --lui-color-secondary-border-stroke: var(--lui-brand-color-secondary-5);
540
+ --lui-color-secondary-icon-default: var(--lui-brand-color-secondary-5);
541
+ --lui-color-info-background-surface: var(--lui-color-blue-1);
542
+ --lui-color-info-background-container: var(--lui-color-blue-5);
543
+ --lui-color-info-border-stroke: var(--lui-color-blue-5);
544
+ --lui-color-info-icon-default: var(--lui-color-blue-5);
545
+ --lui-color-neutral-background-surface: var(--lui-color-gray-1);
546
+ --lui-color-neutral-icon-inverse: var(--lui-color-gray-1);
547
+ --lui-color-neutral-text-inverse: var(--lui-color-gray-1);
548
+ --lui-color-neutral-border-divisor: var(--lui-color-gray-2);
549
+ --lui-color-neutral-background-container: var(--lui-color-gray-3);
550
+ --lui-color-neutral-border-stroke: var(--lui-color-gray-5);
551
+ --lui-color-neutral-text-body: var(--lui-color-gray-7);
552
+ --lui-color-neutral-background-overlay: var(--lui-color-gray-8);
553
+ --lui-color-neutral-icon-default: var(--lui-color-gray-8);
554
+ --lui-color-neutral-text-heading: var(--lui-color-gray-8);
555
+ --lui-color-success-background-surface: var(--lui-color-green-1);
556
+ --lui-color-success-background-container: var(--lui-color-green-5);
557
+ --lui-color-success-border-stroke: var(--lui-color-green-5);
558
+ --lui-color-success-icon-default: var(--lui-color-green-5);
559
+ --lui-color-caution-background-surface: var(--lui-color-orange-1);
560
+ --lui-color-caution-background-container: var(--lui-color-orange-5);
561
+ --lui-color-caution-border-stroke: var(--lui-color-orange-5);
562
+ --lui-color-caution-icon-default: var(--lui-color-orange-5);
563
+ --lui-color-danger-background-surface: var(--lui-color-red-1);
564
+ --lui-color-danger-background-container: var(--lui-color-red-5);
565
+ --lui-color-danger-border-stroke: var(--lui-color-red-5);
566
+ --lui-color-danger-icon-default: var(--lui-color-red-5);
567
+ --lui-color-danger-text-error: var(--lui-color-red-5);
568
+ }
569
+ }
570
+ [data-theme=dark] {
571
+ color-scheme: dark;
572
+ --lui-brand-color-primary-1: color(srgb 0.145098 0.035294 0.478431);
573
+ --lui-brand-color-primary-2: color(srgb 0.207843 0.062745 0.576471);
574
+ --lui-brand-color-primary-3: color(srgb 0.301961 0.098039 0.717647);
575
+ --lui-brand-color-primary-4: color(srgb 0.529412 0.2 1);
576
+ --lui-brand-color-primary-5: color(srgb 0.670588 0.4 1);
577
+ --lui-brand-color-primary-6: color(srgb 0.756863 0.517647 1);
578
+ --lui-brand-color-primary-7: color(srgb 0.85098 0.678431 1);
579
+ --lui-brand-color-primary-8: color(srgb 0.929412 0.839216 1);
580
+ --lui-brand-color-secondary-1: color(srgb 0.101961 0.109804 0.14902);
581
+ --lui-brand-color-secondary-2: color(srgb 0.168627 0.180392 0.231373);
582
+ --lui-brand-color-secondary-3: color(srgb 0.247059 0.262745 0.321569);
583
+ --lui-brand-color-secondary-4: color(srgb 0.423529 0.439216 0.505882);
584
+ --lui-brand-color-secondary-5: color(srgb 0.619608 0.639216 0.701961);
585
+ --lui-brand-color-secondary-6: color(srgb 0.74902 0.764706 0.811765);
586
+ --lui-brand-color-secondary-7: color(srgb 0.854902 0.862745 0.894118);
587
+ --lui-brand-color-secondary-8: color(srgb 0.945098 0.94902 0.964706);
588
+ --lui-color-blue-1: color(srgb 0 0.105882 0.2);
589
+ --lui-color-blue-2: color(srgb 0.031373 0.329412 0.584314);
590
+ --lui-color-blue-3: color(srgb 0.090196 0.478431 0.807843);
591
+ --lui-color-blue-4: color(srgb 0.215686 0.607843 0.92549);
592
+ --lui-color-blue-5: color(srgb 0.309804 0.666667 0.952941);
593
+ --lui-color-blue-6: color(srgb 0.533333 0.784314 0.972549);
594
+ --lui-color-blue-7: color(srgb 0.741176 0.886275 0.988235);
595
+ --lui-color-blue-8: color(srgb 0.921569 0.968627 1);
596
+ --lui-color-gray-1: color(srgb 0.07451 0.082353 0.101961);
597
+ --lui-color-gray-2: color(srgb 0.164706 0.176471 0.211765);
598
+ --lui-color-gray-3: color(srgb 0.254902 0.27451 0.32549);
599
+ --lui-color-gray-4: color(srgb 0.447059 0.478431 0.54902);
600
+ --lui-color-gray-5: color(srgb 0.556863 0.588235 0.662745);
601
+ --lui-color-gray-6: color(srgb 0.690196 0.717647 0.776471);
602
+ --lui-color-gray-7: color(srgb 0.835294 0.85098 0.886275);
603
+ --lui-color-gray-8: color(srgb 0.980392 0.988235 1);
604
+ --lui-color-green-1: color(srgb 0.003922 0.058824 0.015686);
605
+ --lui-color-green-2: color(srgb 0.023529 0.176471 0.054902);
606
+ --lui-color-green-3: color(srgb 0.05098 0.294118 0.101961);
607
+ --lui-color-green-4: color(srgb 0.152941 0.529412 0.223529);
608
+ --lui-color-green-5: color(srgb 0.239216 0.647059 0.317647);
609
+ --lui-color-green-6: color(srgb 0.435294 0.764706 0.494118);
610
+ --lui-color-green-7: color(srgb 0.662745 0.882353 0.698039);
611
+ --lui-color-green-8: color(srgb 0.901961 1 0.917647);
612
+ --lui-color-orange-1: color(srgb 0.321569 0.14902 0);
613
+ --lui-color-orange-2: color(srgb 0.403922 0.184314 0);
614
+ --lui-color-orange-3: color(srgb 0.490196 0.219608 0);
615
+ --lui-color-orange-4: color(srgb 0.658824 0.309804 0.054902);
616
+ --lui-color-orange-5: color(srgb 0.745098 0.372549 0.121569);
617
+ --lui-color-orange-6: color(srgb 0.831373 0.486275 0.294118);
618
+ --lui-color-orange-7: color(srgb 0.913725 0.623529 0.486275);
619
+ --lui-color-orange-8: color(srgb 1 0.772549 0.678431);
620
+ --lui-color-red-1: color(srgb 0.239216 0.031373 0.023529);
621
+ --lui-color-red-2: color(srgb 0.333333 0.058824 0.047059);
622
+ --lui-color-red-3: color(srgb 0.431373 0.094118 0.082353);
623
+ --lui-color-red-4: color(srgb 0.619608 0.192157 0.180392);
624
+ --lui-color-red-5: color(srgb 0.713725 0.27451 0.262745);
625
+ --lui-color-red-6: color(srgb 0.811765 0.45098 0.447059);
626
+ --lui-color-red-7: color(srgb 0.905882 0.654902 0.65098);
627
+ --lui-color-red-8: color(srgb 1 0.858824 0.858824);
628
+ --lui-color-violet-1: color(srgb 0.145098 0.035294 0.478431);
629
+ --lui-color-violet-2: color(srgb 0.207843 0.062745 0.576471);
630
+ --lui-color-violet-3: color(srgb 0.301961 0.098039 0.717647);
631
+ --lui-color-violet-4: color(srgb 0.615686 0.341176 1);
632
+ --lui-color-violet-5: color(srgb 0.721569 0.4 1);
633
+ --lui-color-violet-6: color(srgb 0.756863 0.517647 1);
634
+ --lui-color-violet-7: color(srgb 0.85098 0.678431 1);
635
+ --lui-color-violet-8: color(srgb 0.929412 0.839216 1);
636
+ --lui-color-primary-background-surface: var(--lui-brand-color-primary-1);
637
+ --lui-color-link-default: var(--lui-brand-color-primary-5);
638
+ --lui-color-primary-background-container: var(--lui-brand-color-primary-5);
639
+ --lui-color-primary-border-stroke: var(--lui-brand-color-primary-5);
640
+ --lui-color-primary-icon-default: var(--lui-brand-color-primary-5);
641
+ --lui-color-link-visited: var(--lui-brand-color-primary-7);
642
+ --lui-color-secondary-background-surface: var(--lui-brand-color-secondary-1);
643
+ --lui-color-secondary-background-container: var(--lui-brand-color-secondary-5);
644
+ --lui-color-secondary-border-stroke: var(--lui-brand-color-secondary-5);
645
+ --lui-color-secondary-icon-default: var(--lui-brand-color-secondary-5);
646
+ --lui-color-info-background-surface: var(--lui-color-blue-1);
647
+ --lui-color-info-background-container: var(--lui-color-blue-5);
648
+ --lui-color-info-border-stroke: var(--lui-color-blue-5);
649
+ --lui-color-info-icon-default: var(--lui-color-blue-5);
650
+ --lui-color-neutral-background-surface: var(--lui-color-gray-1);
651
+ --lui-color-neutral-icon-inverse: var(--lui-color-gray-1);
652
+ --lui-color-neutral-text-inverse: var(--lui-color-gray-1);
653
+ --lui-color-neutral-border-divisor: var(--lui-color-gray-2);
654
+ --lui-color-neutral-background-container: var(--lui-color-gray-3);
655
+ --lui-color-neutral-border-stroke: var(--lui-color-gray-5);
656
+ --lui-color-neutral-text-body: var(--lui-color-gray-7);
657
+ --lui-color-neutral-background-overlay: var(--lui-color-gray-8);
658
+ --lui-color-neutral-icon-default: var(--lui-color-gray-8);
659
+ --lui-color-neutral-text-heading: var(--lui-color-gray-8);
660
+ --lui-color-success-background-surface: var(--lui-color-green-1);
661
+ --lui-color-success-background-container: var(--lui-color-green-5);
662
+ --lui-color-success-border-stroke: var(--lui-color-green-5);
663
+ --lui-color-success-icon-default: var(--lui-color-green-5);
664
+ --lui-color-caution-background-surface: var(--lui-color-orange-1);
665
+ --lui-color-caution-background-container: var(--lui-color-orange-5);
666
+ --lui-color-caution-border-stroke: var(--lui-color-orange-5);
667
+ --lui-color-caution-icon-default: var(--lui-color-orange-5);
668
+ --lui-color-danger-background-surface: var(--lui-color-red-1);
669
+ --lui-color-danger-background-container: var(--lui-color-red-5);
670
+ --lui-color-danger-border-stroke: var(--lui-color-red-5);
671
+ --lui-color-danger-icon-default: var(--lui-color-red-5);
672
+ --lui-color-danger-text-error: var(--lui-color-red-5);
673
+ }
674
+
675
+ .radius-xs {
676
+ border-radius: var(--lui-border-radius-xs);
677
+ }
678
+ .radius-sm {
679
+ border-radius: var(--lui-border-radius-sm);
680
+ }
681
+ .radius-md {
682
+ border-radius: var(--lui-border-radius-md);
683
+ }
684
+ .radius-lg {
685
+ border-radius: var(--lui-border-radius-lg);
686
+ }
687
+ .radius-circle {
688
+ border-radius: var(--lui-border-radius-circle);
689
+ }
690
+ .radius-none {
691
+ border-radius: var(--lui-border-radius-none);
692
+ }
693
+
694
+ .border-0 {
695
+ border-width: var(--lui-border-width-0);
696
+ }
697
+ .border-1 {
698
+ border-width: var(--lui-border-width-1);
699
+ }
700
+ .border-2 {
701
+ border-width: var(--lui-border-width-2);
702
+ }
703
+
704
+ body {
705
+ background-color: var(--lui-color-neutral-background-surface);
706
+ color: var(--lui-color-neutral-text-body);
707
+ }
708
+
709
+ .primary-1 {
710
+ color: var(--lui-brand-color-primary-1);
711
+ }
712
+
713
+ .primary-2 {
714
+ color: var(--lui-brand-color-primary-2);
715
+ }
716
+
717
+ .primary-3 {
718
+ color: var(--lui-brand-color-primary-3);
719
+ }
720
+
721
+ .primary-4 {
722
+ color: var(--lui-brand-color-primary-4);
723
+ }
724
+
725
+ .primary-5 {
726
+ color: var(--lui-brand-color-primary-5);
727
+ }
728
+
729
+ .primary-6 {
730
+ color: var(--lui-brand-color-primary-6);
731
+ }
732
+
733
+ .primary-7 {
734
+ color: var(--lui-brand-color-primary-7);
735
+ }
736
+
737
+ .primary-8 {
738
+ color: var(--lui-brand-color-primary-8);
739
+ }
740
+
741
+ .secondary-1 {
742
+ color: var(--lui-brand-color-secondary-1);
743
+ }
744
+
745
+ .secondary-2 {
746
+ color: var(--lui-brand-color-secondary-2);
747
+ }
748
+
749
+ .secondary-3 {
750
+ color: var(--lui-brand-color-secondary-3);
751
+ }
752
+
753
+ .secondary-4 {
754
+ color: var(--lui-brand-color-secondary-4);
755
+ }
756
+
757
+ .secondary-5 {
758
+ color: var(--lui-brand-color-secondary-5);
759
+ }
760
+
761
+ .secondary-6 {
762
+ color: var(--lui-brand-color-secondary-6);
763
+ }
764
+
765
+ .secondary-7 {
766
+ color: var(--lui-brand-color-secondary-7);
767
+ }
768
+
769
+ .secondary-8 {
770
+ color: var(--lui-brand-color-secondary-8);
771
+ }
772
+
773
+ .blue-1 {
774
+ color: var(--lui-color-blue-1);
775
+ }
776
+
777
+ .blue-2 {
778
+ color: var(--lui-color-blue-2);
779
+ }
780
+
781
+ .blue-3 {
782
+ color: var(--lui-color-blue-3);
783
+ }
784
+
785
+ .blue-4 {
786
+ color: var(--lui-color-blue-4);
787
+ }
788
+
789
+ .blue-5 {
790
+ color: var(--lui-color-blue-5);
791
+ }
792
+
793
+ .blue-6 {
794
+ color: var(--lui-color-blue-6);
795
+ }
796
+
797
+ .blue-7 {
798
+ color: var(--lui-color-blue-7);
799
+ }
800
+
801
+ .blue-8 {
802
+ color: var(--lui-color-blue-8);
803
+ }
804
+
805
+ .gray-1 {
806
+ color: var(--lui-color-gray-1);
807
+ }
808
+
809
+ .gray-2 {
810
+ color: var(--lui-color-gray-2);
811
+ }
812
+
813
+ .gray-3 {
814
+ color: var(--lui-color-gray-3);
815
+ }
816
+
817
+ .gray-4 {
818
+ color: var(--lui-color-gray-4);
819
+ }
820
+
821
+ .gray-5 {
822
+ color: var(--lui-color-gray-5);
823
+ }
824
+
825
+ .gray-6 {
826
+ color: var(--lui-color-gray-6);
827
+ }
828
+
829
+ .gray-7 {
830
+ color: var(--lui-color-gray-7);
831
+ }
832
+
833
+ .gray-8 {
834
+ color: var(--lui-color-gray-8);
835
+ }
836
+
837
+ .green-1 {
838
+ color: var(--lui-color-green-1);
839
+ }
840
+
841
+ .green-2 {
842
+ color: var(--lui-color-green-2);
843
+ }
844
+
845
+ .green-3 {
846
+ color: var(--lui-color-green-3);
847
+ }
848
+
849
+ .green-4 {
850
+ color: var(--lui-color-green-4);
851
+ }
852
+
853
+ .green-5 {
854
+ color: var(--lui-color-green-5);
855
+ }
856
+
857
+ .green-6 {
858
+ color: var(--lui-color-green-6);
859
+ }
860
+
861
+ .green-7 {
862
+ color: var(--lui-color-green-7);
863
+ }
864
+
865
+ .green-8 {
866
+ color: var(--lui-color-green-8);
867
+ }
868
+
869
+ .orange-1 {
870
+ color: var(--lui-color-orange-1);
871
+ }
872
+
873
+ .orange-2 {
874
+ color: var(--lui-color-orange-2);
875
+ }
876
+
877
+ .orange-3 {
878
+ color: var(--lui-color-orange-3);
879
+ }
880
+
881
+ .orange-4 {
882
+ color: var(--lui-color-orange-4);
883
+ }
884
+
885
+ .orange-5 {
886
+ color: var(--lui-color-orange-5);
887
+ }
888
+
889
+ .orange-6 {
890
+ color: var(--lui-color-orange-6);
891
+ }
892
+
893
+ .orange-7 {
894
+ color: var(--lui-color-orange-7);
895
+ }
896
+
897
+ .orange-8 {
898
+ color: var(--lui-color-orange-8);
899
+ }
900
+
901
+ .red-1 {
902
+ color: var(--lui-color-red-1);
903
+ }
904
+
905
+ .red-2 {
906
+ color: var(--lui-color-red-2);
907
+ }
908
+
909
+ .red-3 {
910
+ color: var(--lui-color-red-3);
911
+ }
912
+
913
+ .red-4 {
914
+ color: var(--lui-color-red-4);
915
+ }
916
+
917
+ .red-5 {
918
+ color: var(--lui-color-red-5);
919
+ }
920
+
921
+ .red-6 {
922
+ color: var(--lui-color-red-6);
923
+ }
924
+
925
+ .red-7 {
926
+ color: var(--lui-color-red-7);
927
+ }
928
+
929
+ .red-8 {
930
+ color: var(--lui-color-red-8);
931
+ }
932
+
933
+ .violet-1 {
934
+ color: var(--lui-color-violet-1);
935
+ }
936
+
937
+ .violet-2 {
938
+ color: var(--lui-color-violet-2);
939
+ }
940
+
941
+ .violet-3 {
942
+ color: var(--lui-color-violet-3);
943
+ }
944
+
945
+ .violet-4 {
946
+ color: var(--lui-color-violet-4);
947
+ }
948
+
949
+ .violet-5 {
950
+ color: var(--lui-color-violet-5);
951
+ }
952
+
953
+ .violet-6 {
954
+ color: var(--lui-color-violet-6);
955
+ }
956
+
957
+ .violet-7 {
958
+ color: var(--lui-color-violet-7);
959
+ }
960
+
961
+ .violet-8 {
962
+ color: var(--lui-color-violet-8);
963
+ }
964
+
965
+ .bg-surface-primary {
966
+ background-color: var(--lui-color-primary-background-surface);
967
+ }
968
+
969
+ .bg-surface-secondary {
970
+ background-color: var(--lui-color-secondary-background-surface);
971
+ }
972
+
973
+ .bg-surface-info {
974
+ background-color: var(--lui-color-info-background-surface);
975
+ }
976
+
977
+ .bg-surface-danger {
978
+ background-color: var(--lui-color-danger-background-surface);
979
+ }
980
+
981
+ .bg-surface-success {
982
+ background-color: var(--lui-color-success-background-surface);
983
+ }
984
+
985
+ .bg-surface-caution {
986
+ background-color: var(--lui-color-caution-background-surface);
987
+ }
988
+
989
+ .bg-surface-neutral {
990
+ background-color: var(--lui-color-neutral-background-surface);
991
+ }
992
+
993
+ .bg-container-primary {
994
+ background-color: var(--lui-color-primary-background-container);
995
+ }
996
+
997
+ .bg-container-secondary {
998
+ background-color: var(--lui-color-secondary-background-container);
999
+ }
1000
+
1001
+ .bg-container-info {
1002
+ background-color: var(--lui-color-info-background-container);
1003
+ }
1004
+
1005
+ .bg-container-danger {
1006
+ background-color: var(--lui-color-danger-background-container);
1007
+ }
1008
+
1009
+ .bg-container-success {
1010
+ background-color: var(--lui-color-success-background-container);
1011
+ }
1012
+
1013
+ .bg-container-caution {
1014
+ background-color: var(--lui-color-caution-background-container);
1015
+ }
1016
+
1017
+ .bg-container-neutral {
1018
+ background-color: var(--lui-color-neutral-background-container);
1019
+ }
1020
+
1021
+ .bg-container-overlay {
1022
+ background-color: var(--lui-color-neutral-background-overlay);
1023
+ }
1024
+
1025
+ .elevation-base {
1026
+ box-shadow: var(--lui-elevation-base);
1027
+ }
1028
+ .elevation-hovered {
1029
+ box-shadow: var(--lui-elevation-hovered);
1030
+ }
1031
+ .elevation-floating {
1032
+ box-shadow: var(--lui-elevation-floating);
1033
+ }
1034
+ .elevation-overlay {
1035
+ box-shadow: var(--lui-elevation-overlay);
1036
+ }
1037
+
1038
+ .show-1xs {
1039
+ display: none;
1040
+ }
1041
+ @media (min-width: 320px) {
1042
+ .show-1xs {
1043
+ display: block;
1044
+ }
1045
+ }
1046
+
1047
+ .hide-1xs {
1048
+ display: block;
1049
+ }
1050
+ @media (min-width: 320px) {
1051
+ .hide-1xs {
1052
+ display: none;
1053
+ }
1054
+ }
1055
+
1056
+ .show-sm {
1057
+ display: none;
1058
+ }
1059
+ @media (min-width: 768px) {
1060
+ .show-sm {
1061
+ display: block;
1062
+ }
1063
+ }
1064
+
1065
+ .hide-sm {
1066
+ display: block;
1067
+ }
1068
+ @media (min-width: 768px) {
1069
+ .hide-sm {
1070
+ display: none;
1071
+ }
1072
+ }
1073
+
1074
+ .show-md {
1075
+ display: none;
1076
+ }
1077
+ @media (min-width: 1024px) {
1078
+ .show-md {
1079
+ display: block;
1080
+ }
1081
+ }
1082
+
1083
+ .hide-md {
1084
+ display: block;
1085
+ }
1086
+ @media (min-width: 1024px) {
1087
+ .hide-md {
1088
+ display: none;
1089
+ }
1090
+ }
1091
+
1092
+ .show-lg {
1093
+ display: none;
1094
+ }
1095
+ @media (min-width: 1280px) {
1096
+ .show-lg {
1097
+ display: block;
1098
+ }
1099
+ }
1100
+
1101
+ .hide-lg {
1102
+ display: block;
1103
+ }
1104
+ @media (min-width: 1280px) {
1105
+ .hide-lg {
1106
+ display: none;
1107
+ }
1108
+ }
1109
+
1110
+ .show-1xl {
1111
+ display: none;
1112
+ }
1113
+ @media (min-width: 1440px) {
1114
+ .show-1xl {
1115
+ display: block;
1116
+ }
1117
+ }
1118
+
1119
+ .hide-1xl {
1120
+ display: block;
1121
+ }
1122
+ @media (min-width: 1440px) {
1123
+ .hide-1xl {
1124
+ display: none;
1125
+ }
1126
+ }
1127
+
1128
+ .layout,
1129
+ .grid {
1130
+ display: grid;
1131
+ }
1132
+
1133
+ .grid {
1134
+ margin-bottom: clamp(var(--lui-spacing-fluid-16), var(--lui-spacing-fluid-32), var(--lui-spacing-fluid-32));
1135
+ align-items: start;
1136
+ }
1137
+ .grid:last-of-type {
1138
+ margin-bottom: var(--lui-spacing-fixed-0);
1139
+ }
1140
+
1141
+ @media (max-width: 767px) {
1142
+ .col-1xs-1 {
1143
+ grid-column: span 1;
1144
+ }
1145
+ .col-1xs-2 {
1146
+ grid-column: span 2;
1147
+ }
1148
+ .col-1xs-3 {
1149
+ grid-column: span 3;
1150
+ }
1151
+ .col-1xs-4 {
1152
+ grid-column: span 4;
1153
+ }
1154
+ .grid {
1155
+ gap: clamp(0.75rem, 0.75rem + 1.25vw, 1rem);
1156
+ }
1157
+ }
1158
+ @media (min-width: 768px) and (max-width: 1023px) {
1159
+ .col-sm-1 {
1160
+ grid-column: span 1;
1161
+ }
1162
+ .col-sm-2 {
1163
+ grid-column: span 2;
1164
+ }
1165
+ .col-sm-3 {
1166
+ grid-column: span 3;
1167
+ }
1168
+ .col-sm-4 {
1169
+ grid-column: span 4;
1170
+ }
1171
+ .col-sm-5 {
1172
+ grid-column: span 5;
1173
+ }
1174
+ .col-sm-6 {
1175
+ grid-column: span 6;
1176
+ }
1177
+ .col-sm-7 {
1178
+ grid-column: span 7;
1179
+ }
1180
+ .col-sm-8 {
1181
+ grid-column: span 8;
1182
+ }
1183
+ .grid {
1184
+ gap: clamp(0.75rem, 0.5705rem + 0.8949vw, 1rem);
1185
+ }
1186
+ }
1187
+ @media (min-width: 1024px) and (max-width: 1279px) {
1188
+ .col-md-1 {
1189
+ grid-column: span 1;
1190
+ }
1191
+ .col-md-2 {
1192
+ grid-column: span 2;
1193
+ }
1194
+ .col-md-3 {
1195
+ grid-column: span 3;
1196
+ }
1197
+ .col-md-4 {
1198
+ grid-column: span 4;
1199
+ }
1200
+ .col-md-5 {
1201
+ grid-column: span 5;
1202
+ }
1203
+ .col-md-6 {
1204
+ grid-column: span 6;
1205
+ }
1206
+ .col-md-7 {
1207
+ grid-column: span 7;
1208
+ }
1209
+ .col-md-8 {
1210
+ grid-column: span 8;
1211
+ }
1212
+ .col-md-9 {
1213
+ grid-column: span 9;
1214
+ }
1215
+ .col-md-10 {
1216
+ grid-column: span 10;
1217
+ }
1218
+ .col-md-11 {
1219
+ grid-column: span 11;
1220
+ }
1221
+ .col-md-12 {
1222
+ grid-column: span 12;
1223
+ }
1224
+ .grid {
1225
+ gap: clamp(1.25rem, 0.4961rem + 1.5686vw, 1.5rem);
1226
+ }
1227
+ }
1228
+ @media (min-width: 1280px) and (max-width: 1439px) {
1229
+ .col-lg-1 {
1230
+ grid-column: span 1;
1231
+ }
1232
+ .col-lg-2 {
1233
+ grid-column: span 2;
1234
+ }
1235
+ .col-lg-3 {
1236
+ grid-column: span 3;
1237
+ }
1238
+ .col-lg-4 {
1239
+ grid-column: span 4;
1240
+ }
1241
+ .col-lg-5 {
1242
+ grid-column: span 5;
1243
+ }
1244
+ .col-lg-6 {
1245
+ grid-column: span 6;
1246
+ }
1247
+ .col-lg-7 {
1248
+ grid-column: span 7;
1249
+ }
1250
+ .col-lg-8 {
1251
+ grid-column: span 8;
1252
+ }
1253
+ .col-lg-9 {
1254
+ grid-column: span 9;
1255
+ }
1256
+ .col-lg-10 {
1257
+ grid-column: span 10;
1258
+ }
1259
+ .col-lg-11 {
1260
+ grid-column: span 11;
1261
+ }
1262
+ .col-lg-12 {
1263
+ grid-column: span 12;
1264
+ }
1265
+ .grid {
1266
+ gap: clamp(1.25rem, 0.2549rem + 1.5564vw, 1.5rem);
1267
+ }
1268
+ }
1269
+ @media (min-width: 1440px) {
1270
+ .col-1xl-1 {
1271
+ grid-column: span 1;
1272
+ }
1273
+ .col-1xl-2 {
1274
+ grid-column: span 2;
1275
+ }
1276
+ .col-1xl-3 {
1277
+ grid-column: span 3;
1278
+ }
1279
+ .col-1xl-4 {
1280
+ grid-column: span 4;
1281
+ }
1282
+ .col-1xl-5 {
1283
+ grid-column: span 5;
1284
+ }
1285
+ .col-1xl-6 {
1286
+ grid-column: span 6;
1287
+ }
1288
+ .col-1xl-7 {
1289
+ grid-column: span 7;
1290
+ }
1291
+ .col-1xl-8 {
1292
+ grid-column: span 8;
1293
+ }
1294
+ .col-1xl-9 {
1295
+ grid-column: span 9;
1296
+ }
1297
+ .col-1xl-10 {
1298
+ grid-column: span 10;
1299
+ }
1300
+ .col-1xl-11 {
1301
+ grid-column: span 11;
1302
+ }
1303
+ .col-1xl-12 {
1304
+ grid-column: span 12;
1305
+ }
1306
+ .grid {
1307
+ gap: clamp(1.25rem, 0.4961rem + 1.5686vw, 1.5rem);
1308
+ }
1309
+ }
1310
+ @media (max-width: 1279px) {
1311
+ .main-content {
1312
+ padding: var(--lui-spacing-fixed-16);
1313
+ margin-left: 0;
1314
+ max-width: none;
1315
+ }
1316
+ .sidebar {
1317
+ position: static;
1318
+ width: auto;
1319
+ }
1320
+ .layout {
1321
+ grid-template-areas: "header" "content";
1322
+ }
1323
+ }
1324
+ @media (min-width: 1280px) {
1325
+ .main-content {
1326
+ grid-area: content;
1327
+ padding: var(--lui-spacing-fluid-40);
1328
+ margin-left: 280px;
1329
+ }
1330
+ .grid {
1331
+ grid-template-columns: repeat(12, 1fr);
1332
+ }
1333
+ .layout {
1334
+ grid-template-areas: "header header" "sidebar content";
1335
+ }
1336
+ }
1337
+ .opacity-disabled {
1338
+ opacity: var(--lui-opacity-disabled);
1339
+ }
1340
+ .opacity-hidden {
1341
+ opacity: var(--lui-opacity-hidden);
1342
+ }
1343
+ .opacity-visible {
1344
+ opacity: var(--lui-opacity-visible);
1345
+ }
1346
+
1347
+ .m--fixed-0 {
1348
+ margin: fixed(0);
1349
+ }
1350
+
1351
+ .m--fixed-8 {
1352
+ margin: fixed(8);
1353
+ }
1354
+
1355
+ .m--fixed-16 {
1356
+ margin: fixed(16);
1357
+ }
1358
+
1359
+ .m--fixed-24 {
1360
+ margin: fixed(24);
1361
+ }
1362
+
1363
+ .m--fixed-32 {
1364
+ margin: fixed(32);
1365
+ }
1366
+
1367
+ .m--fixed-40 {
1368
+ margin: fixed(40);
1369
+ }
1370
+
1371
+ .m-t-fixed-0 {
1372
+ margin-top: fixed(0);
1373
+ }
1374
+
1375
+ .m-t-fixed-8 {
1376
+ margin-top: fixed(8);
1377
+ }
1378
+
1379
+ .m-t-fixed-16 {
1380
+ margin-top: fixed(16);
1381
+ }
1382
+
1383
+ .m-t-fixed-24 {
1384
+ margin-top: fixed(24);
1385
+ }
1386
+
1387
+ .m-t-fixed-32 {
1388
+ margin-top: fixed(32);
1389
+ }
1390
+
1391
+ .m-t-fixed-40 {
1392
+ margin-top: fixed(40);
1393
+ }
1394
+
1395
+ .m-b-fixed-0 {
1396
+ margin-bottom: fixed(0);
1397
+ }
1398
+
1399
+ .m-b-fixed-8 {
1400
+ margin-bottom: fixed(8);
1401
+ }
1402
+
1403
+ .m-b-fixed-16 {
1404
+ margin-bottom: fixed(16);
1405
+ }
1406
+
1407
+ .m-b-fixed-24 {
1408
+ margin-bottom: fixed(24);
1409
+ }
1410
+
1411
+ .m-b-fixed-32 {
1412
+ margin-bottom: fixed(32);
1413
+ }
1414
+
1415
+ .m-b-fixed-40 {
1416
+ margin-bottom: fixed(40);
1417
+ }
1418
+
1419
+ .m-l-fixed-0 {
1420
+ margin-left: fixed(0);
1421
+ }
1422
+
1423
+ .m-l-fixed-8 {
1424
+ margin-left: fixed(8);
1425
+ }
1426
+
1427
+ .m-l-fixed-16 {
1428
+ margin-left: fixed(16);
1429
+ }
1430
+
1431
+ .m-l-fixed-24 {
1432
+ margin-left: fixed(24);
1433
+ }
1434
+
1435
+ .m-l-fixed-32 {
1436
+ margin-left: fixed(32);
1437
+ }
1438
+
1439
+ .m-l-fixed-40 {
1440
+ margin-left: fixed(40);
1441
+ }
1442
+
1443
+ .m-r-fixed-0 {
1444
+ margin-right: fixed(0);
1445
+ }
1446
+
1447
+ .m-r-fixed-8 {
1448
+ margin-right: fixed(8);
1449
+ }
1450
+
1451
+ .m-r-fixed-16 {
1452
+ margin-right: fixed(16);
1453
+ }
1454
+
1455
+ .m-r-fixed-24 {
1456
+ margin-right: fixed(24);
1457
+ }
1458
+
1459
+ .m-r-fixed-32 {
1460
+ margin-right: fixed(32);
1461
+ }
1462
+
1463
+ .m-r-fixed-40 {
1464
+ margin-right: fixed(40);
1465
+ }
1466
+
1467
+ .m-x-fixed-0 {
1468
+ margin-left: fixed(0);
1469
+ margin-right: fixed(0);
1470
+ }
1471
+
1472
+ .m-x-fixed-8 {
1473
+ margin-left: fixed(8);
1474
+ margin-right: fixed(8);
1475
+ }
1476
+
1477
+ .m-x-fixed-16 {
1478
+ margin-left: fixed(16);
1479
+ margin-right: fixed(16);
1480
+ }
1481
+
1482
+ .m-x-fixed-24 {
1483
+ margin-left: fixed(24);
1484
+ margin-right: fixed(24);
1485
+ }
1486
+
1487
+ .m-x-fixed-32 {
1488
+ margin-left: fixed(32);
1489
+ margin-right: fixed(32);
1490
+ }
1491
+
1492
+ .m-x-fixed-40 {
1493
+ margin-left: fixed(40);
1494
+ margin-right: fixed(40);
1495
+ }
1496
+
1497
+ .m-y-fixed-0 {
1498
+ margin-top: fixed(0);
1499
+ margin-bottom: fixed(0);
1500
+ }
1501
+
1502
+ .m-y-fixed-8 {
1503
+ margin-top: fixed(8);
1504
+ margin-bottom: fixed(8);
1505
+ }
1506
+
1507
+ .m-y-fixed-16 {
1508
+ margin-top: fixed(16);
1509
+ margin-bottom: fixed(16);
1510
+ }
1511
+
1512
+ .m-y-fixed-24 {
1513
+ margin-top: fixed(24);
1514
+ margin-bottom: fixed(24);
1515
+ }
1516
+
1517
+ .m-y-fixed-32 {
1518
+ margin-top: fixed(32);
1519
+ margin-bottom: fixed(32);
1520
+ }
1521
+
1522
+ .m-y-fixed-40 {
1523
+ margin-top: fixed(40);
1524
+ margin-bottom: fixed(40);
1525
+ }
1526
+
1527
+ .m--fluid-2 {
1528
+ margin: fluid(2);
1529
+ }
1530
+
1531
+ .m--fluid-4 {
1532
+ margin: fluid(4);
1533
+ }
1534
+
1535
+ .m--fluid-8 {
1536
+ margin: fluid(8);
1537
+ }
1538
+
1539
+ .m--fluid-12 {
1540
+ margin: fluid(12);
1541
+ }
1542
+
1543
+ .m--fluid-16 {
1544
+ margin: fluid(16);
1545
+ }
1546
+
1547
+ .m--fluid-20 {
1548
+ margin: fluid(20);
1549
+ }
1550
+
1551
+ .m--fluid-24 {
1552
+ margin: fluid(24);
1553
+ }
1554
+
1555
+ .m--fluid-32 {
1556
+ margin: fluid(32);
1557
+ }
1558
+
1559
+ .m--fluid-40 {
1560
+ margin: fluid(40);
1561
+ }
1562
+
1563
+ .m--fluid-48 {
1564
+ margin: fluid(48);
1565
+ }
1566
+
1567
+ .m--fluid-56 {
1568
+ margin: fluid(56);
1569
+ }
1570
+
1571
+ .m--fluid-64 {
1572
+ margin: fluid(64);
1573
+ }
1574
+
1575
+ .m--fluid-72 {
1576
+ margin: fluid(72);
1577
+ }
1578
+
1579
+ .m--fluid-80 {
1580
+ margin: fluid(80);
1581
+ }
1582
+
1583
+ .m-t-fluid-2 {
1584
+ margin-top: fluid(2);
1585
+ }
1586
+
1587
+ .m-t-fluid-4 {
1588
+ margin-top: fluid(4);
1589
+ }
1590
+
1591
+ .m-t-fluid-8 {
1592
+ margin-top: fluid(8);
1593
+ }
1594
+
1595
+ .m-t-fluid-12 {
1596
+ margin-top: fluid(12);
1597
+ }
1598
+
1599
+ .m-t-fluid-16 {
1600
+ margin-top: fluid(16);
1601
+ }
1602
+
1603
+ .m-t-fluid-20 {
1604
+ margin-top: fluid(20);
1605
+ }
1606
+
1607
+ .m-t-fluid-24 {
1608
+ margin-top: fluid(24);
1609
+ }
1610
+
1611
+ .m-t-fluid-32 {
1612
+ margin-top: fluid(32);
1613
+ }
1614
+
1615
+ .m-t-fluid-40 {
1616
+ margin-top: fluid(40);
1617
+ }
1618
+
1619
+ .m-t-fluid-48 {
1620
+ margin-top: fluid(48);
1621
+ }
1622
+
1623
+ .m-t-fluid-56 {
1624
+ margin-top: fluid(56);
1625
+ }
1626
+
1627
+ .m-t-fluid-64 {
1628
+ margin-top: fluid(64);
1629
+ }
1630
+
1631
+ .m-t-fluid-72 {
1632
+ margin-top: fluid(72);
1633
+ }
1634
+
1635
+ .m-t-fluid-80 {
1636
+ margin-top: fluid(80);
1637
+ }
1638
+
1639
+ .m-b-fluid-2 {
1640
+ margin-bottom: fluid(2);
1641
+ }
1642
+
1643
+ .m-b-fluid-4 {
1644
+ margin-bottom: fluid(4);
1645
+ }
1646
+
1647
+ .m-b-fluid-8 {
1648
+ margin-bottom: fluid(8);
1649
+ }
1650
+
1651
+ .m-b-fluid-12 {
1652
+ margin-bottom: fluid(12);
1653
+ }
1654
+
1655
+ .m-b-fluid-16 {
1656
+ margin-bottom: fluid(16);
1657
+ }
1658
+
1659
+ .m-b-fluid-20 {
1660
+ margin-bottom: fluid(20);
1661
+ }
1662
+
1663
+ .m-b-fluid-24 {
1664
+ margin-bottom: fluid(24);
1665
+ }
1666
+
1667
+ .m-b-fluid-32 {
1668
+ margin-bottom: fluid(32);
1669
+ }
1670
+
1671
+ .m-b-fluid-40 {
1672
+ margin-bottom: fluid(40);
1673
+ }
1674
+
1675
+ .m-b-fluid-48 {
1676
+ margin-bottom: fluid(48);
1677
+ }
1678
+
1679
+ .m-b-fluid-56 {
1680
+ margin-bottom: fluid(56);
1681
+ }
1682
+
1683
+ .m-b-fluid-64 {
1684
+ margin-bottom: fluid(64);
1685
+ }
1686
+
1687
+ .m-b-fluid-72 {
1688
+ margin-bottom: fluid(72);
1689
+ }
1690
+
1691
+ .m-b-fluid-80 {
1692
+ margin-bottom: fluid(80);
1693
+ }
1694
+
1695
+ .m-l-fluid-2 {
1696
+ margin-left: fluid(2);
1697
+ }
1698
+
1699
+ .m-l-fluid-4 {
1700
+ margin-left: fluid(4);
1701
+ }
1702
+
1703
+ .m-l-fluid-8 {
1704
+ margin-left: fluid(8);
1705
+ }
1706
+
1707
+ .m-l-fluid-12 {
1708
+ margin-left: fluid(12);
1709
+ }
1710
+
1711
+ .m-l-fluid-16 {
1712
+ margin-left: fluid(16);
1713
+ }
1714
+
1715
+ .m-l-fluid-20 {
1716
+ margin-left: fluid(20);
1717
+ }
1718
+
1719
+ .m-l-fluid-24 {
1720
+ margin-left: fluid(24);
1721
+ }
1722
+
1723
+ .m-l-fluid-32 {
1724
+ margin-left: fluid(32);
1725
+ }
1726
+
1727
+ .m-l-fluid-40 {
1728
+ margin-left: fluid(40);
1729
+ }
1730
+
1731
+ .m-l-fluid-48 {
1732
+ margin-left: fluid(48);
1733
+ }
1734
+
1735
+ .m-l-fluid-56 {
1736
+ margin-left: fluid(56);
1737
+ }
1738
+
1739
+ .m-l-fluid-64 {
1740
+ margin-left: fluid(64);
1741
+ }
1742
+
1743
+ .m-l-fluid-72 {
1744
+ margin-left: fluid(72);
1745
+ }
1746
+
1747
+ .m-l-fluid-80 {
1748
+ margin-left: fluid(80);
1749
+ }
1750
+
1751
+ .m-r-fluid-2 {
1752
+ margin-right: fluid(2);
1753
+ }
1754
+
1755
+ .m-r-fluid-4 {
1756
+ margin-right: fluid(4);
1757
+ }
1758
+
1759
+ .m-r-fluid-8 {
1760
+ margin-right: fluid(8);
1761
+ }
1762
+
1763
+ .m-r-fluid-12 {
1764
+ margin-right: fluid(12);
1765
+ }
1766
+
1767
+ .m-r-fluid-16 {
1768
+ margin-right: fluid(16);
1769
+ }
1770
+
1771
+ .m-r-fluid-20 {
1772
+ margin-right: fluid(20);
1773
+ }
1774
+
1775
+ .m-r-fluid-24 {
1776
+ margin-right: fluid(24);
1777
+ }
1778
+
1779
+ .m-r-fluid-32 {
1780
+ margin-right: fluid(32);
1781
+ }
1782
+
1783
+ .m-r-fluid-40 {
1784
+ margin-right: fluid(40);
1785
+ }
1786
+
1787
+ .m-r-fluid-48 {
1788
+ margin-right: fluid(48);
1789
+ }
1790
+
1791
+ .m-r-fluid-56 {
1792
+ margin-right: fluid(56);
1793
+ }
1794
+
1795
+ .m-r-fluid-64 {
1796
+ margin-right: fluid(64);
1797
+ }
1798
+
1799
+ .m-r-fluid-72 {
1800
+ margin-right: fluid(72);
1801
+ }
1802
+
1803
+ .m-r-fluid-80 {
1804
+ margin-right: fluid(80);
1805
+ }
1806
+
1807
+ .m-x-fluid-2 {
1808
+ margin-left: fluid(2);
1809
+ margin-right: fluid(2);
1810
+ }
1811
+
1812
+ .m-x-fluid-4 {
1813
+ margin-left: fluid(4);
1814
+ margin-right: fluid(4);
1815
+ }
1816
+
1817
+ .m-x-fluid-8 {
1818
+ margin-left: fluid(8);
1819
+ margin-right: fluid(8);
1820
+ }
1821
+
1822
+ .m-x-fluid-12 {
1823
+ margin-left: fluid(12);
1824
+ margin-right: fluid(12);
1825
+ }
1826
+
1827
+ .m-x-fluid-16 {
1828
+ margin-left: fluid(16);
1829
+ margin-right: fluid(16);
1830
+ }
1831
+
1832
+ .m-x-fluid-20 {
1833
+ margin-left: fluid(20);
1834
+ margin-right: fluid(20);
1835
+ }
1836
+
1837
+ .m-x-fluid-24 {
1838
+ margin-left: fluid(24);
1839
+ margin-right: fluid(24);
1840
+ }
1841
+
1842
+ .m-x-fluid-32 {
1843
+ margin-left: fluid(32);
1844
+ margin-right: fluid(32);
1845
+ }
1846
+
1847
+ .m-x-fluid-40 {
1848
+ margin-left: fluid(40);
1849
+ margin-right: fluid(40);
1850
+ }
1851
+
1852
+ .m-x-fluid-48 {
1853
+ margin-left: fluid(48);
1854
+ margin-right: fluid(48);
1855
+ }
1856
+
1857
+ .m-x-fluid-56 {
1858
+ margin-left: fluid(56);
1859
+ margin-right: fluid(56);
1860
+ }
1861
+
1862
+ .m-x-fluid-64 {
1863
+ margin-left: fluid(64);
1864
+ margin-right: fluid(64);
1865
+ }
1866
+
1867
+ .m-x-fluid-72 {
1868
+ margin-left: fluid(72);
1869
+ margin-right: fluid(72);
1870
+ }
1871
+
1872
+ .m-x-fluid-80 {
1873
+ margin-left: fluid(80);
1874
+ margin-right: fluid(80);
1875
+ }
1876
+
1877
+ .m-y-fluid-2 {
1878
+ margin-top: fluid(2);
1879
+ margin-bottom: fluid(2);
1880
+ }
1881
+
1882
+ .m-y-fluid-4 {
1883
+ margin-top: fluid(4);
1884
+ margin-bottom: fluid(4);
1885
+ }
1886
+
1887
+ .m-y-fluid-8 {
1888
+ margin-top: fluid(8);
1889
+ margin-bottom: fluid(8);
1890
+ }
1891
+
1892
+ .m-y-fluid-12 {
1893
+ margin-top: fluid(12);
1894
+ margin-bottom: fluid(12);
1895
+ }
1896
+
1897
+ .m-y-fluid-16 {
1898
+ margin-top: fluid(16);
1899
+ margin-bottom: fluid(16);
1900
+ }
1901
+
1902
+ .m-y-fluid-20 {
1903
+ margin-top: fluid(20);
1904
+ margin-bottom: fluid(20);
1905
+ }
1906
+
1907
+ .m-y-fluid-24 {
1908
+ margin-top: fluid(24);
1909
+ margin-bottom: fluid(24);
1910
+ }
1911
+
1912
+ .m-y-fluid-32 {
1913
+ margin-top: fluid(32);
1914
+ margin-bottom: fluid(32);
1915
+ }
1916
+
1917
+ .m-y-fluid-40 {
1918
+ margin-top: fluid(40);
1919
+ margin-bottom: fluid(40);
1920
+ }
1921
+
1922
+ .m-y-fluid-48 {
1923
+ margin-top: fluid(48);
1924
+ margin-bottom: fluid(48);
1925
+ }
1926
+
1927
+ .m-y-fluid-56 {
1928
+ margin-top: fluid(56);
1929
+ margin-bottom: fluid(56);
1930
+ }
1931
+
1932
+ .m-y-fluid-64 {
1933
+ margin-top: fluid(64);
1934
+ margin-bottom: fluid(64);
1935
+ }
1936
+
1937
+ .m-y-fluid-72 {
1938
+ margin-top: fluid(72);
1939
+ margin-bottom: fluid(72);
1940
+ }
1941
+
1942
+ .m-y-fluid-80 {
1943
+ margin-top: fluid(80);
1944
+ margin-bottom: fluid(80);
1945
+ }
1946
+
1947
+ .p--fixed-0 {
1948
+ padding: fixed(0);
1949
+ }
1950
+
1951
+ .p--fixed-8 {
1952
+ padding: fixed(8);
1953
+ }
1954
+
1955
+ .p--fixed-16 {
1956
+ padding: fixed(16);
1957
+ }
1958
+
1959
+ .p--fixed-24 {
1960
+ padding: fixed(24);
1961
+ }
1962
+
1963
+ .p--fixed-32 {
1964
+ padding: fixed(32);
1965
+ }
1966
+
1967
+ .p--fixed-40 {
1968
+ padding: fixed(40);
1969
+ }
1970
+
1971
+ .p-t-fixed-0 {
1972
+ padding-top: fixed(0);
1973
+ }
1974
+
1975
+ .p-t-fixed-8 {
1976
+ padding-top: fixed(8);
1977
+ }
1978
+
1979
+ .p-t-fixed-16 {
1980
+ padding-top: fixed(16);
1981
+ }
1982
+
1983
+ .p-t-fixed-24 {
1984
+ padding-top: fixed(24);
1985
+ }
1986
+
1987
+ .p-t-fixed-32 {
1988
+ padding-top: fixed(32);
1989
+ }
1990
+
1991
+ .p-t-fixed-40 {
1992
+ padding-top: fixed(40);
1993
+ }
1994
+
1995
+ .p-b-fixed-0 {
1996
+ padding-bottom: fixed(0);
1997
+ }
1998
+
1999
+ .p-b-fixed-8 {
2000
+ padding-bottom: fixed(8);
2001
+ }
2002
+
2003
+ .p-b-fixed-16 {
2004
+ padding-bottom: fixed(16);
2005
+ }
2006
+
2007
+ .p-b-fixed-24 {
2008
+ padding-bottom: fixed(24);
2009
+ }
2010
+
2011
+ .p-b-fixed-32 {
2012
+ padding-bottom: fixed(32);
2013
+ }
2014
+
2015
+ .p-b-fixed-40 {
2016
+ padding-bottom: fixed(40);
2017
+ }
2018
+
2019
+ .p-l-fixed-0 {
2020
+ padding-left: fixed(0);
2021
+ }
2022
+
2023
+ .p-l-fixed-8 {
2024
+ padding-left: fixed(8);
2025
+ }
2026
+
2027
+ .p-l-fixed-16 {
2028
+ padding-left: fixed(16);
2029
+ }
2030
+
2031
+ .p-l-fixed-24 {
2032
+ padding-left: fixed(24);
2033
+ }
2034
+
2035
+ .p-l-fixed-32 {
2036
+ padding-left: fixed(32);
2037
+ }
2038
+
2039
+ .p-l-fixed-40 {
2040
+ padding-left: fixed(40);
2041
+ }
2042
+
2043
+ .p-r-fixed-0 {
2044
+ padding-right: fixed(0);
2045
+ }
2046
+
2047
+ .p-r-fixed-8 {
2048
+ padding-right: fixed(8);
2049
+ }
2050
+
2051
+ .p-r-fixed-16 {
2052
+ padding-right: fixed(16);
2053
+ }
2054
+
2055
+ .p-r-fixed-24 {
2056
+ padding-right: fixed(24);
2057
+ }
2058
+
2059
+ .p-r-fixed-32 {
2060
+ padding-right: fixed(32);
2061
+ }
2062
+
2063
+ .p-r-fixed-40 {
2064
+ padding-right: fixed(40);
2065
+ }
2066
+
2067
+ .p-x-fixed-0 {
2068
+ padding-left: fixed(0);
2069
+ padding-right: fixed(0);
2070
+ }
2071
+
2072
+ .p-x-fixed-8 {
2073
+ padding-left: fixed(8);
2074
+ padding-right: fixed(8);
2075
+ }
2076
+
2077
+ .p-x-fixed-16 {
2078
+ padding-left: fixed(16);
2079
+ padding-right: fixed(16);
2080
+ }
2081
+
2082
+ .p-x-fixed-24 {
2083
+ padding-left: fixed(24);
2084
+ padding-right: fixed(24);
2085
+ }
2086
+
2087
+ .p-x-fixed-32 {
2088
+ padding-left: fixed(32);
2089
+ padding-right: fixed(32);
2090
+ }
2091
+
2092
+ .p-x-fixed-40 {
2093
+ padding-left: fixed(40);
2094
+ padding-right: fixed(40);
2095
+ }
2096
+
2097
+ .p-y-fixed-0 {
2098
+ padding-top: fixed(0);
2099
+ padding-bottom: fixed(0);
2100
+ }
2101
+
2102
+ .p-y-fixed-8 {
2103
+ padding-top: fixed(8);
2104
+ padding-bottom: fixed(8);
2105
+ }
2106
+
2107
+ .p-y-fixed-16 {
2108
+ padding-top: fixed(16);
2109
+ padding-bottom: fixed(16);
2110
+ }
2111
+
2112
+ .p-y-fixed-24 {
2113
+ padding-top: fixed(24);
2114
+ padding-bottom: fixed(24);
2115
+ }
2116
+
2117
+ .p-y-fixed-32 {
2118
+ padding-top: fixed(32);
2119
+ padding-bottom: fixed(32);
2120
+ }
2121
+
2122
+ .p-y-fixed-40 {
2123
+ padding-top: fixed(40);
2124
+ padding-bottom: fixed(40);
2125
+ }
2126
+
2127
+ .p--fluid-2 {
2128
+ padding: fluid(2);
2129
+ }
2130
+
2131
+ .p--fluid-4 {
2132
+ padding: fluid(4);
2133
+ }
2134
+
2135
+ .p--fluid-8 {
2136
+ padding: fluid(8);
2137
+ }
2138
+
2139
+ .p--fluid-12 {
2140
+ padding: fluid(12);
2141
+ }
2142
+
2143
+ .p--fluid-16 {
2144
+ padding: fluid(16);
2145
+ }
2146
+
2147
+ .p--fluid-20 {
2148
+ padding: fluid(20);
2149
+ }
2150
+
2151
+ .p--fluid-24 {
2152
+ padding: fluid(24);
2153
+ }
2154
+
2155
+ .p--fluid-32 {
2156
+ padding: fluid(32);
2157
+ }
2158
+
2159
+ .p--fluid-40 {
2160
+ padding: fluid(40);
2161
+ }
2162
+
2163
+ .p--fluid-48 {
2164
+ padding: fluid(48);
2165
+ }
2166
+
2167
+ .p--fluid-56 {
2168
+ padding: fluid(56);
2169
+ }
2170
+
2171
+ .p--fluid-64 {
2172
+ padding: fluid(64);
2173
+ }
2174
+
2175
+ .p--fluid-72 {
2176
+ padding: fluid(72);
2177
+ }
2178
+
2179
+ .p--fluid-80 {
2180
+ padding: fluid(80);
2181
+ }
2182
+
2183
+ .p-t-fluid-2 {
2184
+ padding-top: fluid(2);
2185
+ }
2186
+
2187
+ .p-t-fluid-4 {
2188
+ padding-top: fluid(4);
2189
+ }
2190
+
2191
+ .p-t-fluid-8 {
2192
+ padding-top: fluid(8);
2193
+ }
2194
+
2195
+ .p-t-fluid-12 {
2196
+ padding-top: fluid(12);
2197
+ }
2198
+
2199
+ .p-t-fluid-16 {
2200
+ padding-top: fluid(16);
2201
+ }
2202
+
2203
+ .p-t-fluid-20 {
2204
+ padding-top: fluid(20);
2205
+ }
2206
+
2207
+ .p-t-fluid-24 {
2208
+ padding-top: fluid(24);
2209
+ }
2210
+
2211
+ .p-t-fluid-32 {
2212
+ padding-top: fluid(32);
2213
+ }
2214
+
2215
+ .p-t-fluid-40 {
2216
+ padding-top: fluid(40);
2217
+ }
2218
+
2219
+ .p-t-fluid-48 {
2220
+ padding-top: fluid(48);
2221
+ }
2222
+
2223
+ .p-t-fluid-56 {
2224
+ padding-top: fluid(56);
2225
+ }
2226
+
2227
+ .p-t-fluid-64 {
2228
+ padding-top: fluid(64);
2229
+ }
2230
+
2231
+ .p-t-fluid-72 {
2232
+ padding-top: fluid(72);
2233
+ }
2234
+
2235
+ .p-t-fluid-80 {
2236
+ padding-top: fluid(80);
2237
+ }
2238
+
2239
+ .p-b-fluid-2 {
2240
+ padding-bottom: fluid(2);
2241
+ }
2242
+
2243
+ .p-b-fluid-4 {
2244
+ padding-bottom: fluid(4);
2245
+ }
2246
+
2247
+ .p-b-fluid-8 {
2248
+ padding-bottom: fluid(8);
2249
+ }
2250
+
2251
+ .p-b-fluid-12 {
2252
+ padding-bottom: fluid(12);
2253
+ }
2254
+
2255
+ .p-b-fluid-16 {
2256
+ padding-bottom: fluid(16);
2257
+ }
2258
+
2259
+ .p-b-fluid-20 {
2260
+ padding-bottom: fluid(20);
2261
+ }
2262
+
2263
+ .p-b-fluid-24 {
2264
+ padding-bottom: fluid(24);
2265
+ }
2266
+
2267
+ .p-b-fluid-32 {
2268
+ padding-bottom: fluid(32);
2269
+ }
2270
+
2271
+ .p-b-fluid-40 {
2272
+ padding-bottom: fluid(40);
2273
+ }
2274
+
2275
+ .p-b-fluid-48 {
2276
+ padding-bottom: fluid(48);
2277
+ }
2278
+
2279
+ .p-b-fluid-56 {
2280
+ padding-bottom: fluid(56);
2281
+ }
2282
+
2283
+ .p-b-fluid-64 {
2284
+ padding-bottom: fluid(64);
2285
+ }
2286
+
2287
+ .p-b-fluid-72 {
2288
+ padding-bottom: fluid(72);
2289
+ }
2290
+
2291
+ .p-b-fluid-80 {
2292
+ padding-bottom: fluid(80);
2293
+ }
2294
+
2295
+ .p-l-fluid-2 {
2296
+ padding-left: fluid(2);
2297
+ }
2298
+
2299
+ .p-l-fluid-4 {
2300
+ padding-left: fluid(4);
2301
+ }
2302
+
2303
+ .p-l-fluid-8 {
2304
+ padding-left: fluid(8);
2305
+ }
2306
+
2307
+ .p-l-fluid-12 {
2308
+ padding-left: fluid(12);
2309
+ }
2310
+
2311
+ .p-l-fluid-16 {
2312
+ padding-left: fluid(16);
2313
+ }
2314
+
2315
+ .p-l-fluid-20 {
2316
+ padding-left: fluid(20);
2317
+ }
2318
+
2319
+ .p-l-fluid-24 {
2320
+ padding-left: fluid(24);
2321
+ }
2322
+
2323
+ .p-l-fluid-32 {
2324
+ padding-left: fluid(32);
2325
+ }
2326
+
2327
+ .p-l-fluid-40 {
2328
+ padding-left: fluid(40);
2329
+ }
2330
+
2331
+ .p-l-fluid-48 {
2332
+ padding-left: fluid(48);
2333
+ }
2334
+
2335
+ .p-l-fluid-56 {
2336
+ padding-left: fluid(56);
2337
+ }
2338
+
2339
+ .p-l-fluid-64 {
2340
+ padding-left: fluid(64);
2341
+ }
2342
+
2343
+ .p-l-fluid-72 {
2344
+ padding-left: fluid(72);
2345
+ }
2346
+
2347
+ .p-l-fluid-80 {
2348
+ padding-left: fluid(80);
2349
+ }
2350
+
2351
+ .p-r-fluid-2 {
2352
+ padding-right: fluid(2);
2353
+ }
2354
+
2355
+ .p-r-fluid-4 {
2356
+ padding-right: fluid(4);
2357
+ }
2358
+
2359
+ .p-r-fluid-8 {
2360
+ padding-right: fluid(8);
2361
+ }
2362
+
2363
+ .p-r-fluid-12 {
2364
+ padding-right: fluid(12);
2365
+ }
2366
+
2367
+ .p-r-fluid-16 {
2368
+ padding-right: fluid(16);
2369
+ }
2370
+
2371
+ .p-r-fluid-20 {
2372
+ padding-right: fluid(20);
2373
+ }
2374
+
2375
+ .p-r-fluid-24 {
2376
+ padding-right: fluid(24);
2377
+ }
2378
+
2379
+ .p-r-fluid-32 {
2380
+ padding-right: fluid(32);
2381
+ }
2382
+
2383
+ .p-r-fluid-40 {
2384
+ padding-right: fluid(40);
2385
+ }
2386
+
2387
+ .p-r-fluid-48 {
2388
+ padding-right: fluid(48);
2389
+ }
2390
+
2391
+ .p-r-fluid-56 {
2392
+ padding-right: fluid(56);
2393
+ }
2394
+
2395
+ .p-r-fluid-64 {
2396
+ padding-right: fluid(64);
2397
+ }
2398
+
2399
+ .p-r-fluid-72 {
2400
+ padding-right: fluid(72);
2401
+ }
2402
+
2403
+ .p-r-fluid-80 {
2404
+ padding-right: fluid(80);
2405
+ }
2406
+
2407
+ .p-x-fluid-2 {
2408
+ padding-left: fluid(2);
2409
+ padding-right: fluid(2);
2410
+ }
2411
+
2412
+ .p-x-fluid-4 {
2413
+ padding-left: fluid(4);
2414
+ padding-right: fluid(4);
2415
+ }
2416
+
2417
+ .p-x-fluid-8 {
2418
+ padding-left: fluid(8);
2419
+ padding-right: fluid(8);
2420
+ }
2421
+
2422
+ .p-x-fluid-12 {
2423
+ padding-left: fluid(12);
2424
+ padding-right: fluid(12);
2425
+ }
2426
+
2427
+ .p-x-fluid-16 {
2428
+ padding-left: fluid(16);
2429
+ padding-right: fluid(16);
2430
+ }
2431
+
2432
+ .p-x-fluid-20 {
2433
+ padding-left: fluid(20);
2434
+ padding-right: fluid(20);
2435
+ }
2436
+
2437
+ .p-x-fluid-24 {
2438
+ padding-left: fluid(24);
2439
+ padding-right: fluid(24);
2440
+ }
2441
+
2442
+ .p-x-fluid-32 {
2443
+ padding-left: fluid(32);
2444
+ padding-right: fluid(32);
2445
+ }
2446
+
2447
+ .p-x-fluid-40 {
2448
+ padding-left: fluid(40);
2449
+ padding-right: fluid(40);
2450
+ }
2451
+
2452
+ .p-x-fluid-48 {
2453
+ padding-left: fluid(48);
2454
+ padding-right: fluid(48);
2455
+ }
2456
+
2457
+ .p-x-fluid-56 {
2458
+ padding-left: fluid(56);
2459
+ padding-right: fluid(56);
2460
+ }
2461
+
2462
+ .p-x-fluid-64 {
2463
+ padding-left: fluid(64);
2464
+ padding-right: fluid(64);
2465
+ }
2466
+
2467
+ .p-x-fluid-72 {
2468
+ padding-left: fluid(72);
2469
+ padding-right: fluid(72);
2470
+ }
2471
+
2472
+ .p-x-fluid-80 {
2473
+ padding-left: fluid(80);
2474
+ padding-right: fluid(80);
2475
+ }
2476
+
2477
+ .p-y-fluid-2 {
2478
+ padding-top: fluid(2);
2479
+ padding-bottom: fluid(2);
2480
+ }
2481
+
2482
+ .p-y-fluid-4 {
2483
+ padding-top: fluid(4);
2484
+ padding-bottom: fluid(4);
2485
+ }
2486
+
2487
+ .p-y-fluid-8 {
2488
+ padding-top: fluid(8);
2489
+ padding-bottom: fluid(8);
2490
+ }
2491
+
2492
+ .p-y-fluid-12 {
2493
+ padding-top: fluid(12);
2494
+ padding-bottom: fluid(12);
2495
+ }
2496
+
2497
+ .p-y-fluid-16 {
2498
+ padding-top: fluid(16);
2499
+ padding-bottom: fluid(16);
2500
+ }
2501
+
2502
+ .p-y-fluid-20 {
2503
+ padding-top: fluid(20);
2504
+ padding-bottom: fluid(20);
2505
+ }
2506
+
2507
+ .p-y-fluid-24 {
2508
+ padding-top: fluid(24);
2509
+ padding-bottom: fluid(24);
2510
+ }
2511
+
2512
+ .p-y-fluid-32 {
2513
+ padding-top: fluid(32);
2514
+ padding-bottom: fluid(32);
2515
+ }
2516
+
2517
+ .p-y-fluid-40 {
2518
+ padding-top: fluid(40);
2519
+ padding-bottom: fluid(40);
2520
+ }
2521
+
2522
+ .p-y-fluid-48 {
2523
+ padding-top: fluid(48);
2524
+ padding-bottom: fluid(48);
2525
+ }
2526
+
2527
+ .p-y-fluid-56 {
2528
+ padding-top: fluid(56);
2529
+ padding-bottom: fluid(56);
2530
+ }
2531
+
2532
+ .p-y-fluid-64 {
2533
+ padding-top: fluid(64);
2534
+ padding-bottom: fluid(64);
2535
+ }
2536
+
2537
+ .p-y-fluid-72 {
2538
+ padding-top: fluid(72);
2539
+ padding-bottom: fluid(72);
2540
+ }
2541
+
2542
+ .p-y-fluid-80 {
2543
+ padding-top: fluid(80);
2544
+ padding-bottom: fluid(80);
2545
+ }
2546
+
2547
+ .gap-fixed-0 {
2548
+ gap: fixed(0);
2549
+ }
2550
+
2551
+ .gap-fixed-8 {
2552
+ gap: fixed(8);
2553
+ }
2554
+
2555
+ .gap-fixed-16 {
2556
+ gap: fixed(16);
2557
+ }
2558
+
2559
+ .gap-fixed-24 {
2560
+ gap: fixed(24);
2561
+ }
2562
+
2563
+ .gap-fixed-32 {
2564
+ gap: fixed(32);
2565
+ }
2566
+
2567
+ .gap-fixed-40 {
2568
+ gap: fixed(40);
2569
+ }
2570
+
2571
+ .gap-fluid-2 {
2572
+ gap: fluid(2);
2573
+ }
2574
+
2575
+ .gap-fluid-4 {
2576
+ gap: fluid(4);
2577
+ }
2578
+
2579
+ .gap-fluid-8 {
2580
+ gap: fluid(8);
2581
+ }
2582
+
2583
+ .gap-fluid-12 {
2584
+ gap: fluid(12);
2585
+ }
2586
+
2587
+ .gap-fluid-16 {
2588
+ gap: fluid(16);
2589
+ }
2590
+
2591
+ .gap-fluid-20 {
2592
+ gap: fluid(20);
2593
+ }
2594
+
2595
+ .gap-fluid-24 {
2596
+ gap: fluid(24);
2597
+ }
2598
+
2599
+ .gap-fluid-32 {
2600
+ gap: fluid(32);
2601
+ }
2602
+
2603
+ .gap-fluid-40 {
2604
+ gap: fluid(40);
2605
+ }
2606
+
2607
+ .gap-fluid-48 {
2608
+ gap: fluid(48);
2609
+ }
2610
+
2611
+ .gap-fluid-56 {
2612
+ gap: fluid(56);
2613
+ }
2614
+
2615
+ .gap-fluid-64 {
2616
+ gap: fluid(64);
2617
+ }
2618
+
2619
+ .gap-fluid-72 {
2620
+ gap: fluid(72);
2621
+ }
2622
+
2623
+ .gap-fluid-80 {
2624
+ gap: fluid(80);
2625
+ }
2626
+
2627
+ .display {
2628
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-3xl)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2629
+ text-transform: var(--lui-typography-case-none);
2630
+ }
2631
+
2632
+ .title {
2633
+ font: var(--lui-typography-weight-bold) var(--lui-brand-typography-font-size-2xl)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2634
+ text-transform: var(--lui-typography-case-none);
2635
+ }
2636
+
2637
+ .headline {
2638
+ font: var(--lui-typography-weight-semibold) var(--lui-brand-typography-font-size-1xl)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2639
+ text-transform: var(--lui-typography-case-none);
2640
+ }
2641
+
2642
+ .subtitle {
2643
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-lg)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2644
+ text-transform: var(--lui-typography-case-none);
2645
+ }
2646
+
2647
+ .block-title {
2648
+ font: var(--lui-typography-weight-medium) var(--lui-brand-typography-font-size-md)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2649
+ text-transform: var(--lui-typography-case-none);
2650
+ }
2651
+
2652
+ .subheadline {
2653
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-sm)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2654
+ text-transform: var(--lui-typography-case-none);
2655
+ }
2656
+
2657
+ .overtitle {
2658
+ font: var(--lui-typography-weight-medium) var(--lui-brand-typography-font-size-3xs)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
2659
+ text-transform: var(--lui-typography-case-uppercase);
2660
+ }
2661
+
2662
+ .body--lg {
2663
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2664
+ text-transform: var(--lui-typography-case-none);
2665
+ }
2666
+
2667
+ .body--md {
2668
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-2xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2669
+ text-transform: var(--lui-typography-case-none);
2670
+ }
2671
+
2672
+ .body--sm {
2673
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-3xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2674
+ text-transform: var(--lui-typography-case-none);
2675
+ }
2676
+
2677
+ .text-regular {
2678
+ font-weight: var(--lui-typography-weight-regular);
2679
+ }
2680
+ .text-medium {
2681
+ font-weight: var(--lui-typography-weight-medium);
2682
+ }
2683
+ .text-semibold {
2684
+ font-weight: var(--lui-typography-weight-semibold);
2685
+ }
2686
+ .text-bold {
2687
+ font-weight: var(--lui-typography-weight-bold);
2688
+ }
2689
+
2690
+ .alert {
2691
+ color: var(--lui-color-neutral-text-body);
2692
+ background-color: var(--lui-color-neutral-background-surface);
2693
+ padding: var(--lui-spacing-fixed-16);
2694
+ gap: var(--lui-spacing-fixed-16);
2695
+ border-radius: var(--lui-border-radius-lg);
2696
+ }
2697
+ .alert__content, .alert__actions {
2698
+ display: flex;
2699
+ }
2700
+ .alert__content {
2701
+ gap: var(--lui-spacing-fixed-16);
2702
+ }
2703
+ .alert__text {
2704
+ width: 100%;
2705
+ }
2706
+ .alert__text p:first-child {
2707
+ margin-bottom: var(--lui-spacing-fluid-2);
2708
+ }
2709
+ .alert__text p:first-of-type {
2710
+ font-weight: var(--lui-typography-weight-bold) !important;
2711
+ }
2712
+ .alert__actions {
2713
+ margin-top: var(--lui-spacing-fixed-24);
2714
+ justify-content: flex-end;
2715
+ }
2716
+ .alert__actions button:first-child {
2717
+ margin-right: var(--lui-spacing-fixed-16);
2718
+ }
2719
+ .alert.alert--caution {
2720
+ border: var(--lui-border-width-2) var(--lui-color-caution-border-stroke) solid;
2721
+ }
2722
+ .alert.alert--caution i.alert__icon {
2723
+ color: var(--lui-color-caution-icon-default);
2724
+ }
2725
+ .alert.alert--danger {
2726
+ border: var(--lui-border-width-2) var(--lui-color-danger-border-stroke) solid;
2727
+ }
2728
+ .alert.alert--danger i.alert__icon {
2729
+ color: var(--lui-color-danger-icon-default);
2730
+ }
2731
+ .alert.alert--info {
2732
+ border: var(--lui-border-width-2) var(--lui-color-info-border-stroke) solid;
2733
+ }
2734
+ .alert.alert--info i.alert__icon {
2735
+ color: var(--lui-color-info-icon-default);
2736
+ }
2737
+ .alert.alert--success {
2738
+ border: var(--lui-border-width-2) var(--lui-color-success-border-stroke) solid;
2739
+ }
2740
+ .alert.alert--success i.alert__icon {
2741
+ color: var(--lui-color-success-icon-default);
2742
+ }
2743
+
2744
+ .breadcrumb {
2745
+ display: flex;
2746
+ align-items: center;
2747
+ list-style: none;
2748
+ padding: var(--lui-spacing-fixed-0);
2749
+ margin: var(--lui-spacing-fixed-0);
2750
+ }
2751
+ .breadcrumb li a {
2752
+ text-decoration: none;
2753
+ }
2754
+ .breadcrumb li::after {
2755
+ content: "/";
2756
+ margin: var(--lui-spacing-fixed-0) var(--lui-spacing-fixed-8);
2757
+ color: var(--lui-color-neutral-text-body);
2758
+ }
2759
+ .breadcrumb li:last-child {
2760
+ color: var(--lui-color-neutral-text-body);
2761
+ cursor: default;
2762
+ }
2763
+ .breadcrumb li:last-child::after {
2764
+ content: "";
2765
+ }
2766
+
2767
+ button.btn {
2768
+ position: relative;
2769
+ overflow: hidden;
2770
+ font-weight: var(--lui-typography-weight-regular);
2771
+ border: var(--lui-spacing-fixed-0);
2772
+ outline: var(--lui-spacing-fixed-0);
2773
+ background-color: transparent;
2774
+ transition: all 0.2s ease-in-out;
2775
+ z-index: 0;
2776
+ }
2777
+ button.btn::before {
2778
+ content: "";
2779
+ position: absolute;
2780
+ inset: 0;
2781
+ background-color: inherit;
2782
+ z-index: -1;
2783
+ transition: filter 0.2s ease-in-out;
2784
+ }
2785
+ button.btn:hover::before {
2786
+ filter: brightness(0.76);
2787
+ }
2788
+ button.btn:active {
2789
+ outline: var(--lui-border-width-2) solid transparent;
2790
+ outline-offset: var(--lui-border-width-2);
2791
+ }
2792
+ button.btn:active::before {
2793
+ filter: brightness(0.6);
2794
+ }
2795
+ button.btn:disabled {
2796
+ cursor: not-allowed;
2797
+ opacity: var(--lui-opacity-disabled);
2798
+ }
2799
+ button.btn:disabled::before {
2800
+ background-color: var(--lui-color-primary-background-container);
2801
+ filter: none;
2802
+ }
2803
+ button.btn--lg {
2804
+ padding: var(--lui-spacing-fluid-12) var(--lui-spacing-fluid-16);
2805
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2806
+ text-transform: var(--lui-typography-case-none);
2807
+ border-radius: var(--lui-border-radius-lg);
2808
+ }
2809
+ button.btn--md {
2810
+ padding: var(--lui-spacing-fluid-8) var(--lui-spacing-fluid-12);
2811
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-2xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2812
+ text-transform: var(--lui-typography-case-none);
2813
+ border-radius: var(--lui-border-radius-md);
2814
+ }
2815
+ button.btn--primary {
2816
+ color: var(--lui-color-neutral-text-inverse);
2817
+ }
2818
+ button.btn--primary::before {
2819
+ background-color: var(--lui-color-primary-background-container);
2820
+ }
2821
+ button.btn--primary:focus {
2822
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
2823
+ }
2824
+ button.btn--secondary {
2825
+ color: var(--lui-color-neutral-text-inverse);
2826
+ }
2827
+ button.btn--secondary::before {
2828
+ background-color: var(--lui-color-secondary-background-container);
2829
+ }
2830
+ button.btn--secondary:focus {
2831
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
2832
+ }
2833
+ button.btn--tertiary {
2834
+ color: var(--lui-color-neutral-text-inverse);
2835
+ }
2836
+ button.btn--tertiary::before {
2837
+ content: "";
2838
+ position: absolute;
2839
+ background-color: var(--lui-color-neutral-background-container);
2840
+ inset: 0;
2841
+ opacity: var(--lui-opacity-hidden);
2842
+ transition: opacity 0.2s;
2843
+ z-index: -1;
2844
+ }
2845
+ button.btn--tertiary:hover::before {
2846
+ opacity: 0.24;
2847
+ }
2848
+ button.btn--tertiary:active::before {
2849
+ opacity: 0.4;
2850
+ }
2851
+ button.btn--tertiary:focus {
2852
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
2853
+ }
2854
+ button.btn--danger {
2855
+ color: var(--lui-color-neutral-text-inverse);
2856
+ }
2857
+ button.btn--danger::before {
2858
+ background-color: var(--lui-color-danger-background-container);
2859
+ }
2860
+ button.btn--danger:focus {
2861
+ box-shadow: 0 0 0 3px rgba(238, 67, 67, 0.3);
2862
+ }
2863
+ button.btn--success {
2864
+ color: var(--lui-color-neutral-text-inverse);
2865
+ }
2866
+ button.btn--success::before {
2867
+ background-color: var(--lui-color-success-background-container);
2868
+ }
2869
+ button.btn--success:focus {
2870
+ box-shadow: 0 0 0 3px rgba(87, 238, 67, 0.3);
2871
+ }
2872
+
2873
+ .card {
2874
+ background-color: var(--lui-color-neutral-background-surface);
2875
+ border-radius: var(--lui-border-radius-lg);
2876
+ overflow: hidden;
2877
+ }
2878
+ .card__cover img {
2879
+ width: 100%;
2880
+ object-fit: cover;
2881
+ }
2882
+ .card__cover > img {
2883
+ max-height: 240px;
2884
+ }
2885
+ .card__body {
2886
+ padding: var(--lui-spacing-fixed-24);
2887
+ display: flex;
2888
+ flex-direction: column;
2889
+ gap: var(--lui-spacing-fixed-8);
2890
+ }
2891
+ .card__body > .card-actions {
2892
+ margin-top: var(--lui-spacing-fixed-16);
2893
+ display: flex;
2894
+ flex-direction: row-reverse;
2895
+ gap: var(--lui-spacing-fixed-16);
2896
+ }
2897
+ .card__border {
2898
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-stroke);
2899
+ }
2900
+
2901
+ .checkbox,
2902
+ input[type=checkbox] {
2903
+ display: flex;
2904
+ align-items: center;
2905
+ gap: var(--lui-spacing-fixed-8);
2906
+ cursor: pointer;
2907
+ user-select: none;
2908
+ margin: var(--lui-spacing-fixed-0);
2909
+ padding: var(--lui-spacing-fixed-0);
2910
+ }
2911
+
2912
+ .checkbox--lg input[type=checkbox] {
2913
+ width: var(--lui-spacing-fixed-24);
2914
+ height: var(--lui-spacing-fixed-24);
2915
+ }
2916
+ .checkbox--md input[type=checkbox] {
2917
+ width: var(--lui-spacing-fixed-16);
2918
+ height: var(--lui-spacing-fixed-16);
2919
+ }
2920
+ .checkbox input {
2921
+ appearance: none;
2922
+ background-color: var(--lui-color-neutral-background-surface);
2923
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-divisor);
2924
+ border-radius: var(--lui-border-radius-xs);
2925
+ display: inline-block;
2926
+ position: relative;
2927
+ transition: all 0.2s ease;
2928
+ }
2929
+ .checkbox input:checked {
2930
+ background-color: var(--lui-color-primary-background-container);
2931
+ border-color: var(--lui-color-primary-background-container);
2932
+ }
2933
+ .checkbox input:checked::after {
2934
+ content: "";
2935
+ position: absolute;
2936
+ width: 6px;
2937
+ height: 12px;
2938
+ border-right: 2px solid var(--lui-color-neutral-background-surface);
2939
+ border-bottom: 2px solid var(--lui-color-neutral-background-surface);
2940
+ top: 50%;
2941
+ left: 50%;
2942
+ transform: translate(-50%, -60%) rotate(45deg);
2943
+ }
2944
+ .checkbox input:focus {
2945
+ border: var(--lui-border-width-1) solid var(--lui-color-primary-background-container);
2946
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
2947
+ outline: none;
2948
+ }
2949
+ .checkbox input:not([aria-disabled=true]):not(.is-disabled):hover {
2950
+ filter: brightness(0.76);
2951
+ }
2952
+ .checkbox input:not([aria-disabled=true]):not(.is-disabled):active {
2953
+ filter: brightness(0.6);
2954
+ }
2955
+ .checkbox input:not([aria-disabled=true]):not(.is-disabled):focus, .checkbox input:not([aria-disabled=true]):not(.is-disabled):focus-visible {
2956
+ outline: 0;
2957
+ box-shadow: 0 0 0 3 lch(45.27% 113.1 310.44deg / 0.32);
2958
+ }
2959
+ .checkbox input:disabled, .checkbox input.is-disabled, .checkbox input[aria-disabled=true] {
2960
+ pointer-events: none;
2961
+ cursor: not-allowed;
2962
+ opacity: var(--lui-opacity-disabled);
2963
+ text-decoration: none;
2964
+ }
2965
+
2966
+ .form__group {
2967
+ display: flex;
2968
+ flex-direction: column;
2969
+ align-items: stretch;
2970
+ justify-content: flex-start;
2971
+ flex-wrap: nowrap;
2972
+ gap: var(--lui-spacing-fixed-8);
2973
+ }
2974
+ .form__lg label {
2975
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2976
+ text-transform: var(--lui-typography-case-none);
2977
+ }
2978
+ .form__lg input, .form__lg select {
2979
+ border-radius: var(--lui-border-radius-sm);
2980
+ padding: var(--lui-spacing-fluid-12);
2981
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2982
+ text-transform: var(--lui-typography-case-none);
2983
+ }
2984
+ .form__md label {
2985
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-2xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2986
+ text-transform: var(--lui-typography-case-none);
2987
+ }
2988
+ .form__md input, .form__md select {
2989
+ border-radius: var(--lui-border-radius-xs);
2990
+ padding: var(--lui-spacing-fixed-8);
2991
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-2xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
2992
+ text-transform: var(--lui-typography-case-none);
2993
+ }
2994
+
2995
+ label {
2996
+ color: var(--lui-color-neutral-text-heading);
2997
+ }
2998
+
2999
+ input[type=color], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url] {
3000
+ color: var(--lui-color-neutral-text-body);
3001
+ background-color: var(--lui-color-neutral-background-surface);
3002
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-divisor);
3003
+ transition: all 0.2s ease-in-out;
3004
+ line-height: 1;
3005
+ box-sizing: border-box;
3006
+ }
3007
+ input[type=color]:hover, input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=time]:hover, input[type=url]:hover {
3008
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-stroke);
3009
+ }
3010
+ input[type=color]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus {
3011
+ border: var(--lui-border-width-1) solid var(--lui-color-primary-background-container);
3012
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
3013
+ outline: none;
3014
+ }
3015
+
3016
+ .icon-button {
3017
+ position: relative;
3018
+ overflow: hidden;
3019
+ display: flex;
3020
+ align-content: center;
3021
+ align-items: center;
3022
+ background: transparent;
3023
+ border: none;
3024
+ border-radius: var(--lui-border-radius-md);
3025
+ place-self: start;
3026
+ text-decoration: none;
3027
+ transition: all 0.2s ease-in-out;
3028
+ z-index: 0;
3029
+ background-color: var(--lui-color-neutral-background-surface);
3030
+ }
3031
+ .icon-button i::before {
3032
+ color: var(--lui-color-neutral-icon-default);
3033
+ }
3034
+ .icon-button::before {
3035
+ content: "";
3036
+ position: absolute;
3037
+ inset: 0;
3038
+ opacity: var(--lui-opacity-hidden);
3039
+ transition: opacity 0.2s;
3040
+ z-index: -1;
3041
+ }
3042
+ .icon-button--lg {
3043
+ max-width: var(--lui-spacing-fixed-40) !important;
3044
+ max-height: var(--lui-spacing-fixed-40) !important;
3045
+ padding: var(--lui-spacing-fixed-8) !important;
3046
+ }
3047
+ .icon-button--lg > i {
3048
+ font-size: 1.5rem;
3049
+ }
3050
+ .icon-button--md {
3051
+ max-width: var(--lui-spacing-fixed-32) !important;
3052
+ max-height: var(--lui-spacing-fixed-32) !important;
3053
+ padding: var(--lui-spacing-fixed-8) !important;
3054
+ }
3055
+ .icon-button--md > i {
3056
+ font-size: 1rem;
3057
+ }
3058
+ .icon-button:active:not(:disabled)::before, .icon-button:focus {
3059
+ border-radius: var(--lui-border-radius-lg);
3060
+ }
3061
+ .icon-button:not([aria-disabled=true]):not(.is-disabled):hover {
3062
+ filter: brightness(0.76);
3063
+ }
3064
+ .icon-button:not([aria-disabled=true]):not(.is-disabled):active {
3065
+ filter: brightness(0.6);
3066
+ }
3067
+ .icon-button:not([aria-disabled=true]):not(.is-disabled):focus, .icon-button:not([aria-disabled=true]):not(.is-disabled):focus-visible {
3068
+ outline: 0;
3069
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
3070
+ }
3071
+ .icon-button:disabled, .icon-button.is-disabled, .icon-button[aria-disabled=true] {
3072
+ pointer-events: none;
3073
+ cursor: not-allowed;
3074
+ opacity: var(--lui-opacity-disabled);
3075
+ text-decoration: none;
3076
+ }
3077
+
3078
+ .image {
3079
+ max-width: 100%;
3080
+ overflow: hidden;
3081
+ }
3082
+ .image img {
3083
+ width: 100%;
3084
+ height: 100%;
3085
+ object-fit: cover;
3086
+ }
3087
+ .image--contain img {
3088
+ object-fit: contain;
3089
+ }
3090
+ .image--1-1 {
3091
+ aspect-ratio: 1;
3092
+ }
3093
+ .image--16-9 {
3094
+ aspect-ratio: 1.7777777778;
3095
+ }
3096
+ .image--4-3 {
3097
+ aspect-ratio: 1.3333333333;
3098
+ }
3099
+ .image--3-2 {
3100
+ aspect-ratio: 1.5;
3101
+ }
3102
+ .image--21-9 {
3103
+ aspect-ratio: 2.3333333333;
3104
+ }
3105
+
3106
+ a.link {
3107
+ color: var(--lui-color-link-default);
3108
+ transition: filter 0.3s ease;
3109
+ }
3110
+ a.link:not([aria-disabled=true]):not(.is-disabled):hover {
3111
+ filter: brightness(0.76);
3112
+ }
3113
+ a.link:not([aria-disabled=true]):not(.is-disabled):active {
3114
+ filter: brightness(0.6);
3115
+ }
3116
+ a.link:not([aria-disabled=true]):not(.is-disabled):focus, a.link:not([aria-disabled=true]):not(.is-disabled):focus-visible {
3117
+ outline: 0;
3118
+ box-shadow: 0 0 0 2px var(--lui-color-primary-border-stroke);
3119
+ }
3120
+ a.link:disabled, a.link.is-disabled, a.link[aria-disabled=true] {
3121
+ pointer-events: none;
3122
+ cursor: not-allowed;
3123
+ opacity: var(--lui-opacity-disabled);
3124
+ text-decoration: none;
3125
+ }
3126
+
3127
+ .modal {
3128
+ display: flex;
3129
+ flex-direction: column;
3130
+ position: relative;
3131
+ z-index: 1050;
3132
+ background-color: var(--lui-color-neutral-background-surface);
3133
+ width: 100%;
3134
+ margin: var(--lui-spacing-fluid-16);
3135
+ box-shadow: var(--lui-elevation-overlay);
3136
+ border-radius: var(--lui-border-radius-lg);
3137
+ outline: 0;
3138
+ overflow: hidden;
3139
+ transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
3140
+ }
3141
+ .modal--md {
3142
+ max-width: 480px;
3143
+ }
3144
+ .modal--lg {
3145
+ max-width: 640px;
3146
+ }
3147
+ .modal--sm {
3148
+ max-width: 320px;
3149
+ }
3150
+ .modal__header {
3151
+ display: flex;
3152
+ align-items: center;
3153
+ justify-content: space-between;
3154
+ padding: var(--lui-spacing-fluid-24);
3155
+ font: var(--lui-typography-weight-medium) var(--lui-brand-typography-font-size-md)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
3156
+ text-transform: var(--lui-typography-case-none);
3157
+ color: var(--lui-color-neutral-text-heading);
3158
+ }
3159
+ .modal__body {
3160
+ position: relative;
3161
+ flex: 1 1 auto;
3162
+ padding: var(--lui-spacing-fluid-24);
3163
+ padding-top: 0;
3164
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3165
+ text-transform: var(--lui-typography-case-none);
3166
+ color: var(--lui-color-neutral-text-body);
3167
+ }
3168
+ .modal__footer {
3169
+ display: flex;
3170
+ padding: var(--lui-spacing-fixed-0) var(--lui-spacing-fluid-24) var(--lui-spacing-fluid-24);
3171
+ gap: var(--lui-spacing-fluid-16);
3172
+ }
3173
+ .modal__footer button {
3174
+ flex: 1;
3175
+ }
3176
+
3177
+ @media (width <= 1279px) {
3178
+ .navbar {
3179
+ display: none;
3180
+ }
3181
+ }
3182
+ .navbar {
3183
+ position: fixed;
3184
+ top: var(--lui-spacing-fixed-0);
3185
+ width: 280px;
3186
+ min-width: 280px;
3187
+ max-width: 280px;
3188
+ height: 100vh;
3189
+ line-height: 1.5rem;
3190
+ overflow-y: auto;
3191
+ border-right: 1px solid var(--lui-color-neutral-border-stroke);
3192
+ grid-area: sidebar;
3193
+ }
3194
+ .navbar img {
3195
+ padding: var(--lui-spacing-fixed-16) var(--lui-spacing-fixed-16) var(--lui-spacing-fixed-0);
3196
+ }
3197
+ .navbar h6 {
3198
+ color: var(--lui-color-neutral-text-heading);
3199
+ font: var(--lui-typography-weight-medium) var(--lui-brand-typography-font-size-3xs)/var(--lui-brand-typography-line-height-heading) var(--lui-brand-typography-font-family-heading);
3200
+ text-transform: var(--lui-typography-case-uppercase);
3201
+ }
3202
+ .navbar a {
3203
+ color: var(--lui-color-neutral-text-body);
3204
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3205
+ text-transform: var(--lui-typography-case-none);
3206
+ text-decoration: none;
3207
+ }
3208
+ .navbar-section {
3209
+ padding: var(--lui-spacing-fixed-16);
3210
+ }
3211
+ .navbar-section h6 {
3212
+ margin-bottom: var(--lui-spacing-fixed-8);
3213
+ }
3214
+ .navbar-section ul {
3215
+ gap: var(--lui-spacing-fixed-24);
3216
+ }
3217
+ .navbar-section ul li {
3218
+ display: flex;
3219
+ }
3220
+ .navbar-section a {
3221
+ position: relative;
3222
+ background-color: var(--lui-color-neutral-background-surface);
3223
+ padding: var(--lui-spacing-fixed-16);
3224
+ border-radius: var(--lui-border-radius-md);
3225
+ transition: all 0.1s ease-in-out;
3226
+ width: 100%;
3227
+ }
3228
+ .navbar-section a::before {
3229
+ content: "";
3230
+ position: absolute;
3231
+ border-radius: var(--lui-border-radius-md);
3232
+ inset: 0;
3233
+ opacity: 0;
3234
+ transition: opacity 0.2s;
3235
+ z-index: -1;
3236
+ }
3237
+ .navbar-section a:hover {
3238
+ filter: brightness(0.76);
3239
+ }
3240
+ .navbar-section a:active {
3241
+ filter: brightness(0.6);
3242
+ }
3243
+
3244
+ .menu-active {
3245
+ border-radius: var(--lui-border-radius-md);
3246
+ padding: var(--lui-spacing-fixed-16);
3247
+ background-color: #8733ff;
3248
+ color: var(--lui-color-neutral-text-inverse);
3249
+ cursor: default;
3250
+ }
3251
+
3252
+ select {
3253
+ color: var(--lui-color-neutral-text-heading);
3254
+ background-color: var(--lui-color-neutral-background-surface);
3255
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-divisor);
3256
+ transition: all 0.2s ease-in-out;
3257
+ line-height: normal !important;
3258
+ box-sizing: border-box;
3259
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2019.5858L7.70711%2011.2929L6.29289%2012.7071L16%2022.4142L25.7071%2012.7071L24.2929%2011.2929L16%2019.5858Z%22%20fill%3D%22%23131519%22/%3E%3C/svg%3E");
3260
+ background-repeat: no-repeat;
3261
+ background-size: 1.25rem;
3262
+ appearance: none;
3263
+ }
3264
+ select:hover {
3265
+ border: var(--lui-border-width-1) solid var(--lui-color-neutral-border-stroke);
3266
+ }
3267
+ select:focus {
3268
+ border: var(--lui-border-width-1) solid var(--lui-color-primary-border-stroke);
3269
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
3270
+ outline: none;
3271
+ }
3272
+ select:disabled, select.disabled, select[aria-disabled=true] {
3273
+ pointer-events: none;
3274
+ cursor: not-allowed;
3275
+ opacity: var(--lui-opacity-disabled);
3276
+ text-decoration: none;
3277
+ }
3278
+
3279
+ .form__lg select {
3280
+ background-position: right var(--lui-spacing-fluid-12) center;
3281
+ }
3282
+
3283
+ .form__md select {
3284
+ background-position: right var(--lui-spacing-fixed-8) center;
3285
+ }
3286
+
3287
+ .tag-sm,
3288
+ .tag-md,
3289
+ .tag-lg {
3290
+ width: fit-content;
3291
+ line-height: var(--lui-brand-typography-line-height-body);
3292
+ display: inline-flex;
3293
+ align-items: center;
3294
+ gap: var(--lui-spacing-fluid-4);
3295
+ }
3296
+
3297
+ .tag--sm {
3298
+ padding: var(--lui-spacing-fluid-2) var(--lui-spacing-fluid-8);
3299
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-3xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3300
+ text-transform: var(--lui-typography-case-none);
3301
+ border-radius: var(--lui-border-radius-sm);
3302
+ }
3303
+ .tag--md {
3304
+ padding: var(--lui-spacing-fluid-4) var(--lui-spacing-fluid-8);
3305
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-2xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3306
+ text-transform: var(--lui-typography-case-none);
3307
+ border-radius: var(--lui-border-radius-md);
3308
+ }
3309
+ .tag--lg {
3310
+ padding: var(--lui-spacing-fluid-8) var(--lui-spacing-fluid-12);
3311
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3312
+ text-transform: var(--lui-typography-case-none);
3313
+ border-radius: var(--lui-border-radius-lg);
3314
+ }
3315
+ .tag--circle {
3316
+ border-radius: var(--lui-border-radius-circle) !important;
3317
+ }
3318
+
3319
+ .tag--surface-primary {
3320
+ display: inline-flex;
3321
+ color: var(--lui-color-neutral-text-body);
3322
+ background: var(--lui-color-primary-background-surface);
3323
+ }
3324
+
3325
+ .tag--surface-caution {
3326
+ display: inline-flex;
3327
+ color: var(--lui-color-neutral-text-body);
3328
+ background: var(--lui-color-caution-background-surface);
3329
+ }
3330
+
3331
+ .tag--surface-danger {
3332
+ display: inline-flex;
3333
+ color: var(--lui-color-neutral-text-body);
3334
+ background: var(--lui-color-danger-background-surface);
3335
+ }
3336
+
3337
+ .tag--surface-success {
3338
+ display: inline-flex;
3339
+ color: var(--lui-color-neutral-text-body);
3340
+ background: var(--lui-color-success-background-surface);
3341
+ }
3342
+
3343
+ .tag--surface-neutral {
3344
+ display: inline-flex;
3345
+ color: var(--lui-color-neutral-text-body);
3346
+ background: var(--lui-color-neutral-background-surface);
3347
+ }
3348
+
3349
+ .tag--container-primary {
3350
+ display: inline-flex;
3351
+ color: var(--lui-color-neutral-text-inverse);
3352
+ background: var(--lui-color-primary-background-container);
3353
+ }
3354
+
3355
+ .tag--container-caution {
3356
+ display: inline-flex;
3357
+ color: var(--lui-color-neutral-text-inverse);
3358
+ background: var(--lui-color-caution-background-container);
3359
+ }
3360
+
3361
+ .tag--container-danger {
3362
+ display: inline-flex;
3363
+ color: var(--lui-color-neutral-text-inverse);
3364
+ background: var(--lui-color-danger-background-container);
3365
+ }
3366
+
3367
+ .tag--container-success {
3368
+ display: inline-flex;
3369
+ color: var(--lui-color-neutral-text-inverse);
3370
+ background: var(--lui-color-success-background-container);
3371
+ }
3372
+
3373
+ .tag--container-neutral {
3374
+ display: inline-flex;
3375
+ color: var(--lui-color-neutral-text-body);
3376
+ background: var(--lui-color-neutral-background-container);
3377
+ }
3378
+
3379
+ .tooltip {
3380
+ position: relative;
3381
+ display: inline-block;
3382
+ background: var(--lui-color-neutral-background-overlay);
3383
+ color: var(--lui-color-neutral-text-inverse);
3384
+ padding: var(--lui-spacing-fluid-2) var(--lui-spacing-fixed-8);
3385
+ border-radius: var(--lui-border-radius-xs);
3386
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-3xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3387
+ text-transform: var(--lui-typography-case-none);
3388
+ white-space: nowrap;
3389
+ }
3390
+ .tooltip::after {
3391
+ content: "";
3392
+ position: absolute;
3393
+ width: var(--lui-spacing-fixed-0);
3394
+ height: var(--lui-spacing-fixed-0);
3395
+ border-style: solid;
3396
+ }
3397
+ .tooltip--top::after {
3398
+ bottom: 100%;
3399
+ left: 50%;
3400
+ transform: translateX(-50%);
3401
+ border-width: 4px;
3402
+ border-color: transparent transparent var(--lui-color-neutral-background-overlay);
3403
+ }
3404
+ .tooltip--bottom::after {
3405
+ top: 100%;
3406
+ left: 50%;
3407
+ transform: translateX(-50%);
3408
+ border-width: 4px;
3409
+ border-color: var(--lui-color-neutral-background-overlay) transparent transparent transparent;
3410
+ }
3411
+ .tooltip--left::after {
3412
+ right: 100%;
3413
+ top: 50%;
3414
+ transform: translateY(-50%);
3415
+ border-width: 4px;
3416
+ border-color: transparent var(--lui-color-neutral-background-overlay) transparent transparent;
3417
+ }
3418
+ .tooltip--right::after {
3419
+ left: 100%;
3420
+ top: 50%;
3421
+ transform: translateY(-50%);
3422
+ border-width: 4px;
3423
+ border-color: transparent transparent transparent var(--lui-color-neutral-background-overlay);
3424
+ }
3425
+
3426
+ .tabs {
3427
+ display: flex;
3428
+ flex-direction: row;
3429
+ align-items: center;
3430
+ justify-content: flex-start;
3431
+ flex-wrap: nowrap;
3432
+ gap: var(--lui-spacing-fluid-32);
3433
+ position: relative;
3434
+ width: 100%;
3435
+ border-bottom: var(--lui-border-width-1) solid var(--lui-color-neutral-border-divisor);
3436
+ }
3437
+ .tabs--expand .tabs__item {
3438
+ flex: 1;
3439
+ }
3440
+
3441
+ .tabs__item {
3442
+ position: relative;
3443
+ display: flex;
3444
+ align-items: center;
3445
+ justify-content: center;
3446
+ appearance: none;
3447
+ background: transparent;
3448
+ border: none;
3449
+ border-bottom: var(--lui-border-width-2) solid transparent;
3450
+ cursor: pointer;
3451
+ padding: var(--lui-spacing-fluid-8) var(--lui-spacing-fluid-12);
3452
+ margin-bottom: -1px;
3453
+ color: var(--lui-color-neutral-text-body);
3454
+ transition: all 0.2s ease-in-out;
3455
+ z-index: 0;
3456
+ vertical-align: middle;
3457
+ font: var(--lui-typography-weight-regular) var(--lui-brand-typography-font-size-1xs)/var(--lui-brand-typography-line-height-body) var(--lui-brand-typography-font-family-body);
3458
+ text-transform: var(--lui-typography-case-none);
3459
+ }
3460
+ .tabs__item::before {
3461
+ content: "";
3462
+ position: absolute;
3463
+ inset: 0;
3464
+ z-index: -1;
3465
+ background-color: var(--lui-color-neutral-background-surface);
3466
+ background-color: var(--lui-color-neutral-background-container);
3467
+ border-radius: var(--lui-border-radius-lg);
3468
+ opacity: 0;
3469
+ transition: opacity 0.2s, filter 0.2s;
3470
+ }
3471
+ .tabs__item:hover::before {
3472
+ opacity: 0.24;
3473
+ }
3474
+ .tabs__item:active::before {
3475
+ opacity: 0.4;
3476
+ }
3477
+ .tabs__item--selected {
3478
+ color: var(--lui-brand-color-primary-4);
3479
+ border-bottom-color: var(--lui-brand-color-primary-4);
3480
+ z-index: 1;
3481
+ }
3482
+ .tabs__item:focus-visible {
3483
+ outline: var(--lui-border-width-2) solid var(--lui-color-neutral-border-stroke);
3484
+ outline-offset: 2px;
3485
+ }
3486
+
3487
+ .switch,
3488
+ input[type=checkbox].switch-input {
3489
+ display: flex;
3490
+ align-items: center;
3491
+ gap: var(--lui-spacing-fixed-8);
3492
+ cursor: pointer;
3493
+ user-select: none;
3494
+ margin: var(--lui-spacing-fixed-0);
3495
+ padding: var(--lui-spacing-fixed-0);
3496
+ }
3497
+
3498
+ .switch--lg input[type=checkbox] {
3499
+ width: var(--lui-spacing-fluid-48);
3500
+ height: var(--lui-spacing-fixed-24);
3501
+ border-radius: var(--lui-border-radius-circle);
3502
+ }
3503
+ .switch--lg input[type=checkbox]::after {
3504
+ width: var(--lui-spacing-fluid-20);
3505
+ height: var(--lui-spacing-fluid-20);
3506
+ top: var(--lui-spacing-fluid-2);
3507
+ left: var(--lui-spacing-fluid-2);
3508
+ }
3509
+ .switch--lg input[type=checkbox]:checked::after {
3510
+ transform: translateX(calc(var(--lui-spacing-fluid-48) - var(--lui-spacing-fluid-20) - var(--lui-spacing-fluid-2) * 2));
3511
+ }
3512
+ .switch--md input[type=checkbox] {
3513
+ width: var(--lui-spacing-fixed-32);
3514
+ height: var(--lui-spacing-fixed-16);
3515
+ border-radius: var(--lui-border-radius-circle);
3516
+ }
3517
+ .switch--md input[type=checkbox]::after {
3518
+ width: var(--lui-spacing-fluid-12);
3519
+ height: var(--lui-spacing-fluid-12);
3520
+ top: var(--lui-spacing-fluid-2);
3521
+ left: var(--lui-spacing-fluid-2);
3522
+ }
3523
+ .switch--md input[type=checkbox]:checked::after {
3524
+ transform: translateX(calc(var(--lui-spacing-fixed-32) - var(--lui-spacing-fluid-12) - var(--lui-spacing-fluid-2) * 2));
3525
+ }
3526
+ .switch input[type=checkbox] {
3527
+ appearance: none;
3528
+ -webkit-appearance: none;
3529
+ background-color: var(--lui-color-neutral-background-container);
3530
+ border: none;
3531
+ display: inline-block;
3532
+ position: relative;
3533
+ transition: background-color 0.2s ease, border-color 0.2s ease;
3534
+ }
3535
+ .switch input[type=checkbox]::after {
3536
+ content: "";
3537
+ position: absolute;
3538
+ background-color: var(--lui-color-neutral-background-surface);
3539
+ border-radius: var(--lui-border-radius-circle);
3540
+ box-shadow: var(--lui-elevation-base);
3541
+ transition: transform 0.2s ease;
3542
+ }
3543
+ .switch input[type=checkbox]:checked {
3544
+ background-color: var(--lui-color-primary-background-container);
3545
+ }
3546
+ .switch input[type=checkbox]:checked::after {
3547
+ background-color: var(--lui-color-neutral-background-surface);
3548
+ }
3549
+ .switch input[type=checkbox]:focus-visible {
3550
+ outline: none;
3551
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
3552
+ }
3553
+ .switch input[type=checkbox][disabled] {
3554
+ opacity: var(--lui-opacity-disabled);
3555
+ cursor: not-allowed;
3556
+ }
3557
+ .switch input[type=checkbox]:focus {
3558
+ box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 0.32);
3559
+ outline: none;
3560
+ }
3561
+ .switch:not([aria-disabled=true]):not(.is-disabled):hover {
3562
+ filter: brightness(0.76);
3563
+ }
3564
+ .switch:not([aria-disabled=true]):not(.is-disabled):active {
3565
+ filter: brightness(0.6);
3566
+ }
3567
+ .switch:not([aria-disabled=true]):not(.is-disabled):focus, .switch:not([aria-disabled=true]):not(.is-disabled):focus-visible {
3568
+ outline: 0;
3569
+ box-shadow: 0 0 0 3 lch(45.27% 113.1 310.44deg / 0.32);
3570
+ }
3571
+ .switch:disabled, .switch.is-disabled, .switch[aria-disabled=true] {
3572
+ pointer-events: none;
3573
+ cursor: not-allowed;
3574
+ opacity: var(--lui-opacity-disabled);
3575
+ text-decoration: none;
3576
+ }
3577
+
3578
+ .flex {
3579
+ display: flex;
3580
+ }
3581
+
3582
+ .inline-flex {
3583
+ display: inline-flex;
3584
+ }
3585
+
3586
+ .flex-row {
3587
+ flex-direction: row;
3588
+ }
3589
+
3590
+ .flex-row-reverse {
3591
+ flex-direction: row-reverse;
3592
+ }
3593
+
3594
+ .flex-col {
3595
+ flex-direction: column;
3596
+ }
3597
+
3598
+ .flex-col-reverse {
3599
+ flex-direction: column-reverse;
3600
+ }
3601
+
3602
+ .flex-wrap {
3603
+ flex-wrap: wrap;
3604
+ }
3605
+
3606
+ .flex-nowrap {
3607
+ flex-wrap: nowrap;
3608
+ }
3609
+
3610
+ .flex-wrap-reverse {
3611
+ flex-wrap: wrap-reverse;
3612
+ }
3613
+
3614
+ .justify-start {
3615
+ justify-content: flex-start;
3616
+ }
3617
+
3618
+ .justify-center {
3619
+ justify-content: center;
3620
+ }
3621
+
3622
+ .justify-end {
3623
+ justify-content: flex-end;
3624
+ }
3625
+
3626
+ .justify-between {
3627
+ justify-content: space-between;
3628
+ }
3629
+
3630
+ .justify-around {
3631
+ justify-content: space-around;
3632
+ }
3633
+
3634
+ .justify-evenly {
3635
+ justify-content: space-evenly;
3636
+ }
3637
+
3638
+ .items-start {
3639
+ align-items: flex-start;
3640
+ }
3641
+
3642
+ .items-center {
3643
+ align-items: center;
3644
+ }
3645
+
3646
+ .items-end {
3647
+ align-items: flex-end;
3648
+ }
3649
+
3650
+ .items-stretch {
3651
+ align-items: stretch;
3652
+ }
3653
+
3654
+ .items-baseline {
3655
+ align-items: baseline;
3656
+ }
3657
+
3658
+ .content-start {
3659
+ align-content: flex-start;
3660
+ }
3661
+
3662
+ .content-center {
3663
+ align-content: center;
3664
+ }
3665
+
3666
+ .content-end {
3667
+ align-content: flex-end;
3668
+ }
3669
+
3670
+ .content-between {
3671
+ align-content: space-between;
3672
+ }
3673
+
3674
+ .content-around {
3675
+ align-content: space-around;
3676
+ }
3677
+
3678
+ .self-start {
3679
+ align-self: flex-start;
3680
+ }
3681
+
3682
+ .self-center {
3683
+ align-self: center;
3684
+ }
3685
+
3686
+ .self-end {
3687
+ align-self: flex-end;
3688
+ }
3689
+
3690
+ .self-stretch {
3691
+ align-self: stretch;
3692
+ }
3693
+
3694
+ .flex-grow-0 {
3695
+ flex-grow: 0;
3696
+ }
3697
+
3698
+ .flex-grow-1 {
3699
+ flex-grow: 1;
3700
+ }
3701
+
3702
+ .flex-shrink-0 {
3703
+ flex-shrink: 0;
3704
+ }
3705
+
3706
+ .flex-shrink-1 {
3707
+ flex-shrink: 1;
3708
+ }
3709
+
3710
+ html, body, div, span, applet, object, iframe,
3711
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3712
+ a, abbr, acronym, address, big, cite, code,
3713
+ del, dfn, em, img, ins, kbd, q, s, samp,
3714
+ small, strike, strong, sub, sup, tt, var,
3715
+ b, u, i, center,
3716
+ dl, dt, dd, ol, ul, li,
3717
+ fieldset, form, label, legend,
3718
+ table, caption, tbody, tfoot, thead, tr, th, td,
3719
+ article, aside, canvas, details, embed,
3720
+ figure, figcaption, footer, header, hgroup,
3721
+ menu, nav, output, ruby, section, summary,
3722
+ time, mark, audio, video {
3723
+ margin: var(--lui-spacing-fixed-0);
3724
+ padding: var(--lui-spacing-fixed-0);
3725
+ border: var(--lui-spacing-fixed-0);
3726
+ font-family: var(--lui-brand-typography-font-family-body);
3727
+ vertical-align: baseline;
3728
+ }
3729
+
3730
+ /* HTML5 display-role reset for older browsers */
3731
+ article, aside, details, figcaption, figure,
3732
+ footer, header, hgroup, menu, nav, section {
3733
+ display: block;
3734
+ }
3735
+
3736
+ blockquote, q {
3737
+ quotes: none;
3738
+ }
3739
+
3740
+ blockquote:before, blockquote:after,
3741
+ q:before, q:after {
3742
+ content: "";
3743
+ content: none;
3744
+ }
3745
+
3746
+ table {
3747
+ border-collapse: collapse;
3748
+ border-spacing: var(--lui-spacing-fixed-0);
3749
+ }
3750
+
3751
+ /*# sourceMappingURL=letsui.css.map */