tide-design-system 2.4.0 → 2.4.2

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 (42) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/tide-design-system.cjs +2 -2
  3. package/dist/tide-design-system.esm.d.ts +17 -17
  4. package/dist/tide-design-system.esm.js +8 -8
  5. package/netlify.toml +3 -0
  6. package/package.json +5 -3
  7. package/src/components/TideCard.vue +1 -1
  8. package/src/components/TideChipAction.vue +1 -1
  9. package/src/components/TideImage.vue +1 -1
  10. package/src/components/TideImageBackground.vue +2 -2
  11. package/src/components/TideInputCheckboxDeprecated.vue +2 -2
  12. package/src/components/TideInputRadioDeprecated.vue +2 -2
  13. package/src/components/TideInputTextDeprecated.vue +2 -2
  14. package/src/stories/FoundationsBorder.stories.ts +25 -13
  15. package/src/stories/FoundationsTypography.stories.ts +24 -0
  16. package/src/types/Storybook.ts +10 -0
  17. package/vite.config.sandbox.ts +29 -0
  18. package/dist/css/fonts.css +0 -36
  19. package/dist/css/grid-layout.css +0 -34
  20. package/dist/css/main.css +0 -5
  21. package/dist/css/realm/aero.css +0 -25
  22. package/dist/css/realm/atv.css +0 -25
  23. package/dist/css/realm/boatmart.css +0 -25
  24. package/dist/css/realm/cycle.css +0 -24
  25. package/dist/css/realm/equipment.css +0 -25
  26. package/dist/css/realm/pwc.css +0 -25
  27. package/dist/css/realm/rv.css +0 -25
  28. package/dist/css/realm/snow.css +0 -25
  29. package/dist/css/realm/truck.css +0 -25
  30. package/dist/css/reset.css +0 -95
  31. package/dist/css/storybook.css +0 -17
  32. package/dist/css/utilities-base.css +0 -545
  33. package/dist/css/utilities-responsive.css +0 -2737
  34. package/dist/css/utilities.css +0 -16
  35. package/dist/css/variables.css +0 -205
  36. package/dist/utilities/event.ts +0 -4
  37. package/dist/utilities/format.ts +0 -184
  38. package/dist/utilities/forms.ts +0 -22
  39. package/dist/utilities/storybook.ts +0 -352
  40. package/dist/utilities/validation-deprecated.ts +0 -252
  41. package/dist/utilities/validation.ts +0 -132
  42. package/dist/utilities/viewport.ts +0 -63
@@ -1,2737 +0,0 @@
1
- /* Reusable CSS Utility Library */
2
- /* Position */
3
- .tide-position-absolute {position: absolute;}
4
- .tide-position-fixed {position: fixed;}
5
- .tide-position-relative {position: relative;}
6
- .tide-position-static {position: static;}
7
- .tide-position-sticky {position: sticky;}
8
-
9
- .tide-top-0 {top: 0;}
10
- .tide-right-0 {right: 0;}
11
- .tide-bottom-0 {bottom: 0;}
12
- .tide-left-0 {left: 0;}
13
-
14
- /* Display */
15
- .tide-display-block {display: block;}
16
- .tide-display-contents {display: contents;}
17
- .tide-display-flex {display: flex;}
18
- .tide-display-grid {display: grid;}
19
- .tide-display-initial {display: initial;}
20
- .tide-display-inline {display: inline;}
21
- .tide-display-inline-block {display: inline-block;}
22
- .tide-display-inline-flex {display: inline-flex;}
23
- .tide-display-none {display: none;}
24
-
25
- /* Flex Box */
26
- .tide-flex-column {flex-direction: column;}
27
- .tide-flex-column-reverse {flex-direction: column-reverse;}
28
- .tide-flex-row {flex-direction: row;}
29
- .tide-flex-row-reverse {flex-direction: row-reverse;}
30
-
31
- .tide-grow {flex-grow: 1;}
32
- .tide-grow-none {flex-grow: 0;}
33
-
34
- .tide-shrink {flex-shrink: 1;}
35
- .tide-shrink-none {flex-shrink: 0;}
36
-
37
- .tide-flex-wrap {flex-wrap: wrap;}
38
-
39
- .tide-axis1-around {justify-content: space-around;}
40
- .tide-axis1-between {justify-content: space-between;}
41
- .tide-axis1-center {justify-content: center;}
42
- .tide-axis1-end {justify-content: end;}
43
- .tide-axis1-start {justify-content: start;}
44
-
45
- .tide-axis2-around {align-items: space-around;}
46
- .tide-axis2-center {align-items: center;}
47
- .tide-axis2-end {align-items: flex-end;}
48
- .tide-axis2-start {align-items: flex-start;}
49
- .tide-axis2-stretch {align-items: stretch;}
50
-
51
- .tide-gap-0 {gap: 0;}
52
- .tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
53
- .tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
54
- .tide-gap-1 {gap: var(--tide-spacing-1);}
55
- .tide-gap-2 {gap: var(--tide-spacing-2);}
56
- .tide-gap-4 {gap: var(--tide-spacing-4);}
57
-
58
- .tide-flex-basis-auto {flex-basis: auto;}
59
- .tide-flex-basis-0 {flex-basis: 0;}
60
-
61
- /* Box Sizing */
62
- .tide-box-border {box-sizing: border-box;}
63
- .tide-box-content {box-sizing: content-box;}
64
-
65
- /* Margin */
66
- .tide-margin-0 {margin: 0;}
67
- .tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
68
- .tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
69
- .tide-margin-1 {margin: var(--tide-spacing-1);}
70
- .tide-margin-2 {margin: var(--tide-spacing-2);}
71
- .tide-margin-4 {margin: var(--tide-spacing-4);}
72
- .tide-margin-auto {margin: auto;}
73
-
74
- .tide-margin-x-0 {margin-left: 0; margin-right: 0;}
75
- .tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
76
- .tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
77
- .tide-margin-x-1 {margin-left: var(--tide-spacing-1); margin-right: var(--tide-spacing-1);}
78
- .tide-margin-x-2 {margin-left: var(--tide-spacing-2); margin-right: var(--tide-spacing-2);}
79
- .tide-margin-x-4 {margin-left: var(--tide-spacing-4); margin-right: var(--tide-spacing-4);}
80
- .tide-margin-x-auto {margin-left: auto; margin-right: auto;}
81
-
82
- .tide-margin-y-0 {margin-top: 0; margin-bottom: 0;}
83
- .tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
84
- .tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
85
- .tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
86
- .tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
87
- .tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
88
- .tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
89
-
90
- .tide-margin-top-0 {margin-top: 0;}
91
- .tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
92
- .tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
93
- .tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
94
- .tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
95
- .tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
96
- .tide-margin-top-auto {margin-top: auto;}
97
-
98
- .tide-margin-right-0 {margin-right: 0;}
99
- .tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
100
- .tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
101
- .tide-margin-right-1 {margin-right: var(--tide-spacing-1);}
102
- .tide-margin-right-2 {margin-right: var(--tide-spacing-2);}
103
- .tide-margin-right-4 {margin-right: var(--tide-spacing-4);}
104
- .tide-margin-right-auto {margin-right: auto;}
105
-
106
- .tide-margin-bottom-0 {margin-bottom: 0;}
107
- .tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
108
- .tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
109
- .tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
110
- .tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
111
- .tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
112
- .tide-margin-bottom-auto {margin-bottom: auto;}
113
-
114
- .tide-margin-left-0 {margin-left: 0;}
115
- .tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
116
- .tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
117
- .tide-margin-left-1 {margin-left: var(--tide-spacing-1);}
118
- .tide-margin-left-2 {margin-left: var(--tide-spacing-2);}
119
- .tide-margin-left-4 {margin-left: var(--tide-spacing-4);}
120
- .tide-margin-left-auto {margin-left: auto;}
121
-
122
- /* Border Color */
123
- .tide-border-color-initial {border-color: initial;}
124
-
125
- .tide-border-primary {border-color: var(--tide-primary);}
126
-
127
- .tide-border {border-color: var(--tide-border);}
128
- .tide-border-low {border-color: var(--tide-border-low);}
129
- .tide-border-high {border-color: var(--tide-border-high);}
130
- .tide-border-floating {border-color: var(--tide-border-floating);}
131
-
132
- .tide-border-error {border-color: var(--tide-error-border);}
133
- .tide-border-info {border-color: var(--tide-info-border);}
134
- .tide-border-success {border-color: var(--tide-success-border);}
135
- .tide-border-warning {border-color: var(--tide-warning-border);}
136
-
137
- .tide-border-blue {border-color: var(--tide-blue-border);}
138
- .tide-border-green {border-color: var(--tide-green-border);}
139
- .tide-border-lime {border-color: var(--tide-lime-border);}
140
- .tide-border-orange {border-color: var(--tide-orange-border);}
141
- .tide-border-purple {border-color: var(--tide-purple-border);}
142
- .tide-border-red {border-color: var(--tide-red-border);}
143
- .tide-border-salmon {border-color: var(--tide-salmon-border);}
144
- .tide-border-teal {border-color: var(--tide-teal-border);}
145
- .tide-border-yellow {border-color: var(--tide-yellow-border);}
146
-
147
- /* Border Width */
148
- .tide-border-1,
149
- .tide-border-2,
150
- .tide-border-bottom-1,
151
- .tide-border-bottom-2,
152
- .tide-border-left-1,
153
- .tide-border-left-2,
154
- .tide-border-right-1,
155
- .tide-border-right-2,
156
- .tide-border-top-1,
157
- .tide-border-top-2 {
158
- border-style: solid;
159
- }
160
-
161
- .tide-border-dashed {border-style: dashed;}
162
- .tide-border-solid {border-style: solid;}
163
-
164
- .tide-border-0 {border-width: 0;}
165
- .tide-border-1 {border-width: var(--tide-border-width-1);}
166
- .tide-border-2 {border-width: var(--tide-border-width-2);}
167
-
168
- .tide-border-top-0 {border-top-width: 0;}
169
- .tide-border-right-0 {border-right-width: 0;}
170
- .tide-border-bottom-0 {border-bottom-width: 0;}
171
- .tide-border-left-0 {border-left-width: 0;}
172
-
173
- .tide-border-top-1 {border-top-width: var(--tide-border-width-1);}
174
- .tide-border-right-1 {border-right-width: var(--tide-border-width-1);}
175
- .tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
176
- .tide-border-left-1 {border-left-width: var(--tide-border-width-1);}
177
-
178
- .tide-border-top-2 {border-top-width: var(--tide-border-width-2);}
179
- .tide-border-right-2 {border-right-width: var(--tide-border-width-2);}
180
- .tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
181
- .tide-border-left-2 {border-left-width: var(--tide-border-width-2);}
182
-
183
- .tide-radius-0 {border-radius: 0;}
184
- .tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
185
- .tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
186
- .tide-radius-1 {border-radius: var(--tide-radius-1);}
187
- .tide-radius-full {border-radius: var(--tide-radius-full);}
188
-
189
- /* Padding */
190
- .tide-padding-0 {padding: 0;}
191
- .tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
192
- .tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
193
- .tide-padding-1 {padding: var(--tide-spacing-1);}
194
- .tide-padding-2 {padding: var(--tide-spacing-2);}
195
- .tide-padding-4 {padding: var(--tide-spacing-4);}
196
-
197
- .tide-padding-x-0 {padding-left: 0; padding-right: 0;}
198
- .tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
199
- .tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
200
- .tide-padding-x-1 {padding-left: var(--tide-spacing-1); padding-right: var(--tide-spacing-1);}
201
- .tide-padding-x-2 {padding-left: var(--tide-spacing-2); padding-right: var(--tide-spacing-2);}
202
- .tide-padding-x-4 {padding-left: var(--tide-spacing-4); padding-right: var(--tide-spacing-4);}
203
-
204
- .tide-padding-y-0 {padding-top: 0; padding-bottom: 0;}
205
- .tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
206
- .tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
207
- .tide-padding-y-1 {padding-top: var(--tide-spacing-1); padding-bottom: var(--tide-spacing-1);}
208
- .tide-padding-y-2 {padding-top: var(--tide-spacing-2); padding-bottom: var(--tide-spacing-2);}
209
- .tide-padding-y-4 {padding-top: var(--tide-spacing-4); padding-bottom: var(--tide-spacing-4);}
210
-
211
- .tide-padding-top-0 {padding-top: 0;}
212
- .tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
213
- .tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
214
- .tide-padding-top-1 {padding-top: var(--tide-spacing-1);}
215
- .tide-padding-top-2 {padding-top: var(--tide-spacing-2);}
216
- .tide-padding-top-4 {padding-top: var(--tide-spacing-4);}
217
-
218
- .tide-padding-right-0 {padding-right: 0;}
219
- .tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
220
- .tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
221
- .tide-padding-right-1 {padding-right: var(--tide-spacing-1);}
222
- .tide-padding-right-2 {padding-right: var(--tide-spacing-2);}
223
- .tide-padding-right-4 {padding-right: var(--tide-spacing-4);}
224
-
225
- .tide-padding-bottom-0 {padding-bottom: 0;}
226
- .tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
227
- .tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
228
- .tide-padding-bottom-1 {padding-bottom: var(--tide-spacing-1);}
229
- .tide-padding-bottom-2 {padding-bottom: var(--tide-spacing-2);}
230
- .tide-padding-bottom-4 {padding-bottom: var(--tide-spacing-4);}
231
-
232
- .tide-padding-left-0 {padding-left: 0;}
233
- .tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
234
- .tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
235
- .tide-padding-left-1 {padding-left: var(--tide-spacing-1);}
236
- .tide-padding-left-2 {padding-left: var(--tide-spacing-2);}
237
- .tide-padding-left-4 {padding-left: var(--tide-spacing-4);}
238
-
239
- /* Dimension */
240
- .tide-max-width-full {max-width: 100%;}
241
- .tide-min-width-0 {min-width: 0;}
242
-
243
- .tide-max-height-full {max-height: 100%;}
244
- .tide-min-height-0 {min-height: 0;}
245
-
246
- .tide-width-auto {width: auto;}
247
- .tide-width-0 {width: 0;}
248
- .tide-width-full {width: 100%;}
249
-
250
- .tide-height-auto {height: auto;}
251
- .tide-height-0 {height: 0;}
252
- .tide-height-full {height: 100%;}
253
-
254
- /* Deprecated */
255
- .tide-width-container {max-width: 1168px;}
256
-
257
- /* Background */
258
- .tide-bg-initial {background-color: initial;}
259
-
260
- .tide-bg-primary {background: var(--tide-primary);}
261
- .tide-bg-secondary {background: var(--tide-secondary);}
262
-
263
- .tide-bg-surface {background: var(--tide-surface);}
264
- .tide-bg-surface-variant {background: var(--tide-surface-variant);}
265
- .tide-bg-surface-brand {background: var(--tide-surface-brand);}
266
- .tide-bg-surface-accent {background: var(--tide-surface-accent);}
267
- .tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
268
- .tide-bg-surface-floating {background: var(--tide-surface-floating);}
269
-
270
- /* Icon background colors only */
271
- .tide-bg-primary-error {background-color: var(--tide-error-primary);}
272
- .tide-bg-primary-info {background-color: var(--tide-info-primary);}
273
- .tide-bg-primary-success {background-color: var(--tide-success-primary);}
274
- .tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
275
-
276
- .tide-bg-surface-error {background-color: var(--tide-error-surface);}
277
- .tide-bg-surface-info {background-color: var(--tide-info-surface);}
278
- .tide-bg-surface-success {background-color: var(--tide-success-surface);}
279
- .tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
280
-
281
- .tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
282
- .tide-bg-surface-green {background-color: var(--tide-green-surface);}
283
- .tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
284
- .tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
285
- .tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
286
- .tide-bg-surface-red {background-color: var(--tide-red-surface);}
287
- .tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
288
- .tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
289
- .tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
290
-
291
- .tide-transparent-100 {background-color: var(--tide-transparent-100);}
292
- .tide-transparent-200 {background-color: var(--tide-transparent-200);}
293
- .tide-transparent-300 {background-color: var(--tide-transparent-300);}
294
- .tide-transparent-400 {background-color: var(--tide-transparent-400);}
295
-
296
- /* Typographic roles */
297
- .tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
298
- .tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
299
- .tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
300
- .tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
301
- .tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
302
- .tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
303
- .tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
304
- .tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
305
- .tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
306
- .tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
307
- .tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
308
- .tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
309
- .tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
310
- .tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
311
- .tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
312
- .tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
313
- .tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
314
- .tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
315
-
316
- /* Font Color */
317
- .tide-font-on-primary {color: var(--tide-on-primary);}
318
- .tide-font-on-secondary {color: var(--tide-on-secondary);}
319
-
320
- .tide-font-on-surface {color: var(--tide-on-surface);}
321
- .tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
322
- .tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
323
- .tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
324
- .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
325
-
326
- .tide-font-error {color: var(--tide-error-primary);}
327
- .tide-font-info {color: var(--tide-info-primary);}
328
- .tide-font-success {color: var(--tide-success-primary);}
329
- .tide-font-warning {color: var(--tide-warning-primary);}
330
-
331
- .tide-font-blue {color: var(--tide-blue-on-surface);}
332
- .tide-font-green {color: var(--tide-green-on-surface);}
333
- .tide-font-lime {color: var(--tide-lime-on-surface);}
334
- .tide-font-orange {color: var(--tide-orange-on-surface);}
335
- .tide-font-purple {color: var(--tide-purple-on-surface);}
336
- .tide-font-red {color: var(--tide-red-on-surface);}
337
- .tide-font-salmon {color: var(--tide-salmon-on-surface);}
338
- .tide-font-teal {color: var(--tide-teal-on-surface);}
339
- .tide-font-yellow {color: var(--tide-yellow-on-surface);}
340
-
341
- /* Badge icon colors only */
342
- .tide-font-primary-blue {color: var(--tide-blue-primary);}
343
- .tide-font-primary-green {color: var(--tide-green-primary);}
344
- .tide-font-primary-lime {color: var(--tide-lime-primary);}
345
- .tide-font-primary-orange {color: var(--tide-orange-primary);}
346
- .tide-font-primary-purple {color: var(--tide-purple-primary);}
347
- .tide-font-primary-red {color: var(--tide-red-primary);}
348
- .tide-font-primary-salmon {color: var(--tide-salmon-primary);}
349
- .tide-font-primary-teal {color: var(--tide-teal-primary);}
350
- .tide-font-primary-yellow {color: var(--tide-yellow-primary);}
351
-
352
- /* Font Size */
353
- .tide-font-10 {font-size: var(--tide-font-10);}
354
- .tide-font-12 {font-size: var(--tide-font-12);}
355
- .tide-font-14 {font-size: var(--tide-font-14);}
356
- .tide-font-16 {font-size: var(--tide-font-16);}
357
- .tide-font-20 {font-size: var(--tide-font-20);}
358
- .tide-font-24 {font-size: var(--tide-font-24);}
359
- .tide-font-32 {font-size: var(--tide-font-32);}
360
-
361
- /* Font Weight */
362
- .tide-font-400 {font-weight: 400;}
363
- .tide-font-500 {font-weight: 500;}
364
- .tide-font-600 {font-weight: 600;}
365
- .tide-font-700 {font-weight: 700;}
366
-
367
- /* Misc */
368
- .tide-align-middle {vertical-align: middle;}
369
- .tide-align-initial {vertical-align: initial;}
370
-
371
- .tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
372
-
373
- .tide-break-initial {overflow-wrap: initial;}
374
- .tide-break-word {overflow-wrap: break-word;}
375
-
376
- .tide-break-inside-avoid-column {break-inside: avoid-column}
377
-
378
- .tide-columns-initial {column-count: initial;}
379
- .tide-columns-1 {column-count: 1;}
380
- .tide-columns-2 {column-count: 2;}
381
- .tide-columns-3 {column-count: 3;}
382
- .tide-columns-4 {column-count: 4;}
383
-
384
- .tide-cursor-not-allowed {cursor: not-allowed;}
385
- .tide-cursor-pointer {cursor: pointer;}
386
- .tide-cursor-text {cursor: text;}
387
-
388
- .tide-ellipsis {
389
- overflow: hidden;
390
- text-overflow: ellipsis;
391
- white-space: nowrap;
392
- }
393
-
394
- .tide-isolate {isolation: isolate;}
395
-
396
- /* Deprecated */
397
- .tide-leading-default {line-height: 1.4;}
398
- .tide-leading-normal {line-height: normal;}
399
-
400
- .tide-list-none {list-style-type: none;}
401
-
402
- .tide-object-center {object-position: center;}
403
-
404
- .tide-object-cover {object-fit: cover;}
405
- .tide-object-contain {object-fit: contain;}
406
- .tide-object-scale-down {object-fit: scale-down;}
407
-
408
- .tide-opacity {opacity: 1;}
409
- .tide-opacity-none {opacity: 0;}
410
-
411
- .tide-pointer-events {pointer-events: auto;}
412
- .tide-pointer-events-none {pointer-events: none;}
413
-
414
- .tide-user-select-none {user-select: none;}
415
- .tide-opacity-disabled {opacity: var(--tide-disabled);}
416
- .tide-user-select-initial {user-select: initial;}
417
-
418
- .tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
419
- .tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
420
- .tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
421
-
422
- .tide-scrollbar-none::-webkit-scrollbar {display: none;}
423
- .tide-scrollbar-none {
424
- -ms-overflow-style: none;
425
- scrollbar-width: none;
426
- }
427
-
428
- .tide-scroll-snap {
429
- scroll-snap-stop: always;
430
- scroll-snap-type: both mandatory;
431
- scroll-behavior: smooth;
432
- }
433
-
434
- .tide-scroll-snap-start {
435
- scroll-snap-align: start;
436
- }
437
-
438
- .tide-shadow-initial {box-shadow: initial;}
439
- .tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
440
- .tide-shadow-top {box-shadow: var(--tide-shadow-top);}
441
- .tide-shadow-text {text-shadow: var(--tide-shadow-text);}
442
-
443
- .tide-strikethrough {text-decoration: line-through;}
444
- .tide-strikethrough-none {text-decoration: none;}
445
-
446
- .tide-text-center {text-align: center;}
447
- .tide-text-justify {text-align: justify;}
448
- .tide-text-left {text-align: left;}
449
- .tide-text-right {text-align: right;}
450
-
451
- .tide-text-transform-lower {text-transform: lowercase;}
452
- .tide-text-transform-none {text-transform: none;}
453
- .tide-text-transform-upper {text-transform: uppercase;}
454
-
455
- .tide-underline {text-decoration: underline;}
456
- .tide-underline-none {text-decoration: none;}
457
- .tide-underline-hover:hover {text-decoration: underline;}
458
- .tide-underline-hover-none:hover {text-decoration: none;}
459
-
460
- .tide-visible {visibility: visible;}
461
- .tide-visible-none {visibility: hidden;}
462
-
463
- .tide-whitespace-nowrap {white-space: nowrap;}
464
-
465
- .tide-x-auto {overflow-x: auto;}
466
- .tide-x-hidden {overflow-x: hidden;}
467
- .tide-x-scroll {overflow-x: scroll;}
468
-
469
- .tide-xy-auto {overflow: auto;}
470
- .tide-xy-hidden {overflow: hidden;}
471
-
472
- .tide-y-auto {overflow-y: auto;}
473
- .tide-y-hidden {overflow-y: hidden;}
474
-
475
- .tide-z-index-initial {z-index: initial;}
476
- .tide-z-index-1 {z-index: 1;}
477
-
478
- /* Buttons */
479
- /* Rest State */
480
- .tide-button-primary {
481
- background: var(--tide-primary);
482
- border: 2px solid var(--tide-primary);
483
- color: var(--tide-on-primary);
484
- }
485
-
486
- .tide-button-secondary {
487
- background: var(--tide-surface);
488
- border: 2px solid var(--tide-primary);
489
- color: var(--tide-primary);
490
- }
491
-
492
- .tide-button-tertiary {
493
- background: var(--tide-white);
494
- border: 1px solid var(--tide-border);
495
- color: var(--tide-secondary);
496
- }
497
-
498
- .tide-button-quaternary {
499
- background: var(--tide-white);
500
- color: var(--tide-secondary);
501
- }
502
-
503
- .tide-button-floating {
504
- background-color: var(--tide-transparent-100);
505
- color: var(--tide-secondary);
506
- box-shadow: var(--tide-shadow-bottom);
507
- }
508
-
509
- /* Hover State */
510
- a.tide-button-primary:hover,
511
- button.tide-button-primary:enabled:hover {
512
- border: 2px solid var(--tide-primary);
513
- background: var(--tide-white);
514
- color: var(--tide-primary);
515
- }
516
-
517
- a.tide-button-secondary:hover,
518
- button.tide-button-secondary:enabled:hover {
519
- background: var(--tide-primary);
520
- color: var(--tide-on-primary);
521
- }
522
-
523
- a.tide-button-tertiary:hover,
524
- button.tide-button-tertiary:enabled:hover {
525
- border: 1px solid var(--tide-border-high);
526
- }
527
-
528
- a.tide-button-quaternary:hover,
529
- button.tide-button-quaternary:enabled:hover {
530
- background: var(--tide-surface-variant);
531
- }
532
-
533
- .tide-button-floating:hover,
534
- button.tide-button-floating:enabled:hover {
535
- background-color: var(--tide-white);
536
- }
537
-
538
- /* Disabled State */
539
- button.tide-button-primary:disabled,
540
- button.tide-button-secondary:disabled,
541
- button.tide-button-tertiary:disabled,
542
- button.tide-button-quaternary:disabled,
543
- button.tide-button-floating:disabled {
544
- opacity: var(--tide-disabled);
545
- }
546
-
547
- @media (min-width: 768px) {
548
- /* Reusable CSS Utility Library */
549
- /* Position */
550
- .sm-tide-position-absolute {position: absolute;}
551
- .sm-tide-position-fixed {position: fixed;}
552
- .sm-tide-position-relative {position: relative;}
553
- .sm-tide-position-static {position: static;}
554
- .sm-tide-position-sticky {position: sticky;}
555
-
556
- .sm-tide-top-0 {top: 0;}
557
- .sm-tide-right-0 {right: 0;}
558
- .sm-tide-bottom-0 {bottom: 0;}
559
- .sm-tide-left-0 {left: 0;}
560
-
561
- /* Display */
562
- .sm-tide-display-block {display: block;}
563
- .sm-tide-display-contents {display: contents;}
564
- .sm-tide-display-flex {display: flex;}
565
- .sm-tide-display-grid {display: grid;}
566
- .sm-tide-display-initial {display: initial;}
567
- .sm-tide-display-inline {display: inline;}
568
- .sm-tide-display-inline-block {display: inline-block;}
569
- .sm-tide-display-inline-flex {display: inline-flex;}
570
- .sm-tide-display-none {display: none;}
571
-
572
- /* Flex Box */
573
- .sm-tide-flex-column {flex-direction: column;}
574
- .sm-tide-flex-column-reverse {flex-direction: column-reverse;}
575
- .sm-tide-flex-row {flex-direction: row;}
576
- .sm-tide-flex-row-reverse {flex-direction: row-reverse;}
577
-
578
- .sm-tide-grow {flex-grow: 1;}
579
- .sm-tide-grow-none {flex-grow: 0;}
580
-
581
- .sm-tide-shrink {flex-shrink: 1;}
582
- .sm-tide-shrink-none {flex-shrink: 0;}
583
-
584
- .sm-tide-flex-wrap {flex-wrap: wrap;}
585
-
586
- .sm-tide-axis1-around {justify-content: space-around;}
587
- .sm-tide-axis1-between {justify-content: space-between;}
588
- .sm-tide-axis1-center {justify-content: center;}
589
- .sm-tide-axis1-end {justify-content: end;}
590
- .sm-tide-axis1-start {justify-content: start;}
591
-
592
- .sm-tide-axis2-around {align-items: space-around;}
593
- .sm-tide-axis2-center {align-items: center;}
594
- .sm-tide-axis2-end {align-items: flex-end;}
595
- .sm-tide-axis2-start {align-items: flex-start;}
596
- .sm-tide-axis2-stretch {align-items: stretch;}
597
-
598
- .sm-tide-gap-0 {gap: 0;}
599
- .sm-tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
600
- .sm-tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
601
- .sm-tide-gap-1 {gap: var(--tide-spacing-1);}
602
- .sm-tide-gap-2 {gap: var(--tide-spacing-2);}
603
- .sm-tide-gap-4 {gap: var(--tide-spacing-4);}
604
-
605
- .sm-tide-flex-basis-auto {flex-basis: auto;}
606
- .sm-tide-flex-basis-0 {flex-basis: 0;}
607
-
608
- /* Box Sizing */
609
- .sm-tide-box-border {box-sizing: border-box;}
610
- .sm-tide-box-content {box-sizing: content-box;}
611
-
612
- /* Margin */
613
- .sm-tide-margin-0 {margin: 0;}
614
- .sm-tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
615
- .sm-tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
616
- .sm-tide-margin-1 {margin: var(--tide-spacing-1);}
617
- .sm-tide-margin-2 {margin: var(--tide-spacing-2);}
618
- .sm-tide-margin-4 {margin: var(--tide-spacing-4);}
619
- .sm-tide-margin-auto {margin: auto;}
620
-
621
- .sm-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
622
- .sm-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
623
- .sm-tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
624
- .sm-tide-margin-x-1 {margin-left: var(--tide-spacing-1); margin-right: var(--tide-spacing-1);}
625
- .sm-tide-margin-x-2 {margin-left: var(--tide-spacing-2); margin-right: var(--tide-spacing-2);}
626
- .sm-tide-margin-x-4 {margin-left: var(--tide-spacing-4); margin-right: var(--tide-spacing-4);}
627
- .sm-tide-margin-x-auto {margin-left: auto; margin-right: auto;}
628
-
629
- .sm-tide-margin-y-0 {margin-top: 0; margin-bottom: 0;}
630
- .sm-tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
631
- .sm-tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
632
- .sm-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
633
- .sm-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
634
- .sm-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
635
- .sm-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
636
-
637
- .sm-tide-margin-top-0 {margin-top: 0;}
638
- .sm-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
639
- .sm-tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
640
- .sm-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
641
- .sm-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
642
- .sm-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
643
- .sm-tide-margin-top-auto {margin-top: auto;}
644
-
645
- .sm-tide-margin-right-0 {margin-right: 0;}
646
- .sm-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
647
- .sm-tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
648
- .sm-tide-margin-right-1 {margin-right: var(--tide-spacing-1);}
649
- .sm-tide-margin-right-2 {margin-right: var(--tide-spacing-2);}
650
- .sm-tide-margin-right-4 {margin-right: var(--tide-spacing-4);}
651
- .sm-tide-margin-right-auto {margin-right: auto;}
652
-
653
- .sm-tide-margin-bottom-0 {margin-bottom: 0;}
654
- .sm-tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
655
- .sm-tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
656
- .sm-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
657
- .sm-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
658
- .sm-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
659
- .sm-tide-margin-bottom-auto {margin-bottom: auto;}
660
-
661
- .sm-tide-margin-left-0 {margin-left: 0;}
662
- .sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
663
- .sm-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
664
- .sm-tide-margin-left-1 {margin-left: var(--tide-spacing-1);}
665
- .sm-tide-margin-left-2 {margin-left: var(--tide-spacing-2);}
666
- .sm-tide-margin-left-4 {margin-left: var(--tide-spacing-4);}
667
- .sm-tide-margin-left-auto {margin-left: auto;}
668
-
669
- /* Border Color */
670
- .sm-tide-border-color-initial {border-color: initial;}
671
-
672
- .sm-tide-border-primary {border-color: var(--tide-primary);}
673
-
674
- .sm-tide-border {border-color: var(--tide-border);}
675
- .sm-tide-border-low {border-color: var(--tide-border-low);}
676
- .sm-tide-border-high {border-color: var(--tide-border-high);}
677
- .sm-tide-border-floating {border-color: var(--tide-border-floating);}
678
-
679
- .sm-tide-border-error {border-color: var(--tide-error-border);}
680
- .sm-tide-border-info {border-color: var(--tide-info-border);}
681
- .sm-tide-border-success {border-color: var(--tide-success-border);}
682
- .sm-tide-border-warning {border-color: var(--tide-warning-border);}
683
-
684
- .sm-tide-border-blue {border-color: var(--tide-blue-border);}
685
- .sm-tide-border-green {border-color: var(--tide-green-border);}
686
- .sm-tide-border-lime {border-color: var(--tide-lime-border);}
687
- .sm-tide-border-orange {border-color: var(--tide-orange-border);}
688
- .sm-tide-border-purple {border-color: var(--tide-purple-border);}
689
- .sm-tide-border-red {border-color: var(--tide-red-border);}
690
- .sm-tide-border-salmon {border-color: var(--tide-salmon-border);}
691
- .sm-tide-border-teal {border-color: var(--tide-teal-border);}
692
- .sm-tide-border-yellow {border-color: var(--tide-yellow-border);}
693
-
694
- /* Border Width */
695
- .sm-tide-border-1,
696
- .sm-tide-border-2,
697
- .sm-tide-border-bottom-1,
698
- .sm-tide-border-bottom-2,
699
- .sm-tide-border-left-1,
700
- .sm-tide-border-left-2,
701
- .sm-tide-border-right-1,
702
- .sm-tide-border-right-2,
703
- .sm-tide-border-top-1,
704
- .sm-tide-border-top-2 {
705
- border-style: solid;
706
- }
707
-
708
- .sm-tide-border-dashed {border-style: dashed;}
709
- .sm-tide-border-solid {border-style: solid;}
710
-
711
- .sm-tide-border-0 {border-width: 0;}
712
- .sm-tide-border-1 {border-width: var(--tide-border-width-1);}
713
- .sm-tide-border-2 {border-width: var(--tide-border-width-2);}
714
-
715
- .sm-tide-border-top-0 {border-top-width: 0;}
716
- .sm-tide-border-right-0 {border-right-width: 0;}
717
- .sm-tide-border-bottom-0 {border-bottom-width: 0;}
718
- .sm-tide-border-left-0 {border-left-width: 0;}
719
-
720
- .sm-tide-border-top-1 {border-top-width: var(--tide-border-width-1);}
721
- .sm-tide-border-right-1 {border-right-width: var(--tide-border-width-1);}
722
- .sm-tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
723
- .sm-tide-border-left-1 {border-left-width: var(--tide-border-width-1);}
724
-
725
- .sm-tide-border-top-2 {border-top-width: var(--tide-border-width-2);}
726
- .sm-tide-border-right-2 {border-right-width: var(--tide-border-width-2);}
727
- .sm-tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
728
- .sm-tide-border-left-2 {border-left-width: var(--tide-border-width-2);}
729
-
730
- .sm-tide-radius-0 {border-radius: 0;}
731
- .sm-tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
732
- .sm-tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
733
- .sm-tide-radius-1 {border-radius: var(--tide-radius-1);}
734
- .sm-tide-radius-full {border-radius: var(--tide-radius-full);}
735
-
736
- /* Padding */
737
- .sm-tide-padding-0 {padding: 0;}
738
- .sm-tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
739
- .sm-tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
740
- .sm-tide-padding-1 {padding: var(--tide-spacing-1);}
741
- .sm-tide-padding-2 {padding: var(--tide-spacing-2);}
742
- .sm-tide-padding-4 {padding: var(--tide-spacing-4);}
743
-
744
- .sm-tide-padding-x-0 {padding-left: 0; padding-right: 0;}
745
- .sm-tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
746
- .sm-tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
747
- .sm-tide-padding-x-1 {padding-left: var(--tide-spacing-1); padding-right: var(--tide-spacing-1);}
748
- .sm-tide-padding-x-2 {padding-left: var(--tide-spacing-2); padding-right: var(--tide-spacing-2);}
749
- .sm-tide-padding-x-4 {padding-left: var(--tide-spacing-4); padding-right: var(--tide-spacing-4);}
750
-
751
- .sm-tide-padding-y-0 {padding-top: 0; padding-bottom: 0;}
752
- .sm-tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
753
- .sm-tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
754
- .sm-tide-padding-y-1 {padding-top: var(--tide-spacing-1); padding-bottom: var(--tide-spacing-1);}
755
- .sm-tide-padding-y-2 {padding-top: var(--tide-spacing-2); padding-bottom: var(--tide-spacing-2);}
756
- .sm-tide-padding-y-4 {padding-top: var(--tide-spacing-4); padding-bottom: var(--tide-spacing-4);}
757
-
758
- .sm-tide-padding-top-0 {padding-top: 0;}
759
- .sm-tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
760
- .sm-tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
761
- .sm-tide-padding-top-1 {padding-top: var(--tide-spacing-1);}
762
- .sm-tide-padding-top-2 {padding-top: var(--tide-spacing-2);}
763
- .sm-tide-padding-top-4 {padding-top: var(--tide-spacing-4);}
764
-
765
- .sm-tide-padding-right-0 {padding-right: 0;}
766
- .sm-tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
767
- .sm-tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
768
- .sm-tide-padding-right-1 {padding-right: var(--tide-spacing-1);}
769
- .sm-tide-padding-right-2 {padding-right: var(--tide-spacing-2);}
770
- .sm-tide-padding-right-4 {padding-right: var(--tide-spacing-4);}
771
-
772
- .sm-tide-padding-bottom-0 {padding-bottom: 0;}
773
- .sm-tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
774
- .sm-tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
775
- .sm-tide-padding-bottom-1 {padding-bottom: var(--tide-spacing-1);}
776
- .sm-tide-padding-bottom-2 {padding-bottom: var(--tide-spacing-2);}
777
- .sm-tide-padding-bottom-4 {padding-bottom: var(--tide-spacing-4);}
778
-
779
- .sm-tide-padding-left-0 {padding-left: 0;}
780
- .sm-tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
781
- .sm-tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
782
- .sm-tide-padding-left-1 {padding-left: var(--tide-spacing-1);}
783
- .sm-tide-padding-left-2 {padding-left: var(--tide-spacing-2);}
784
- .sm-tide-padding-left-4 {padding-left: var(--tide-spacing-4);}
785
-
786
- /* Dimension */
787
- .sm-tide-max-width-full {max-width: 100%;}
788
- .sm-tide-min-width-0 {min-width: 0;}
789
-
790
- .sm-tide-max-height-full {max-height: 100%;}
791
- .sm-tide-min-height-0 {min-height: 0;}
792
-
793
- .sm-tide-width-auto {width: auto;}
794
- .sm-tide-width-0 {width: 0;}
795
- .sm-tide-width-full {width: 100%;}
796
-
797
- .sm-tide-height-auto {height: auto;}
798
- .sm-tide-height-0 {height: 0;}
799
- .sm-tide-height-full {height: 100%;}
800
-
801
- /* Deprecated */
802
- .sm-tide-width-container {max-width: 1168px;}
803
-
804
- /* Background */
805
- .sm-tide-bg-initial {background-color: initial;}
806
-
807
- .sm-tide-bg-primary {background: var(--tide-primary);}
808
- .sm-tide-bg-secondary {background: var(--tide-secondary);}
809
-
810
- .sm-tide-bg-surface {background: var(--tide-surface);}
811
- .sm-tide-bg-surface-variant {background: var(--tide-surface-variant);}
812
- .sm-tide-bg-surface-brand {background: var(--tide-surface-brand);}
813
- .sm-tide-bg-surface-accent {background: var(--tide-surface-accent);}
814
- .sm-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
815
- .sm-tide-bg-surface-floating {background: var(--tide-surface-floating);}
816
-
817
- /* Icon background colors only */
818
- .sm-tide-bg-primary-error {background-color: var(--tide-error-primary);}
819
- .sm-tide-bg-primary-info {background-color: var(--tide-info-primary);}
820
- .sm-tide-bg-primary-success {background-color: var(--tide-success-primary);}
821
- .sm-tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
822
-
823
- .sm-tide-bg-surface-error {background-color: var(--tide-error-surface);}
824
- .sm-tide-bg-surface-info {background-color: var(--tide-info-surface);}
825
- .sm-tide-bg-surface-success {background-color: var(--tide-success-surface);}
826
- .sm-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
827
-
828
- .sm-tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
829
- .sm-tide-bg-surface-green {background-color: var(--tide-green-surface);}
830
- .sm-tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
831
- .sm-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
832
- .sm-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
833
- .sm-tide-bg-surface-red {background-color: var(--tide-red-surface);}
834
- .sm-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
835
- .sm-tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
836
- .sm-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
837
-
838
- .sm-tide-transparent-100 {background-color: var(--tide-transparent-100);}
839
- .sm-tide-transparent-200 {background-color: var(--tide-transparent-200);}
840
- .sm-tide-transparent-300 {background-color: var(--tide-transparent-300);}
841
- .sm-tide-transparent-400 {background-color: var(--tide-transparent-400);}
842
-
843
- /* Typographic roles */
844
- .sm-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
845
- .sm-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
846
- .sm-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
847
- .sm-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
848
- .sm-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
849
- .sm-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
850
- .sm-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
851
- .sm-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
852
- .sm-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
853
- .sm-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
854
- .sm-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
855
- .sm-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
856
- .sm-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
857
- .sm-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
858
- .sm-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
859
- .sm-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
860
- .sm-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
861
- .sm-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
862
-
863
- /* Font Color */
864
- .sm-tide-font-on-primary {color: var(--tide-on-primary);}
865
- .sm-tide-font-on-secondary {color: var(--tide-on-secondary);}
866
-
867
- .sm-tide-font-on-surface {color: var(--tide-on-surface);}
868
- .sm-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
869
- .sm-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
870
- .sm-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
871
- .sm-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
872
-
873
- .sm-tide-font-error {color: var(--tide-error-primary);}
874
- .sm-tide-font-info {color: var(--tide-info-primary);}
875
- .sm-tide-font-success {color: var(--tide-success-primary);}
876
- .sm-tide-font-warning {color: var(--tide-warning-primary);}
877
-
878
- .sm-tide-font-blue {color: var(--tide-blue-on-surface);}
879
- .sm-tide-font-green {color: var(--tide-green-on-surface);}
880
- .sm-tide-font-lime {color: var(--tide-lime-on-surface);}
881
- .sm-tide-font-orange {color: var(--tide-orange-on-surface);}
882
- .sm-tide-font-purple {color: var(--tide-purple-on-surface);}
883
- .sm-tide-font-red {color: var(--tide-red-on-surface);}
884
- .sm-tide-font-salmon {color: var(--tide-salmon-on-surface);}
885
- .sm-tide-font-teal {color: var(--tide-teal-on-surface);}
886
- .sm-tide-font-yellow {color: var(--tide-yellow-on-surface);}
887
-
888
- /* Badge icon colors only */
889
- .sm-tide-font-primary-blue {color: var(--tide-blue-primary);}
890
- .sm-tide-font-primary-green {color: var(--tide-green-primary);}
891
- .sm-tide-font-primary-lime {color: var(--tide-lime-primary);}
892
- .sm-tide-font-primary-orange {color: var(--tide-orange-primary);}
893
- .sm-tide-font-primary-purple {color: var(--tide-purple-primary);}
894
- .sm-tide-font-primary-red {color: var(--tide-red-primary);}
895
- .sm-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
896
- .sm-tide-font-primary-teal {color: var(--tide-teal-primary);}
897
- .sm-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
898
-
899
- /* Font Size */
900
- .sm-tide-font-10 {font-size: var(--tide-font-10);}
901
- .sm-tide-font-12 {font-size: var(--tide-font-12);}
902
- .sm-tide-font-14 {font-size: var(--tide-font-14);}
903
- .sm-tide-font-16 {font-size: var(--tide-font-16);}
904
- .sm-tide-font-20 {font-size: var(--tide-font-20);}
905
- .sm-tide-font-24 {font-size: var(--tide-font-24);}
906
- .sm-tide-font-32 {font-size: var(--tide-font-32);}
907
-
908
- /* Font Weight */
909
- .sm-tide-font-400 {font-weight: 400;}
910
- .sm-tide-font-500 {font-weight: 500;}
911
- .sm-tide-font-600 {font-weight: 600;}
912
- .sm-tide-font-700 {font-weight: 700;}
913
-
914
- /* Misc */
915
- .sm-tide-align-middle {vertical-align: middle;}
916
- .sm-tide-align-initial {vertical-align: initial;}
917
-
918
- .sm-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
919
-
920
- .sm-tide-break-initial {overflow-wrap: initial;}
921
- .sm-tide-break-word {overflow-wrap: break-word;}
922
-
923
- .sm-tide-break-inside-avoid-column {break-inside: avoid-column}
924
-
925
- .sm-tide-columns-initial {column-count: initial;}
926
- .sm-tide-columns-1 {column-count: 1;}
927
- .sm-tide-columns-2 {column-count: 2;}
928
- .sm-tide-columns-3 {column-count: 3;}
929
- .sm-tide-columns-4 {column-count: 4;}
930
-
931
- .sm-tide-cursor-not-allowed {cursor: not-allowed;}
932
- .sm-tide-cursor-pointer {cursor: pointer;}
933
- .sm-tide-cursor-text {cursor: text;}
934
-
935
- .sm-tide-ellipsis {
936
- overflow: hidden;
937
- text-overflow: ellipsis;
938
- white-space: nowrap;
939
- }
940
-
941
- .sm-tide-isolate {isolation: isolate;}
942
-
943
- /* Deprecated */
944
- .sm-tide-leading-default {line-height: 1.4;}
945
- .sm-tide-leading-normal {line-height: normal;}
946
-
947
- .sm-tide-list-none {list-style-type: none;}
948
-
949
- .sm-tide-object-center {object-position: center;}
950
-
951
- .sm-tide-object-cover {object-fit: cover;}
952
- .sm-tide-object-contain {object-fit: contain;}
953
- .sm-tide-object-scale-down {object-fit: scale-down;}
954
-
955
- .sm-tide-opacity {opacity: 1;}
956
- .sm-tide-opacity-disabled {opacity: var(--tide-disabled);}
957
- .sm-tide-opacity-none {opacity: 0;}
958
-
959
- .sm-tide-pointer-events {pointer-events: auto;}
960
- .sm-tide-pointer-events-none {pointer-events: none;}
961
-
962
- .sm-tide-user-select-none {user-select: none;}
963
- .sm-tide-user-select-initial {user-select: initial;}
964
-
965
- .sm-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
966
- .sm-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
967
- .sm-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
968
-
969
- .sm-tide-scrollbar-none::-webkit-scrollbar {display: none;}
970
- .sm-tide-scrollbar-none {
971
- -ms-overflow-style: none;
972
- scrollbar-width: none;
973
- }
974
-
975
- .sm-tide-scroll-snap {
976
- scroll-snap-stop: always;
977
- scroll-snap-type: both mandatory;
978
- scroll-behavior: smooth;
979
- }
980
-
981
- .sm-tide-scroll-snap-start {
982
- scroll-snap-align: start;
983
- }
984
-
985
- .sm-tide-shadow-initial {box-shadow: initial;}
986
- .sm-tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
987
- .sm-tide-shadow-top {box-shadow: var(--tide-shadow-top);}
988
- .sm-tide-shadow-text {text-shadow: var(--tide-shadow-text);}
989
-
990
- .sm-tide-strikethrough {text-decoration: line-through;}
991
- .sm-tide-strikethrough-none {text-decoration: none;}
992
-
993
- .sm-tide-text-center {text-align: center;}
994
- .sm-tide-text-justify {text-align: justify;}
995
- .sm-tide-text-left {text-align: left;}
996
- .sm-tide-text-right {text-align: right;}
997
-
998
- .sm-tide-text-transform-lower {text-transform: lowercase;}
999
- .sm-tide-text-transform-none {text-transform: none;}
1000
- .sm-tide-text-transform-upper {text-transform: uppercase;}
1001
-
1002
- .sm-tide-underline {text-decoration: underline;}
1003
- .sm-tide-underline-none {text-decoration: none;}
1004
- .sm-tide-underline-hover:hover {text-decoration: underline;}
1005
- .sm-tide-underline-hover-none:hover {text-decoration: none;}
1006
-
1007
- .sm-tide-visible {visibility: visible;}
1008
- .sm-tide-visible-none {visibility: hidden;}
1009
-
1010
- .sm-tide-whitespace-nowrap {white-space: nowrap;}
1011
-
1012
- .sm-tide-x-auto {overflow-x: auto;}
1013
- .sm-tide-x-hidden {overflow-x: hidden;}
1014
- .sm-tide-x-scroll {overflow-x: scroll;}
1015
-
1016
- .sm-tide-xy-auto {overflow: auto;}
1017
- .sm-tide-xy-hidden {overflow: hidden;}
1018
-
1019
- .sm-tide-y-auto {overflow-y: auto;}
1020
- .sm-tide-y-hidden {overflow-y: hidden;}
1021
-
1022
- .sm-tide-z-index-initial {z-index: initial;}
1023
- .sm-tide-z-index-1 {z-index: 1;}
1024
-
1025
- /* Buttons */
1026
- /* Rest State */
1027
- .sm-tide-button-primary {
1028
- background: var(--tide-primary);
1029
- border: 2px solid var(--tide-primary);
1030
- color: var(--tide-on-primary);
1031
- }
1032
-
1033
- .sm-tide-button-secondary {
1034
- background: var(--tide-surface);
1035
- border: 2px solid var(--tide-primary);
1036
- color: var(--tide-primary);
1037
- }
1038
-
1039
- .sm-tide-button-tertiary {
1040
- background: var(--tide-white);
1041
- border: 1px solid var(--tide-border);
1042
- color: var(--tide-secondary);
1043
- }
1044
-
1045
- .sm-tide-button-quaternary {
1046
- background: var(--tide-white);
1047
- color: var(--tide-secondary);
1048
- }
1049
-
1050
- .sm-tide-button-floating {
1051
- background-color: var(--tide-transparent-100);
1052
- color: var(--tide-secondary);
1053
- box-shadow: var(--tide-shadow-bottom);
1054
- }
1055
-
1056
- /* Hover State */
1057
- a.sm-tide-button-primary:hover,
1058
- button.sm-tide-button-primary:enabled:hover {
1059
- border: 2px solid var(--tide-primary);
1060
- background: var(--tide-white);
1061
- color: var(--tide-primary);
1062
- }
1063
-
1064
- a.sm-tide-button-secondary:hover,
1065
- button.sm-tide-button-secondary:enabled:hover {
1066
- background: var(--tide-primary);
1067
- color: var(--tide-on-primary);
1068
- }
1069
-
1070
- a.sm-tide-button-tertiary:hover,
1071
- button.sm-tide-button-tertiary:enabled:hover {
1072
- border: 1px solid var(--tide-border-high);
1073
- }
1074
-
1075
- a.sm-tide-button-quaternary:hover,
1076
- button.sm-tide-button-quaternary:enabled:hover {
1077
- background: var(--tide-surface-variant);
1078
- }
1079
-
1080
- .sm-tide-button-floating:hover,
1081
- button.sm-tide-button-floating:enabled:hover {
1082
- background-color: var(--tide-white);
1083
- }
1084
-
1085
- /* Disabled State */
1086
- button.sm-tide-button-primary:disabled,
1087
- button.sm-tide-button-secondary:disabled,
1088
- button.sm-tide-button-tertiary:disabled,
1089
- button.sm-tide-button-quaternary:disabled,
1090
- button.sm-tide-button-floating:disabled {
1091
- opacity: var(--tide-disabled);
1092
- }
1093
- }
1094
-
1095
- @media (min-width: 992px) {
1096
- /* Reusable CSS Utility Library */
1097
- /* Position */
1098
- .md-tide-position-absolute {position: absolute;}
1099
- .md-tide-position-fixed {position: fixed;}
1100
- .md-tide-position-relative {position: relative;}
1101
- .md-tide-position-static {position: static;}
1102
- .md-tide-position-sticky {position: sticky;}
1103
-
1104
- .md-tide-top-0 {top: 0;}
1105
- .md-tide-right-0 {right: 0;}
1106
- .md-tide-bottom-0 {bottom: 0;}
1107
- .md-tide-left-0 {left: 0;}
1108
-
1109
- /* Display */
1110
- .md-tide-display-block {display: block;}
1111
- .md-tide-display-contents {display: contents;}
1112
- .md-tide-display-flex {display: flex;}
1113
- .md-tide-display-grid {display: grid;}
1114
- .md-tide-display-initial {display: initial;}
1115
- .md-tide-display-inline {display: inline;}
1116
- .md-tide-display-inline-block {display: inline-block;}
1117
- .md-tide-display-inline-flex {display: inline-flex;}
1118
- .md-tide-display-none {display: none;}
1119
-
1120
- /* Flex Box */
1121
- .md-tide-flex-column {flex-direction: column;}
1122
- .md-tide-flex-column-reverse {flex-direction: column-reverse;}
1123
- .md-tide-flex-row {flex-direction: row;}
1124
- .md-tide-flex-row-reverse {flex-direction: row-reverse;}
1125
-
1126
- .md-tide-grow {flex-grow: 1;}
1127
- .md-tide-grow-none {flex-grow: 0;}
1128
-
1129
- .md-tide-shrink {flex-shrink: 1;}
1130
- .md-tide-shrink-none {flex-shrink: 0;}
1131
-
1132
- .md-tide-flex-wrap {flex-wrap: wrap;}
1133
-
1134
- .md-tide-axis1-around {justify-content: space-around;}
1135
- .md-tide-axis1-between {justify-content: space-between;}
1136
- .md-tide-axis1-center {justify-content: center;}
1137
- .md-tide-axis1-end {justify-content: end;}
1138
- .md-tide-axis1-start {justify-content: start;}
1139
-
1140
- .md-tide-axis2-around {align-items: space-around;}
1141
- .md-tide-axis2-center {align-items: center;}
1142
- .md-tide-axis2-end {align-items: flex-end;}
1143
- .md-tide-axis2-start {align-items: flex-start;}
1144
- .md-tide-axis2-stretch {align-items: stretch;}
1145
-
1146
- .md-tide-gap-0 {gap: 0;}
1147
- .md-tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
1148
- .md-tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
1149
- .md-tide-gap-1 {gap: var(--tide-spacing-1);}
1150
- .md-tide-gap-2 {gap: var(--tide-spacing-2);}
1151
- .md-tide-gap-4 {gap: var(--tide-spacing-4);}
1152
-
1153
- .md-tide-flex-basis-auto {flex-basis: auto;}
1154
- .md-tide-flex-basis-0 {flex-basis: 0;}
1155
-
1156
- /* Box Sizing */
1157
- .md-tide-box-border {box-sizing: border-box;}
1158
- .md-tide-box-content {box-sizing: content-box;}
1159
-
1160
- /* Margin */
1161
- .md-tide-margin-0 {margin: 0;}
1162
- .md-tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
1163
- .md-tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
1164
- .md-tide-margin-1 {margin: var(--tide-spacing-1);}
1165
- .md-tide-margin-2 {margin: var(--tide-spacing-2);}
1166
- .md-tide-margin-4 {margin: var(--tide-spacing-4);}
1167
- .md-tide-margin-auto {margin: auto;}
1168
-
1169
- .md-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
1170
- .md-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
1171
- .md-tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
1172
- .md-tide-margin-x-1 {margin-left: var(--tide-spacing-1); margin-right: var(--tide-spacing-1);}
1173
- .md-tide-margin-x-2 {margin-left: var(--tide-spacing-2); margin-right: var(--tide-spacing-2);}
1174
- .md-tide-margin-x-4 {margin-left: var(--tide-spacing-4); margin-right: var(--tide-spacing-4);}
1175
- .md-tide-margin-x-auto {margin-left: auto; margin-right: auto;}
1176
-
1177
- .md-tide-margin-y-0 {margin-top: 0; margin-bottom: 0;}
1178
- .md-tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
1179
- .md-tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
1180
- .md-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
1181
- .md-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
1182
- .md-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
1183
- .md-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
1184
-
1185
- .md-tide-margin-top-0 {margin-top: 0;}
1186
- .md-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
1187
- .md-tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
1188
- .md-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
1189
- .md-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
1190
- .md-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
1191
- .md-tide-margin-top-auto {margin-top: auto;}
1192
-
1193
- .md-tide-margin-right-0 {margin-right: 0;}
1194
- .md-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
1195
- .md-tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
1196
- .md-tide-margin-right-1 {margin-right: var(--tide-spacing-1);}
1197
- .md-tide-margin-right-2 {margin-right: var(--tide-spacing-2);}
1198
- .md-tide-margin-right-4 {margin-right: var(--tide-spacing-4);}
1199
- .md-tide-margin-right-auto {margin-right: auto;}
1200
-
1201
- .md-tide-margin-bottom-0 {margin-bottom: 0;}
1202
- .md-tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
1203
- .md-tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
1204
- .md-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
1205
- .md-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
1206
- .md-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
1207
- .md-tide-margin-bottom-auto {margin-bottom: auto;}
1208
-
1209
- .md-tide-margin-left-0 {margin-left: 0;}
1210
- .md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
1211
- .md-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
1212
- .md-tide-margin-left-1 {margin-left: var(--tide-spacing-1);}
1213
- .md-tide-margin-left-2 {margin-left: var(--tide-spacing-2);}
1214
- .md-tide-margin-left-4 {margin-left: var(--tide-spacing-4);}
1215
- .md-tide-margin-left-auto {margin-left: auto;}
1216
-
1217
- /* Border Color */
1218
- .md-tide-border-color-initial {border-color: initial;}
1219
-
1220
- .md-tide-border-primary {border-color: var(--tide-primary);}
1221
-
1222
- .md-tide-border {border-color: var(--tide-border);}
1223
- .md-tide-border-low {border-color: var(--tide-border-low);}
1224
- .md-tide-border-high {border-color: var(--tide-border-high);}
1225
- .md-tide-border-floating {border-color: var(--tide-border-floating);}
1226
-
1227
- .md-tide-border-error {border-color: var(--tide-error-border);}
1228
- .md-tide-border-info {border-color: var(--tide-info-border);}
1229
- .md-tide-border-success {border-color: var(--tide-success-border);}
1230
- .md-tide-border-warning {border-color: var(--tide-warning-border);}
1231
-
1232
- .md-tide-border-blue {border-color: var(--tide-blue-border);}
1233
- .md-tide-border-green {border-color: var(--tide-green-border);}
1234
- .md-tide-border-lime {border-color: var(--tide-lime-border);}
1235
- .md-tide-border-orange {border-color: var(--tide-orange-border);}
1236
- .md-tide-border-purple {border-color: var(--tide-purple-border);}
1237
- .md-tide-border-red {border-color: var(--tide-red-border);}
1238
- .md-tide-border-salmon {border-color: var(--tide-salmon-border);}
1239
- .md-tide-border-teal {border-color: var(--tide-teal-border);}
1240
- .md-tide-border-yellow {border-color: var(--tide-yellow-border);}
1241
-
1242
- /* Border Width */
1243
- .md-tide-border-1,
1244
- .md-tide-border-2,
1245
- .md-tide-border-bottom-1,
1246
- .md-tide-border-bottom-2,
1247
- .md-tide-border-left-1,
1248
- .md-tide-border-left-2,
1249
- .md-tide-border-right-1,
1250
- .md-tide-border-right-2,
1251
- .md-tide-border-top-1,
1252
- .md-tide-border-top-2 {
1253
- border-style: solid;
1254
- }
1255
-
1256
- .md-tide-border-dashed {border-style: dashed;}
1257
- .md-tide-border-solid {border-style: solid;}
1258
-
1259
- .md-tide-border-0 {border-width: 0;}
1260
- .md-tide-border-1 {border-width: var(--tide-border-width-1);}
1261
- .md-tide-border-2 {border-width: var(--tide-border-width-2);}
1262
-
1263
- .md-tide-border-top-0 {border-top-width: 0;}
1264
- .md-tide-border-right-0 {border-right-width: 0;}
1265
- .md-tide-border-bottom-0 {border-bottom-width: 0;}
1266
- .md-tide-border-left-0 {border-left-width: 0;}
1267
-
1268
- .md-tide-border-top-1 {border-top-width: var(--tide-border-width-1);}
1269
- .md-tide-border-right-1 {border-right-width: var(--tide-border-width-1);}
1270
- .md-tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
1271
- .md-tide-border-left-1 {border-left-width: var(--tide-border-width-1);}
1272
-
1273
- .md-tide-border-top-2 {border-top-width: var(--tide-border-width-2);}
1274
- .md-tide-border-right-2 {border-right-width: var(--tide-border-width-2);}
1275
- .md-tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
1276
- .md-tide-border-left-2 {border-left-width: var(--tide-border-width-2);}
1277
-
1278
- .md-tide-radius-0 {border-radius: 0;}
1279
- .md-tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
1280
- .md-tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
1281
- .md-tide-radius-1 {border-radius: var(--tide-radius-1);}
1282
- .md-tide-radius-full {border-radius: var(--tide-radius-full);}
1283
-
1284
- /* Padding */
1285
- .md-tide-padding-0 {padding: 0;}
1286
- .md-tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
1287
- .md-tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
1288
- .md-tide-padding-1 {padding: var(--tide-spacing-1);}
1289
- .md-tide-padding-2 {padding: var(--tide-spacing-2);}
1290
- .md-tide-padding-4 {padding: var(--tide-spacing-4);}
1291
-
1292
- .md-tide-padding-x-0 {padding-left: 0; padding-right: 0;}
1293
- .md-tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
1294
- .md-tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
1295
- .md-tide-padding-x-1 {padding-left: var(--tide-spacing-1); padding-right: var(--tide-spacing-1);}
1296
- .md-tide-padding-x-2 {padding-left: var(--tide-spacing-2); padding-right: var(--tide-spacing-2);}
1297
- .md-tide-padding-x-4 {padding-left: var(--tide-spacing-4); padding-right: var(--tide-spacing-4);}
1298
-
1299
- .md-tide-padding-y-0 {padding-top: 0; padding-bottom: 0;}
1300
- .md-tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
1301
- .md-tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
1302
- .md-tide-padding-y-1 {padding-top: var(--tide-spacing-1); padding-bottom: var(--tide-spacing-1);}
1303
- .md-tide-padding-y-2 {padding-top: var(--tide-spacing-2); padding-bottom: var(--tide-spacing-2);}
1304
- .md-tide-padding-y-4 {padding-top: var(--tide-spacing-4); padding-bottom: var(--tide-spacing-4);}
1305
-
1306
- .md-tide-padding-top-0 {padding-top: 0;}
1307
- .md-tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
1308
- .md-tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
1309
- .md-tide-padding-top-1 {padding-top: var(--tide-spacing-1);}
1310
- .md-tide-padding-top-2 {padding-top: var(--tide-spacing-2);}
1311
- .md-tide-padding-top-4 {padding-top: var(--tide-spacing-4);}
1312
-
1313
- .md-tide-padding-right-0 {padding-right: 0;}
1314
- .md-tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
1315
- .md-tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
1316
- .md-tide-padding-right-1 {padding-right: var(--tide-spacing-1);}
1317
- .md-tide-padding-right-2 {padding-right: var(--tide-spacing-2);}
1318
- .md-tide-padding-right-4 {padding-right: var(--tide-spacing-4);}
1319
-
1320
- .md-tide-padding-bottom-0 {padding-bottom: 0;}
1321
- .md-tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
1322
- .md-tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
1323
- .md-tide-padding-bottom-1 {padding-bottom: var(--tide-spacing-1);}
1324
- .md-tide-padding-bottom-2 {padding-bottom: var(--tide-spacing-2);}
1325
- .md-tide-padding-bottom-4 {padding-bottom: var(--tide-spacing-4);}
1326
-
1327
- .md-tide-padding-left-0 {padding-left: 0;}
1328
- .md-tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
1329
- .md-tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
1330
- .md-tide-padding-left-1 {padding-left: var(--tide-spacing-1);}
1331
- .md-tide-padding-left-2 {padding-left: var(--tide-spacing-2);}
1332
- .md-tide-padding-left-4 {padding-left: var(--tide-spacing-4);}
1333
-
1334
- /* Dimension */
1335
- .md-tide-max-width-full {max-width: 100%;}
1336
- .md-tide-min-width-0 {min-width: 0;}
1337
-
1338
- .md-tide-max-height-full {max-height: 100%;}
1339
- .md-tide-min-height-0 {min-height: 0;}
1340
-
1341
- .md-tide-width-auto {width: auto;}
1342
- .md-tide-width-0 {width: 0;}
1343
- .md-tide-width-full {width: 100%;}
1344
-
1345
- .md-tide-height-auto {height: auto;}
1346
- .md-tide-height-0 {height: 0;}
1347
- .md-tide-height-full {height: 100%;}
1348
-
1349
- /* Deprecated */
1350
- .md-tide-width-container {max-width: 1168px;}
1351
-
1352
- /* Background */
1353
- .md-tide-bg-initial {background-color: initial;}
1354
-
1355
- .md-tide-bg-primary {background: var(--tide-primary);}
1356
- .md-tide-bg-secondary {background: var(--tide-secondary);}
1357
-
1358
- .md-tide-bg-surface {background: var(--tide-surface);}
1359
- .md-tide-bg-surface-variant {background: var(--tide-surface-variant);}
1360
- .md-tide-bg-surface-brand {background: var(--tide-surface-brand);}
1361
- .md-tide-bg-surface-accent {background: var(--tide-surface-accent);}
1362
- .md-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
1363
- .md-tide-bg-surface-floating {background: var(--tide-surface-floating);}
1364
-
1365
- /* Icon background colors only */
1366
- .md-tide-bg-primary-error {background-color: var(--tide-error-primary);}
1367
- .md-tide-bg-primary-info {background-color: var(--tide-info-primary);}
1368
- .md-tide-bg-primary-success {background-color: var(--tide-success-primary);}
1369
- .md-tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
1370
-
1371
- .md-tide-bg-surface-error {background-color: var(--tide-error-surface);}
1372
- .md-tide-bg-surface-info {background-color: var(--tide-info-surface);}
1373
- .md-tide-bg-surface-success {background-color: var(--tide-success-surface);}
1374
- .md-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
1375
-
1376
- .md-tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
1377
- .md-tide-bg-surface-green {background-color: var(--tide-green-surface);}
1378
- .md-tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
1379
- .md-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
1380
- .md-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
1381
- .md-tide-bg-surface-red {background-color: var(--tide-red-surface);}
1382
- .md-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
1383
- .md-tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
1384
- .md-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
1385
-
1386
- .md-tide-transparent-100 {background-color: var(--tide-transparent-100);}
1387
- .md-tide-transparent-200 {background-color: var(--tide-transparent-200);}
1388
- .md-tide-transparent-300 {background-color: var(--tide-transparent-300);}
1389
- .md-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1390
-
1391
- /* Typographic roles */
1392
- .md-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
1393
- .md-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
1394
- .md-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
1395
- .md-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
1396
- .md-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
1397
- .md-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
1398
- .md-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
1399
- .md-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
1400
- .md-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
1401
- .md-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
1402
- .md-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
1403
- .md-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
1404
- .md-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
1405
- .md-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
1406
- .md-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
1407
- .md-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
1408
- .md-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
1409
- .md-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
1410
-
1411
- /* Font Color */
1412
- .md-tide-font-on-primary {color: var(--tide-on-primary);}
1413
- .md-tide-font-on-secondary {color: var(--tide-on-secondary);}
1414
-
1415
- .md-tide-font-on-surface {color: var(--tide-on-surface);}
1416
- .md-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
1417
- .md-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
1418
- .md-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
1419
- .md-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
1420
-
1421
- .md-tide-font-error {color: var(--tide-error-primary);}
1422
- .md-tide-font-info {color: var(--tide-info-primary);}
1423
- .md-tide-font-success {color: var(--tide-success-primary);}
1424
- .md-tide-font-warning {color: var(--tide-warning-primary);}
1425
-
1426
- .md-tide-font-blue {color: var(--tide-blue-on-surface);}
1427
- .md-tide-font-green {color: var(--tide-green-on-surface);}
1428
- .md-tide-font-lime {color: var(--tide-lime-on-surface);}
1429
- .md-tide-font-orange {color: var(--tide-orange-on-surface);}
1430
- .md-tide-font-purple {color: var(--tide-purple-on-surface);}
1431
- .md-tide-font-red {color: var(--tide-red-on-surface);}
1432
- .md-tide-font-salmon {color: var(--tide-salmon-on-surface);}
1433
- .md-tide-font-teal {color: var(--tide-teal-on-surface);}
1434
- .md-tide-font-yellow {color: var(--tide-yellow-on-surface);}
1435
-
1436
- /* Badge icon colors only */
1437
- .md-tide-font-primary-blue {color: var(--tide-blue-primary);}
1438
- .md-tide-font-primary-green {color: var(--tide-green-primary);}
1439
- .md-tide-font-primary-lime {color: var(--tide-lime-primary);}
1440
- .md-tide-font-primary-orange {color: var(--tide-orange-primary);}
1441
- .md-tide-font-primary-purple {color: var(--tide-purple-primary);}
1442
- .md-tide-font-primary-red {color: var(--tide-red-primary);}
1443
- .md-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
1444
- .md-tide-font-primary-teal {color: var(--tide-teal-primary);}
1445
- .md-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
1446
-
1447
- /* Font Size */
1448
- .md-tide-font-10 {font-size: var(--tide-font-10);}
1449
- .md-tide-font-12 {font-size: var(--tide-font-12);}
1450
- .md-tide-font-14 {font-size: var(--tide-font-14);}
1451
- .md-tide-font-16 {font-size: var(--tide-font-16);}
1452
- .md-tide-font-20 {font-size: var(--tide-font-20);}
1453
- .md-tide-font-24 {font-size: var(--tide-font-24);}
1454
- .md-tide-font-32 {font-size: var(--tide-font-32);}
1455
-
1456
- /* Font Weight */
1457
- .md-tide-font-400 {font-weight: 400;}
1458
- .md-tide-font-500 {font-weight: 500;}
1459
- .md-tide-font-600 {font-weight: 600;}
1460
- .md-tide-font-700 {font-weight: 700;}
1461
-
1462
- /* Misc */
1463
- .md-tide-align-middle {vertical-align: middle;}
1464
- .md-tide-align-initial {vertical-align: initial;}
1465
-
1466
- .md-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
1467
-
1468
- .md-tide-break-initial {overflow-wrap: initial;}
1469
- .md-tide-break-word {overflow-wrap: break-word;}
1470
-
1471
- .md-tide-break-inside-avoid-column {break-inside: avoid-column}
1472
-
1473
- .md-tide-columns-initial {column-count: initial;}
1474
- .md-tide-columns-1 {column-count: 1;}
1475
- .md-tide-columns-2 {column-count: 2;}
1476
- .md-tide-columns-3 {column-count: 3;}
1477
- .md-tide-columns-4 {column-count: 4;}
1478
-
1479
- .md-tide-cursor-not-allowed {cursor: not-allowed;}
1480
- .md-tide-cursor-pointer {cursor: pointer;}
1481
- .md-tide-cursor-text {cursor: text;}
1482
-
1483
- .md-tide-ellipsis {
1484
- overflow: hidden;
1485
- text-overflow: ellipsis;
1486
- white-space: nowrap;
1487
- }
1488
-
1489
- .md-tide-isolate {isolation: isolate;}
1490
-
1491
- /* Deprecated */
1492
- .md-tide-leading-default {line-height: 1.4;}
1493
- .md-tide-leading-normal {line-height: normal;}
1494
-
1495
- .md-tide-list-none {list-style-type: none;}
1496
-
1497
- .md-tide-object-center {object-position: center;}
1498
-
1499
- .md-tide-object-cover {object-fit: cover;}
1500
- .md-tide-object-contain {object-fit: contain;}
1501
- .md-tide-object-scale-down {object-fit: scale-down;}
1502
-
1503
- .md-tide-opacity {opacity: 1;}
1504
- .md-tide-opacity-disabled {opacity: var(--tide-disabled);}
1505
- .md-tide-opacity-none {opacity: 0;}
1506
-
1507
- .md-tide-pointer-events {pointer-events: auto;}
1508
- .md-tide-pointer-events-none {pointer-events: none;}
1509
-
1510
- .md-tide-user-select-none {user-select: none;}
1511
- .md-tide-user-select-initial {user-select: initial;}
1512
-
1513
- .md-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
1514
- .md-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
1515
- .md-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
1516
-
1517
- .md-tide-scrollbar-none::-webkit-scrollbar {display: none;}
1518
- .md-tide-scrollbar-none {
1519
- -ms-overflow-style: none;
1520
- scrollbar-width: none;
1521
- }
1522
-
1523
- .md-tide-scroll-snap {
1524
- scroll-snap-stop: always;
1525
- scroll-snap-type: both mandatory;
1526
- scroll-behavior: smooth;
1527
- }
1528
-
1529
- .md-tide-scroll-snap-start {
1530
- scroll-snap-align: start;
1531
- }
1532
-
1533
- .md-tide-shadow-initial {box-shadow: initial;}
1534
- .md-tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
1535
- .md-tide-shadow-top {box-shadow: var(--tide-shadow-top);}
1536
- .md-tide-shadow-text {text-shadow: var(--tide-shadow-text);}
1537
-
1538
- .md-tide-strikethrough {text-decoration: line-through;}
1539
- .md-tide-strikethrough-none {text-decoration: none;}
1540
-
1541
- .md-tide-text-center {text-align: center;}
1542
- .md-tide-text-justify {text-align: justify;}
1543
- .md-tide-text-left {text-align: left;}
1544
- .md-tide-text-right {text-align: right;}
1545
-
1546
- .md-tide-text-transform-lower {text-transform: lowercase;}
1547
- .md-tide-text-transform-none {text-transform: none;}
1548
- .md-tide-text-transform-upper {text-transform: uppercase;}
1549
-
1550
- .md-tide-underline {text-decoration: underline;}
1551
- .md-tide-underline-none {text-decoration: none;}
1552
- .md-tide-underline-hover:hover {text-decoration: underline;}
1553
- .md-tide-underline-hover-none:hover {text-decoration: none;}
1554
-
1555
- .md-tide-visible {visibility: visible;}
1556
- .md-tide-visible-none {visibility: hidden;}
1557
-
1558
- .md-tide-whitespace-nowrap {white-space: nowrap;}
1559
-
1560
- .md-tide-x-auto {overflow-x: auto;}
1561
- .md-tide-x-hidden {overflow-x: hidden;}
1562
- .md-tide-x-scroll {overflow-x: scroll;}
1563
-
1564
- .md-tide-xy-auto {overflow: auto;}
1565
- .md-tide-xy-hidden {overflow: hidden;}
1566
-
1567
- .md-tide-y-auto {overflow-y: auto;}
1568
- .md-tide-y-hidden {overflow-y: hidden;}
1569
-
1570
- .md-tide-z-index-initial {z-index: initial;}
1571
- .md-tide-z-index-1 {z-index: 1;}
1572
-
1573
- /* Buttons */
1574
- /* Rest State */
1575
- .md-tide-button-primary {
1576
- background: var(--tide-primary);
1577
- border: 2px solid var(--tide-primary);
1578
- color: var(--tide-on-primary);
1579
- }
1580
-
1581
- .md-tide-button-secondary {
1582
- background: var(--tide-surface);
1583
- border: 2px solid var(--tide-primary);
1584
- color: var(--tide-primary);
1585
- }
1586
-
1587
- .md-tide-button-tertiary {
1588
- background: var(--tide-white);
1589
- border: 1px solid var(--tide-border);
1590
- color: var(--tide-secondary);
1591
- }
1592
-
1593
- .md-tide-button-quaternary {
1594
- background: var(--tide-white);
1595
- color: var(--tide-secondary);
1596
- }
1597
-
1598
- .md-tide-button-floating {
1599
- background-color: var(--tide-transparent-100);
1600
- color: var(--tide-secondary);
1601
- box-shadow: var(--tide-shadow-bottom);
1602
- }
1603
-
1604
- /* Hover State */
1605
- a.md-tide-button-primary:hover,
1606
- button.md-tide-button-primary:enabled:hover {
1607
- border: 2px solid var(--tide-primary);
1608
- background: var(--tide-white);
1609
- color: var(--tide-primary);
1610
- }
1611
-
1612
- a.md-tide-button-secondary:hover,
1613
- button.md-tide-button-secondary:enabled:hover {
1614
- background: var(--tide-primary);
1615
- color: var(--tide-on-primary);
1616
- }
1617
-
1618
- a.md-tide-button-tertiary:hover,
1619
- button.md-tide-button-tertiary:enabled:hover {
1620
- border: 1px solid var(--tide-border-high);
1621
- }
1622
-
1623
- a.md-tide-button-quaternary:hover,
1624
- button.md-tide-button-quaternary:enabled:hover {
1625
- background: var(--tide-surface-variant);
1626
- }
1627
-
1628
- .md-tide-button-floating:hover,
1629
- button.md-tide-button-floating:enabled:hover {
1630
- background-color: var(--tide-white);
1631
- }
1632
-
1633
- /* Disabled State */
1634
- button.md-tide-button-primary:disabled,
1635
- button.md-tide-button-secondary:disabled,
1636
- button.md-tide-button-tertiary:disabled,
1637
- button.md-tide-button-quaternary:disabled,
1638
- button.md-tide-button-floating:disabled {
1639
- opacity: var(--tide-disabled);
1640
- }
1641
- }
1642
-
1643
- @media (min-width: 1232px) {
1644
- /* Reusable CSS Utility Library */
1645
- /* Position */
1646
- .lg-tide-position-absolute {position: absolute;}
1647
- .lg-tide-position-fixed {position: fixed;}
1648
- .lg-tide-position-relative {position: relative;}
1649
- .lg-tide-position-static {position: static;}
1650
- .lg-tide-position-sticky {position: sticky;}
1651
-
1652
- .lg-tide-top-0 {top: 0;}
1653
- .lg-tide-right-0 {right: 0;}
1654
- .lg-tide-bottom-0 {bottom: 0;}
1655
- .lg-tide-left-0 {left: 0;}
1656
-
1657
- /* Display */
1658
- .lg-tide-display-block {display: block;}
1659
- .lg-tide-display-contents {display: contents;}
1660
- .lg-tide-display-flex {display: flex;}
1661
- .lg-tide-display-grid {display: grid;}
1662
- .lg-tide-display-initial {display: initial;}
1663
- .lg-tide-display-inline {display: inline;}
1664
- .lg-tide-display-inline-block {display: inline-block;}
1665
- .lg-tide-display-inline-flex {display: inline-flex;}
1666
- .lg-tide-display-none {display: none;}
1667
-
1668
- /* Flex Box */
1669
- .lg-tide-flex-column {flex-direction: column;}
1670
- .lg-tide-flex-column-reverse {flex-direction: column-reverse;}
1671
- .lg-tide-flex-row {flex-direction: row;}
1672
- .lg-tide-flex-row-reverse {flex-direction: row-reverse;}
1673
-
1674
- .lg-tide-grow {flex-grow: 1;}
1675
- .lg-tide-grow-none {flex-grow: 0;}
1676
-
1677
- .lg-tide-shrink {flex-shrink: 1;}
1678
- .lg-tide-shrink-none {flex-shrink: 0;}
1679
-
1680
- .lg-tide-flex-wrap {flex-wrap: wrap;}
1681
-
1682
- .lg-tide-axis1-around {justify-content: space-around;}
1683
- .lg-tide-axis1-between {justify-content: space-between;}
1684
- .lg-tide-axis1-center {justify-content: center;}
1685
- .lg-tide-axis1-end {justify-content: end;}
1686
- .lg-tide-axis1-start {justify-content: start;}
1687
-
1688
- .lg-tide-axis2-around {align-items: space-around;}
1689
- .lg-tide-axis2-center {align-items: center;}
1690
- .lg-tide-axis2-end {align-items: flex-end;}
1691
- .lg-tide-axis2-start {align-items: flex-start;}
1692
- .lg-tide-axis2-stretch {align-items: stretch;}
1693
-
1694
- .lg-tide-gap-0 {gap: 0;}
1695
- .lg-tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
1696
- .lg-tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
1697
- .lg-tide-gap-1 {gap: var(--tide-spacing-1);}
1698
- .lg-tide-gap-2 {gap: var(--tide-spacing-2);}
1699
- .lg-tide-gap-4 {gap: var(--tide-spacing-4);}
1700
-
1701
- .lg-tide-flex-basis-auto {flex-basis: auto;}
1702
- .lg-tide-flex-basis-0 {flex-basis: 0;}
1703
-
1704
- /* Box Sizing */
1705
- .lg-tide-box-border {box-sizing: border-box;}
1706
- .lg-tide-box-content {box-sizing: content-box;}
1707
-
1708
- /* Margin */
1709
- .lg-tide-margin-0 {margin: 0;}
1710
- .lg-tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
1711
- .lg-tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
1712
- .lg-tide-margin-1 {margin: var(--tide-spacing-1);}
1713
- .lg-tide-margin-2 {margin: var(--tide-spacing-2);}
1714
- .lg-tide-margin-4 {margin: var(--tide-spacing-4);}
1715
- .lg-tide-margin-auto {margin: auto;}
1716
-
1717
- .lg-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
1718
- .lg-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
1719
- .lg-tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
1720
- .lg-tide-margin-x-1 {margin-left: var(--tide-spacing-1); margin-right: var(--tide-spacing-1);}
1721
- .lg-tide-margin-x-2 {margin-left: var(--tide-spacing-2); margin-right: var(--tide-spacing-2);}
1722
- .lg-tide-margin-x-4 {margin-left: var(--tide-spacing-4); margin-right: var(--tide-spacing-4);}
1723
- .lg-tide-margin-x-auto {margin-left: auto; margin-right: auto;}
1724
-
1725
- .lg-tide-margin-y-0 {margin-top: 0; margin-bottom: 0;}
1726
- .lg-tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
1727
- .lg-tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
1728
- .lg-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
1729
- .lg-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
1730
- .lg-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
1731
- .lg-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
1732
-
1733
- .lg-tide-margin-top-0 {margin-top: 0;}
1734
- .lg-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
1735
- .lg-tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
1736
- .lg-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
1737
- .lg-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
1738
- .lg-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
1739
- .lg-tide-margin-top-auto {margin-top: auto;}
1740
-
1741
- .lg-tide-margin-right-0 {margin-right: 0;}
1742
- .lg-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
1743
- .lg-tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
1744
- .lg-tide-margin-right-1 {margin-right: var(--tide-spacing-1);}
1745
- .lg-tide-margin-right-2 {margin-right: var(--tide-spacing-2);}
1746
- .lg-tide-margin-right-4 {margin-right: var(--tide-spacing-4);}
1747
- .lg-tide-margin-right-auto {margin-right: auto;}
1748
-
1749
- .lg-tide-margin-bottom-0 {margin-bottom: 0;}
1750
- .lg-tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
1751
- .lg-tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
1752
- .lg-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
1753
- .lg-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
1754
- .lg-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
1755
- .lg-tide-margin-bottom-auto {margin-bottom: auto;}
1756
-
1757
- .lg-tide-margin-left-0 {margin-left: 0;}
1758
- .lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
1759
- .lg-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
1760
- .lg-tide-margin-left-1 {margin-left: var(--tide-spacing-1);}
1761
- .lg-tide-margin-left-2 {margin-left: var(--tide-spacing-2);}
1762
- .lg-tide-margin-left-4 {margin-left: var(--tide-spacing-4);}
1763
- .lg-tide-margin-left-auto {margin-left: auto;}
1764
-
1765
- /* Border Color */
1766
- .lg-tide-border-color-initial {border-color: initial;}
1767
-
1768
- .lg-tide-border-primary {border-color: var(--tide-primary);}
1769
-
1770
- .lg-tide-border {border-color: var(--tide-border);}
1771
- .lg-tide-border-low {border-color: var(--tide-border-low);}
1772
- .lg-tide-border-high {border-color: var(--tide-border-high);}
1773
- .lg-tide-border-floating {border-color: var(--tide-border-floating);}
1774
-
1775
- .lg-tide-border-error {border-color: var(--tide-error-border);}
1776
- .lg-tide-border-info {border-color: var(--tide-info-border);}
1777
- .lg-tide-border-success {border-color: var(--tide-success-border);}
1778
- .lg-tide-border-warning {border-color: var(--tide-warning-border);}
1779
-
1780
- .lg-tide-border-blue {border-color: var(--tide-blue-border);}
1781
- .lg-tide-border-green {border-color: var(--tide-green-border);}
1782
- .lg-tide-border-lime {border-color: var(--tide-lime-border);}
1783
- .lg-tide-border-orange {border-color: var(--tide-orange-border);}
1784
- .lg-tide-border-purple {border-color: var(--tide-purple-border);}
1785
- .lg-tide-border-red {border-color: var(--tide-red-border);}
1786
- .lg-tide-border-salmon {border-color: var(--tide-salmon-border);}
1787
- .lg-tide-border-teal {border-color: var(--tide-teal-border);}
1788
- .lg-tide-border-yellow {border-color: var(--tide-yellow-border);}
1789
-
1790
- /* Border Width */
1791
- .lg-tide-border-1,
1792
- .lg-tide-border-2,
1793
- .lg-tide-border-bottom-1,
1794
- .lg-tide-border-bottom-2,
1795
- .lg-tide-border-left-1,
1796
- .lg-tide-border-left-2,
1797
- .lg-tide-border-right-1,
1798
- .lg-tide-border-right-2,
1799
- .lg-tide-border-top-1,
1800
- .lg-tide-border-top-2 {
1801
- border-style: solid;
1802
- }
1803
-
1804
- .lg-tide-border-dashed {border-style: dashed;}
1805
- .lg-tide-border-solid {border-style: solid;}
1806
-
1807
- .lg-tide-border-0 {border-width: 0;}
1808
- .lg-tide-border-1 {border-width: var(--tide-border-width-1);}
1809
- .lg-tide-border-2 {border-width: var(--tide-border-width-2);}
1810
-
1811
- .lg-tide-border-top-0 {border-top-width: 0;}
1812
- .lg-tide-border-right-0 {border-right-width: 0;}
1813
- .lg-tide-border-bottom-0 {border-bottom-width: 0;}
1814
- .lg-tide-border-left-0 {border-left-width: 0;}
1815
-
1816
- .lg-tide-border-top-1 {border-top-width: var(--tide-border-width-1);}
1817
- .lg-tide-border-right-1 {border-right-width: var(--tide-border-width-1);}
1818
- .lg-tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
1819
- .lg-tide-border-left-1 {border-left-width: var(--tide-border-width-1);}
1820
-
1821
- .lg-tide-border-top-2 {border-top-width: var(--tide-border-width-2);}
1822
- .lg-tide-border-right-2 {border-right-width: var(--tide-border-width-2);}
1823
- .lg-tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
1824
- .lg-tide-border-left-2 {border-left-width: var(--tide-border-width-2);}
1825
-
1826
- .lg-tide-radius-0 {border-radius: 0;}
1827
- .lg-tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
1828
- .lg-tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
1829
- .lg-tide-radius-1 {border-radius: var(--tide-radius-1);}
1830
- .lg-tide-radius-full {border-radius: var(--tide-radius-full);}
1831
-
1832
- /* Padding */
1833
- .lg-tide-padding-0 {padding: 0;}
1834
- .lg-tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
1835
- .lg-tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
1836
- .lg-tide-padding-1 {padding: var(--tide-spacing-1);}
1837
- .lg-tide-padding-2 {padding: var(--tide-spacing-2);}
1838
- .lg-tide-padding-4 {padding: var(--tide-spacing-4);}
1839
-
1840
- .lg-tide-padding-x-0 {padding-left: 0; padding-right: 0;}
1841
- .lg-tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
1842
- .lg-tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
1843
- .lg-tide-padding-x-1 {padding-left: var(--tide-spacing-1); padding-right: var(--tide-spacing-1);}
1844
- .lg-tide-padding-x-2 {padding-left: var(--tide-spacing-2); padding-right: var(--tide-spacing-2);}
1845
- .lg-tide-padding-x-4 {padding-left: var(--tide-spacing-4); padding-right: var(--tide-spacing-4);}
1846
-
1847
- .lg-tide-padding-y-0 {padding-top: 0; padding-bottom: 0;}
1848
- .lg-tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
1849
- .lg-tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
1850
- .lg-tide-padding-y-1 {padding-top: var(--tide-spacing-1); padding-bottom: var(--tide-spacing-1);}
1851
- .lg-tide-padding-y-2 {padding-top: var(--tide-spacing-2); padding-bottom: var(--tide-spacing-2);}
1852
- .lg-tide-padding-y-4 {padding-top: var(--tide-spacing-4); padding-bottom: var(--tide-spacing-4);}
1853
-
1854
- .lg-tide-padding-top-0 {padding-top: 0;}
1855
- .lg-tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
1856
- .lg-tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
1857
- .lg-tide-padding-top-1 {padding-top: var(--tide-spacing-1);}
1858
- .lg-tide-padding-top-2 {padding-top: var(--tide-spacing-2);}
1859
- .lg-tide-padding-top-4 {padding-top: var(--tide-spacing-4);}
1860
-
1861
- .lg-tide-padding-right-0 {padding-right: 0;}
1862
- .lg-tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
1863
- .lg-tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
1864
- .lg-tide-padding-right-1 {padding-right: var(--tide-spacing-1);}
1865
- .lg-tide-padding-right-2 {padding-right: var(--tide-spacing-2);}
1866
- .lg-tide-padding-right-4 {padding-right: var(--tide-spacing-4);}
1867
-
1868
- .lg-tide-padding-bottom-0 {padding-bottom: 0;}
1869
- .lg-tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
1870
- .lg-tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
1871
- .lg-tide-padding-bottom-1 {padding-bottom: var(--tide-spacing-1);}
1872
- .lg-tide-padding-bottom-2 {padding-bottom: var(--tide-spacing-2);}
1873
- .lg-tide-padding-bottom-4 {padding-bottom: var(--tide-spacing-4);}
1874
-
1875
- .lg-tide-padding-left-0 {padding-left: 0;}
1876
- .lg-tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
1877
- .lg-tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
1878
- .lg-tide-padding-left-1 {padding-left: var(--tide-spacing-1);}
1879
- .lg-tide-padding-left-2 {padding-left: var(--tide-spacing-2);}
1880
- .lg-tide-padding-left-4 {padding-left: var(--tide-spacing-4);}
1881
-
1882
- /* Dimension */
1883
- .lg-tide-max-width-full {max-width: 100%;}
1884
- .lg-tide-min-width-0 {min-width: 0;}
1885
-
1886
- .lg-tide-max-height-full {max-height: 100%;}
1887
- .lg-tide-min-height-0 {min-height: 0;}
1888
-
1889
- .lg-tide-width-auto {width: auto;}
1890
- .lg-tide-width-0 {width: 0;}
1891
- .lg-tide-width-full {width: 100%;}
1892
-
1893
- .lg-tide-height-auto {height: auto;}
1894
- .lg-tide-height-0 {height: 0;}
1895
- .lg-tide-height-full {height: 100%;}
1896
-
1897
- /* Deprecated */
1898
- .lg-tide-width-container {max-width: 1168px;}
1899
-
1900
- /* Background */
1901
- .lg-tide-bg-initial {background-color: initial;}
1902
-
1903
- .lg-tide-bg-primary {background: var(--tide-primary);}
1904
- .lg-tide-bg-secondary {background: var(--tide-secondary);}
1905
-
1906
- .lg-tide-bg-surface {background: var(--tide-surface);}
1907
- .lg-tide-bg-surface-variant {background: var(--tide-surface-variant);}
1908
- .lg-tide-bg-surface-brand {background: var(--tide-surface-brand);}
1909
- .lg-tide-bg-surface-accent {background: var(--tide-surface-accent);}
1910
- .lg-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
1911
- .lg-tide-bg-surface-floating {background: var(--tide-surface-floating);}
1912
-
1913
- /* Icon background colors only */
1914
- .lg-tide-bg-primary-error {background-color: var(--tide-error-primary);}
1915
- .lg-tide-bg-primary-info {background-color: var(--tide-info-primary);}
1916
- .lg-tide-bg-primary-success {background-color: var(--tide-success-primary);}
1917
- .lg-tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
1918
-
1919
- .lg-tide-bg-surface-error {background-color: var(--tide-error-surface);}
1920
- .lg-tide-bg-surface-info {background-color: var(--tide-info-surface);}
1921
- .lg-tide-bg-surface-success {background-color: var(--tide-success-surface);}
1922
- .lg-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
1923
-
1924
- .lg-tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
1925
- .lg-tide-bg-surface-green {background-color: var(--tide-green-surface);}
1926
- .lg-tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
1927
- .lg-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
1928
- .lg-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
1929
- .lg-tide-bg-surface-red {background-color: var(--tide-red-surface);}
1930
- .lg-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
1931
- .lg-tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
1932
- .lg-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
1933
-
1934
- .lg-tide-transparent-100 {background-color: var(--tide-transparent-100);}
1935
- .lg-tide-transparent-200 {background-color: var(--tide-transparent-200);}
1936
- .lg-tide-transparent-300 {background-color: var(--tide-transparent-300);}
1937
- .lg-tide-transparent-400 {background-color: var(--tide-transparent-400);}
1938
-
1939
- /* Typographic roles */
1940
- .lg-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
1941
- .lg-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
1942
- .lg-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
1943
- .lg-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
1944
- .lg-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
1945
- .lg-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
1946
- .lg-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
1947
- .lg-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
1948
- .lg-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
1949
- .lg-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
1950
- .lg-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
1951
- .lg-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
1952
- .lg-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
1953
- .lg-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
1954
- .lg-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
1955
- .lg-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
1956
- .lg-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
1957
- .lg-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
1958
-
1959
- /* Font Color */
1960
- .lg-tide-font-on-primary {color: var(--tide-on-primary);}
1961
- .lg-tide-font-on-secondary {color: var(--tide-on-secondary);}
1962
-
1963
- .lg-tide-font-on-surface {color: var(--tide-on-surface);}
1964
- .lg-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
1965
- .lg-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
1966
- .lg-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
1967
- .lg-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
1968
-
1969
- .lg-tide-font-error {color: var(--tide-error-primary);}
1970
- .lg-tide-font-info {color: var(--tide-info-primary);}
1971
- .lg-tide-font-success {color: var(--tide-success-primary);}
1972
- .lg-tide-font-warning {color: var(--tide-warning-primary);}
1973
-
1974
- .lg-tide-font-blue {color: var(--tide-blue-on-surface);}
1975
- .lg-tide-font-green {color: var(--tide-green-on-surface);}
1976
- .lg-tide-font-lime {color: var(--tide-lime-on-surface);}
1977
- .lg-tide-font-orange {color: var(--tide-orange-on-surface);}
1978
- .lg-tide-font-purple {color: var(--tide-purple-on-surface);}
1979
- .lg-tide-font-red {color: var(--tide-red-on-surface);}
1980
- .lg-tide-font-salmon {color: var(--tide-salmon-on-surface);}
1981
- .lg-tide-font-teal {color: var(--tide-teal-on-surface);}
1982
- .lg-tide-font-yellow {color: var(--tide-yellow-on-surface);}
1983
-
1984
- /* Badge icon colors only */
1985
- .lg-tide-font-primary-blue {color: var(--tide-blue-primary);}
1986
- .lg-tide-font-primary-green {color: var(--tide-green-primary);}
1987
- .lg-tide-font-primary-lime {color: var(--tide-lime-primary);}
1988
- .lg-tide-font-primary-orange {color: var(--tide-orange-primary);}
1989
- .lg-tide-font-primary-purple {color: var(--tide-purple-primary);}
1990
- .lg-tide-font-primary-red {color: var(--tide-red-primary);}
1991
- .lg-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
1992
- .lg-tide-font-primary-teal {color: var(--tide-teal-primary);}
1993
- .lg-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
1994
-
1995
- /* Font Size */
1996
- .lg-tide-font-10 {font-size: var(--tide-font-10);}
1997
- .lg-tide-font-12 {font-size: var(--tide-font-12);}
1998
- .lg-tide-font-14 {font-size: var(--tide-font-14);}
1999
- .lg-tide-font-16 {font-size: var(--tide-font-16);}
2000
- .lg-tide-font-20 {font-size: var(--tide-font-20);}
2001
- .lg-tide-font-24 {font-size: var(--tide-font-24);}
2002
- .lg-tide-font-32 {font-size: var(--tide-font-32);}
2003
-
2004
- /* Font Weight */
2005
- .lg-tide-font-400 {font-weight: 400;}
2006
- .lg-tide-font-500 {font-weight: 500;}
2007
- .lg-tide-font-600 {font-weight: 600;}
2008
- .lg-tide-font-700 {font-weight: 700;}
2009
-
2010
- /* Misc */
2011
- .lg-tide-align-middle {vertical-align: middle;}
2012
- .lg-tide-align-initial {vertical-align: initial;}
2013
-
2014
- .lg-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
2015
-
2016
- .lg-tide-break-initial {overflow-wrap: initial;}
2017
- .lg-tide-break-word {overflow-wrap: break-word;}
2018
-
2019
- .lg-tide-break-inside-avoid-column {break-inside: avoid-column}
2020
-
2021
- .lg-tide-columns-initial {column-count: initial;}
2022
- .lg-tide-columns-1 {column-count: 1;}
2023
- .lg-tide-columns-2 {column-count: 2;}
2024
- .lg-tide-columns-3 {column-count: 3;}
2025
- .lg-tide-columns-4 {column-count: 4;}
2026
-
2027
- .lg-tide-cursor-not-allowed {cursor: not-allowed;}
2028
- .lg-tide-cursor-pointer {cursor: pointer;}
2029
- .lg-tide-cursor-text {cursor: text;}
2030
-
2031
- .lg-tide-ellipsis {
2032
- overflow: hidden;
2033
- text-overflow: ellipsis;
2034
- white-space: nowrap;
2035
- }
2036
-
2037
- .lg-tide-isolate {isolation: isolate;}
2038
-
2039
- /* Deprecated */
2040
- .lg-tide-leading-default {line-height: 1.4;}
2041
- .lg-tide-leading-normal {line-height: normal;}
2042
-
2043
- .lg-tide-list-none {list-style-type: none;}
2044
-
2045
- .lg-tide-object-center {object-position: center;}
2046
-
2047
- .lg-tide-object-cover {object-fit: cover;}
2048
- .lg-tide-object-contain {object-fit: contain;}
2049
- .lg-tide-object-scale-down {object-fit: scale-down;}
2050
-
2051
- .lg-tide-opacity {opacity: 1;}
2052
- .lg-tide-opacity-disabled {opacity: var(--tide-disabled);}
2053
- .lg-tide-opacity-none {opacity: 0;}
2054
-
2055
- .lg-tide-pointer-events {pointer-events: auto;}
2056
- .lg-tide-pointer-events-none {pointer-events: none;}
2057
-
2058
- .lg-tide-user-select-none {user-select: none;}
2059
- .lg-tide-user-select-initial {user-select: initial;}
2060
-
2061
- .lg-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
2062
- .lg-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
2063
- .lg-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
2064
-
2065
- .lg-tide-scrollbar-none::-webkit-scrollbar {display: none;}
2066
- .lg-tide-scrollbar-none {
2067
- -ms-overflow-style: none;
2068
- scrollbar-width: none;
2069
- }
2070
-
2071
- .lg-tide-scroll-snap {
2072
- scroll-snap-stop: always;
2073
- scroll-snap-type: both mandatory;
2074
- scroll-behavior: smooth;
2075
- }
2076
-
2077
- .lg-tide-scroll-snap-start {
2078
- scroll-snap-align: start;
2079
- }
2080
-
2081
- .lg-tide-shadow-initial {box-shadow: initial;}
2082
- .lg-tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
2083
- .lg-tide-shadow-top {box-shadow: var(--tide-shadow-top);}
2084
- .lg-tide-shadow-text {text-shadow: var(--tide-shadow-text);}
2085
-
2086
- .lg-tide-strikethrough {text-decoration: line-through;}
2087
- .lg-tide-strikethrough-none {text-decoration: none;}
2088
-
2089
- .lg-tide-text-center {text-align: center;}
2090
- .lg-tide-text-justify {text-align: justify;}
2091
- .lg-tide-text-left {text-align: left;}
2092
- .lg-tide-text-right {text-align: right;}
2093
-
2094
- .lg-tide-text-transform-lower {text-transform: lowercase;}
2095
- .lg-tide-text-transform-none {text-transform: none;}
2096
- .lg-tide-text-transform-upper {text-transform: uppercase;}
2097
-
2098
- .lg-tide-underline {text-decoration: underline;}
2099
- .lg-tide-underline-none {text-decoration: none;}
2100
- .lg-tide-underline-hover:hover {text-decoration: underline;}
2101
- .lg-tide-underline-hover-none:hover {text-decoration: none;}
2102
-
2103
- .lg-tide-visible {visibility: visible;}
2104
- .lg-tide-visible-none {visibility: hidden;}
2105
-
2106
- .lg-tide-whitespace-nowrap {white-space: nowrap;}
2107
-
2108
- .lg-tide-x-auto {overflow-x: auto;}
2109
- .lg-tide-x-hidden {overflow-x: hidden;}
2110
- .lg-tide-x-scroll {overflow-x: scroll;}
2111
-
2112
- .lg-tide-xy-auto {overflow: auto;}
2113
- .lg-tide-xy-hidden {overflow: hidden;}
2114
-
2115
- .lg-tide-y-auto {overflow-y: auto;}
2116
- .lg-tide-y-hidden {overflow-y: hidden;}
2117
-
2118
- .lg-tide-z-index-initial {z-index: initial;}
2119
- .lg-tide-z-index-1 {z-index: 1;}
2120
-
2121
- /* Buttons */
2122
- /* Rest State */
2123
- .lg-tide-button-primary {
2124
- background: var(--tide-primary);
2125
- border: 2px solid var(--tide-primary);
2126
- color: var(--tide-on-primary);
2127
- }
2128
-
2129
- .lg-tide-button-secondary {
2130
- background: var(--tide-surface);
2131
- border: 2px solid var(--tide-primary);
2132
- color: var(--tide-primary);
2133
- }
2134
-
2135
- .lg-tide-button-tertiary {
2136
- background: var(--tide-white);
2137
- border: 1px solid var(--tide-border);
2138
- color: var(--tide-secondary);
2139
- }
2140
-
2141
- .lg-tide-button-quaternary {
2142
- background: var(--tide-white);
2143
- color: var(--tide-secondary);
2144
- }
2145
-
2146
- .lg-tide-button-floating {
2147
- background-color: var(--tide-transparent-100);
2148
- color: var(--tide-secondary);
2149
- box-shadow: var(--tide-shadow-bottom);
2150
- }
2151
-
2152
- /* Hover State */
2153
- a.lg-tide-button-primary:hover,
2154
- button.lg-tide-button-primary:enabled:hover {
2155
- border: 2px solid var(--tide-primary);
2156
- background: var(--tide-white);
2157
- color: var(--tide-primary);
2158
- }
2159
-
2160
- a.lg-tide-button-secondary:hover,
2161
- button.lg-tide-button-secondary:enabled:hover {
2162
- background: var(--tide-primary);
2163
- color: var(--tide-on-primary);
2164
- }
2165
-
2166
- a.lg-tide-button-tertiary:hover,
2167
- button.lg-tide-button-tertiary:enabled:hover {
2168
- border: 1px solid var(--tide-border-high);
2169
- }
2170
-
2171
- a.lg-tide-button-quaternary:hover,
2172
- button.lg-tide-button-quaternary:enabled:hover {
2173
- background: var(--tide-surface-variant);
2174
- }
2175
-
2176
- .lg-tide-button-floating:hover,
2177
- button.lg-tide-button-floating:enabled:hover {
2178
- background-color: var(--tide-white);
2179
- }
2180
-
2181
- /* Disabled State */
2182
- button.lg-tide-button-primary:disabled,
2183
- button.lg-tide-button-secondary:disabled,
2184
- button.lg-tide-button-tertiary:disabled,
2185
- button.lg-tide-button-quaternary:disabled,
2186
- button.lg-tide-button-floating:disabled {
2187
- opacity: var(--tide-disabled);
2188
- }
2189
- }
2190
-
2191
- @media (min-width: 1920px) {
2192
- /* Reusable CSS Utility Library */
2193
- /* Position */
2194
- .xl-tide-position-absolute {position: absolute;}
2195
- .xl-tide-position-fixed {position: fixed;}
2196
- .xl-tide-position-relative {position: relative;}
2197
- .xl-tide-position-static {position: static;}
2198
- .xl-tide-position-sticky {position: sticky;}
2199
-
2200
- .xl-tide-top-0 {top: 0;}
2201
- .xl-tide-right-0 {right: 0;}
2202
- .xl-tide-bottom-0 {bottom: 0;}
2203
- .xl-tide-left-0 {left: 0;}
2204
-
2205
- /* Display */
2206
- .xl-tide-display-block {display: block;}
2207
- .xl-tide-display-contents {display: contents;}
2208
- .xl-tide-display-flex {display: flex;}
2209
- .xl-tide-display-grid {display: grid;}
2210
- .xl-tide-display-initial {display: initial;}
2211
- .xl-tide-display-inline {display: inline;}
2212
- .xl-tide-display-inline-block {display: inline-block;}
2213
- .xl-tide-display-inline-flex {display: inline-flex;}
2214
- .xl-tide-display-none {display: none;}
2215
-
2216
- /* Flex Box */
2217
- .xl-tide-flex-column {flex-direction: column;}
2218
- .xl-tide-flex-column-reverse {flex-direction: column-reverse;}
2219
- .xl-tide-flex-row {flex-direction: row;}
2220
- .xl-tide-flex-row-reverse {flex-direction: row-reverse;}
2221
-
2222
- .xl-tide-grow {flex-grow: 1;}
2223
- .xl-tide-grow-none {flex-grow: 0;}
2224
-
2225
- .xl-tide-shrink {flex-shrink: 1;}
2226
- .xl-tide-shrink-none {flex-shrink: 0;}
2227
-
2228
- .xl-tide-flex-wrap {flex-wrap: wrap;}
2229
-
2230
- .xl-tide-axis1-around {justify-content: space-around;}
2231
- .xl-tide-axis1-between {justify-content: space-between;}
2232
- .xl-tide-axis1-center {justify-content: center;}
2233
- .xl-tide-axis1-end {justify-content: end;}
2234
- .xl-tide-axis1-start {justify-content: start;}
2235
-
2236
- .xl-tide-axis2-around {align-items: space-around;}
2237
- .xl-tide-axis2-center {align-items: center;}
2238
- .xl-tide-axis2-end {align-items: flex-end;}
2239
- .xl-tide-axis2-start {align-items: flex-start;}
2240
- .xl-tide-axis2-stretch {align-items: stretch;}
2241
-
2242
- .xl-tide-gap-0 {gap: 0;}
2243
- .xl-tide-gap-1\/4 {gap: var(--tide-spacing-1\/4);}
2244
- .xl-tide-gap-1\/2 {gap: var(--tide-spacing-1\/2);}
2245
- .xl-tide-gap-1 {gap: var(--tide-spacing-1);}
2246
- .xl-tide-gap-2 {gap: var(--tide-spacing-2);}
2247
- .xl-tide-gap-4 {gap: var(--tide-spacing-4);}
2248
-
2249
- .xl-tide-flex-basis-auto {flex-basis: auto;}
2250
- .xl-tide-flex-basis-0 {flex-basis: 0;}
2251
-
2252
- /* Box Sizing */
2253
- .xl-tide-box-border {box-sizing: border-box;}
2254
- .xl-tide-box-content {box-sizing: content-box;}
2255
-
2256
- /* Margin */
2257
- .xl-tide-margin-0 {margin: 0;}
2258
- .xl-tide-margin-1\/4 {margin: var(--tide-spacing-1\/4);}
2259
- .xl-tide-margin-1\/2 {margin: var(--tide-spacing-1\/2);}
2260
- .xl-tide-margin-1 {margin: var(--tide-spacing-1);}
2261
- .xl-tide-margin-2 {margin: var(--tide-spacing-2);}
2262
- .xl-tide-margin-4 {margin: var(--tide-spacing-4);}
2263
- .xl-tide-margin-auto {margin: auto;}
2264
-
2265
- .xl-tide-margin-x-0 {margin-left: 0; margin-right: 0;}
2266
- .xl-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
2267
- .xl-tide-margin-x-1\/2 {margin-left: var(--tide-spacing-1\/2); margin-right: var(--tide-spacing-1\/2);}
2268
- .xl-tide-margin-x-1 {margin-left: var(--tide-spacing-1); margin-right: var(--tide-spacing-1);}
2269
- .xl-tide-margin-x-2 {margin-left: var(--tide-spacing-2); margin-right: var(--tide-spacing-2);}
2270
- .xl-tide-margin-x-4 {margin-left: var(--tide-spacing-4); margin-right: var(--tide-spacing-4);}
2271
- .xl-tide-margin-x-auto {margin-left: auto; margin-right: auto;}
2272
-
2273
- .xl-tide-margin-y-0 {margin-top: 0; margin-bottom: 0;}
2274
- .xl-tide-margin-y-1\/4 {margin-top: var(--tide-spacing-1\/4); margin-bottom: var(--tide-spacing-1\/4);}
2275
- .xl-tide-margin-y-1\/2 {margin-top: var(--tide-spacing-1\/2); margin-bottom: var(--tide-spacing-1\/2);}
2276
- .xl-tide-margin-y-1 {margin-top: var(--tide-spacing-1); margin-bottom: var(--tide-spacing-1);}
2277
- .xl-tide-margin-y-2 {margin-top: var(--tide-spacing-2); margin-bottom: var(--tide-spacing-2);}
2278
- .xl-tide-margin-y-4 {margin-top: var(--tide-spacing-4); margin-bottom: var(--tide-spacing-4);}
2279
- .xl-tide-margin-y-auto {margin-top: auto; margin-bottom: auto;}
2280
-
2281
- .xl-tide-margin-top-0 {margin-top: 0;}
2282
- .xl-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
2283
- .xl-tide-margin-top-1\/2 {margin-top: var(--tide-spacing-1\/2);}
2284
- .xl-tide-margin-top-1 {margin-top: var(--tide-spacing-1);}
2285
- .xl-tide-margin-top-2 {margin-top: var(--tide-spacing-2);}
2286
- .xl-tide-margin-top-4 {margin-top: var(--tide-spacing-4);}
2287
- .xl-tide-margin-top-auto {margin-top: auto;}
2288
-
2289
- .xl-tide-margin-right-0 {margin-right: 0;}
2290
- .xl-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
2291
- .xl-tide-margin-right-1\/2 {margin-right: var(--tide-spacing-1\/2);}
2292
- .xl-tide-margin-right-1 {margin-right: var(--tide-spacing-1);}
2293
- .xl-tide-margin-right-2 {margin-right: var(--tide-spacing-2);}
2294
- .xl-tide-margin-right-4 {margin-right: var(--tide-spacing-4);}
2295
- .xl-tide-margin-right-auto {margin-right: auto;}
2296
-
2297
- .xl-tide-margin-bottom-0 {margin-bottom: 0;}
2298
- .xl-tide-margin-bottom-1\/4 {margin-bottom: var(--tide-spacing-1\/4);}
2299
- .xl-tide-margin-bottom-1\/2 {margin-bottom: var(--tide-spacing-1\/2);}
2300
- .xl-tide-margin-bottom-1 {margin-bottom: var(--tide-spacing-1);}
2301
- .xl-tide-margin-bottom-2 {margin-bottom: var(--tide-spacing-2);}
2302
- .xl-tide-margin-bottom-4 {margin-bottom: var(--tide-spacing-4);}
2303
- .xl-tide-margin-bottom-auto {margin-bottom: auto;}
2304
-
2305
- .xl-tide-margin-left-0 {margin-left: 0;}
2306
- .xl-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
2307
- .xl-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
2308
- .xl-tide-margin-left-1 {margin-left: var(--tide-spacing-1);}
2309
- .xl-tide-margin-left-2 {margin-left: var(--tide-spacing-2);}
2310
- .xl-tide-margin-left-4 {margin-left: var(--tide-spacing-4);}
2311
- .xl-tide-margin-left-auto {margin-left: auto;}
2312
-
2313
- /* Border Color */
2314
- .xl-tide-border-color-initial {border-color: initial;}
2315
-
2316
- .xl-tide-border-primary {border-color: var(--tide-primary);}
2317
-
2318
- .xl-tide-border {border-color: var(--tide-border);}
2319
- .xl-tide-border-low {border-color: var(--tide-border-low);}
2320
- .xl-tide-border-high {border-color: var(--tide-border-high);}
2321
- .xl-tide-border-floating {border-color: var(--tide-border-floating);}
2322
-
2323
- .xl-tide-border-error {border-color: var(--tide-error-border);}
2324
- .xl-tide-border-info {border-color: var(--tide-info-border);}
2325
- .xl-tide-border-success {border-color: var(--tide-success-border);}
2326
- .xl-tide-border-warning {border-color: var(--tide-warning-border);}
2327
-
2328
- .xl-tide-border-blue {border-color: var(--tide-blue-border);}
2329
- .xl-tide-border-green {border-color: var(--tide-green-border);}
2330
- .xl-tide-border-lime {border-color: var(--tide-lime-border);}
2331
- .xl-tide-border-orange {border-color: var(--tide-orange-border);}
2332
- .xl-tide-border-purple {border-color: var(--tide-purple-border);}
2333
- .xl-tide-border-red {border-color: var(--tide-red-border);}
2334
- .xl-tide-border-salmon {border-color: var(--tide-salmon-border);}
2335
- .xl-tide-border-teal {border-color: var(--tide-teal-border);}
2336
- .xl-tide-border-yellow {border-color: var(--tide-yellow-border);}
2337
-
2338
- /* Border Width */
2339
- .xl-tide-border-1,
2340
- .xl-tide-border-2,
2341
- .xl-tide-border-bottom-1,
2342
- .xl-tide-border-bottom-2,
2343
- .xl-tide-border-left-1,
2344
- .xl-tide-border-left-2,
2345
- .xl-tide-border-right-1,
2346
- .xl-tide-border-right-2,
2347
- .xl-tide-border-top-1,
2348
- .xl-tide-border-top-2 {
2349
- border-style: solid;
2350
- }
2351
-
2352
- .xl-tide-border-dashed {border-style: dashed;}
2353
- .xl-tide-border-solid {border-style: solid;}
2354
-
2355
- .xl-tide-border-0 {border-width: 0;}
2356
- .xl-tide-border-1 {border-width: var(--tide-border-width-1);}
2357
- .xl-tide-border-2 {border-width: var(--tide-border-width-2);}
2358
-
2359
- .xl-tide-border-top-0 {border-top-width: 0;}
2360
- .xl-tide-border-right-0 {border-right-width: 0;}
2361
- .xl-tide-border-bottom-0 {border-bottom-width: 0;}
2362
- .xl-tide-border-left-0 {border-left-width: 0;}
2363
-
2364
- .xl-tide-border-top-1 {border-top-width: var(--tide-border-width-1);}
2365
- .xl-tide-border-right-1 {border-right-width: var(--tide-border-width-1);}
2366
- .xl-tide-border-bottom-1 {border-bottom-width: var(--tide-border-width-1);}
2367
- .xl-tide-border-left-1 {border-left-width: var(--tide-border-width-1);}
2368
-
2369
- .xl-tide-border-top-2 {border-top-width: var(--tide-border-width-2);}
2370
- .xl-tide-border-right-2 {border-right-width: var(--tide-border-width-2);}
2371
- .xl-tide-border-bottom-2 {border-bottom-width: var(--tide-border-width-2);}
2372
- .xl-tide-border-left-2 {border-left-width: var(--tide-border-width-2);}
2373
-
2374
- .xl-tide-radius-0 {border-radius: 0;}
2375
- .xl-tide-radius-1\/4 {border-radius: var(--tide-radius-1\/4);}
2376
- .xl-tide-radius-1\/2 {border-radius: var(--tide-radius-1\/2);}
2377
- .xl-tide-radius-1 {border-radius: var(--tide-radius-1);}
2378
- .xl-tide-radius-full {border-radius: var(--tide-radius-full);}
2379
-
2380
- /* Padding */
2381
- .xl-tide-padding-0 {padding: 0;}
2382
- .xl-tide-padding-1\/4 {padding: var(--tide-spacing-1\/4);}
2383
- .xl-tide-padding-1\/2 {padding: var(--tide-spacing-1\/2);}
2384
- .xl-tide-padding-1 {padding: var(--tide-spacing-1);}
2385
- .xl-tide-padding-2 {padding: var(--tide-spacing-2);}
2386
- .xl-tide-padding-4 {padding: var(--tide-spacing-4);}
2387
-
2388
- .xl-tide-padding-x-0 {padding-left: 0; padding-right: 0;}
2389
- .xl-tide-padding-x-1\/4 {padding-left: var(--tide-spacing-1\/4); padding-right: var(--tide-spacing-1\/4);}
2390
- .xl-tide-padding-x-1\/2 {padding-left: var(--tide-spacing-1\/2); padding-right: var(--tide-spacing-1\/2);}
2391
- .xl-tide-padding-x-1 {padding-left: var(--tide-spacing-1); padding-right: var(--tide-spacing-1);}
2392
- .xl-tide-padding-x-2 {padding-left: var(--tide-spacing-2); padding-right: var(--tide-spacing-2);}
2393
- .xl-tide-padding-x-4 {padding-left: var(--tide-spacing-4); padding-right: var(--tide-spacing-4);}
2394
-
2395
- .xl-tide-padding-y-0 {padding-top: 0; padding-bottom: 0;}
2396
- .xl-tide-padding-y-1\/4 {padding-top: var(--tide-spacing-1\/4); padding-bottom: var(--tide-spacing-1\/4);}
2397
- .xl-tide-padding-y-1\/2 {padding-top: var(--tide-spacing-1\/2); padding-bottom: var(--tide-spacing-1\/2);}
2398
- .xl-tide-padding-y-1 {padding-top: var(--tide-spacing-1); padding-bottom: var(--tide-spacing-1);}
2399
- .xl-tide-padding-y-2 {padding-top: var(--tide-spacing-2); padding-bottom: var(--tide-spacing-2);}
2400
- .xl-tide-padding-y-4 {padding-top: var(--tide-spacing-4); padding-bottom: var(--tide-spacing-4);}
2401
-
2402
- .xl-tide-padding-top-0 {padding-top: 0;}
2403
- .xl-tide-padding-top-1\/4 {padding-top: var(--tide-spacing-1\/4);}
2404
- .xl-tide-padding-top-1\/2 {padding-top: var(--tide-spacing-1\/2);}
2405
- .xl-tide-padding-top-1 {padding-top: var(--tide-spacing-1);}
2406
- .xl-tide-padding-top-2 {padding-top: var(--tide-spacing-2);}
2407
- .xl-tide-padding-top-4 {padding-top: var(--tide-spacing-4);}
2408
-
2409
- .xl-tide-padding-right-0 {padding-right: 0;}
2410
- .xl-tide-padding-right-1\/4 {padding-right: var(--tide-spacing-1\/4);}
2411
- .xl-tide-padding-right-1\/2 {padding-right: var(--tide-spacing-1\/2);}
2412
- .xl-tide-padding-right-1 {padding-right: var(--tide-spacing-1);}
2413
- .xl-tide-padding-right-2 {padding-right: var(--tide-spacing-2);}
2414
- .xl-tide-padding-right-4 {padding-right: var(--tide-spacing-4);}
2415
-
2416
- .xl-tide-padding-bottom-0 {padding-bottom: 0;}
2417
- .xl-tide-padding-bottom-1\/4 {padding-bottom: var(--tide-spacing-1\/4);}
2418
- .xl-tide-padding-bottom-1\/2 {padding-bottom: var(--tide-spacing-1\/2);}
2419
- .xl-tide-padding-bottom-1 {padding-bottom: var(--tide-spacing-1);}
2420
- .xl-tide-padding-bottom-2 {padding-bottom: var(--tide-spacing-2);}
2421
- .xl-tide-padding-bottom-4 {padding-bottom: var(--tide-spacing-4);}
2422
-
2423
- .xl-tide-padding-left-0 {padding-left: 0;}
2424
- .xl-tide-padding-left-1\/4 {padding-left: var(--tide-spacing-1\/4);}
2425
- .xl-tide-padding-left-1\/2 {padding-left: var(--tide-spacing-1\/2);}
2426
- .xl-tide-padding-left-1 {padding-left: var(--tide-spacing-1);}
2427
- .xl-tide-padding-left-2 {padding-left: var(--tide-spacing-2);}
2428
- .xl-tide-padding-left-4 {padding-left: var(--tide-spacing-4);}
2429
-
2430
- /* Dimension */
2431
- .xl-tide-max-width-full {max-width: 100%;}
2432
- .xl-tide-min-width-0 {min-width: 0;}
2433
-
2434
- .xl-tide-max-height-full {max-height: 100%;}
2435
- .xl-tide-min-height-0 {min-height: 0;}
2436
-
2437
- .xl-tide-width-auto {width: auto;}
2438
- .xl-tide-width-0 {width: 0;}
2439
- .xl-tide-width-full {width: 100%;}
2440
-
2441
- .xl-tide-height-auto {height: auto;}
2442
- .xl-tide-height-0 {height: 0;}
2443
- .xl-tide-height-full {height: 100%;}
2444
-
2445
- /* Deprecated */
2446
- .xl-tide-width-container {max-width: 1168px;}
2447
-
2448
- /* Background */
2449
- .xl-tide-bg-initial {background-color: initial;}
2450
-
2451
- .xl-tide-bg-primary {background: var(--tide-primary);}
2452
- .xl-tide-bg-secondary {background: var(--tide-secondary);}
2453
-
2454
- .xl-tide-bg-surface {background: var(--tide-surface);}
2455
- .xl-tide-bg-surface-variant {background: var(--tide-surface-variant);}
2456
- .xl-tide-bg-surface-brand {background: var(--tide-surface-brand);}
2457
- .xl-tide-bg-surface-accent {background: var(--tide-surface-accent);}
2458
- .xl-tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
2459
- .xl-tide-bg-surface-floating {background: var(--tide-surface-floating);}
2460
-
2461
- /* Icon background colors only */
2462
- .xl-tide-bg-primary-error {background-color: var(--tide-error-primary);}
2463
- .xl-tide-bg-primary-info {background-color: var(--tide-info-primary);}
2464
- .xl-tide-bg-primary-success {background-color: var(--tide-success-primary);}
2465
- .xl-tide-bg-primary-warning {background-color: var(--tide-warning-primary);}
2466
-
2467
- .xl-tide-bg-surface-error {background-color: var(--tide-error-surface);}
2468
- .xl-tide-bg-surface-info {background-color: var(--tide-info-surface);}
2469
- .xl-tide-bg-surface-success {background-color: var(--tide-success-surface);}
2470
- .xl-tide-bg-surface-warning {background-color: var(--tide-warning-surface);}
2471
-
2472
- .xl-tide-bg-surface-blue {background-color: var(--tide-blue-surface);}
2473
- .xl-tide-bg-surface-green {background-color: var(--tide-green-surface);}
2474
- .xl-tide-bg-surface-lime {background-color: var(--tide-lime-surface);}
2475
- .xl-tide-bg-surface-orange {background-color: var(--tide-orange-surface);}
2476
- .xl-tide-bg-surface-purple {background-color: var(--tide-purple-surface);}
2477
- .xl-tide-bg-surface-red {background-color: var(--tide-red-surface);}
2478
- .xl-tide-bg-surface-salmon {background-color: var(--tide-salmon-surface);}
2479
- .xl-tide-bg-surface-teal {background-color: var(--tide-teal-surface);}
2480
- .xl-tide-bg-surface-yellow {background-color: var(--tide-yellow-surface);}
2481
-
2482
- .xl-tide-transparent-100 {background-color: var(--tide-transparent-100);}
2483
- .xl-tide-transparent-200 {background-color: var(--tide-transparent-200);}
2484
- .xl-tide-transparent-300 {background-color: var(--tide-transparent-300);}
2485
- .xl-tide-transparent-400 {background-color: var(--tide-transparent-400);}
2486
-
2487
- /* Typographic roles */
2488
- .xl-tide-typography-display-1 {font-size: var(--tide-font-32); font-weight: 700;}
2489
- .xl-tide-typography-headline-1 {font-size: var(--tide-font-24); font-weight: 700;}
2490
- .xl-tide-typography-headline-2 {font-size: var(--tide-font-20); font-weight: 700;}
2491
- .xl-tide-typography-headline-3 {font-size: var(--tide-font-16); font-weight: 700;}
2492
- .xl-tide-typography-title-1 {font-size: var(--tide-font-20); font-weight: 600;}
2493
- .xl-tide-typography-title-2 {font-size: var(--tide-font-18); font-weight: 600;}
2494
- .xl-tide-typography-body-1 {font-size: var(--tide-font-16); font-weight: 400;}
2495
- .xl-tide-typography-body-2 {font-size: var(--tide-font-14); font-weight: 400;}
2496
- .xl-tide-typography-label-1 {font-size: var(--tide-font-16); font-weight: 500;}
2497
- .xl-tide-typography-label-1-semibold {font-size: var(--tide-font-16); font-weight: 600;}
2498
- .xl-tide-typography-label-2 {font-size: var(--tide-font-14); font-weight: 500;}
2499
- .xl-tide-typography-label-2-semibold {font-size: var(--tide-font-14); font-weight: 600;}
2500
- .xl-tide-typography-label-3 {font-size: var(--tide-font-12); font-weight: 500;}
2501
- .xl-tide-typography-link-1 {font-size: var(--tide-font-16); font-weight: 500;}
2502
- .xl-tide-typography-link-2 {font-size: var(--tide-font-14); font-weight: 500;}
2503
- .xl-tide-typography-link-3 {font-size: var(--tide-font-12); font-weight: 500;}
2504
- .xl-tide-typography-button-1 {font-size: var(--tide-font-16); font-weight: 600;}
2505
- .xl-tide-typography-button-2 {font-size: var(--tide-font-14); font-weight: 600;}
2506
-
2507
- /* Font Color */
2508
- .xl-tide-font-on-primary {color: var(--tide-on-primary);}
2509
- .xl-tide-font-on-secondary {color: var(--tide-on-secondary);}
2510
-
2511
- .xl-tide-font-on-surface {color: var(--tide-on-surface);}
2512
- .xl-tide-font-on-surface-variant {color: var(--tide-on-surface-variant);}
2513
- .xl-tide-font-on-surface-brand {color: var(--tide-on-surface-brand);}
2514
- .xl-tide-font-on-surface-inverse {color: var(--tide-on-surface-inverse);}
2515
- .xl-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
2516
-
2517
- .xl-tide-font-error {color: var(--tide-error-primary);}
2518
- .xl-tide-font-info {color: var(--tide-info-primary);}
2519
- .xl-tide-font-success {color: var(--tide-success-primary);}
2520
- .xl-tide-font-warning {color: var(--tide-warning-primary);}
2521
-
2522
- .xl-tide-font-blue {color: var(--tide-blue-on-surface);}
2523
- .xl-tide-font-green {color: var(--tide-green-on-surface);}
2524
- .xl-tide-font-lime {color: var(--tide-lime-on-surface);}
2525
- .xl-tide-font-orange {color: var(--tide-orange-on-surface);}
2526
- .xl-tide-font-purple {color: var(--tide-purple-on-surface);}
2527
- .xl-tide-font-red {color: var(--tide-red-on-surface);}
2528
- .xl-tide-font-salmon {color: var(--tide-salmon-on-surface);}
2529
- .xl-tide-font-teal {color: var(--tide-teal-on-surface);}
2530
- .xl-tide-font-yellow {color: var(--tide-yellow-on-surface);}
2531
-
2532
- /* Badge icon colors only */
2533
- .xl-tide-font-primary-blue {color: var(--tide-blue-primary);}
2534
- .xl-tide-font-primary-green {color: var(--tide-green-primary);}
2535
- .xl-tide-font-primary-lime {color: var(--tide-lime-primary);}
2536
- .xl-tide-font-primary-orange {color: var(--tide-orange-primary);}
2537
- .xl-tide-font-primary-purple {color: var(--tide-purple-primary);}
2538
- .xl-tide-font-primary-red {color: var(--tide-red-primary);}
2539
- .xl-tide-font-primary-salmon {color: var(--tide-salmon-primary);}
2540
- .xl-tide-font-primary-teal {color: var(--tide-teal-primary);}
2541
- .xl-tide-font-primary-yellow {color: var(--tide-yellow-primary);}
2542
-
2543
- /* Font Size */
2544
- .xl-tide-font-10 {font-size: var(--tide-font-10);}
2545
- .xl-tide-font-12 {font-size: var(--tide-font-12);}
2546
- .xl-tide-font-14 {font-size: var(--tide-font-14);}
2547
- .xl-tide-font-16 {font-size: var(--tide-font-16);}
2548
- .xl-tide-font-20 {font-size: var(--tide-font-20);}
2549
- .xl-tide-font-24 {font-size: var(--tide-font-24);}
2550
- .xl-tide-font-32 {font-size: var(--tide-font-32);}
2551
-
2552
- /* Font Weight */
2553
- .xl-tide-font-400 {font-weight: 400;}
2554
- .xl-tide-font-500 {font-weight: 500;}
2555
- .xl-tide-font-600 {font-weight: 600;}
2556
- .xl-tide-font-700 {font-weight: 700;}
2557
-
2558
- /* Misc */
2559
- .xl-tide-align-middle {vertical-align: middle;}
2560
- .xl-tide-align-initial {vertical-align: initial;}
2561
-
2562
- .xl-tide-bg-blur {backdrop-filter: var(--tide-bg-blur);}
2563
-
2564
- .xl-tide-break-initial {overflow-wrap: initial;}
2565
- .xl-tide-break-word {overflow-wrap: break-word;}
2566
-
2567
- .xl-tide-break-inside-avoid-column {break-inside: avoid-column}
2568
-
2569
- .xl-tide-columns-initial {column-count: initial;}
2570
- .xl-tide-columns-1 {column-count: 1;}
2571
- .xl-tide-columns-2 {column-count: 2;}
2572
- .xl-tide-columns-3 {column-count: 3;}
2573
- .xl-tide-columns-4 {column-count: 4;}
2574
-
2575
- .xl-tide-cursor-not-allowed {cursor: not-allowed;}
2576
- .xl-tide-cursor-pointer {cursor: pointer;}
2577
- .xl-tide-cursor-text {cursor: text;}
2578
-
2579
- .xl-tide-ellipsis {
2580
- overflow: hidden;
2581
- text-overflow: ellipsis;
2582
- white-space: nowrap;
2583
- }
2584
-
2585
- .xl-tide-isolate {isolation: isolate;}
2586
-
2587
- /* Deprecated */
2588
- .xl-tide-leading-default {line-height: 1.4;}
2589
- .xl-tide-leading-normal {line-height: normal;}
2590
-
2591
- .xl-tide-list-none {list-style-type: none;}
2592
-
2593
- .xl-tide-object-center {object-position: center;}
2594
-
2595
- .xl-tide-object-cover {object-fit: cover;}
2596
- .xl-tide-object-contain {object-fit: contain;}
2597
- .xl-tide-object-scale-down {object-fit: scale-down;}
2598
-
2599
- .xl-tide-opacity {opacity: 1;}
2600
- .xl-tide-opacity-disabled {opacity: var(--tide-disabled);}
2601
- .xl-tide-opacity-none {opacity: 0;}
2602
-
2603
- .xl-tide-pointer-events {pointer-events: auto;}
2604
- .xl-tide-pointer-events-none {pointer-events: none;}
2605
-
2606
- .xl-tide-user-select-none {user-select: none;}
2607
- .xl-tide-user-select-initial {user-select: initial;}
2608
-
2609
- .xl-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
2610
- .xl-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
2611
- .xl-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
2612
-
2613
- .xl-tide-scrollbar-none::-webkit-scrollbar {display: none;}
2614
- .xl-tide-scrollbar-none {
2615
- -ms-overflow-style: none;
2616
- scrollbar-width: none;
2617
- }
2618
-
2619
- .xl-tide-scroll-snap {
2620
- scroll-snap-stop: always;
2621
- scroll-snap-type: both mandatory;
2622
- scroll-behavior: smooth;
2623
- }
2624
-
2625
- .xl-tide-scroll-snap-start {
2626
- scroll-snap-align: start;
2627
- }
2628
-
2629
- .xl-tide-shadow-initial {box-shadow: initial;}
2630
- .xl-tide-shadow-bottom {box-shadow: var(--tide-shadow-bottom);}
2631
- .xl-tide-shadow-top {box-shadow: var(--tide-shadow-top);}
2632
- .xl-tide-shadow-text {text-shadow: var(--tide-shadow-text);}
2633
-
2634
- .xl-tide-strikethrough {text-decoration: line-through;}
2635
- .xl-tide-strikethrough-none {text-decoration: none;}
2636
-
2637
- .xl-tide-text-center {text-align: center;}
2638
- .xl-tide-text-justify {text-align: justify;}
2639
- .xl-tide-text-left {text-align: left;}
2640
- .xl-tide-text-right {text-align: right;}
2641
-
2642
- .xl-tide-text-transform-lower {text-transform: lowercase;}
2643
- .xl-tide-text-transform-none {text-transform: none;}
2644
- .xl-tide-text-transform-upper {text-transform: uppercase;}
2645
-
2646
- .xl-tide-underline {text-decoration: underline;}
2647
- .xl-tide-underline-none {text-decoration: none;}
2648
- .xl-tide-underline-hover:hover {text-decoration: underline;}
2649
- .xl-tide-underline-hover-none:hover {text-decoration: none;}
2650
-
2651
- .xl-tide-visible {visibility: visible;}
2652
- .xl-tide-visible-none {visibility: hidden;}
2653
-
2654
- .xl-tide-whitespace-nowrap {white-space: nowrap;}
2655
-
2656
- .xl-tide-x-auto {overflow-x: auto;}
2657
- .xl-tide-x-hidden {overflow-x: hidden;}
2658
- .xl-tide-x-scroll {overflow-x: scroll;}
2659
-
2660
- .xl-tide-xy-auto {overflow: auto;}
2661
- .xl-tide-xy-hidden {overflow: hidden;}
2662
-
2663
- .xl-tide-y-auto {overflow-y: auto;}
2664
- .xl-tide-y-hidden {overflow-y: hidden;}
2665
-
2666
- .xl-tide-z-index-initial {z-index: initial;}
2667
- .xl-tide-z-index-1 {z-index: 1;}
2668
-
2669
- /* Buttons */
2670
- /* Rest State */
2671
- .xl-tide-button-primary {
2672
- background: var(--tide-primary);
2673
- border: 2px solid var(--tide-primary);
2674
- color: var(--tide-on-primary);
2675
- }
2676
-
2677
- .xl-tide-button-secondary {
2678
- background: var(--tide-surface);
2679
- border: 2px solid var(--tide-primary);
2680
- color: var(--tide-primary);
2681
- }
2682
-
2683
- .xl-tide-button-tertiary {
2684
- background: var(--tide-white);
2685
- border: 1px solid var(--tide-border);
2686
- color: var(--tide-secondary);
2687
- }
2688
-
2689
- .xl-tide-button-quaternary {
2690
- background: var(--tide-white);
2691
- color: var(--tide-secondary);
2692
- }
2693
-
2694
- .xl-tide-button-floating {
2695
- background-color: var(--tide-transparent-100);
2696
- color: var(--tide-secondary);
2697
- box-shadow: var(--tide-shadow-bottom);
2698
- }
2699
-
2700
- /* Hover State */
2701
- a.xl-tide-button-primary:hover,
2702
- button.xl-tide-button-primary:enabled:hover {
2703
- border: 2px solid var(--tide-primary);
2704
- background: var(--tide-white);
2705
- color: var(--tide-primary);
2706
- }
2707
-
2708
- a.xl-tide-button-secondary:hover,
2709
- button.xl-tide-button-secondary:enabled:hover {
2710
- background: var(--tide-primary);
2711
- color: var(--tide-on-primary);
2712
- }
2713
-
2714
- a.xl-tide-button-tertiary:hover,
2715
- button.xl-tide-button-tertiary:enabled:hover {
2716
- border: 1px solid var(--tide-border-high);
2717
- }
2718
-
2719
- a.xl-tide-button-quaternary:hover,
2720
- button.xl-tide-button-quaternary:enabled:hover {
2721
- background: var(--tide-surface-variant);
2722
- }
2723
-
2724
- .xl-tide-button-floating:hover,
2725
- button.xl-tide-button-floating:enabled:hover {
2726
- background-color: var(--tide-white);
2727
- }
2728
-
2729
- /* Disabled State */
2730
- button.xl-tide-button-primary:disabled,
2731
- button.xl-tide-button-secondary:disabled,
2732
- button.xl-tide-button-tertiary:disabled,
2733
- button.xl-tide-button-quaternary:disabled,
2734
- button.xl-tide-button-floating:disabled {
2735
- opacity: var(--tide-disabled);
2736
- }
2737
- }