@salt-ds/lab 1.0.0-alpha.21 → 1.0.0-alpha.23

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 (115) hide show
  1. package/css/salt-lab.css +4843 -0
  2. package/dist-cjs/app-header/AppHeader.css.js +1 -1
  3. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  4. package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
  5. package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
  6. package/dist-cjs/color-chooser/HexInput.css.js +1 -1
  7. package/dist-cjs/color-chooser/RGBAInput.css.js +1 -1
  8. package/dist-cjs/color-chooser/Swatches.css.js +1 -1
  9. package/dist-cjs/combo-box/useCombobox.js +24 -10
  10. package/dist-cjs/combo-box/useCombobox.js.map +1 -1
  11. package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
  12. package/dist-cjs/content-status/ContentStatus.css.js +1 -1
  13. package/dist-cjs/dialog/Dialog.css.js +1 -1
  14. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  15. package/dist-cjs/dropdown-next/DropdownNext.css.js +1 -1
  16. package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
  17. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  18. package/dist-cjs/form-field-legacy/FormHelperText.css.js +1 -1
  19. package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
  20. package/dist-cjs/formatted-input/FormattedInput.css.js +1 -1
  21. package/dist-cjs/index.js +0 -2
  22. package/dist-cjs/index.js.map +1 -1
  23. package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
  24. package/dist-cjs/list/List.css.js +1 -1
  25. package/dist-cjs/list/ListItem.css.js +1 -1
  26. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  27. package/dist-cjs/list-next/ListNext.css.js +1 -1
  28. package/dist-cjs/logo/Logo.css.js +1 -1
  29. package/dist-cjs/metric/Metric.css.js +1 -1
  30. package/dist-cjs/metric/MetricHeader.css.js +1 -1
  31. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  32. package/dist-cjs/overlay/Overlay.css.js +1 -1
  33. package/dist-cjs/pagination/Pagination.css.js +1 -1
  34. package/dist-cjs/pill/Pill.css.js +1 -1
  35. package/dist-cjs/pill/internal/PillCheckbox.css.js +1 -1
  36. package/dist-cjs/pill-next/PillNext.css.js +1 -1
  37. package/dist-cjs/pill-next/PillNext.js +5 -10
  38. package/dist-cjs/pill-next/PillNext.js.map +1 -1
  39. package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
  40. package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
  41. package/dist-cjs/query-input/QueryInput.css.js +1 -1
  42. package/dist-cjs/skip-link/SkipLink.css.js +1 -1
  43. package/dist-cjs/slider/Slider.css.js +1 -1
  44. package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  45. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
  46. package/dist-cjs/tabs/Tab.css.js +1 -1
  47. package/dist-cjs/tabs/Tabstrip.css.js +1 -1
  48. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  49. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  50. package/dist-cjs/toolbar/Toolbar.css.js +1 -1
  51. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  52. package/dist-cjs/tree/TreeNode.css.js +1 -1
  53. package/dist-es/app-header/AppHeader.css.js +1 -1
  54. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  55. package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
  56. package/dist-es/color-chooser/ColorPicker.css.js +1 -1
  57. package/dist-es/color-chooser/HexInput.css.js +1 -1
  58. package/dist-es/color-chooser/RGBAInput.css.js +1 -1
  59. package/dist-es/color-chooser/Swatches.css.js +1 -1
  60. package/dist-es/combo-box/useCombobox.js +24 -10
  61. package/dist-es/combo-box/useCombobox.js.map +1 -1
  62. package/dist-es/contact-details/ContactDetails.css.js +1 -1
  63. package/dist-es/content-status/ContentStatus.css.js +1 -1
  64. package/dist-es/dialog/Dialog.css.js +1 -1
  65. package/dist-es/dialog/DialogContent.css.js +1 -1
  66. package/dist-es/dropdown-next/DropdownNext.css.js +1 -1
  67. package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
  68. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  69. package/dist-es/form-field-legacy/FormHelperText.css.js +1 -1
  70. package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
  71. package/dist-es/formatted-input/FormattedInput.css.js +1 -1
  72. package/dist-es/index.js +0 -1
  73. package/dist-es/index.js.map +1 -1
  74. package/dist-es/input-legacy/InputLegacy.css.js +1 -1
  75. package/dist-es/list/List.css.js +1 -1
  76. package/dist-es/list/ListItem.css.js +1 -1
  77. package/dist-es/list-next/ListItemNext.css.js +1 -1
  78. package/dist-es/list-next/ListNext.css.js +1 -1
  79. package/dist-es/logo/Logo.css.js +1 -1
  80. package/dist-es/metric/Metric.css.js +1 -1
  81. package/dist-es/metric/MetricHeader.css.js +1 -1
  82. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  83. package/dist-es/overlay/Overlay.css.js +1 -1
  84. package/dist-es/pagination/Pagination.css.js +1 -1
  85. package/dist-es/pill/Pill.css.js +1 -1
  86. package/dist-es/pill/internal/PillCheckbox.css.js +1 -1
  87. package/dist-es/pill-next/PillNext.css.js +1 -1
  88. package/dist-es/pill-next/PillNext.js +5 -10
  89. package/dist-es/pill-next/PillNext.js.map +1 -1
  90. package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
  91. package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
  92. package/dist-es/query-input/QueryInput.css.js +1 -1
  93. package/dist-es/skip-link/SkipLink.css.js +1 -1
  94. package/dist-es/slider/Slider.css.js +1 -1
  95. package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  96. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
  97. package/dist-es/tabs/Tab.css.js +1 -1
  98. package/dist-es/tabs/Tabstrip.css.js +1 -1
  99. package/dist-es/tabs-next/TabNext.css.js +1 -1
  100. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  101. package/dist-es/toolbar/Toolbar.css.js +1 -1
  102. package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  103. package/dist-es/tree/TreeNode.css.js +1 -1
  104. package/dist-types/index.d.ts +0 -1
  105. package/package.json +11 -7
  106. package/dist-cjs/badge/Badge.css.js +0 -6
  107. package/dist-cjs/badge/Badge.css.js.map +0 -1
  108. package/dist-cjs/badge/Badge.js +0 -39
  109. package/dist-cjs/badge/Badge.js.map +0 -1
  110. package/dist-es/badge/Badge.css.js +0 -4
  111. package/dist-es/badge/Badge.css.js.map +0 -1
  112. package/dist-es/badge/Badge.js +0 -35
  113. package/dist-es/badge/Badge.js.map +0 -1
  114. package/dist-types/badge/Badge.d.ts +0 -16
  115. package/dist-types/badge/index.d.ts +0 -1
@@ -0,0 +1,4843 @@
1
+ /* src/app-header/AppHeader.css */
2
+ .salt-density-medium,
3
+ .salt-density-low,
4
+ .salt-density-touch {
5
+ --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));
6
+ }
7
+ .salt-density-high {
8
+ --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));
9
+ }
10
+ .saltAppHeader {
11
+ --appHeader-background: var(--salt-container-primary-background);
12
+ --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);
13
+ --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));
14
+ --appHeader-padding: var(--salt-size-container-spacing);
15
+ --appHeader-paddingLeft: 8px;
16
+ --appHeader-paddingRight: var(--appHeader-padding);
17
+ --saltToolbar-width: auto;
18
+ }
19
+ .saltAppHeader .saltTabstrip {
20
+ --saltTabs-tabstrip-height: var(--appHeader-height);
21
+ --saltTabs-activationIndicator-height: 0px;
22
+ --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;
23
+ }
24
+ .saltAppHeader {
25
+ align-items: flex-start;
26
+ background: var(--appHeader-background);
27
+ border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);
28
+ box-shadow: var(--appHeader-shadow);
29
+ box-sizing: content-box;
30
+ display: flex;
31
+ flex: 0 0 auto;
32
+ height: var(--appHeader-height);
33
+ overflow: hidden;
34
+ padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);
35
+ width: 100%;
36
+ }
37
+ .saltAppHeader > .Responsive-inner {
38
+ width: 100%;
39
+ display: flex;
40
+ flex-wrap: wrap;
41
+ align-items: center;
42
+ flex: 1;
43
+ min-height: var(--appHeader-height);
44
+ }
45
+ .saltAppHeader > .Responsive-inner > .responsive-pillar {
46
+ width: 0;
47
+ height: var(--appHeader-height);
48
+ }
49
+ .saltAppHeader-navMenu {
50
+ margin-right: 12px;
51
+ padding-right: 8px;
52
+ }
53
+ .saltAppHeader-navMenu::after {
54
+ top: 0;
55
+ right: 0;
56
+ width: var(--salt-size-border);
57
+ bottom: 0;
58
+ content: "";
59
+ position: absolute;
60
+ background: var(--appHeader-separable-bar);
61
+ }
62
+ .saltAppHeader .saltLogo:not(.saltLogo-compact) {
63
+ margin-left: 16px;
64
+ }
65
+ .saltAppHeader > .Responsive-inner > .Tabstrip {
66
+ align-self: flex-end;
67
+ flex: 0 0 auto;
68
+ margin-left: 48px;
69
+ }
70
+ .saltAppHeader > .Responsive-inner > [data-pad-end] {
71
+ margin-right: auto;
72
+ }
73
+ .saltAppHeader > .Responsive-inner > * {
74
+ flex-shrink: 0;
75
+ }
76
+ .saltAppHeader > .Responsive-inner > .Toolbar {
77
+ justify-content: flex-end;
78
+ margin-left: 48px;
79
+ }
80
+ .saltAppHeader > .Responsive-inner > [data-pad-start=true] {
81
+ margin-left: auto;
82
+ }
83
+ .saltAppHeader > .Responsive-inner[data-collapsing=true] {
84
+ flex-wrap: nowrap;
85
+ }
86
+ .saltAppHeader > .Responsive-inner > *[data-collapsing=true] {
87
+ flex-shrink: 1;
88
+ }
89
+ .saltAppHeader > .Responsive-inner > *[data-collapsible=dynamic][data-collapsed=true] {
90
+ flex-basis: 0;
91
+ flex-grow: 0;
92
+ flex-shrink: 0;
93
+ }
94
+
95
+ /* src/breadcrumbs/Breadcrumb.css */
96
+ .saltBreadcrumb {
97
+ --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));
98
+ --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));
99
+ --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));
100
+ --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));
101
+ --breadcrumbs-crumb-marginLeft: 0px;
102
+ }
103
+ .saltBreadcrumb {
104
+ padding: 0px;
105
+ }
106
+ .saltBreadcrumb-regular {
107
+ display: flex;
108
+ gap: calc(var(--salt-size-unit) / 2);
109
+ align-items: center;
110
+ color: var(--breadcrumbs-crumb-color);
111
+ }
112
+ .saltBreadcrumb-regular:visited {
113
+ color: currentColor;
114
+ }
115
+ .saltBreadcrumb-regular:visited .saltBreadcrumb-icon {
116
+ color: currentColor;
117
+ }
118
+ .saltBreadcrumb-regular:hover {
119
+ color: var(--breadcrumbs-crumb-color-hover);
120
+ }
121
+ .saltBreadcrumb-regular:hover .saltBreadcrumb-icon {
122
+ color: var(--breadcrumbs-crumb-color-hover);
123
+ }
124
+ .saltBreadcrumb-regular:active {
125
+ color: var(--breadcrumbs-crumb-color-active);
126
+ }
127
+ .saltBreadcrumb-regular:active .saltBreadcrumb-icon {
128
+ color: var(--breadcrumbs-crumb-color-active);
129
+ }
130
+ .saltBreadcrumb-currentLevel {
131
+ color: var(--breadcrumbs-crumb-color);
132
+ }
133
+ .saltBreadcrumb-icon {
134
+ color: var(--breadcrumbs-crumb-icon-color);
135
+ margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));
136
+ }
137
+ .saltBreadcrumb-justifyContentCenter {
138
+ justify-content: center;
139
+ }
140
+ .saltBreadcrumb-text {
141
+ text-decoration: underline;
142
+ }
143
+
144
+ /* src/breadcrumbs/Breadcrumbs.css */
145
+ .saltBreadcrumbs-ol {
146
+ --breadcrumbs-ol-gap: var(--salt-size-unit);
147
+ display: flex;
148
+ align-items: center;
149
+ justify-content: flex-start;
150
+ padding: 0;
151
+ margin: 0;
152
+ gap: var(--breadcrumbs-ol-gap);
153
+ }
154
+ .saltBreadcrumbs-li {
155
+ --breadcrumbs-li-marginRight: 0px;
156
+ --breadcrumbs-li-padding: 0px;
157
+ flex: 0 1 auto;
158
+ list-style: none;
159
+ margin-right: var(--breadcrumbs-li-marginRight);
160
+ padding: var(--breadcrumbs-li-padding);
161
+ }
162
+ .saltBreadcrumbs-separator {
163
+ --breadcrumbs-separator-marginRight: 0px;
164
+ display: flex;
165
+ margin-right: var(--breadcrumbs-separator-marginRight);
166
+ user-select: none;
167
+ }
168
+ .saltBreadcrumbs-ol-wrap {
169
+ flex-wrap: wrap;
170
+ }
171
+ .saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,
172
+ .saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {
173
+ --breadcrumbs-ol-wrap-li-marginBottom: 0px;
174
+ margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);
175
+ }
176
+
177
+ /* src/button-bar/ButtonBar.css */
178
+ .saltButtonBar {
179
+ width: 100%;
180
+ display: flex;
181
+ justify-content: flex-end;
182
+ gap: var(--salt-size-unit);
183
+ }
184
+ .saltButtonBar-alignLeft {
185
+ justify-content: flex-start;
186
+ }
187
+
188
+ /* src/button-bar/OrderedButton.css */
189
+ .saltOrderedButton-alignLeft {
190
+ margin-right: auto;
191
+ }
192
+ .saltOrderedButton-alignRight {
193
+ margin-left: auto;
194
+ }
195
+
196
+ /* src/calendar/Calendar.css */
197
+ .saltCalendar {
198
+ width: min-content;
199
+ }
200
+
201
+ /* src/carousel/Carousel.css */
202
+ .saltGridLayout.saltCarousel {
203
+ grid-template-columns: min-content auto min-content;
204
+ grid-template-areas: "prev-button slider next-button" "dots dots dots";
205
+ }
206
+ .saltCarousel.saltCarousel-compact {
207
+ grid-template-areas: "slider slider slider" "prev-button dots next-button";
208
+ }
209
+ .saltCarousel-prev-button {
210
+ grid-area: prev-button;
211
+ height: 100%;
212
+ }
213
+ .saltCarousel-next-button {
214
+ grid-area: next-button;
215
+ height: 100%;
216
+ }
217
+ .saltCarousel-slider {
218
+ grid-area: slider;
219
+ }
220
+ .saltCarousel-dots {
221
+ grid-area: dots;
222
+ justify-self: center;
223
+ }
224
+
225
+ /* src/cascading-menu/CascadingMenuItem.css */
226
+ .saltMenuItem {
227
+ background: var(--salt-selectable-background);
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: space-between;
231
+ right: 0;
232
+ cursor: pointer;
233
+ overflow: hidden;
234
+ text-align: left;
235
+ user-select: none;
236
+ white-space: nowrap;
237
+ text-overflow: ellipsis;
238
+ }
239
+ .saltMenuItem-menuItemText {
240
+ flex-grow: 2;
241
+ white-space: nowrap;
242
+ }
243
+ .saltMenuItem-menuItemEndAdornment {
244
+ margin-left: 8px;
245
+ }
246
+ .saltMenuItem-menuItemStartAdornmentContainer {
247
+ margin-right: var(--salt-size-unit);
248
+ width: 12px;
249
+ }
250
+ .saltMenuItem-menuItemAdornmentHidden {
251
+ visibility: hidden;
252
+ }
253
+ .saltMenuItem.saltMenuItem-menuItemDivider {
254
+ border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
255
+ }
256
+ .saltMenuItem-menuItemHover:hover {
257
+ background: var(--salt-selectable-background-hover);
258
+ }
259
+ .saltMenuItem.saltMenuItem-menuItemBlurSelected {
260
+ background: var(--salt-selectable-background-blurSelected) !important;
261
+ }
262
+
263
+ /* src/cascading-menu/CascadingMenuList.css */
264
+ .saltCascadingMenuList-popper {
265
+ background: var(--salt-container-primary-background);
266
+ }
267
+ .saltCascadingMenuList-popper {
268
+ --list-box-content: content-box;
269
+ --list-boxShadow: var(--salt-overlayable-shadow-popout);
270
+ }
271
+
272
+ /* src/color-chooser/ColorChooser.css */
273
+ .saltColorChooser-overlayButtonSwatch {
274
+ margin-right: 10px;
275
+ height: calc(2 * var(--salt-size-unit));
276
+ width: calc(2 * var(--salt-size-unit));
277
+ }
278
+ .saltColorChooser-overlayButtonSwatchWithBorder {
279
+ border: 0.2px solid var(--salt-editable-borderColor);
280
+ }
281
+ .saltColorChooser-overlayButtonSwatchTransparent {
282
+ height: calc(var(--salt-size-container-spacing) - 2px) !important;
283
+ width: calc(var(--salt-size-container-spacing) - 2px) !important;
284
+ border: 1px solid var(--salt-status-negative-foreground);
285
+ background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%);
286
+ }
287
+ .saltColorChooser-overlayButtonText {
288
+ font-weight: var(--salt-text-fontWeight);
289
+ font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));
290
+ font-size: var(--salt-text-fontSize);
291
+ letter-spacing: normal;
292
+ }
293
+ .saltColorChooser-overlayButton {
294
+ background: transparent;
295
+ text-transform: none;
296
+ justify-content: flex-start;
297
+ }
298
+ .saltColorChooser-overlayButtonHiddenLabel {
299
+ width: var(--salt-size-container-spacing);
300
+ display: contents;
301
+ }
302
+ .saltColorChooser-overlayButtonClose {
303
+ margin: 5px;
304
+ }
305
+ .saltColorChooser-defaultButton {
306
+ float: right;
307
+ background: transparent;
308
+ padding: 6px 2px 6px 2px;
309
+ height: var(--salt-size-stackable);
310
+ }
311
+ .saltColorChooser-defaultButton {
312
+ border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
313
+ }
314
+ .saltColorChooser-overlayContent {
315
+ max-width: 100%;
316
+ }
317
+ .saltColorChooser-refreshIcon {
318
+ padding-right: 5px;
319
+ }
320
+
321
+ /* src/color-chooser/ColorPicker.css */
322
+ .saltColorChooserPicker {
323
+ display: flex;
324
+ flex-direction: row;
325
+ }
326
+ .saltColorChooserPicker-inputContainer {
327
+ display: flex;
328
+ flex-direction: column;
329
+ justify-content: space-around;
330
+ border-left: 1px solid var(--salt-separable-secondary-borderColor);
331
+ }
332
+ .saltColorChooserPicker-applyButtonDiv {
333
+ padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));
334
+ align-self: center;
335
+ }
336
+ .saltColorChooserPicker-textDivOverrides {
337
+ font-size: var(--salt-text-label-fontSize);
338
+ font-weight: var(--salt-text-fontWeight-strong);
339
+ color: var(--salt-content-primary-foreground);
340
+ padding: 0px !important;
341
+ }
342
+ .saltColorChooserPicker-inputDivs {
343
+ display: flex;
344
+ flex-direction: column;
345
+ align-content: stretch;
346
+ padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);
347
+ }
348
+ .root,
349
+ .rootDisabledAlpha {
350
+ box-shadow: none !important;
351
+ padding: 8px 8px 0px 0px !important;
352
+ background: transparent !important;
353
+ width: calc(9 * var(--salt-size-stackable)) !important;
354
+ }
355
+ .root .flexbox-fix,
356
+ .rootDisabledAlpha .flexbox-fix {
357
+ padding-top: 8px !important;
358
+ }
359
+ .rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,
360
+ .root .flexbox-fix ~ .flexbox-fix {
361
+ display: none !important;
362
+ }
363
+ .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {
364
+ height: calc(var(--salt-size-stackable) / 2) !important;
365
+ }
366
+ .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {
367
+ height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
368
+ }
369
+ .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {
370
+ height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
371
+ }
372
+ .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {
373
+ width: calc(var(--salt-size-stackable) / 2) !important;
374
+ }
375
+ .saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {
376
+ height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
377
+ }
378
+ .saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {
379
+ height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
380
+ }
381
+ .saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {
382
+ width: calc(var(--salt-size-base) / 4) !important;
383
+ height: calc(var(--salt-size-base) / 4) !important;
384
+ }
385
+ .rootDisabledAlpha .hue-horizontal > div > div {
386
+ position: relative;
387
+ margin-top: 0px !important;
388
+ width: 4px !important;
389
+ height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
390
+ background: var(--salt-container-primary-background) !important;
391
+ border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
392
+ }
393
+
394
+ /* src/color-chooser/DictTabs.css */
395
+ .salt-theme[data-mode=light] .saltColorChooserDictTabs-text {
396
+ background-color: transparent;
397
+ color: var(--salt-content-primary-foreground) !important;
398
+ }
399
+
400
+ /* src/color-chooser/HexInput.css */
401
+ .saltColorChooserHexInput {
402
+ display: flex;
403
+ flex-direction: row;
404
+ padding: 0px 0px var(--salt-size-container-spacing) 0px;
405
+ }
406
+ .saltColorChooserHexInput-hashSign {
407
+ margin-top: 5px;
408
+ font-size: var(--salt-text-label-fontSize);
409
+ padding-right: 6px;
410
+ color: var(--salt-content-secondary-foreground);
411
+ padding-left: 6px;
412
+ }
413
+ .saltColorChooserHexInput-input {
414
+ width: var(--salt-size-unit);
415
+ border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
416
+ }
417
+
418
+ /* src/color-chooser/RGBAInput.css */
419
+ .saltColorChooser-rgbaInput {
420
+ width: var(--salt-size-unit);
421
+ border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
422
+ padding-top: var(--salt-size-unit);
423
+ }
424
+ .saltColorChooser-opacityInput {
425
+ min-width: 40px !important;
426
+ width: 40px !important;
427
+ min-height: unset !important;
428
+ border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);
429
+ }
430
+ .saltColorChooser-rgbaText {
431
+ margin-top: 5px;
432
+ font-size: var(--salt-text-label-fontSize);
433
+ color: var(--salt-content-secondary-foreground);
434
+ padding-top: 4px;
435
+ padding-right: 6px;
436
+ padding-left: 6px;
437
+ }
438
+ .saltColorChooser-rgbaInputDiv {
439
+ display: flex;
440
+ flex-direction: row;
441
+ padding: 0px 0px var(--salt-size-unit) 0px;
442
+ }
443
+ .saltColorChooser-overrideInput {
444
+ min-width: 0em;
445
+ background: transparent !important;
446
+ color: var(--salt-content-primary-foreground);
447
+ border-bottom: 1px solid var(--salt-content-primary-foreground);
448
+ }
449
+ .saltColorChooser-alphaSpacerDiv {
450
+ height: 24px;
451
+ }
452
+ .saltColorChooser-textDivOverrides {
453
+ font-size: var(--salt-text-label-fontSize);
454
+ font-weight: var(--salt-text-fontWeight-strong);
455
+ color: var(--salt-content-primary-foreground);
456
+ padding: 0px !important;
457
+ }
458
+
459
+ /* src/color-chooser/Swatch.css */
460
+ .saltColorChooserSwatch-swatch,
461
+ .saltColorChooserSwatch-graySwatch {
462
+ margin-bottom: 1px;
463
+ margin-left: 1px;
464
+ cursor: pointer;
465
+ }
466
+ .salt-density-touch,
467
+ .salt-density-low,
468
+ .salt-density-medium,
469
+ .salt-density-high {
470
+ --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));
471
+ --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));
472
+ --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));
473
+ --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));
474
+ }
475
+ .salt-density-touch {
476
+ --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);
477
+ }
478
+ .salt-density-low {
479
+ --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);
480
+ }
481
+ .salt-density-medium {
482
+ --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);
483
+ }
484
+ .salt-density-high {
485
+ --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);
486
+ }
487
+ .saltColorChooserSwatch-swatch,
488
+ .salt-theme[data-mode=light] .saltColorChooserSwatch-graySwatch {
489
+ width: var(--colorChooser-swatch-size-unit);
490
+ height: var(--colorChooser-swatch-size-unit);
491
+ }
492
+ .saltColorChooserSwatch-whiteSwatch {
493
+ margin-bottom: 1px;
494
+ margin-left: 1px;
495
+ cursor: pointer;
496
+ }
497
+ .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch {
498
+ border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
499
+ }
500
+ .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch,
501
+ .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
502
+ width: calc(var(--colorChooser-swatch-size-unit) - 2);
503
+ height: calc(var(--colorChooser-swatch-size-unit) - 2);
504
+ }
505
+ .salt-theme[data-mode=dark] .saltColorChooserSwatch-whiteSwatch,
506
+ .saltColorChooserSwatch-graySwatch {
507
+ border: 0px;
508
+ }
509
+ .salt-theme[data-mode=dark] .saltColorChooserSwatch-whiteSwatch {
510
+ width: calc(var(--colorChooser-swatch-size-unit) - 2);
511
+ height: calc(var(--colorChooser-swatch-size-unit) - 2);
512
+ }
513
+ .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
514
+ border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
515
+ }
516
+ .saltColorChooserSwatch-active {
517
+ outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
518
+ border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;
519
+ margin-bottom: 1px;
520
+ margin-left: 1px;
521
+ cursor: pointer;
522
+ }
523
+ .saltColorChooserSwatch-transparent {
524
+ border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;
525
+ width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;
526
+ height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;
527
+ margin-bottom: 1px;
528
+ margin-left: 1px;
529
+ background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;
530
+ }
531
+
532
+ /* src/color-chooser/Swatches.css */
533
+ .saltColorChooserSwatches-colorNameTextDiv {
534
+ font-size: var(--salt-text-fontSize);
535
+ font-weight: var(--salt-text-fontWeight-strong);
536
+ }
537
+ .saltColorChooserSwatches-colorNameTextDiv,
538
+ .saltColorChooserSwatches-colorTextDiv,
539
+ .saltColorChooserSwatches-alphaTextDiv {
540
+ color: var(--salt-content-secondary-foreground);
541
+ }
542
+ .saltColorChooserSwatches-colorTextDiv {
543
+ font-size: var(--salt-text-fontSize);
544
+ margin-right: var(--salt-size-unit);
545
+ }
546
+ .saltColorChooserSwatches-alphaTextDiv {
547
+ font-size: var(--salt-text-fontSize);
548
+ margin-right: var(--salt-size-unit);
549
+ }
550
+ .saltColorChooserSwatches-textDiv {
551
+ display: flex;
552
+ justify-content: space-between;
553
+ padding: 8px 8px 0px 8px;
554
+ }
555
+ .saltColorChooserSwatches-pickerDiv {
556
+ padding-top: calc(2 * var(--salt-size-unit));
557
+ }
558
+
559
+ /* src/combo-box-deprecated/ComboBox.css */
560
+ .saltComboBox {
561
+ width: 100%;
562
+ }
563
+ .saltComboBox-field {
564
+ }
565
+ .saltComboBox-disabled {
566
+ }
567
+ .saltComboBox-listWindowRoot {
568
+ z-index: calc(var(--salt-zIndex-flyover) - 1);
569
+ }
570
+
571
+ /* src/combo-box-next/ComboBoxNext.css */
572
+ .saltComboBoxNext-highlight {
573
+ font-weight: var(--salt-text-fontWeight-strong);
574
+ }
575
+ .saltComboBoxNext-input:hover {
576
+ --saltInput-borderColor: var(--salt-focused-outlineColor);
577
+ }
578
+ .saltComboBoxNext-list.saltListNext {
579
+ border-color: var(--salt-selectable-borderColor-selected);
580
+ box-shadow: var(--salt-overlayable-shadow-popout);
581
+ max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));
582
+ z-index: calc(var(--salt-zIndex-modal) + 1);
583
+ }
584
+
585
+ /* src/contact-details/ContactDetails.css */
586
+ .salt-density-touch {
587
+ --contactDetails-default-primary-fontSize: 30px;
588
+ --contactDetails-default-secondary-fontSize: 16px;
589
+ --contactDetails-compact-primary-fontSize: 16px;
590
+ --contactDetails-compact-secondary-fontSize: 14px;
591
+ --contactDetails-icon-size: 18px;
592
+ --contactDetails-label-width: 80px;
593
+ }
594
+ .salt-density-low {
595
+ --contactDetails-compact-primary-fontSize: 14px;
596
+ --contactDetails-default-primary-fontSize: 24px;
597
+ --contactDetails-compact-secondary-fontSize: 14px;
598
+ --contactDetails-default-secondary-fontSize: 14px;
599
+ --contactDetails-label-width: 70px;
600
+ --contactDetails-icon-size: 16px;
601
+ }
602
+ .salt-density-medium {
603
+ --contactDetails-compact-primary-fontSize: 12px;
604
+ --contactDetails-default-primary-fontSize: 18px;
605
+ --contactDetails-compact-secondary-fontSize: 12px;
606
+ --contactDetails-default-secondary-fontSize: 12px;
607
+ --contactDetails-label-width: 60px;
608
+ --contactDetails-icon-size: 14px;
609
+ }
610
+ .salt-density-high {
611
+ --contactDetails-compact-primary-fontSize: 11px;
612
+ --contactDetails-default-primary-fontSize: 14px;
613
+ --contactDetails-compact-secondary-fontSize: 11px;
614
+ --contactDetails-default-secondary-fontSize: 11px;
615
+ --contactDetails-label-width: 60px;
616
+ --contactDetails-icon-size: 12px;
617
+ }
618
+ .saltContactDetails {
619
+ --contactDetails-color: var(--salt-content-primary-foreground);
620
+ --contactDetails-label-color: var(--salt-content-secondary-foreground);
621
+ --contactDetails-noAvatar-color: var(--salt-accent-background);
622
+ --contactDetails-noAvatar-indicator-width: 4px;
623
+ --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);
624
+ --contactDetails-favoriteToggle-marginRight: 0px;
625
+ --contactDetails-favoriteToggle-marginTop: 0px;
626
+ --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);
627
+ --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);
628
+ --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);
629
+ --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);
630
+ }
631
+ .saltContactDetails {
632
+ display: grid;
633
+ padding: var(--salt-size-unit);
634
+ }
635
+ .saltContactDetails.saltContactDetails-noAvatar {
636
+ padding-left: 0;
637
+ }
638
+ .saltContactDetails.saltContactDetails-embedded {
639
+ padding: 0;
640
+ }
641
+ .saltContactDetails-default,
642
+ .saltContactDetails-default-stacked {
643
+ --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);
644
+ --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);
645
+ }
646
+ .saltContactDetails-compact,
647
+ .saltContactDetails-compact-stacked {
648
+ --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);
649
+ --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);
650
+ }
651
+ .saltContactDetails-mini,
652
+ .saltContactDetails-mini-stacked {
653
+ --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);
654
+ --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);
655
+ }
656
+ .saltContactDetails-default {
657
+ color: var(--contactDetails-color);
658
+ grid-template-columns: auto auto 1fr auto;
659
+ grid-template-rows: auto auto auto auto auto;
660
+ grid-template-areas: "noAvatar avatar primary favorite" "noAvatar avatar secondary secondary" "noAvatar avatar tertiary tertiary" ". . actions metadataExpander" ". . metadata metadata";
661
+ }
662
+ .saltContactDetails-default-stacked {
663
+ grid-template-columns: auto 1fr auto;
664
+ grid-template-rows: auto auto auto auto auto auto;
665
+ grid-template-areas: "noAvatar avatar avatar" "noAvatar primary favorite" "noAvatar secondary secondary" "noAvatar tertiary tertiary" ". actions metadataExpander" ". metadata metadata";
666
+ }
667
+ .saltContactDetails-compact {
668
+ grid-template-columns: auto auto auto 1fr auto;
669
+ grid-template-rows: auto auto auto;
670
+ grid-template-areas: "noAvatar avatar primary primary favorite" "noAvatar avatar secondary tertiary tertiary" ". . actions actions actions";
671
+ }
672
+ .saltContactDetails-compact-stacked {
673
+ grid-template-columns: auto auto 1fr auto;
674
+ grid-template-rows: auto auto auto auto;
675
+ grid-template-areas: "noAvatar avatar primary favorite" "noAvatar avatar secondary favorite" "noAvatar avatar tertiary tertiary" ". . actions actions";
676
+ }
677
+ .saltContactDetails-mini,
678
+ .saltContactDetails-mini-stacked {
679
+ grid-template-columns: auto minmax(60px, 1fr) auto;
680
+ grid-template-rows: auto;
681
+ grid-template-areas: "primary secondary favorite";
682
+ }
683
+ .saltContactDetails-noAvatar-indicator {
684
+ grid-area: noAvatar;
685
+ width: var(--contactDetails-noAvatar-indicator-width);
686
+ background: var(--contactDetails-noAvatar-color);
687
+ margin-right: var(--salt-size-unit);
688
+ }
689
+ .saltContactAvatar {
690
+ grid-area: avatar;
691
+ margin-right: var(--salt-size-unit);
692
+ }
693
+ .saltContactAvatar-stacked {
694
+ margin-bottom: var(--salt-size-unit);
695
+ }
696
+ .saltContactActions {
697
+ grid-area: actions;
698
+ display: flex;
699
+ margin-top: var(--salt-size-unit);
700
+ margin-left: calc(var(--salt-size-unit) * -1);
701
+ }
702
+ .saltContactPrimaryInfo {
703
+ grid-area: primary;
704
+ }
705
+ .saltContactDetails-default .saltContactPrimaryInfo {
706
+ margin-bottom: calc(var(--salt-size-unit) * 0.5);
707
+ }
708
+ .saltContactSecondaryInfo {
709
+ grid-area: secondary;
710
+ }
711
+ .saltContactDetails-mini .saltContactSecondaryInfo {
712
+ margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);
713
+ }
714
+ .saltContactDetails-mini-stacked .saltContactSecondaryInfo {
715
+ margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);
716
+ }
717
+ .saltContactSecondaryInfo-icon {
718
+ margin-right: calc(var(--salt-size-unit) * 0.5);
719
+ }
720
+ .saltContactTertiaryInfo {
721
+ grid-area: tertiary;
722
+ }
723
+ .saltContactDetails-compact .saltContactTertiaryInfo {
724
+ margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);
725
+ }
726
+ .saltContactTertiaryInfo-icon {
727
+ margin-right: calc(var(--salt-size-unit) * 0.5);
728
+ }
729
+ .saltContactMetadata {
730
+ grid-area: metadata;
731
+ display: flex;
732
+ flex-direction: column;
733
+ padding-top: var(--salt-size-unit);
734
+ padding-bottom: var(--salt-size-unit);
735
+ }
736
+ .saltContactMetadata-expander {
737
+ grid-area: metadataExpander;
738
+ margin-top: var(--salt-size-unit);
739
+ }
740
+ .saltContactMetadata-separator {
741
+ width: 100%;
742
+ height: 1px;
743
+ background: var(--contactDetails-separator-color);
744
+ margin-bottom: var(--salt-size-unit);
745
+ }
746
+ .saltContactMetadataItem {
747
+ display: flex;
748
+ flex-direction: row;
749
+ align-items: center;
750
+ margin-bottom: calc(var(--salt-size-unit) * 0.5);
751
+ }
752
+ .saltContactMetadataItem:last-child {
753
+ margin-bottom: unset;
754
+ }
755
+ .saltContactMetadata-stacked .saltContactMetadataItem {
756
+ flex-direction: column;
757
+ align-items: flex-start;
758
+ }
759
+ .saltContactMetadataItem-icon {
760
+ margin-right: calc(var(--salt-size-unit) * 2);
761
+ padding-left: 1px;
762
+ }
763
+ .saltContactMetadataItem-label {
764
+ flex-shrink: 0;
765
+ color: var(--contactDetails-label-color);
766
+ margin-right: calc(var(--salt-size-unit) * 2);
767
+ width: var(--contactDetails-label-width);
768
+ }
769
+ .saltContactFavoriteToggle {
770
+ align-self: start;
771
+ grid-area: favorite;
772
+ justify-self: center;
773
+ line-height: var(--contactDetails-primary-fontSize);
774
+ margin-right: var(--contactDetails-favoriteToggle-marginRight);
775
+ margin-top: var(--contactDetails-favoriteToggle-marginTop);
776
+ }
777
+ .saltContactFavoriteToggle-svg {
778
+ fill: var(--contactDetails-favoriteToggle-fill);
779
+ }
780
+ .saltContactFavoriteToggle-focusVisible {
781
+ outline: none;
782
+ }
783
+ .saltContactFavoriteToggle-focused {
784
+ outline: var(--salt-focused-outline);
785
+ }
786
+ .saltContactFavoriteToggle-deselected {
787
+ --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);
788
+ }
789
+ .saltContactFavoriteToggle-selecting {
790
+ --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);
791
+ }
792
+ .saltContactFavoriteToggle-selected {
793
+ --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);
794
+ }
795
+ .saltContactFavoriteToggle-deselecting {
796
+ --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);
797
+ }
798
+ .saltContactFavoriteToggle-svg {
799
+ height: var(--contactDetails-icon-size);
800
+ width: var(--contactDetails-icon-size);
801
+ }
802
+
803
+ /* src/content-status/ContentStatus.css */
804
+ .saltContentStatus {
805
+ display: flex;
806
+ flex-direction: column;
807
+ justify-content: center;
808
+ align-items: center;
809
+ text-align: var(--salt-text-textAlign-embedded);
810
+ gap: var(--salt-size-unit);
811
+ }
812
+ .saltContentStatus-content {
813
+ color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));
814
+ display: flex;
815
+ flex-direction: column;
816
+ gap: var(--salt-size-unit);
817
+ font-size: var(--salt-text-fontSize);
818
+ line-height: var(--salt-text-lineHeight);
819
+ font-family: var(--salt-text-fontFamily);
820
+ font-weight: var(--salt-text-fontWeight);
821
+ }
822
+ .saltContentStatus-title.saltText {
823
+ font-weight: var(--salt-text-display1-fontWeight);
824
+ }
825
+ .saltContentStatus-message {
826
+ }
827
+ .saltContentStatus-actions {
828
+ margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));
829
+ }
830
+
831
+ /* src/deck-item/DeckItem.css */
832
+ .saltDeckItem {
833
+ display: inline-block;
834
+ }
835
+ .saltDeckLayout-slide-vertical .saltDeckItem {
836
+ display: block;
837
+ }
838
+ .saltDeckItem-fade-previous,
839
+ .saltDeckItem-fade-next,
840
+ .saltDeckItem-static-previous,
841
+ .saltDeckItem-static-next {
842
+ display: none;
843
+ }
844
+ .saltDeckItem-fade-in {
845
+ animation: var(--salt-animation-fade-in-center);
846
+ }
847
+ .saltDeckItem-fade-out {
848
+ animation: var(--salt-animation-fade-out-back);
849
+ }
850
+
851
+ /* src/deck-layout/DeckLayout.css */
852
+ .saltDeckLayout {
853
+ overflow: hidden;
854
+ }
855
+ .saltDeckLayout-animate {
856
+ white-space: nowrap;
857
+ }
858
+ .saltDeckLayout-slide-horizontal {
859
+ width: var(--deckLayout-width);
860
+ transition: transform var(--salt-animation-duration);
861
+ transform: translateX(var(--deckLayout-transform-value));
862
+ }
863
+ .saltDeckLayout-slide-vertical {
864
+ height: var(--deckLayout-height);
865
+ transition: transform var(--salt-animation-duration);
866
+ transform: translateY(var(--deckLayout-transform-value));
867
+ }
868
+
869
+ /* src/dialog/Dialog.css */
870
+ .saltDialog {
871
+ position: relative;
872
+ display: flex;
873
+ flex-direction: column;
874
+ padding-top: var(--salt-spacing-300);
875
+ padding-bottom: var(--salt-spacing-300);
876
+ background: var(--salt-container-primary-background);
877
+ max-height: 100%;
878
+ max-width: 100%;
879
+ box-shadow: var(--salt-overlayable-shadow-modal);
880
+ z-index: calc(var(--salt-zIndex-appHeader) - 1);
881
+ overflow-y: auto;
882
+ font-family: var(--salt-text-fontFamily);
883
+ font-size: var(--salt-text-fontSize);
884
+ font-weight: var(--salt-text-fontWeight);
885
+ line-height: var(--salt-text-lineHeight);
886
+ }
887
+ .salt-density-high {
888
+ --saltDialog-minWidth: 240px;
889
+ }
890
+ .salt-density-medium {
891
+ --saltDialog-minWidth: 320px;
892
+ }
893
+ .salt-density-low {
894
+ --saltDialog-minWidth: 400px;
895
+ }
896
+ .salt-density-touch {
897
+ --saltDialog-minWidth: 480px;
898
+ }
899
+ .saltDialog-overlay {
900
+ background: var(--salt-overlayable-background);
901
+ display: flex;
902
+ align-items: center;
903
+ justify-content: center;
904
+ padding: var(--salt-spacing-100);
905
+ z-index: var(--salt-zIndex-modal);
906
+ }
907
+ .saltDialog-withStatus {
908
+ border-width: var(--salt-size-border);
909
+ border-style: var(--salt-container-borderStyle);
910
+ }
911
+ .saltDialog-info {
912
+ border-color: var(--salt-status-info-borderColor);
913
+ }
914
+ .saltDialog-error {
915
+ border-color: var(--salt-status-error-borderColor);
916
+ }
917
+ .saltDialog-warning {
918
+ border-color: var(--salt-status-warning-borderColor);
919
+ }
920
+ .saltDialog-success {
921
+ border-color: var(--salt-status-success-borderColor);
922
+ }
923
+ .saltDialog.saltDialog-enterAnimation {
924
+ animation: var(--salt-animation-fade-in-center);
925
+ }
926
+ .saltDialog.saltDialog-exitAnimation {
927
+ animation: var(--salt-animation-fade-out-back);
928
+ }
929
+ @media screen and (min-width: 480px) {
930
+ .saltDialog {
931
+ min-width: var(--saltDialog-minWidth);
932
+ }
933
+ .saltDialog-overlay {
934
+ padding: var(--salt-spacing-400);
935
+ }
936
+ }
937
+
938
+ /* src/dialog/DialogActions.css */
939
+ .saltDialogActions {
940
+ padding: var(--salt-spacing-300);
941
+ padding-bottom: 0;
942
+ display: flex;
943
+ justify-content: flex-end;
944
+ gap: var(--salt-spacing-100);
945
+ }
946
+
947
+ /* src/dialog/DialogCloseButton.css */
948
+ .saltButton.saltDialogCloseButton {
949
+ position: absolute;
950
+ top: 0;
951
+ right: 0;
952
+ }
953
+
954
+ /* src/dialog/DialogContent.css */
955
+ .saltDialogContent {
956
+ color: var(--salt-content-primary-foreground);
957
+ padding-left: var(--salt-spacing-300);
958
+ padding-right: var(--salt-spacing-300);
959
+ flex: 1 1 auto;
960
+ min-height: var(--salt-text-lineHeight);
961
+ overflow-y: auto;
962
+ font-family: var(--salt-text-fontFamily);
963
+ font-size: var(--salt-text-fontSize);
964
+ font-weight: var(--salt-text-fontWeight);
965
+ line-height: var(--salt-text-lineHeight);
966
+ }
967
+
968
+ /* src/dialog/DialogTitle.css */
969
+ .saltDialogTitle {
970
+ display: flex;
971
+ gap: var(--salt-spacing-100);
972
+ padding-bottom: var(--salt-spacing-100);
973
+ padding-left: var(--salt-spacing-300);
974
+ padding-right: var(--salt-spacing-300);
975
+ margin: 0;
976
+ }
977
+ .saltDialogTitle .saltStatusIndicator.saltIcon {
978
+ --icon-size: var(--salt-text-h2-lineHeight);
979
+ }
980
+ .saltDialogTitle-withAccent {
981
+ position: relative;
982
+ }
983
+ .saltDialogTitle-withAccent::before {
984
+ content: "";
985
+ position: absolute;
986
+ top: 0;
987
+ left: 0;
988
+ bottom: var(--salt-spacing-100);
989
+ width: var(--salt-size-accent);
990
+ background: var(--salt-accent-background);
991
+ }
992
+ .saltDialogTitle-error::before {
993
+ background: var(--salt-status-error-borderColor);
994
+ }
995
+ .saltDialogTitle-info::before {
996
+ background: var(--salt-status-info-borderColor);
997
+ }
998
+ .saltDialogTitle-success::before {
999
+ background: var(--salt-status-success-borderColor);
1000
+ }
1001
+ .saltDialogTitle-warning::before {
1002
+ background: var(--salt-status-warning-borderColor);
1003
+ }
1004
+
1005
+ /* src/drawer/Drawer.css */
1006
+ .saltDrawer {
1007
+ background: var(--drawer-background);
1008
+ display: flex;
1009
+ flex-direction: column;
1010
+ max-height: 100%;
1011
+ max-width: 100%;
1012
+ overflow: auto;
1013
+ padding: var(--salt-spacing-300);
1014
+ box-shadow: var(--salt-overlayable-shadow-modal);
1015
+ z-index: calc(var(--salt-zIndex-appHeader) - 1);
1016
+ position: fixed;
1017
+ top: 0;
1018
+ }
1019
+ .saltDrawer-overlay {
1020
+ background: var(--salt-overlayable-background);
1021
+ z-index: var(--salt-zIndex-drawer);
1022
+ }
1023
+ .saltDrawer-primary {
1024
+ --drawer-background: var(--salt-container-primary-background);
1025
+ }
1026
+ .saltDrawer-secondary {
1027
+ --drawer-background: var(--salt-container-secondary-background);
1028
+ }
1029
+ .saltDrawer-top {
1030
+ left: 0;
1031
+ right: 0;
1032
+ bottom: auto;
1033
+ }
1034
+ .saltDrawer-top.saltDrawer-enterAnimation {
1035
+ animation: var(--salt-animation-slide-in-bottom);
1036
+ }
1037
+ .saltDrawer-top.saltDrawer-exitAnimation {
1038
+ animation: var(--salt-animation-slide-out-bottom);
1039
+ }
1040
+ .saltDrawer-right,
1041
+ .saltDrawer-left {
1042
+ width: calc(10 * var(--salt-size-base));
1043
+ }
1044
+ .saltDrawer-right {
1045
+ left: auto;
1046
+ right: 0;
1047
+ height: 100%;
1048
+ }
1049
+ .saltDrawer-right.saltDrawer-enterAnimation {
1050
+ animation: var(--salt-animation-slide-in-right);
1051
+ }
1052
+ .saltDrawer-right.saltDrawer-exitAnimation {
1053
+ animation: var(--salt-animation-slide-out-right);
1054
+ }
1055
+ .saltDrawer-left {
1056
+ left: 0;
1057
+ right: auto;
1058
+ height: 100%;
1059
+ }
1060
+ .saltDrawer-left.saltDrawer-enterAnimation {
1061
+ animation: var(--salt-animation-slide-in-left);
1062
+ }
1063
+ .saltDrawer-left.saltDrawer-exitAnimation {
1064
+ animation: var(--salt-animation-slide-out-left);
1065
+ }
1066
+ .saltDrawer-bottom {
1067
+ left: 0;
1068
+ right: 0;
1069
+ bottom: 0;
1070
+ top: auto;
1071
+ }
1072
+ .saltDrawer-bottom.saltDrawer-enterAnimation {
1073
+ animation: var(--salt-animation-slide-in-top);
1074
+ }
1075
+ .saltDrawer-bottom.saltDrawer-exitAnimation {
1076
+ animation: var(--salt-animation-slide-out-top);
1077
+ }
1078
+
1079
+ /* src/dropdown/Dropdown.css */
1080
+ .saltDropdown {
1081
+ --saltIcon-margin: 2px 0 0 8px;
1082
+ display: inline-block;
1083
+ line-height: 0;
1084
+ position: relative;
1085
+ }
1086
+ .saltDropdown-fullWidth {
1087
+ width: 100%;
1088
+ }
1089
+ .saltDropdown-popup {
1090
+ background: var(--salt-container-primary-background);
1091
+ z-index: calc(var(--salt-zIndex-flyover) - 1);
1092
+ }
1093
+
1094
+ /* src/dropdown/DropdownButton.css */
1095
+ .saltDropdownButton {
1096
+ --saltButton-background-hover: var(--salt-actionable-secondary-background);
1097
+ --saltButton-background-active: var(--salt-actionable-secondary-background);
1098
+ --saltButton-fontWeight: var(--salt-text-fontWeight-strong);
1099
+ --saltButton-textAlign: left;
1100
+ --saltButton-textTransform: none;
1101
+ --saltButton-width: 100%;
1102
+ }
1103
+ .saltDropdownButton:active {
1104
+ --saltIcon-color: var(--salt-actionable-secondary-foreground);
1105
+ --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
1106
+ }
1107
+ .saltDropdownButton-fullwidth {
1108
+ width: 100%;
1109
+ }
1110
+ .saltDropdownButton-content {
1111
+ align-items: center;
1112
+ flex: 1;
1113
+ width: 100%;
1114
+ display: flex;
1115
+ white-space: nowrap;
1116
+ }
1117
+ .saltDropdownButton-buttonLabel {
1118
+ display: inline-block;
1119
+ letter-spacing: 0;
1120
+ overflow: hidden;
1121
+ text-overflow: ellipsis;
1122
+ width: 100%;
1123
+ }
1124
+ .saltDropdownButton-formField.saltButton:focus,
1125
+ .saltDropdownButton-formField.saltButton:focus-visible {
1126
+ outline: none;
1127
+ }
1128
+
1129
+ /* src/dropdown-next/DropdownNext.css */
1130
+ .saltDropdownNext-button {
1131
+ --dropdownNext-borderColor: var(--salt-editable-borderColor);
1132
+ --dropdownNext-borderStyle: var(--salt-editable-borderStyle);
1133
+ --dropdownNext-borderWidth: var(--salt-size-border);
1134
+ align-items: center;
1135
+ background: var(--saltDropdownNext-background, var(--dropdownNext-background));
1136
+ color: var(--saltDropdownNext-color, var(--salt-content-primary-foreground));
1137
+ display: flex;
1138
+ font-family: var(--salt-text-fontFamily);
1139
+ font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));
1140
+ height: var(--saltDropdownNext-height, var(--salt-size-base));
1141
+ line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));
1142
+ min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));
1143
+ min-width: var(--saltDropdownNext-minWidth, 160px);
1144
+ padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));
1145
+ padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));
1146
+ position: relative;
1147
+ border: none;
1148
+ border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);
1149
+ justify-content: space-between;
1150
+ }
1151
+ .saltDropdownNext-button:hover {
1152
+ --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);
1153
+ cursor: var(--salt-selectable-cursor-hover);
1154
+ }
1155
+ .saltDropdownNext-button:focus,
1156
+ .saltDropdownNext-button:active {
1157
+ --dropdownNext-borderColor: var(--salt-editable-borderColor-active);
1158
+ --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);
1159
+ outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));
1160
+ }
1161
+ .saltDropdownNext-buttonText {
1162
+ text-align: left;
1163
+ overflow: hidden;
1164
+ white-space: nowrap;
1165
+ text-overflow: ellipsis;
1166
+ padding-right: var(--salt-spacing-100);
1167
+ user-select: text;
1168
+ }
1169
+ .saltDropdownNext-list.saltListNext {
1170
+ border-color: var(--salt-selectable-borderColor-selected);
1171
+ box-shadow: var(--salt-overlayable-shadow-popout);
1172
+ max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);
1173
+ z-index: calc(var(--salt-zIndex-modal) + 1);
1174
+ }
1175
+ .saltDropdownNext-disabled,
1176
+ .saltDropdownNext-disabled:hover,
1177
+ .saltDropdownNext-disabled:active {
1178
+ --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);
1179
+ --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);
1180
+ --dropdownNext-borderWidth: var(--salt-size-border);
1181
+ cursor: var(--salt-selectable-cursor-disabled);
1182
+ background: var(--dropdownNext-background-disabled);
1183
+ color: var(--saltDropdownNext-color-disabled, var(--salt-content-primary-foreground-disabled));
1184
+ outline: 0;
1185
+ }
1186
+ .saltDropdownNext-button.saltDropdownNext-readOnly,
1187
+ .saltDropdownNext-button.saltDropdownNext-readOnly:hover,
1188
+ .saltDropdownNext-button.saltDropdownNext-readOnly:active {
1189
+ --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);
1190
+ --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);
1191
+ --dropdownNext-borderWidth: var(--salt-size-border);
1192
+ cursor: var(--salt-editable-cursor-readonly);
1193
+ background: var(--dropdownNext-background-readonly);
1194
+ padding-right: 0;
1195
+ }
1196
+ .saltDropdownNext-icon.saltDropdownNext-disabled,
1197
+ .saltDropdownNext-icon.saltDropdownNext-disabled:hover,
1198
+ .saltDropdownNext-icon.saltDropdownNext-disabled:active,
1199
+ .saltDropdownNext-icon.saltDropdownNext-readOnly,
1200
+ .saltDropdownNext-icon.saltDropdownNext-readOnly:hover,
1201
+ .saltDropdownNext-icon.saltDropdownNext-readOnly:active {
1202
+ color: var(--salt-content-primary-foreground-disabled);
1203
+ }
1204
+ .saltDropdownNext-primary {
1205
+ --dropdownNext-background: var(--salt-editable-primary-background);
1206
+ --dropdownNext-background-active: var(--salt-editable-primary-background-active);
1207
+ --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);
1208
+ --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);
1209
+ --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);
1210
+ }
1211
+ .saltDropdownNext-secondary {
1212
+ --dropdownNext-background: var(--salt-editable-secondary-background);
1213
+ --dropdownNext-background-active: var(--salt-editable-secondary-background-active);
1214
+ --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);
1215
+ --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);
1216
+ --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);
1217
+ }
1218
+
1219
+ /* src/editable-label/EditableLabel.css */
1220
+ .saltEditableLabel {
1221
+ --saltInputLegacy-minWidth: 14px;
1222
+ --saltInputLegacy-position: absolute;
1223
+ --editableLabel-padding: var(--saltEditableLabel-padding, 6px);
1224
+ --editableLabel-height: var(--saltEditableLabel-height, 26px);
1225
+ color: inherit;
1226
+ display: flex;
1227
+ flex-direction: column;
1228
+ font-size: var(--salt-text-fontSize);
1229
+ height: var(--editableLabel-height);
1230
+ justify-content: center;
1231
+ padding: 0 var(--editableLabel-padding);
1232
+ position: relative;
1233
+ z-index: var(--salt-zIndex-default);
1234
+ }
1235
+ .saltEditableLabel:before {
1236
+ content: attr(data-text);
1237
+ display: block;
1238
+ height: 0px;
1239
+ visibility: hidden;
1240
+ white-space: pre-wrap;
1241
+ }
1242
+ .saltEditableLabel .saltInputLegacy {
1243
+ font-weight: var(--salt-text-fontWeight);
1244
+ left: var(--editableLabel-padding, 0);
1245
+ padding: 0;
1246
+ outline-style: none;
1247
+ right: var(--editableLabel-padding, 0);
1248
+ }
1249
+ .saltEditableLabel-input {
1250
+ outline: none;
1251
+ }
1252
+
1253
+ /* src/file-drop-zone/FileDropZone.css */
1254
+ .saltFileDropZone {
1255
+ --fileDropZone-background: var(--salt-container-secondary-background);
1256
+ --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
1257
+ --fileDropZone-borderWidth: var(--salt-size-border);
1258
+ --fileDropZone-borderStyle: var(--salt-target-borderStyle);
1259
+ --fileDropZone-text-color: var(--salt-content-primary-foreground);
1260
+ --fileDropZone-icon-color: var(--salt-content-primary-foreground);
1261
+ --fileDropZone-padding: var(--salt-size-container-spacing);
1262
+ --fileDropZone-title-fontSize: var(--salt-text-fontSize);
1263
+ --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);
1264
+ }
1265
+ .saltFileDropZone {
1266
+ color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));
1267
+ display: inline-flex;
1268
+ background: var(--saltFileDropZone-background, var(--fileDropZone-background));
1269
+ text-align: center;
1270
+ align-items: stretch;
1271
+ justify-content: center;
1272
+ border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));
1273
+ border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));
1274
+ border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));
1275
+ flex-direction: column;
1276
+ padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));
1277
+ }
1278
+ .saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {
1279
+ pointer-events: none;
1280
+ }
1281
+ .saltFileDropZone-icon {
1282
+ fill: var(--fileDropZone-icon-color);
1283
+ margin-bottom: var(--salt-size-unit);
1284
+ }
1285
+ .saltFileDropZone .saltFileDropZone-title:not(:last-child),
1286
+ .saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {
1287
+ margin-bottom: calc(var(--salt-size-unit) * 2);
1288
+ }
1289
+ .saltFileDropZone-active:not(.saltFileDropZone-disabled) {
1290
+ --fileDropZone-background: var(--salt-target-background-hover);
1291
+ }
1292
+ .saltFileDropZone-error .saltFileDropZone-description {
1293
+ margin-bottom: calc(var(--salt-size-unit) * 2);
1294
+ }
1295
+ .saltFileDropZone-error {
1296
+ --fileDropZone-background: var(--salt-status-error-background);
1297
+ --fileDropZone-borderColor: var(--salt-status-error-borderColor);
1298
+ --fileDropZone-icon-color: var(--salt-status-error-foreground);
1299
+ }
1300
+ .saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {
1301
+ --fileDropZone-background: var(--salt-target-background-hover);
1302
+ --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
1303
+ }
1304
+ .saltFileDropZone-title,
1305
+ .saltFileDropZone-description {
1306
+ font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));
1307
+ line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));
1308
+ }
1309
+ .saltFileDropZone-title {
1310
+ font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));
1311
+ }
1312
+ .saltFileDropZone-inputButton {
1313
+ display: inline-flex;
1314
+ }
1315
+ .saltFileDropZone-inputRoot {
1316
+ line-height: 1;
1317
+ }
1318
+ .saltFileDropZone-inputRoot .input-hidden {
1319
+ position: absolute;
1320
+ clip: rect(0, 0, 0, 0);
1321
+ visibility: hidden;
1322
+ }
1323
+ .saltFileDropZone-disabled {
1324
+ --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);
1325
+ cursor: var(--salt-target-cursor-disabled);
1326
+ }
1327
+ .saltFileDropZone-disabled .saltFileDropZone-icon,
1328
+ .saltFileDropZone-disabled .saltFileDropZone-title {
1329
+ --fileDropZone-text-color: var(--salt-content-primary-foreground-disabled);
1330
+ --fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled);
1331
+ }
1332
+
1333
+ /* src/form-field-legacy/FormActivationIndicator.css */
1334
+ .salt-density-touch {
1335
+ --formFieldLegacy-activationIndicator-icon-size: 7px;
1336
+ }
1337
+ .salt-density-low {
1338
+ --formFieldLegacy-activationIndicator-icon-size: 5px;
1339
+ }
1340
+ .salt-density-medium {
1341
+ --formFieldLegacy-activationIndicator-icon-size: 5px;
1342
+ }
1343
+ .salt-density-high {
1344
+ --formFieldLegacy-activationIndicator-icon-size: 3px;
1345
+ }
1346
+ .saltFormActivationIndicator {
1347
+ height: 0px;
1348
+ width: 100%;
1349
+ position: relative;
1350
+ }
1351
+ .saltFormActivationIndicator-bar {
1352
+ bottom: 0px;
1353
+ border-color: var(--saltFormFieldLegacy-activationIndicator-borderColor, var(--formFieldLegacy-activationIndicator-color));
1354
+ border-bottom-width: var(--saltFormFieldLegacy-activationIndicator-borderWidth, var(--formFieldLegacy-activationIndicator-size));
1355
+ border-bottom-style: var(--saltFormFieldLegacy-activationIndicator-borderStyle, var(--formFieldLegacy-activationIndicator-style));
1356
+ height: 0;
1357
+ opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);
1358
+ position: absolute;
1359
+ width: 100%;
1360
+ }
1361
+ .saltFormActivationIndicator-icon {
1362
+ width: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));
1363
+ height: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));
1364
+ fill: var(--saltFormFieldLegacy-activationIndicator-icon-color, var(--formFieldLegacy-activationIndicator-color));
1365
+ opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);
1366
+ position: absolute;
1367
+ bottom: 3px;
1368
+ right: 2px;
1369
+ }
1370
+
1371
+ /* src/form-field-legacy/FormFieldLegacy.css */
1372
+ .salt-density-high {
1373
+ --formFieldLegacy-label-top-marginBottom: 2px;
1374
+ }
1375
+ .salt-density-medium {
1376
+ --formFieldLegacy-label-top-marginBottom: 2px;
1377
+ }
1378
+ .salt-density-low {
1379
+ --formFieldLegacy-label-top-marginBottom: 4px;
1380
+ }
1381
+ .salt-density-touch {
1382
+ --formFieldLegacy-label-top-marginBottom: 8px;
1383
+ }
1384
+ .saltFormFieldLegacy {
1385
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);
1386
+ --formFieldLegacy-activationIndicator-size: var(--salt-size-border);
1387
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);
1388
+ --formFieldLegacy-background: var(--salt-editable-primary-background);
1389
+ --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);
1390
+ --formFieldLegacy-helperText-height: 0px;
1391
+ }
1392
+ .saltFormFieldLegacy-secondary.saltFormFieldLegacy {
1393
+ --formFieldLegacy-background: var(--salt-editable-secondary-background);
1394
+ }
1395
+ .saltFormFieldLegacy {
1396
+ border: 0;
1397
+ display: inline-grid;
1398
+ margin: var(--saltFormFieldLegacy-margin, 0);
1399
+ padding: 0;
1400
+ position: relative;
1401
+ min-width: 0;
1402
+ vertical-align: top;
1403
+ width: var(--saltFormFieldLegacy-width, auto);
1404
+ font-family: var(--salt-text-fontFamily);
1405
+ font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));
1406
+ font-weight: var(--salt-text-fontWeight);
1407
+ line-height: var(--salt-text-lineHeight);
1408
+ }
1409
+ .saltFormFieldLegacy:hover {
1410
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);
1411
+ --formFieldLegacy-activationIndicator-size: var(--salt-size-border);
1412
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);
1413
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-hover);
1414
+ }
1415
+ .saltFormFieldLegacy-focused,
1416
+ .saltFormFieldLegacy-lowFocused,
1417
+ .saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,
1418
+ .saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {
1419
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);
1420
+ --formFieldLegacy-activationIndicator-size: var(--salt-editable-borderWidth-active);
1421
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);
1422
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-active);
1423
+ }
1424
+ .saltFormFieldLegacy-withHelperText {
1425
+ --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);
1426
+ --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));
1427
+ }
1428
+ .saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {
1429
+ --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);
1430
+ --formFieldLegacy-activationIndicator-offsetBottom: calc( var(--formFieldLegacy-helperText-marginTop-fullWidth) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)) );
1431
+ }
1432
+ .saltFormFieldLegacy-withHelperText {
1433
+ --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));
1434
+ --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));
1435
+ --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));
1436
+ --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));
1437
+ }
1438
+ .saltFormFieldLegacy-fullWidth {
1439
+ width: 100%;
1440
+ }
1441
+ .saltFormFieldLegacy-disabled {
1442
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);
1443
+ --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);
1444
+ --formFieldLegacy-activationIndicator-size: var(--salt-size-border);
1445
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);
1446
+ --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);
1447
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);
1448
+ }
1449
+ .saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {
1450
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);
1451
+ --formFieldLegacy-activationIndicator-size: var(--salt-size-border);
1452
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);
1453
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);
1454
+ }
1455
+ .saltFormFieldLegacy.saltFormFieldLegacy-warning {
1456
+ --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);
1457
+ --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);
1458
+ }
1459
+ .saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {
1460
+ --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);
1461
+ }
1462
+ .saltFormFieldLegacy.saltFormFieldLegacy-error {
1463
+ --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);
1464
+ --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);
1465
+ }
1466
+ .saltFormFieldLegacy.saltFormFieldLegacy-error:hover {
1467
+ --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);
1468
+ }
1469
+ .saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {
1470
+ --formFieldLegacy-background: var(--salt-status-error-background);
1471
+ }
1472
+ .saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {
1473
+ --formFieldLegacy-background: var(--salt-status-warning-background);
1474
+ }
1475
+ .saltFormFieldLegacy-labelLeft {
1476
+ --formFieldLegacy-label-marginTop: var(--salt-size-unit);
1477
+ --formFieldLegacy-label-paddingLeft: 0px;
1478
+ --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));
1479
+ align-self: start;
1480
+ grid-template-columns: auto 1fr;
1481
+ }
1482
+ .saltFormFieldLegacy-labelTop {
1483
+ --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);
1484
+ --formFieldLegacy-label-marginTop: 0;
1485
+ --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);
1486
+ --formFieldLegacy-label-paddingRight: var(--salt-size-unit);
1487
+ --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));
1488
+ background: linear-gradient(to top, transparent var(--formFieldLegacy-background-offset-height), var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height));
1489
+ }
1490
+ .saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {
1491
+ --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);
1492
+ }
1493
+ .saltFormFieldLegacy > * {
1494
+ grid-column-start: 1;
1495
+ grid-column-end: 2;
1496
+ grid-row-start: 2;
1497
+ grid-row-end: 3;
1498
+ }
1499
+ .saltFormFieldLegacy-labelLeft > * {
1500
+ grid-row-start: 1;
1501
+ grid-row-end: 2;
1502
+ }
1503
+ .saltFormFieldLegacy > .saltFormLabel {
1504
+ grid-row-start: 1;
1505
+ grid-row-end: 2;
1506
+ }
1507
+ .saltFormFieldLegacy > .saltFormActivationIndicator {
1508
+ grid-row-start: 3;
1509
+ grid-row-end: 4;
1510
+ }
1511
+ .saltFormFieldLegacy > .saltFormHelperText {
1512
+ grid-row-start: 4;
1513
+ grid-row-end: 5;
1514
+ }
1515
+ .saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {
1516
+ grid-column-start: 2;
1517
+ grid-column-end: 2;
1518
+ }
1519
+ .saltFormFieldLegacy-readOnly {
1520
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);
1521
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);
1522
+ }
1523
+ .saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {
1524
+ --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);
1525
+ --formFieldLegacy-activationIndicator-size: var(--salt-size-border);
1526
+ --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);
1527
+ --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);
1528
+ }
1529
+ .saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {
1530
+ content: " ";
1531
+ position: absolute;
1532
+ top: 0;
1533
+ left: 0;
1534
+ right: 0;
1535
+ bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));
1536
+ outline-color: var(--formFieldLegacy-focused-outlineColor);
1537
+ outline-style: var(--salt-focused-outlineStyle);
1538
+ outline-width: var(--salt-focused-outlineWidth);
1539
+ }
1540
+ .saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {
1541
+ content: " ";
1542
+ position: absolute;
1543
+ top: 0;
1544
+ left: 0;
1545
+ right: 0;
1546
+ bottom: var(--formFieldLegacy-helperText-height, 0px);
1547
+ outline-color: var(--formFieldLegacy-focused-outlineColor);
1548
+ outline-style: var(--salt-focused-outlineStyle);
1549
+ outline-width: var(--salt-focused-outlineWidth);
1550
+ }
1551
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {
1552
+ content: none;
1553
+ }
1554
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {
1555
+ content: " ";
1556
+ position: absolute;
1557
+ top: 0;
1558
+ left: 0;
1559
+ right: 0;
1560
+ bottom: 0px;
1561
+ outline-color: var(--formFieldLegacy-focused-outlineColor);
1562
+ outline-style: var(--salt-focused-outlineStyle);
1563
+ outline-width: var(--salt-focused-outlineWidth);
1564
+ z-index: -1;
1565
+ }
1566
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {
1567
+ content: none;
1568
+ }
1569
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {
1570
+ outline: none;
1571
+ }
1572
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {
1573
+ content: none;
1574
+ }
1575
+ .saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {
1576
+ outline: none;
1577
+ }
1578
+ .saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {
1579
+ background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));
1580
+ }
1581
+ .saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {
1582
+ background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));
1583
+ }
1584
+ .saltFormFieldLegacy-tertiary.saltFormFieldLegacy {
1585
+ --formFieldLegacy-background: var(--salt-editable-tertiary-background);
1586
+ }
1587
+
1588
+ /* src/form-field-legacy/FormHelperText.css */
1589
+ .salt-density-high {
1590
+ --formFieldLegacy-helperText-marginTop-default: 2px;
1591
+ --formFieldLegacy-helperText-marginTop-fullWidth: 3px;
1592
+ --formFieldLegacy-helperText-background-offset-height: 17px;
1593
+ }
1594
+ .salt-density-medium {
1595
+ --formFieldLegacy-helperText-marginTop-default: 2px;
1596
+ --formFieldLegacy-helperText-marginTop-fullWidth: 3px;
1597
+ --formFieldLegacy-helperText-transform: translate(0, 2px);
1598
+ --formFieldLegacy-helperText-background-offset-height: 19px;
1599
+ }
1600
+ .salt-density-touch {
1601
+ --formFieldLegacy-helperText-marginTop-default: 8px;
1602
+ --formFieldLegacy-helperText-marginTop-fullWidth: 5px;
1603
+ --formFieldLegacy-helperText-transform: translate(0, -3px);
1604
+ --formFieldLegacy-helperText-background-offset-height: 21px;
1605
+ }
1606
+ .salt-density-low {
1607
+ --formFieldLegacy-helperText-marginTop-default: 4px;
1608
+ --formFieldLegacy-helperText-marginTop-fullWidth: 5px;
1609
+ --formFieldLegacy-helperText-transform: translate(0, 1px);
1610
+ --formFieldLegacy-helperText-background-offset-height: 21px;
1611
+ }
1612
+ .saltFormFieldLegacy-fullWidth {
1613
+ --formFieldLegacy-helperText-transform: none;
1614
+ }
1615
+ .saltFormHelperText {
1616
+ --formFieldLegacy-helperText-opacity: 1;
1617
+ color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));
1618
+ font-size: var(--formFieldLegacy-helperText-fontSize);
1619
+ font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));
1620
+ letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);
1621
+ line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));
1622
+ min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));
1623
+ margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);
1624
+ margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));
1625
+ opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));
1626
+ padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));
1627
+ padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));
1628
+ transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));
1629
+ }
1630
+
1631
+ /* src/form-field-legacy/FormLabel.css */
1632
+ .salt-density-touch {
1633
+ --formFieldLegacy-label-default-top: 11px;
1634
+ --formFieldLegacy-label-left-top: 16px;
1635
+ --formFieldLegacy-label-minHeight: 16px;
1636
+ }
1637
+ .salt-density-low {
1638
+ --formFieldLegacy-label-default-top: 7px;
1639
+ --formFieldLegacy-label-left-top: 12px;
1640
+ }
1641
+ .salt-density-medium {
1642
+ --formFieldLegacy-label-default-top: 5px;
1643
+ --formFieldLegacy-label-left-top: 8px;
1644
+ }
1645
+ .salt-density-high {
1646
+ --formFieldLegacy-label-default-top: 3px;
1647
+ --formFieldLegacy-label-left-top: 4px;
1648
+ }
1649
+ .saltFormLabel {
1650
+ --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));
1651
+ --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);
1652
+ --formFieldLegacy-label-width: 100%;
1653
+ }
1654
+ .saltFormFieldLegacy-labelLeft .saltFormLabel {
1655
+ --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);
1656
+ --formFieldLegacy-label-width: auto;
1657
+ }
1658
+ .saltFormLabel {
1659
+ align-items: center;
1660
+ color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));
1661
+ display: block;
1662
+ font-size: var(--formFieldLegacy-label-fontSize);
1663
+ margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));
1664
+ min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));
1665
+ margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);
1666
+ line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));
1667
+ overflow: hidden;
1668
+ padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));
1669
+ padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));
1670
+ padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);
1671
+ padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);
1672
+ text-overflow: ellipsis;
1673
+ top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));
1674
+ transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));
1675
+ white-space: nowrap;
1676
+ width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));
1677
+ }
1678
+ .saltFormLabel ~ * {
1679
+ z-index: 1;
1680
+ }
1681
+ .saltFormLabel-disabled {
1682
+ color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));
1683
+ cursor: var(--salt-editable-cursor-disabled);
1684
+ }
1685
+ .saltFormLabel-necessityIndicator {
1686
+ font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));
1687
+ margin-left: 1ch;
1688
+ }
1689
+ .saltFormLabel-statusIndicator {
1690
+ margin-left: 6px;
1691
+ vertical-align: top;
1692
+ }
1693
+
1694
+ /* src/form-group/FormGroup.css */
1695
+ .saltFormGroup {
1696
+ display: flex;
1697
+ flex-direction: column;
1698
+ flex-wrap: wrap;
1699
+ justify-content: space-between;
1700
+ }
1701
+ .saltFormGroup-row {
1702
+ flex-direction: row;
1703
+ float: left;
1704
+ }
1705
+
1706
+ /* src/formatted-input/FormattedInput.css */
1707
+ .saltFormattedInput {
1708
+ --formattedInput-mask-color: var(--salt-content-secondary-foreground);
1709
+ }
1710
+ .saltFormattedInput-inputWrapper {
1711
+ position: relative;
1712
+ width: 100%;
1713
+ display: inline-flex;
1714
+ }
1715
+ .saltFormattedInput-mask {
1716
+ position: absolute;
1717
+ color: var(--formattedInput-mask-color);
1718
+ pointer-events: none;
1719
+ display: flex;
1720
+ align-items: center;
1721
+ top: 0;
1722
+ left: 0;
1723
+ }
1724
+ .saltFormattedInput-mask i {
1725
+ color: transparent;
1726
+ opacity: 0;
1727
+ visibility: hidden;
1728
+ font: inherit;
1729
+ }
1730
+
1731
+ /* src/input-legacy/InputLegacy.css */
1732
+ .salt-density-touch {
1733
+ --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);
1734
+ --inputLegacy-button-inset: 4px;
1735
+ }
1736
+ .salt-density-low {
1737
+ --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);
1738
+ --inputLegacy-button-inset: 4px;
1739
+ }
1740
+ .salt-density-medium {
1741
+ --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);
1742
+ --inputLegacy-button-inset: 2px;
1743
+ }
1744
+ .salt-density-high {
1745
+ --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));
1746
+ --inputLegacy-button-inset: 2px;
1747
+ }
1748
+ .saltInputLegacy {
1749
+ align-items: center;
1750
+ background: var(--saltInputLegacy-background, none);
1751
+ border: var(--saltInputLegacy-border, none);
1752
+ border-radius: var(--saltInputLegacy-borderRadius, 0);
1753
+ color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));
1754
+ cursor: var(--saltInputLegacy-cursor, default);
1755
+ display: inline-flex;
1756
+ font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));
1757
+ font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));
1758
+ height: var(--saltInputLegacy-height, var(--salt-size-base));
1759
+ line-height: var(--salt-text-lineHeight);
1760
+ min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));
1761
+ min-width: var(--saltInputLegacy-minWidth, 8em);
1762
+ padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));
1763
+ position: var(--saltInputLegacy-position, relative);
1764
+ width: 100%;
1765
+ }
1766
+ .saltInputLegacy-input:focus {
1767
+ outline: none;
1768
+ }
1769
+ .saltInputLegacy-focused {
1770
+ outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));
1771
+ outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));
1772
+ outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));
1773
+ outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));
1774
+ }
1775
+ .saltInputLegacy-input::selection {
1776
+ background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));
1777
+ }
1778
+ .saltInputLegacy-input {
1779
+ background: var(--saltInputLegacy-background, none);
1780
+ border: none;
1781
+ box-sizing: content-box;
1782
+ color: inherit;
1783
+ display: block;
1784
+ flex: 1;
1785
+ font: inherit;
1786
+ letter-spacing: var(--saltInputLegacy-letterSpacing, 0);
1787
+ margin: 0;
1788
+ min-width: 0;
1789
+ overflow: hidden;
1790
+ padding: 0;
1791
+ height: 100%;
1792
+ width: 100%;
1793
+ }
1794
+ .saltInputLegacy-disabled .saltInputLegacy-input {
1795
+ cursor: var(--salt-editable-cursor-disabled);
1796
+ color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));
1797
+ }
1798
+ .saltInputLegacy-suffixContainer,
1799
+ .saltInputLegacy-prefixContainer {
1800
+ display: flex;
1801
+ align-items: center;
1802
+ height: var(--inputLegacy-adornment-height);
1803
+ }
1804
+ .saltInputLegacy-inputAdornedStart {
1805
+ padding-left: var(--saltInputLegacy-adornedStart-padding, 0);
1806
+ }
1807
+ .saltInputLegacy-inputAdornedStart .saltInputLegacy-input {
1808
+ padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));
1809
+ }
1810
+ .saltInputLegacy-inputAdornedEnd {
1811
+ padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);
1812
+ }
1813
+ .saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {
1814
+ padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));
1815
+ }
1816
+ .saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,
1817
+ .saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {
1818
+ height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));
1819
+ margin: var(--inputLegacy-button-inset);
1820
+ padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));
1821
+ }
1822
+ .saltInputLegacy-leftTextAlign .saltInputLegacy-input {
1823
+ text-align: left;
1824
+ }
1825
+ .saltInputLegacy-centerTextAlign .saltInputLegacy-input {
1826
+ text-align: center;
1827
+ }
1828
+ .saltInputLegacy-rightTextAlign .saltInputLegacy-input {
1829
+ text-align: right;
1830
+ }
1831
+ .saltInputLegacy-formField {
1832
+ min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);
1833
+ width: 100%;
1834
+ }
1835
+
1836
+ /* src/input-legacy/StaticInputAdornment.css */
1837
+ .saltStaticInputAdornment {
1838
+ --inputLegacy-staticAdornment-padding: var(--salt-size-unit);
1839
+ }
1840
+ .saltStaticInputAdornment {
1841
+ display: flex;
1842
+ align-items: center;
1843
+ }
1844
+ .saltInputLegacy-prefixContainer .saltStaticInputAdornment {
1845
+ padding-left: var(--inputLegacy-staticAdornment-padding);
1846
+ }
1847
+ .saltInputLegacy-suffixContainer .saltStaticInputAdornment {
1848
+ padding-right: var(--inputLegacy-staticAdornment-padding);
1849
+ }
1850
+
1851
+ /* src/layer-layout/LayerLayout.css */
1852
+ .saltLayerLayout {
1853
+ --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));
1854
+ --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));
1855
+ --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));
1856
+ --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));
1857
+ }
1858
+ .saltLayerLayout {
1859
+ background: var(--layerLayout-background);
1860
+ display: flex;
1861
+ flex-direction: column;
1862
+ max-height: 100%;
1863
+ max-width: 100%;
1864
+ overflow: auto;
1865
+ padding: var(--layerLayout-padding);
1866
+ box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));
1867
+ z-index: calc(var(--salt-zIndex-appHeader) - 1);
1868
+ }
1869
+ .saltLayerLayout-fullScreen {
1870
+ width: 100vw;
1871
+ height: 100vh;
1872
+ margin: 0;
1873
+ position: fixed;
1874
+ top: 0;
1875
+ left: 0;
1876
+ }
1877
+ .saltLayerLayout-center {
1878
+ margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));
1879
+ }
1880
+ .saltLayerLayout-center.saltLayerLayout-enter-animation,
1881
+ .saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,
1882
+ .saltScrim.saltLayerLayout-enter-animation {
1883
+ animation: var(--salt-animation-fade-in-center);
1884
+ }
1885
+ .saltLayerLayout-center.saltLayerLayout-exit-animation,
1886
+ .saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,
1887
+ .saltScrim.saltLayerLayout-exit-animation {
1888
+ animation: var(--salt-animation-fade-out-back);
1889
+ }
1890
+ .saltLayerLayout-anchor {
1891
+ position: fixed;
1892
+ max-height: 100%;
1893
+ top: 0;
1894
+ }
1895
+ .saltLayerLayout-top {
1896
+ left: 0;
1897
+ right: 0;
1898
+ bottom: auto;
1899
+ }
1900
+ .saltLayerLayout-top.saltLayerLayout-enter-animation {
1901
+ animation: var(--salt-animation-slide-in-bottom);
1902
+ }
1903
+ .saltLayerLayout-top.saltLayerLayout-exit-animation {
1904
+ animation: var(--salt-animation-slide-out-bottom);
1905
+ }
1906
+ .saltLayerLayout-right {
1907
+ left: auto;
1908
+ right: 0;
1909
+ height: 100%;
1910
+ }
1911
+ .saltLayerLayout-right.saltLayerLayout-enter-animation {
1912
+ animation: var(--salt-animation-slide-in-right);
1913
+ }
1914
+ .saltLayerLayout-right.saltLayerLayout-exit-animation {
1915
+ animation: var(--salt-animation-slide-out-right);
1916
+ }
1917
+ .saltLayerLayout-left {
1918
+ left: 0;
1919
+ right: auto;
1920
+ height: 100%;
1921
+ }
1922
+ .saltLayerLayout-left.saltLayerLayout-enter-animation {
1923
+ animation: var(--salt-animation-slide-in-left);
1924
+ }
1925
+ .saltLayerLayout-left.saltLayerLayout-exit-animation {
1926
+ animation: var(--salt-animation-slide-out-left);
1927
+ }
1928
+ .saltLayerLayout-bottom {
1929
+ left: 0;
1930
+ right: 0;
1931
+ bottom: 0;
1932
+ top: auto;
1933
+ }
1934
+ .saltLayerLayout-bottom.saltLayerLayout-enter-animation {
1935
+ animation: var(--salt-animation-slide-in-top);
1936
+ }
1937
+ .saltLayerLayout-bottom.saltLayerLayout-exit-animation {
1938
+ animation: var(--salt-animation-slide-out-top);
1939
+ }
1940
+
1941
+ /* src/list/Highlighter.css */
1942
+ .saltHighlighter-highlight {
1943
+ font-weight: var(--salt-text-fontWeight-strong);
1944
+ }
1945
+
1946
+ /* src/list/List.css */
1947
+ .saltList {
1948
+ --list-background: var(--salt-container-primary-background);
1949
+ --list-borderStyle: var(--salt-container-borderStyle);
1950
+ --list-borderWidth: var(--salt-size-border);
1951
+ --list-height: auto;
1952
+ --list-item-height: var(--salt-size-stackable);
1953
+ --list-item-gap: 0px;
1954
+ --list-maxHeight: 100%;
1955
+ background: var(--list-background);
1956
+ border-color: var(--salt-container-primary-borderColor);
1957
+ border-style: var(--list-borderStyle);
1958
+ border-width: var(--list-borderWidth);
1959
+ height: var(--saltList-height, var(--list-height));
1960
+ max-height: var(--list-maxHeight);
1961
+ outline: none;
1962
+ overflow-y: auto;
1963
+ position: relative;
1964
+ user-select: none;
1965
+ width: var(--saltList-width, auto);
1966
+ font-family: var(--salt-text-fontFamily);
1967
+ font-size: var(--salt-text-fontSize);
1968
+ font-weight: var(--salt-text-fontWeight);
1969
+ line-height: var(--salt-text-lineHeight);
1970
+ }
1971
+ .saltList-borderless {
1972
+ --list-borderStyle: none;
1973
+ }
1974
+ .saltList-viewport {
1975
+ --list-item-height: 30px;
1976
+ max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));
1977
+ overflow: auto;
1978
+ }
1979
+ .saltListItemHeader {
1980
+ --saltList-item-background: var(--list-item-header-background);
1981
+ color: var(--list-item-header-color);
1982
+ }
1983
+ .saltListItemHeader[data-sticky=true] {
1984
+ --saltList-item-background: var(--list-background);
1985
+ position: sticky;
1986
+ top: 0;
1987
+ z-index: 1;
1988
+ }
1989
+ .saltList-collapsible .saltListItemHeader:after {
1990
+ border-width: var(--checkbox-borderWidth);
1991
+ border-color: var(--checkbox-borderColor);
1992
+ content: var(--list-item-header-twisty-content);
1993
+ -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1994
+ mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;
1995
+ background: var(--list-item-header-twisty-color);
1996
+ height: 12px;
1997
+ left: var(--list-item-header-twisty-left);
1998
+ right: var(--list-item-header-twisty-right);
1999
+ margin-top: -8px;
2000
+ position: absolute;
2001
+ top: var(--list-item-header-twisty-top);
2002
+ transition: transform 0.3s;
2003
+ width: 12px;
2004
+ }
2005
+ .saltListItemHeader[aria-expanded=false]:after {
2006
+ transform: rotate(-90deg);
2007
+ }
2008
+ .saltList-scrollingContentContainer {
2009
+ box-sizing: inherit;
2010
+ position: relative;
2011
+ }
2012
+ .saltList-virtualized .saltListItem {
2013
+ line-height: 30px;
2014
+ position: absolute;
2015
+ top: 0;
2016
+ left: 0;
2017
+ right: 0;
2018
+ will-change: transform;
2019
+ }
2020
+ .saltList.saltFocusVisible:after {
2021
+ inset: 2px;
2022
+ }
2023
+
2024
+ /* src/list/ListItem.css */
2025
+ .saltListItem {
2026
+ --list-item-text-color: var(--salt-content-primary-foreground);
2027
+ --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));
2028
+ --list-item-text-color-active: var(--salt-content-primary-foreground);
2029
+ --list-item-background-active: var(--salt-selectable-background-selected);
2030
+ --list-item-alignItems: center;
2031
+ }
2032
+ .saltListItem.saltHighlighted {
2033
+ --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);
2034
+ --list-item-background: var(--salt-selectable-background-hover);
2035
+ }
2036
+ .saltListItemHeader {
2037
+ font-weight: var(--salt-text-fontWeight-strong);
2038
+ }
2039
+ .saltListItemHeader[data-sticky] {
2040
+ position: sticky;
2041
+ top: 0;
2042
+ z-index: 1;
2043
+ }
2044
+ .saltListItem {
2045
+ color: var(--list-item-text-color);
2046
+ cursor: var(--saltList-item-cursor, pointer);
2047
+ background: var(--saltList-item-background, var(--list-item-background));
2048
+ font-size: var(--salt-text-fontSize);
2049
+ text-align: var(--salt-text-textAlign);
2050
+ line-height: var(--salt-text-lineHeight);
2051
+ height: var(--saltList-item-height, var(--list-item-height, auto));
2052
+ margin-bottom: var(--list-item-gap);
2053
+ padding: 0 var(--salt-size-unit);
2054
+ left: 0;
2055
+ right: 0;
2056
+ display: flex;
2057
+ position: relative;
2058
+ align-items: var(--list-item-alignItems);
2059
+ white-space: nowrap;
2060
+ }
2061
+ .saltListItem:last-child {
2062
+ margin-bottom: 0px;
2063
+ }
2064
+ .saltListItem-checkbox {
2065
+ --list-item-background-active: var(--salt-selectable-background);
2066
+ --list-item-text-color-active: var(--salt-content-primary-foreground);
2067
+ --list-item-text-padding: 0 0 0 var(--salt-size-unit);
2068
+ }
2069
+ .saltListItem[aria-selected=true]:not(.saltListItem-checkbox) {
2070
+ --list-item-background: var(--list-item-background-active);
2071
+ color: var(--list-item-text-color-active);
2072
+ }
2073
+ .saltListItem.saltDisabled {
2074
+ --list-item-text-color: var(--salt-content-primary-foreground-disabled);
2075
+ cursor: var(--salt-selectable-cursor-disabled);
2076
+ }
2077
+ .saltListItem.saltFocusVisible {
2078
+ outline-style: var(--salt-focused-outlineStyle);
2079
+ outline-width: var(--salt-focused-outlineWidth);
2080
+ outline-offset: -2px;
2081
+ outline-color: var(--salt-focused-outlineColor);
2082
+ }
2083
+ .saltListItem.saltFocusVisible:after {
2084
+ content: none;
2085
+ }
2086
+ .saltListItem[aria-selected=true]:not(.saltListItem-checkbox).saltFocusVisible {
2087
+ outline-color: var(--list-item-selected-focus-outlineColor);
2088
+ }
2089
+ .saltListItem-textWrapper {
2090
+ flex: 1;
2091
+ overflow: hidden;
2092
+ padding: var(--list-item-text-padding, 0px);
2093
+ white-space: nowrap;
2094
+ text-overflow: ellipsis;
2095
+ }
2096
+ .saltListItem-proxy {
2097
+ position: absolute !important;
2098
+ visibility: hidden;
2099
+ }
2100
+
2101
+ /* src/list-deprecated/List.css */
2102
+ .saltListDeprecated-wrapper {
2103
+ --list-background: var(--salt-container-primary-background);
2104
+ --list-borderColor: var(--salt-container-primary-borderColor);
2105
+ --list-borderStyle: var(--salt-container-borderStyle);
2106
+ --list-borderWidth: var(--salt-size-border);
2107
+ --list-borderRadius: 0;
2108
+ --list-boxShadow: none;
2109
+ --list-disabled-cursor: var(--salt-actionable-cursor-disabled);
2110
+ }
2111
+ .saltListDeprecated-wrapper {
2112
+ position: relative;
2113
+ }
2114
+ .saltListDeprecated {
2115
+ overflow-y: auto;
2116
+ }
2117
+ .saltListDeprecated:focus {
2118
+ outline: none;
2119
+ }
2120
+ .saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {
2121
+ border-color: var(--list-borderColor);
2122
+ border-style: var(--list-borderStyle);
2123
+ border-width: var(--list-borderWidth);
2124
+ border-radius: var(--list-borderRadius);
2125
+ }
2126
+ .saltListDeprecated-wrapper {
2127
+ background: var(--list-background);
2128
+ box-shadow: var(--list-boxShadow);
2129
+ position: relative;
2130
+ }
2131
+ .saltListDeprecated-borderless {
2132
+ border: none;
2133
+ }
2134
+ .saltListDeprecated-disabled {
2135
+ cursor: var(--list-disabled-cursor);
2136
+ }
2137
+
2138
+ /* src/list-deprecated/ListItem.css */
2139
+ .saltListItemDeprecated {
2140
+ --list-item-text-color: var(--salt-selectable-foreground);
2141
+ --list-item-background: var(--salt-selectable-background);
2142
+ --list-item-background-hover: var(--salt-selectable-background-hover);
2143
+ --list-item-selected-focus-outlineColor: var(--salt-accent-foreground);
2144
+ --list-item-text-color-active: var(--salt-selectable-foreground-selected);
2145
+ --list-item-background-active: var(--salt-selectable-background-selected);
2146
+ --list-item-textAlign: var(--salt-text-textAlign);
2147
+ --list-item-fontSize: var(--salt-text-fontSize);
2148
+ --list-item-lineHeight: var(--salt-text-lineHeight);
2149
+ --list-item-padding: 0 var(--salt-size-unit);
2150
+ --list-item-gap: 0px;
2151
+ --list-item-alignItems: center;
2152
+ --list-item-selectable-cursor: pointer;
2153
+ --list-item-cursor: default;
2154
+ --list-item-disabled-cursor: var(--salt-selectable-cursor-disabled);
2155
+ --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);
2156
+ }
2157
+ .saltListItemDeprecated {
2158
+ color: var(--list-item-text-color);
2159
+ background: var(--list-item-background);
2160
+ text-align: var(--list-item-textAlign);
2161
+ line-height: var(--list-item-lineHeight);
2162
+ font-size: var(--list-item-fontSize);
2163
+ padding: var(--list-item-padding);
2164
+ left: 0;
2165
+ right: 0;
2166
+ display: flex;
2167
+ position: relative;
2168
+ align-items: var(--list-item-alignItems);
2169
+ white-space: nowrap;
2170
+ }
2171
+ .saltListItemDeprecated {
2172
+ margin-bottom: var(--list-item-gap);
2173
+ cursor: var(--list-item-selectable-cursor);
2174
+ }
2175
+ .saltListItemDeprecated:last-child {
2176
+ margin-bottom: 0px;
2177
+ }
2178
+ .saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {
2179
+ background: var(--list-item-background-hover);
2180
+ }
2181
+ .saltListItemDeprecated.saltListItemDeprecated-deselectable {
2182
+ cursor: var(--list-item-selectable-cursor);
2183
+ }
2184
+ .saltListItemDeprecated-textWrapper {
2185
+ flex: 1;
2186
+ overflow: hidden;
2187
+ white-space: nowrap;
2188
+ text-overflow: ellipsis;
2189
+ }
2190
+ .saltListItemDeprecated-selected {
2191
+ color: var(--list-item-text-color-active);
2192
+ background: var(--list-item-background-active);
2193
+ cursor: var(--list-item-cursor);
2194
+ }
2195
+ .saltListItemDeprecated-disabled {
2196
+ cursor: var(--list-item-disabled-cursor);
2197
+ opacity: var(--list-item-disabled-regular-opacity);
2198
+ }
2199
+ .saltListItemDeprecated-focusVisible:after {
2200
+ top: 2px;
2201
+ left: 2px;
2202
+ right: 2px;
2203
+ bottom: 2px;
2204
+ content: "";
2205
+ position: absolute;
2206
+ outline-style: var(--salt-focused-outlineStyle);
2207
+ outline-width: var(--salt-focused-outlineWidth);
2208
+ outline-color: var(--salt-focused-outlineColor);
2209
+ outline-offset: var(--salt-focused-outlineOffset);
2210
+ }
2211
+ .saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {
2212
+ outline-color: var(--list-item-selected-focus-outlineColor);
2213
+ }
2214
+
2215
+ /* src/list-next/ListItemNext.css */
2216
+ .saltListItemNext {
2217
+ --listNext-item-text-color: var(--salt-content-primary-foreground);
2218
+ --listNext-item-background: none;
2219
+ }
2220
+ .saltListItemNext {
2221
+ color: var(--listNext-item-text-color);
2222
+ background: var(--listNext-item-background);
2223
+ height: calc(var(--salt-size-base) + var(--salt-spacing-100));
2224
+ padding-left: var(--salt-spacing-100);
2225
+ padding-right: var(--salt-spacing-100);
2226
+ display: flex;
2227
+ gap: var(--salt-size-unit);
2228
+ position: relative;
2229
+ align-items: center;
2230
+ white-space: nowrap;
2231
+ margin-top: var(--salt-size-border);
2232
+ margin-bottom: var(--salt-size-border);
2233
+ border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;
2234
+ }
2235
+ .saltListItemNext-focused {
2236
+ border: var(--salt-focused-outline);
2237
+ }
2238
+ .saltListItemNext-highlighted:not([aria-disabled="true"]) {
2239
+ --listNext-item-background: var(--salt-selectable-background-hover);
2240
+ cursor: var(--salt-selectable-cursor-hover);
2241
+ }
2242
+ .saltListItemNext[aria-selected=true] {
2243
+ outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
2244
+ --listNext-item-background: var(--salt-selectable-background-selected);
2245
+ --saltIcon-color: var(--salt-selectable-foreground-selected);
2246
+ }
2247
+ .saltListItemNext[aria-disabled=true] {
2248
+ --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);
2249
+ cursor: var(--salt-selectable-cursor-disabled);
2250
+ }
2251
+ .saltListItemNext[aria-disabled=true] .saltText {
2252
+ color: var(--listNext-item-text-color);
2253
+ }
2254
+ .saltListItemNext[aria-disabled=true][aria-selected=true] {
2255
+ outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);
2256
+ --listNext-item-background: var(--salt-selectable-background-selectedDisabled);
2257
+ }
2258
+
2259
+ /* src/list-next/ListNext.css */
2260
+ .saltListNext {
2261
+ margin: 0;
2262
+ background: var(--salt-container-primary-background);
2263
+ border-color: var(--salt-container-primary-borderColor);
2264
+ border-style: var(--salt-container-borderStyle);
2265
+ border-width: var(--salt-size-border);
2266
+ height: 100%;
2267
+ outline: none;
2268
+ overflow-y: auto;
2269
+ overflow-x: hidden;
2270
+ position: relative;
2271
+ padding-inline-start: 0;
2272
+ box-sizing: content-box;
2273
+ font-family: var(--salt-text-fontFamily);
2274
+ font-size: var(--salt-text-fontSize);
2275
+ font-weight: var(--salt-text-fontWeight);
2276
+ line-height: var(--salt-text-lineHeight);
2277
+ }
2278
+
2279
+ /* src/logo/Logo.css */
2280
+ .saltLogo {
2281
+ display: inline-flex;
2282
+ position: relative;
2283
+ align-items: center;
2284
+ justify-content: center;
2285
+ height: var(--salt-size-base);
2286
+ gap: var(--salt-spacing-100);
2287
+ }
2288
+ .saltLogo svg {
2289
+ fill: var(--salt-content-secondary-foreground);
2290
+ stroke: none;
2291
+ }
2292
+
2293
+ /* src/logo/LogoImage.css */
2294
+ .saltLogoImage {
2295
+ max-height: 100%;
2296
+ }
2297
+
2298
+ /* src/logo/LogoSeparator.css */
2299
+ .saltLogoSeparator {
2300
+ height: var(--salt-size-separator-height);
2301
+ border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
2302
+ }
2303
+
2304
+ /* src/menu-button/MenuButton.css */
2305
+
2306
+ /* src/menu-button/MenuButtonTrigger.css */
2307
+ .saltMenuButtonTrigger {
2308
+ --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));
2309
+ }
2310
+ .saltMenuButtonTrigger {
2311
+ display: inline-flex;
2312
+ line-height: 1;
2313
+ }
2314
+ .saltMenuButtonTrigger-buttonOpen {
2315
+ background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));
2316
+ color: var(--menuButton-trigger-open-color);
2317
+ }
2318
+ .saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {
2319
+ color: var(--menuButton-trigger-open-color);
2320
+ }
2321
+ .saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {
2322
+ color: var(--menuButton-trigger-open-color);
2323
+ }
2324
+ .saltMenuButtonTrigger-icon {
2325
+ }
2326
+ .saltMenuButtonTrigger-caretIcon {
2327
+ --saltIcon-margin: 0 0 0 var(--salt-size-unit);
2328
+ }
2329
+
2330
+ /* src/metric/Metric.css */
2331
+ .saltMetric {
2332
+ display: flex;
2333
+ align-items: flex-start;
2334
+ padding: 0px;
2335
+ color: var(--saltMetric-color, var(--salt-content-primary-foreground));
2336
+ }
2337
+ .saltMetric-orientation-horizontal {
2338
+ flex-direction: row;
2339
+ gap: var(--metric-horizontal-gap, 16px);
2340
+ margin-top: var(--metric-horizontal-marginTop, 0px);
2341
+ }
2342
+ .saltMetric-orientation-vertical {
2343
+ flex-direction: column;
2344
+ justify-content: center;
2345
+ }
2346
+ .saltMetric-orientation-vertical.saltMetric-align-center {
2347
+ align-items: center;
2348
+ }
2349
+ .saltMetric-orientation-vertical.saltMetric-align-right {
2350
+ align-items: flex-end;
2351
+ }
2352
+
2353
+ /* src/metric/MetricContent.css */
2354
+ .saltMetricContent {
2355
+ display: flex;
2356
+ flex-direction: column;
2357
+ margin-top: var(--metric-content-marginTop, 0px);
2358
+ }
2359
+ .saltMetricContent-value-container {
2360
+ align-items: baseline;
2361
+ display: flex;
2362
+ flex-direction: row;
2363
+ gap: calc(var(--salt-size-unit) / 2);
2364
+ margin-top: var(--metric-content-valueContainer-marginTop, 0px);
2365
+ }
2366
+ .saltMetric-direction-up .saltMetricContent-indicator {
2367
+ fill: var(--salt-status-positive-foreground);
2368
+ }
2369
+ .saltMetric-direction-up .saltMetricContent-subvalue {
2370
+ color: var(--salt-status-positive-foreground);
2371
+ }
2372
+ .saltMetric-direction-down .saltMetricContent-indicator {
2373
+ fill: var(--salt-status-negative-foreground);
2374
+ }
2375
+ .saltMetric-direction-down .saltMetricContent-subvalue {
2376
+ color: var(--salt-status-negative-foreground);
2377
+ }
2378
+ .saltMetricContent-subvalue {
2379
+ margin-top: var(--metric-content-subvalue-marginTop, 0px);
2380
+ }
2381
+ .saltMetric-align-left .saltMetricContent {
2382
+ text-align: left;
2383
+ }
2384
+ .saltMetric-align-center .saltMetricContent {
2385
+ align-items: center;
2386
+ text-align: center;
2387
+ }
2388
+ .saltMetric-align-right .saltMetricContent {
2389
+ align-items: flex-end;
2390
+ text-align: right;
2391
+ }
2392
+
2393
+ /* src/metric/MetricHeader.css */
2394
+ .saltMetricHeader {
2395
+ --metric-title-color: var(--salt-content-primary-foreground);
2396
+ --metric-subtitle-color: var(--salt-content-secondary-foreground);
2397
+ }
2398
+ .saltMetricHeader {
2399
+ display: flex;
2400
+ flex-direction: column;
2401
+ align-items: flex-start;
2402
+ gap: calc(var(--salt-size-unit) * 0.25);
2403
+ }
2404
+ .saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {
2405
+ padding-top: 4px;
2406
+ }
2407
+ .saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {
2408
+ padding-top: 8px;
2409
+ }
2410
+ .saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {
2411
+ padding-top: 14px;
2412
+ }
2413
+ .saltMetricHeader-title {
2414
+ color: var(--metric-title-color);
2415
+ }
2416
+ .saltMetricHeader-subtitle {
2417
+ color: var(--metric-subtitle-color);
2418
+ font-weight: var(--salt-text-fontWeight);
2419
+ }
2420
+ .saltMetric-align-center .saltMetricHeader {
2421
+ align-items: center;
2422
+ }
2423
+ .saltMetric-align-right .saltMetricHeader {
2424
+ align-items: flex-end;
2425
+ }
2426
+
2427
+ /* src/navigation-item/NavigationItem.css */
2428
+ .saltNavigationItem {
2429
+ --navigationItem-color: var(--salt-content-primary-foreground);
2430
+ --navigationItem-fill: var(--salt-content-primary-foreground);
2431
+ --navigationItem-bar-inset: var(--salt-spacing-25);
2432
+ --navigationItem-bar-size: var(--salt-size-indicator);
2433
+ --navigationItem-indicator-background: var(--salt-navigable-indicator-active);
2434
+ --navigationItem-gap: var(--salt-spacing-100);
2435
+ }
2436
+ .saltNavigationItem-active,
2437
+ .saltNavigationItem-rootItem {
2438
+ --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);
2439
+ }
2440
+ .saltNavigationItem-blurActive,
2441
+ .saltNavigationItem-active.saltNavigationItem-nested {
2442
+ --navigationItem-fontWeight: var(--salt-text-fontWeight);
2443
+ }
2444
+ .saltNavigationItem-wrapper {
2445
+ display: flex;
2446
+ align-items: center;
2447
+ position: relative;
2448
+ gap: var(--navigationItem-gap);
2449
+ font-weight: var(--navigationItem-fontWeight);
2450
+ text-decoration: none;
2451
+ transition: all var(--salt-duration-instant) ease-in-out;
2452
+ }
2453
+ .saltNavigationItem-wrapper.saltLink {
2454
+ --link-textDecoration: none;
2455
+ }
2456
+ .saltNavigationItem-wrapper .saltIcon {
2457
+ fill: var(--navigationItem-fill);
2458
+ top: var(--salt-size-border);
2459
+ }
2460
+ .saltNavigationItem-label .saltBadge {
2461
+ margin-left: auto;
2462
+ }
2463
+ .saltNavigationItem {
2464
+ margin: 0 var(--navigationItem-gap);
2465
+ }
2466
+ .saltNavigationItem-wrapper.saltNavigationItem-horizontal {
2467
+ min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));
2468
+ padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;
2469
+ width: fit-content;
2470
+ }
2471
+ .saltNavigationItem-wrapper.saltNavigationItem-vertical {
2472
+ min-height: calc(var(--salt-size-base));
2473
+ padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));
2474
+ padding-right: var(--navigationItem-gap);
2475
+ margin: var(--salt-spacing-50) 0;
2476
+ }
2477
+ .saltNavigationItem-wrapper .saltNavigationItem-label {
2478
+ --link-color-visited: var(--navigationItem-color);
2479
+ --link-color-hover: var(--navigationItem-color);
2480
+ color: var(--navigationItem-color);
2481
+ line-height: var(--salt-text-lineHeight);
2482
+ font-family: var(--salt-text-fontFamily);
2483
+ padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));
2484
+ flex: 1;
2485
+ text-align: left;
2486
+ display: flex;
2487
+ align-items: baseline;
2488
+ gap: var(--navigationItem-gap);
2489
+ }
2490
+ .saltNavigationItem-wrapper.saltNavigationItem-nested {
2491
+ padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));
2492
+ }
2493
+ .saltNavigationItem-wrapper.saltNavigationItem-expandButton {
2494
+ --saltButton-background-hover: none;
2495
+ --saltButton-background-active: none;
2496
+ --saltButton-textTransform: none;
2497
+ --saltButton-width: 100%;
2498
+ --saltButton-letterSpacing: none;
2499
+ gap: var(--navigationItem-gap);
2500
+ outline-offset: var(--salt-size-border);
2501
+ }
2502
+ .saltNavigationItem-wrapper .saltNavigationItem-expandIcon {
2503
+ --saltIcon-color: var(--navigationItem-fill);
2504
+ top: 0;
2505
+ }
2506
+ .saltNavigationItem-wrapper:focus-visible {
2507
+ outline: var(--salt-focused-outline);
2508
+ }
2509
+ .saltNavigationItem-horizontal:focus-visible {
2510
+ border-right: var(--navigationItem-gap) solid transparent;
2511
+ border-left: var(--navigationItem-gap) solid transparent;
2512
+ margin: 0 calc(var(--navigationItem-gap) * -1);
2513
+ }
2514
+ .saltNavigationItem-wrapper:focus:not(:focus-visible) {
2515
+ outline: 0;
2516
+ }
2517
+ .saltNavigationItem-wrapper::after {
2518
+ content: "";
2519
+ position: absolute;
2520
+ top: 0;
2521
+ left: 0;
2522
+ display: block;
2523
+ }
2524
+ .saltNavigationItem-horizontal::after {
2525
+ width: 100%;
2526
+ height: var(--navigationItem-bar-size);
2527
+ top: var(--navigationItem-bar-inset);
2528
+ }
2529
+ .saltNavigationItem-vertical::after {
2530
+ width: var(--navigationItem-bar-size);
2531
+ left: var(--navigationItem-bar-inset);
2532
+ top: var(--navigationItem-bar-inset);
2533
+ height: calc(100% - var(--salt-spacing-50));
2534
+ }
2535
+ .saltNavigationItem-wrapper:hover::after,
2536
+ .saltNavigationItem-wrapper:focus-visible::after {
2537
+ background: var(--salt-navigable-indicator-hover);
2538
+ transition: all var(--salt-duration-perceptible) ease-in-out;
2539
+ }
2540
+ .saltNavigationItem-wrapper.saltNavigationItem-active::after,
2541
+ .saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,
2542
+ .saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {
2543
+ background: var(--navigationItem-indicator-background);
2544
+ transition: all var(--salt-duration-perceptible) ease-in-out;
2545
+ }
2546
+
2547
+ /* src/overlay/Overlay.css */
2548
+ .saltOverlay {
2549
+ --overlay-text-color: var(--salt-content-primary-foreground);
2550
+ --overlay-spacing: var(--salt-size-unit);
2551
+ --overlay-fontSize: var(--salt-text-fontSize);
2552
+ --overlay-background: var(--salt-container-primary-background);
2553
+ --overlay-borderColor: var(--salt-container-primary-borderColor);
2554
+ --overlay-zindex: var(--salt-zIndex-flyover);
2555
+ }
2556
+ .saltOverlay-secondary.saltOverlay {
2557
+ --overlay-background: var(--salt-container-secondary-background);
2558
+ --overlay-borderColor: var(--salt-container-secondary-borderColor);
2559
+ }
2560
+ .saltOverlay-content {
2561
+ display: flex;
2562
+ padding: calc(var(--overlay-spacing) * 2);
2563
+ font-size: var(--overlay-fontSize);
2564
+ border: 1px solid var(--overlay-borderColor);
2565
+ box-shadow: var(--salt-overlayable-shadow-popout);
2566
+ line-height: var(--salt-text-lineHeight);
2567
+ background: var(--overlay-background);
2568
+ color: var(--overlay-text-color);
2569
+ position: relative;
2570
+ opacity: 1;
2571
+ overflow: visible;
2572
+ z-index: var(--overlay-zindex);
2573
+ }
2574
+ .saltOverlay-arrow,
2575
+ .saltOverlay-arrow::after {
2576
+ border: 8px solid transparent;
2577
+ position: absolute;
2578
+ }
2579
+ .saltOverlay-arrow::after {
2580
+ content: "";
2581
+ }
2582
+ .saltOverlay[data-placement^=top] .saltOverlay-arrow {
2583
+ border-top-color: var(--overlay-borderColor);
2584
+ bottom: -17px;
2585
+ }
2586
+ .saltOverlay[data-placement^=bottom] .saltOverlay-arrow {
2587
+ border-bottom-color: var(--overlay-borderColor);
2588
+ top: -17px;
2589
+ }
2590
+ .saltOverlay[data-placement^=left] .saltOverlay-arrow {
2591
+ border-left-color: var(--overlay-borderColor);
2592
+ right: -17px;
2593
+ }
2594
+ .saltOverlay[data-placement^=right] .saltOverlay-arrow {
2595
+ border-right-color: var(--overlay-borderColor);
2596
+ left: -17px;
2597
+ }
2598
+ .saltOverlay[data-placement^=top] .saltOverlay-arrow::after {
2599
+ border-top-color: var(--overlay-background);
2600
+ bottom: -7px;
2601
+ left: calc(100% - 8px);
2602
+ }
2603
+ .saltOverlay[data-placement^=bottom] .saltOverlay-arrow::after {
2604
+ border-bottom-color: var(--overlay-background);
2605
+ top: -7px;
2606
+ left: calc(100% - 8px);
2607
+ }
2608
+ .saltOverlay[data-placement^=left] .saltOverlay-arrow::after {
2609
+ border-left-color: var(--overlay-background);
2610
+ right: -7px;
2611
+ top: calc(100% - 8px);
2612
+ }
2613
+ .saltOverlay[data-placement^=right] .saltOverlay-arrow::after {
2614
+ border-right-color: var(--overlay-background);
2615
+ left: -7px;
2616
+ top: calc(100% - 8px);
2617
+ }
2618
+ .saltOverlay-close {
2619
+ position: absolute;
2620
+ right: 0;
2621
+ top: 0;
2622
+ z-index: var(--salt-zIndex-default);
2623
+ }
2624
+
2625
+ /* src/pagination/Pagination.css */
2626
+ .salt-density-medium {
2627
+ --pagination-button-size: 28px;
2628
+ --pagination-fontSize: 12px;
2629
+ }
2630
+ .salt-density-high {
2631
+ --pagination-button-size: 20px;
2632
+ --pagination-fontSize: 11px;
2633
+ }
2634
+ .salt-density-low {
2635
+ --pagination-button-size: 36px;
2636
+ --pagination-fontSize: 14px;
2637
+ }
2638
+ .salt-density-touch {
2639
+ --pagination-button-size: 44px;
2640
+ --pagination-fontSize: 16px;
2641
+ }
2642
+ .saltPagination {
2643
+ display: flex;
2644
+ flex-direction: row;
2645
+ }
2646
+ .saltPagination-arrowButton {
2647
+ width: var(--pagination-button-size);
2648
+ height: var(--pagination-button-size);
2649
+ }
2650
+ .saltPagination-previousButton {
2651
+ margin-right: var(--salt-size-unit);
2652
+ }
2653
+ .saltPagination-nextButton {
2654
+ margin-left: var(--salt-size-unit);
2655
+ }
2656
+ .saltPagination-pageButton {
2657
+ min-width: var(--pagination-button-size);
2658
+ height: var(--pagination-button-size);
2659
+ --saltButton-fontWeight: var(--salt-text-fontWeight);
2660
+ }
2661
+ .saltPagination-pageButtonSelected {
2662
+ background: var(--salt-selectable-background-selected);
2663
+ color: var(--salt-palette-interact-cta-foreground-active);
2664
+ }
2665
+ .saltPagination-pageButtonFixed {
2666
+ padding: 0;
2667
+ }
2668
+ .saltPagination-ellipsis {
2669
+ width: var(--pagination-button-size);
2670
+ height: var(--pagination-button-size);
2671
+ text-align: center;
2672
+ }
2673
+ .saltPagination-accessibleText {
2674
+ display: block;
2675
+ position: absolute;
2676
+ width: 1px;
2677
+ height: 1px;
2678
+ overflow: hidden;
2679
+ top: 0;
2680
+ left: 0;
2681
+ opacity: 0;
2682
+ }
2683
+ .saltPagination-compactInputField {
2684
+ }
2685
+ .saltPagination-compactInput {
2686
+ height: var(--pagination-button-size);
2687
+ min-width: unset;
2688
+ }
2689
+ .saltPagination-compactInputFixed {
2690
+ min-width: var(--pagination-button-size);
2691
+ width: var(--pagination-button-size);
2692
+ }
2693
+ .saltPagination-compactSeparator {
2694
+ height: var(--pagination-button-size);
2695
+ width: var(--pagination-button-size);
2696
+ text-align: center;
2697
+ font-size: var(--pagination-fontSize);
2698
+ line-height: var(--pagination-button-size);
2699
+ }
2700
+ .saltPagination-goToInputWrapper {
2701
+ }
2702
+ .saltPagination-leftGoToInput {
2703
+ margin-right: var(--salt-size-unit);
2704
+ }
2705
+ .saltPagination-rightGoToInput {
2706
+ margin-left: var(--salt-size-unit);
2707
+ min-width: unset;
2708
+ }
2709
+ .saltPagination-goToInputField {
2710
+ }
2711
+ .saltPagination-goToInput {
2712
+ height: var(--pagination-button-size);
2713
+ min-width: unset;
2714
+ }
2715
+ .saltPagination-goToInputFixed {
2716
+ min-width: var(--pagination-button-size);
2717
+ width: var(--pagination-button-size);
2718
+ }
2719
+
2720
+ /* src/parent-child-item/ParentChildItem.css */
2721
+ .saltParentChildItem-slide-top {
2722
+ animation: var(--salt-animation-slide-in-top);
2723
+ }
2724
+ .saltParentChildItem-slide-bottom {
2725
+ animation: var(--salt-animation-slide-in-bottom);
2726
+ }
2727
+ .saltParentChildItem-slide-left {
2728
+ animation: var(--salt-animation-slide-in-left);
2729
+ }
2730
+ .saltParentChildItem-slide-right {
2731
+ animation: var(--salt-animation-slide-in-right);
2732
+ }
2733
+
2734
+ /* src/parent-child-layout/ParentChildLayout.css */
2735
+ .saltParentChildLayout {
2736
+ }
2737
+
2738
+ /* src/pill/Pill.css */
2739
+ .salt-density-high {
2740
+ --pill-icon-offset: 1px;
2741
+ }
2742
+ .salt-density-medium {
2743
+ --pill-icon-offset: 2px;
2744
+ }
2745
+ .salt-density-low {
2746
+ --pill-icon-offset: 3px;
2747
+ }
2748
+ .salt-density-touch {
2749
+ --pill-icon-offset: 4px;
2750
+ }
2751
+ .saltPill {
2752
+ --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background));
2753
+ --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active));
2754
+ --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled));
2755
+ --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover));
2756
+ --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));
2757
+ --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));
2758
+ --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));
2759
+ --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground));
2760
+ --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active));
2761
+ --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover));
2762
+ --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled));
2763
+ --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground));
2764
+ --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active));
2765
+ --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover));
2766
+ --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled));
2767
+ --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));
2768
+ --saltButton-padding: var(--saltPill-button-padding, 0);
2769
+ --saltButton-textTransform: var(--saltPill-button-textTransform, unset);
2770
+ --saltButton-cursor: normal;
2771
+ --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size));
2772
+ --saltButton-background: var(--pill-background);
2773
+ --saltButton-color: var(--pill-text-color);
2774
+ --saltButton-fontSize: var(--pill-fontSize);
2775
+ --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);
2776
+ --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));
2777
+ --saltButton-minWidth: var(--saltPill-minWidth, 40px);
2778
+ }
2779
+ .saltPill {
2780
+ align-items: center;
2781
+ border-radius: var(--saltPill-borderRadius, 0);
2782
+ display: inline-flex;
2783
+ max-width: var(--saltPill-maxWidth, 160px);
2784
+ min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));
2785
+ outline: var(--saltPill-outline, 0);
2786
+ position: relative;
2787
+ gap: 0;
2788
+ }
2789
+ .saltPill:hover {
2790
+ --saltButton-background-active: var(--pill-background-active);
2791
+ --saltButton-background-hover: var(--pill-background-hover);
2792
+ --saltIcon-color: var(--pill-icon-color);
2793
+ --saltIcon-color-hover: var(--pill-icon-color-hover);
2794
+ background: var(--pill-background-hover);
2795
+ }
2796
+ .saltPill:active,
2797
+ .saltPill-active {
2798
+ --saltButton-background-active: var(--pill-background-active);
2799
+ }
2800
+ .saltPill:focus {
2801
+ outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));
2802
+ outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));
2803
+ outline-width: var(--salt-focused-outlineWidth);
2804
+ outline-offset: var(--salt-focused-outlineOffset);
2805
+ }
2806
+ .saltPill-clickable {
2807
+ --saltButton-background-active: var(--pill-background);
2808
+ --saltButton-background-hover: var(--pill-background);
2809
+ cursor: var(--salt-selectable-cursor-hover);
2810
+ user-select: none;
2811
+ }
2812
+ .saltPill-deletable {
2813
+ --saltButton-background-active: var(--pill-background);
2814
+ --saltButton-background-hover: var(--pill-background);
2815
+ }
2816
+ .saltPill-selectable:hover,
2817
+ .saltPill-deletable:hover {
2818
+ --saltButton-background-active: var(--pill-background);
2819
+ --saltButton-background-hover: var(--pill-background);
2820
+ }
2821
+ .saltPill-selectable:active,
2822
+ .saltPill-active.saltPill-selectable {
2823
+ --saltButton-background-active: var(--pill-background);
2824
+ }
2825
+ .saltPill-disabled,
2826
+ .saltPill-disabled:hover,
2827
+ .saltPill-disabled:active {
2828
+ --saltButton-background-active: var(--pill-background-disabled);
2829
+ --saltButton-background-hover: var(--pill-background-disabled);
2830
+ --saltButton-text-color-active: var(--pill-text-color);
2831
+ --saltButton-text-color-hover: var(--pill-text-color);
2832
+ --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);
2833
+ --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);
2834
+ background: var(--pill-background-disabled);
2835
+ cursor: var(--salt-selectable-cursor-disabled);
2836
+ }
2837
+ .saltPill-disabled .saltPill-checkbox {
2838
+ --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);
2839
+ --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);
2840
+ --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);
2841
+ }
2842
+ .saltPill-label {
2843
+ color: var(--saltPill-text-color, var(--pill-text-color));
2844
+ display: inline;
2845
+ flex-grow: 1;
2846
+ font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));
2847
+ overflow: hidden;
2848
+ padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));
2849
+ padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));
2850
+ pointer-events: none;
2851
+ text-align: center;
2852
+ text-overflow: ellipsis;
2853
+ white-space: nowrap;
2854
+ }
2855
+ .saltPill-deletable .saltPill-label {
2856
+ padding-right: 0px;
2857
+ }
2858
+ .saltPill-innerLabel {
2859
+ vertical-align: top;
2860
+ line-height: var(--pill-height);
2861
+ }
2862
+ .saltPill-disabled .saltPill-label,
2863
+ .saltPill-disabled .saltIcon {
2864
+ cursor: var(--salt-selectable-cursor-disabled);
2865
+ opacity: var(--salt-palette-opacity-disabled);
2866
+ --saltIcon-color: var(--pill-icon-color-disabled);
2867
+ --saltIcon-color-hover: var(--pill-icon-color-disabled);
2868
+ }
2869
+ .saltPill-deleteButton {
2870
+ --saltButton-background-hover: var(--pill-background-hover);
2871
+ --saltButton-background-active: var(--pill-background-active);
2872
+ --saltButton-cursor: pointer;
2873
+ flex-shrink: 0;
2874
+ height: var(--pill-checkbox-size);
2875
+ margin-left: calc(var(--salt-size-unit) / 2);
2876
+ min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));
2877
+ padding-right: calc(var(--salt-size-unit) / 2);
2878
+ }
2879
+ .saltPill-deleteButton-disabled {
2880
+ --saltButton-background-hover: var(--pill-background-disabled);
2881
+ --saltButton-background-active: var(--pill-background-disabled);
2882
+ --saltButton-background-disabled: initial;
2883
+ }
2884
+ .saltPill-deleteButton .saltPill-deleteIcon {
2885
+ left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));
2886
+ position: relative;
2887
+ }
2888
+ .saltPill-deleteButton:active .saltPill-deleteIcon {
2889
+ --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));
2890
+ }
2891
+ .saltPill-disabled:active .saltPill-deleteIcon {
2892
+ --saltButton-background-active: var(--pill-background-disabled);
2893
+ --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));
2894
+ }
2895
+ .saltPill .saltPill-icon {
2896
+ fill: var(--pill-icon-color);
2897
+ height: 12px;
2898
+ margin-left: var(--salt-size-adornmentGap);
2899
+ margin-right: calc(var(--salt-size-unit) * 0.5);
2900
+ }
2901
+ .saltPill:active .saltPill-icon,
2902
+ .saltPill-active .saltPill-icon {
2903
+ fill: var(--pill-icon-color-active);
2904
+ }
2905
+ .saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {
2906
+ padding-left: 0;
2907
+ }
2908
+ .saltPill:hover .saltPill-label {
2909
+ color: var(--pill-text-color-hover);
2910
+ }
2911
+ .saltPill:active .saltPill-label {
2912
+ color: var(--pill-text-color-active);
2913
+ }
2914
+ .saltPill-selectable .saltPill-label,
2915
+ .saltPill-selectable:active .saltPill-label,
2916
+ .saltPill-deletable .saltPill-label,
2917
+ .saltPill-deletable:active .saltPill-label {
2918
+ background: var(--pill-background);
2919
+ color: var(--pill-text-color);
2920
+ }
2921
+ .saltPill-disabled .saltPill-label,
2922
+ .saltPill-disabled:active .saltPill-label {
2923
+ background: initial;
2924
+ color: var(--pill-text-color-disabled);
2925
+ }
2926
+
2927
+ /* src/pill-next/PillNext.css */
2928
+ .saltPillNext {
2929
+ display: flex;
2930
+ max-width: 100%;
2931
+ }
2932
+ .saltPillNext-action {
2933
+ --pillNext-background: var(--salt-actionable-primary-background);
2934
+ --pillNext-background-active: var(--salt-actionable-primary-background-active);
2935
+ --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);
2936
+ --pillNext-background-hover: var(--salt-actionable-primary-background-hover);
2937
+ --pillNext-text-color: var(--salt-actionable-primary-foreground);
2938
+ --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);
2939
+ --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);
2940
+ --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
2941
+ }
2942
+ .saltPillNext-action {
2943
+ appearance: none;
2944
+ -webkit-appearance: none;
2945
+ display: inline-flex;
2946
+ align-items: center;
2947
+ background: var(--pillNext-background);
2948
+ border-radius: 0;
2949
+ border: 0;
2950
+ height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2951
+ min-height: var(--salt-text-minHeight);
2952
+ outline: 0;
2953
+ position: relative;
2954
+ gap: var(--salt-spacing-50);
2955
+ padding-left: var(--salt-spacing-50);
2956
+ padding-right: var(--salt-spacing-50);
2957
+ color: var(--pillNext-text-color);
2958
+ font-family: var(--salt-text-fontFamily);
2959
+ font-size: var(--salt-text-fontSize);
2960
+ font-weight: var(--salt-text-fontWeight);
2961
+ line-height: var(--salt-text-lineHeight);
2962
+ }
2963
+ .saltPillNext-label {
2964
+ min-width: 0;
2965
+ overflow: hidden;
2966
+ text-overflow: ellipsis;
2967
+ white-space: nowrap;
2968
+ }
2969
+ .saltPillNext-close-button {
2970
+ --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2971
+ --saltButton-padding: var(--salt-spacing-50);
2972
+ }
2973
+ .saltPillNext-action .saltIcon {
2974
+ --saltIcon-color: currentColor;
2975
+ }
2976
+ .saltPillNext-clickable {
2977
+ cursor: var(--salt-selectable-cursor-hover);
2978
+ }
2979
+ .saltPillNext-clickable:hover,
2980
+ .saltPillNext-clickable:focus-visible {
2981
+ color: var(--pillNext-text-color-hover);
2982
+ background: var(--pillNext-background-hover);
2983
+ }
2984
+ .saltPillNext-clickable.saltPillNext-disabled:hover {
2985
+ color: var(--pillNext-text-color);
2986
+ background: var(--pillNext-background);
2987
+ }
2988
+ .saltPillNext-clickable.saltPillNext-active,
2989
+ .saltPillNext-clickable:active {
2990
+ background: var(--pillNext-background-active);
2991
+ color: var(--pillNext-text-color-active);
2992
+ }
2993
+ .saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,
2994
+ .saltPillNext-clickable.saltPillNext-disabled:active {
2995
+ background: var(--pillNext-background);
2996
+ color: var(--pillNext-text-color);
2997
+ }
2998
+ .saltPillNext-action:focus-visible {
2999
+ outline: var(--salt-focused-outline);
3000
+ z-index: var(--salt-zIndex-default);
3001
+ }
3002
+ .saltPillNext-action.saltPillNext-disabled,
3003
+ .saltPillNext-action.saltPillNext-disabled:hover {
3004
+ color: var(--pillNext-text-color-disabled);
3005
+ background: var(--pillNext-background-disabled);
3006
+ cursor: var(--salt-selectable-cursor-disabled);
3007
+ }
3008
+
3009
+ /* src/query-input/QueryInput.css */
3010
+ .saltQueryInput {
3011
+ }
3012
+ .saltQueryInputBody {
3013
+ display: flex;
3014
+ flex-direction: row;
3015
+ align-items: center;
3016
+ }
3017
+ .saltQueryInputBody > .saltIcon {
3018
+ padding: var(--salt-size-unit);
3019
+ align-self: start;
3020
+ }
3021
+ .saltQueryInputBody-separator {
3022
+ width: 1px;
3023
+ background: var(--salt-separable-secondary-borderColor);
3024
+ margin: 0 var(--salt-size-unit);
3025
+ align-self: stretch;
3026
+ }
3027
+ .saltQueryInputBody-buttonGroup {
3028
+ flex-shrink: 0;
3029
+ align-self: start;
3030
+ margin-bottom: var(--salt-size-unit);
3031
+ }
3032
+ .saltQueryInputBody-input {
3033
+ flex-grow: 1;
3034
+ }
3035
+ .saltQueryInputValueSelector {
3036
+ }
3037
+ .saltQueryInputValueSelector-content {
3038
+ display: flex;
3039
+ flex-direction: row;
3040
+ }
3041
+ .saltCategoryList-categoryWidthMeasure {
3042
+ position: fixed;
3043
+ left: -1000px;
3044
+ top: 0;
3045
+ border: solid 1px black;
3046
+ }
3047
+ .saltCategoryList-category {
3048
+ font-size: var(--salt-text-fontSize);
3049
+ }
3050
+ .saltCategoryListItem-text {
3051
+ flex-shrink: 0;
3052
+ margin-right: calc(var(--salt-size-unit) * 1.5);
3053
+ }
3054
+ .saltCategoryListItem-valuesContainer {
3055
+ font-style: italic;
3056
+ color: var(--salt-content-secondary-foreground);
3057
+ flex-grow: 1;
3058
+ display: flex;
3059
+ flex-direction: row;
3060
+ overflow: hidden;
3061
+ }
3062
+ .saltCategoryListItem-values {
3063
+ overflow: hidden;
3064
+ text-overflow: ellipsis;
3065
+ }
3066
+ .saltCategoryListItem-chevron {
3067
+ flex-shrink: 0;
3068
+ margin-left: var(--salt-size-unit);
3069
+ }
3070
+ .saltListItem-selected .saltIcon {
3071
+ fill: var(--list-item-text-color-active);
3072
+ }
3073
+ .saltQueryInputValueList {
3074
+ border: solid 1px var(--salt-container-primary-borderColor);
3075
+ }
3076
+ .saltQueryInputValueList-back {
3077
+ display: flex;
3078
+ flex-direction: row;
3079
+ align-items: center;
3080
+ border-bottom: solid 1px var(--salt-separable-secondary-borderColor);
3081
+ cursor: pointer;
3082
+ }
3083
+ .saltQueryInputValueList-back .saltIcon {
3084
+ margin-right: var(--salt-size-unit);
3085
+ }
3086
+ .saltQueryInputValueList-category {
3087
+ font-size: var(--salt-text-fontSize);
3088
+ flex-grow: 1;
3089
+ }
3090
+ .saltQueryInputSearchList {
3091
+ }
3092
+ .saltQueryInputSearchList-group {
3093
+ }
3094
+ .saltQueryInputSearchList-addKeyword {
3095
+ border-top: solid 1px var(--salt-separable-secondary-borderColor);
3096
+ }
3097
+ .saltQueryInputSearchList-categoryTitle {
3098
+ color: var(--salt-content-primary-foreground);
3099
+ background: var(--salt-container-primary-background);
3100
+ font-size: var(--salt-text-fontSize);
3101
+ font-weight: var(--salt-text-fontWeight-strong);
3102
+ display: flex;
3103
+ align-items: center;
3104
+ padding: 0 var(--salt-size-unit);
3105
+ position: sticky;
3106
+ top: 0;
3107
+ z-index: var(--salt-zIndex-default);
3108
+ }
3109
+ .saltQueryInputSearchList-value {
3110
+ }
3111
+
3112
+ /* src/scrim/Scrim.css */
3113
+ .saltScrim {
3114
+ top: 0;
3115
+ left: 0;
3116
+ right: 0;
3117
+ width: 100%;
3118
+ bottom: 0;
3119
+ height: 100%;
3120
+ display: flex;
3121
+ z-index: 1199;
3122
+ position: fixed;
3123
+ align-items: center;
3124
+ justify-content: center;
3125
+ background: var(--saltScrim-background, var(--salt-overlayable-background));
3126
+ -webkit-tap-highlight-color: transparent;
3127
+ }
3128
+ .saltScrim:focus {
3129
+ outline: none;
3130
+ }
3131
+ .saltScrim-containerFix {
3132
+ position: absolute;
3133
+ z-index: calc(var(--salt-zIndex-appHeader) - 1);
3134
+ }
3135
+
3136
+ /* src/search-input/SearchInput.css */
3137
+ .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
3138
+ display: none;
3139
+ }
3140
+
3141
+ /* src/skip-link/SkipLink.css */
3142
+ .saltSkipLink {
3143
+ --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));
3144
+ --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));
3145
+ --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));
3146
+ --skipLink-color: var(--saltSkipLink-color, var(--salt-content-primary-foreground));
3147
+ }
3148
+ .saltSkipLink {
3149
+ --saltLink-color-focus: var(--skipLink-color);
3150
+ }
3151
+ .saltSkipLink-target {
3152
+ --skipLink-target-focus: var(--salt-focused-outline);
3153
+ }
3154
+ .saltSkipLink {
3155
+ top: 0;
3156
+ left: 0;
3157
+ width: 1px;
3158
+ height: 1px;
3159
+ display: block;
3160
+ opacity: 0;
3161
+ overflow: hidden;
3162
+ position: absolute;
3163
+ }
3164
+ .saltSkipLink:focus {
3165
+ opacity: 1;
3166
+ width: auto;
3167
+ height: auto;
3168
+ white-space: nowrap;
3169
+ margin: var(--skipLink-margin);
3170
+ padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);
3171
+ background: var(--skipLink-background);
3172
+ color: var(--skipLink-color);
3173
+ box-shadow: var(--salt-overlayable-shadow-popout);
3174
+ }
3175
+ .saltSkipLink {
3176
+ font-size: var(--salt-text-fontSize);
3177
+ font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));
3178
+ line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));
3179
+ }
3180
+ .saltSkipLink-target {
3181
+ outline: var(--skipLink-target-focus);
3182
+ }
3183
+
3184
+ /* src/skip-link/SkipLinks.css */
3185
+ .saltSkipLinks {
3186
+ position: relative;
3187
+ float: left;
3188
+ list-style: none;
3189
+ margin: 0;
3190
+ padding: 0;
3191
+ }
3192
+
3193
+ /* src/slider/Slider.css */
3194
+ .salt-density-high {
3195
+ --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);
3196
+ --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);
3197
+ --slider-paddingTop: var(--saltSlider-paddingTop, 3px);
3198
+ --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
3199
+ }
3200
+ .salt-density-medium {
3201
+ --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);
3202
+ --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);
3203
+ --slider-paddingTop: var(--saltSlider-paddingTop, 6px);
3204
+ --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
3205
+ }
3206
+ .salt-density-low {
3207
+ --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);
3208
+ --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);
3209
+ --slider-paddingTop: var(--saltSlider-paddingTop, 9px);
3210
+ --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
3211
+ }
3212
+ .salt-density-touch {
3213
+ --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);
3214
+ --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);
3215
+ --slider-paddingTop: var(--saltSlider-paddingTop, 12px);
3216
+ --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
3217
+ }
3218
+ .saltSlider {
3219
+ --slider-rail-height: var(--saltSlider-rail-height, 8px);
3220
+ --slider-rail-color: var(--saltSlider-rail-color, var(--salt-palette-neutral-secondary-border));
3221
+ --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);
3222
+ --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));
3223
+ --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background));
3224
+ --slider-selection-height: var(--saltSlider-selection-height, 2px);
3225
+ --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));
3226
+ --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));
3227
+ --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));
3228
+ --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));
3229
+ --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));
3230
+ --slider-arrow-height: var(--saltSlider-arrow-height, 6px);
3231
+ --slider-arrow-width: var(--saltSlider-arrow-width, 8px);
3232
+ --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));
3233
+ --slider-borderStyle: var(--saltSlider-borderStyle, none);
3234
+ --slider-borderWidth: var(--saltSlider-borderWidth, 0);
3235
+ --slider-borderColor: var(--saltSlider-borderColor, transparent);
3236
+ --slider-width: var(--saltSlider-width, 300px);
3237
+ --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));
3238
+ --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));
3239
+ --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));
3240
+ --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);
3241
+ --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);
3242
+ }
3243
+ .saltSlider {
3244
+ width: var(--slider-width);
3245
+ border-style: var(--slider-borderStyle);
3246
+ border-width: var(--slider-borderWidth);
3247
+ border-color: var(--slider-borderColor);
3248
+ display: flex;
3249
+ flex-direction: column;
3250
+ align-items: stretch;
3251
+ padding-top: var(--slider-paddingTop);
3252
+ padding-bottom: var(--slider-paddingBottom);
3253
+ }
3254
+ .saltSlider-disabled {
3255
+ }
3256
+ .saltSlider-clickable {
3257
+ padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);
3258
+ margin-right: calc(-1 * var(--slider-clickable-paddingRight));
3259
+ margin-left: calc(-1 * var(--slider-clickable-paddingLeft));
3260
+ display: flex;
3261
+ flex-direction: column;
3262
+ justify-content: center;
3263
+ align-items: stretch;
3264
+ }
3265
+ .saltSlider-track {
3266
+ display: grid;
3267
+ grid-template-rows: auto auto auto;
3268
+ align-items: end;
3269
+ grid-template-columns: auto auto auto;
3270
+ row-gap: 0;
3271
+ transition: grid-template-columns 100ms ease;
3272
+ }
3273
+ .saltSliderRail {
3274
+ grid-row: 1;
3275
+ grid-column-start: 1;
3276
+ grid-column-end: -1;
3277
+ height: var(--slider-rail-height);
3278
+ border-style: solid;
3279
+ border-width: 0 1px 1px 1px;
3280
+ border-color: var(--slider-rail-color);
3281
+ }
3282
+ .saltSliderRailMarks {
3283
+ grid-row: 2;
3284
+ grid-column-start: 1;
3285
+ grid-column-end: -1;
3286
+ display: grid;
3287
+ grid-template-rows: auto;
3288
+ }
3289
+ .saltSliderRailMarks-mark {
3290
+ grid-row: 1;
3291
+ width: 0;
3292
+ height: var(--slider-rail-mark-height);
3293
+ border-left: 1px solid var(--slider-rail-mark-color);
3294
+ }
3295
+ .saltSliderRailMarks-max {
3296
+ margin-left: -1px;
3297
+ }
3298
+ .saltSliderMarkLabels {
3299
+ grid-row: 3;
3300
+ grid-column-start: 1;
3301
+ grid-column-end: -1;
3302
+ display: grid;
3303
+ grid-template-rows: auto;
3304
+ justify-items: center;
3305
+ }
3306
+ .saltSliderMarkLabels-label {
3307
+ color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground));
3308
+ font-size: var(--slider-label-fontSize);
3309
+ margin-top: var(--saltSlider-label-marginTop);
3310
+ line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));
3311
+ white-space: nowrap;
3312
+ }
3313
+ .saltSliderSelection {
3314
+ grid-row: 1;
3315
+ grid-column-start: 1;
3316
+ grid-column-end: -2;
3317
+ height: var(--slider-selection-height);
3318
+ background: var(--slider-selection-color);
3319
+ }
3320
+ .saltSliderSelection-range {
3321
+ grid-row: 1;
3322
+ grid-column-start: 2;
3323
+ grid-column-end: -2;
3324
+ height: var(--slider-selection-height);
3325
+ background: var(--slider-selection-color);
3326
+ }
3327
+ .saltSliderHandle-box:focus-visible {
3328
+ outline-style: var(--slider-handle-outlineStyle);
3329
+ outline-width: var(--slider-handle-outlineWidth);
3330
+ outline-color: var(--slider-handle-outlineColor);
3331
+ outline-offset: var(--slider-handle-outlineOffset);
3332
+ }
3333
+ .saltSliderHandle {
3334
+ margin-left: calc(var(--slider-arrow-width) * -0.5);
3335
+ grid-row: 1;
3336
+ width: 0;
3337
+ height: 0;
3338
+ border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;
3339
+ border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;
3340
+ border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);
3341
+ position: relative;
3342
+ }
3343
+ .saltSliderHandle-min {
3344
+ border-left: none;
3345
+ margin-left: 0;
3346
+ }
3347
+ .saltSliderHandle-max {
3348
+ border-right: none;
3349
+ }
3350
+ .saltSlider-label {
3351
+ color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground));
3352
+ font-size: var(--slider-label-fontSize);
3353
+ margin-top: var(--saltSlider-label-marginTop);
3354
+ line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));
3355
+ padding-left: var(--slider-label-paddingLeft);
3356
+ padding-right: var(--slider-label-paddingRight);
3357
+ white-space: nowrap;
3358
+ text-overflow: ellipsis;
3359
+ }
3360
+
3361
+ /* src/stepped-tracker/SteppedTracker.css */
3362
+ .saltSteppedTracker {
3363
+ margin: 0;
3364
+ padding: 0;
3365
+ text-indent: 0;
3366
+ list-style-type: none;
3367
+ display: flex;
3368
+ flex-direction: row;
3369
+ width: 100%;
3370
+ position: relative;
3371
+ }
3372
+
3373
+ /* src/stepper-input/StepperInput.css */
3374
+ .salt-density-medium {
3375
+ --stepperInput-adornment-container-top: -2px;
3376
+ --stepperInput-button-height: 12px;
3377
+ --stepperInput-button-margin: 2px;
3378
+ --stepperInput-button-width: 24px;
3379
+ --stepperInput-input-maxHeight: 28px;
3380
+ --stepperInput-secondary-button-height: 26px;
3381
+ --stepperInput-secondary-button-width: 26px;
3382
+ --stepperInput-secondary-button-marginRight: 2px;
3383
+ }
3384
+ .salt-density-touch {
3385
+ --stepperInput-adornment-container-top: 0;
3386
+ --stepperInput-button-height: 16px;
3387
+ --stepperInput-button-margin: 4px;
3388
+ --stepperInput-button-width: 36px;
3389
+ --stepperInput-secondary-button-height: 36px;
3390
+ --stepperInput-secondary-button-width: 36px;
3391
+ --stepperInput-secondary-button-marginRight: 4px;
3392
+ }
3393
+ .salt-density-low {
3394
+ --stepperInput-adornment-container-top: 0;
3395
+ --stepperInput-button-height: 12px;
3396
+ --stepperInput-button-margin: 4px;
3397
+ --stepperInput-button-width: 28px;
3398
+ --stepperInput-secondary-button-height: 28px;
3399
+ --stepperInput-secondary-button-width: 28px;
3400
+ --stepperInput-secondary-button-marginRight: 4px;
3401
+ }
3402
+ .salt-density-high {
3403
+ --stepperInput-adornment-container-top: -2px;
3404
+ --stepperInput-button-height: 8px;
3405
+ --stepperInput-button-margin: 2px;
3406
+ --stepperInput-button-width: 16px;
3407
+ --stepperInput-input-maxHeight: 20px;
3408
+ --stepperInput-secondary-button-height: 18px;
3409
+ --stepperInput-secondary-button-width: 18px;
3410
+ --stepperInput-secondary-button-marginRight: 2px;
3411
+ }
3412
+ .saltStepperInput-adornmentContainer {
3413
+ display: flex;
3414
+ position: relative;
3415
+ top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));
3416
+ }
3417
+ .saltStepperInput-secondaryButton {
3418
+ --saltButton-height: var(--stepperInput-secondary-button-height);
3419
+ --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);
3420
+ --saltButton-width: var(--stepperInput-secondary-button-width);
3421
+ }
3422
+ .saltStepperInput-hideSecondaryButton {
3423
+ visibility: hidden;
3424
+ }
3425
+ .saltStepperInput-buttonContainer {
3426
+ display: flex;
3427
+ flex-direction: column;
3428
+ justify-content: center;
3429
+ }
3430
+ .saltStepperInput-stepperButton {
3431
+ --saltButton-height: var(--stepperInput-button-height);
3432
+ --saltButton-margin: var(--stepperInput-button-margin);
3433
+ --saltButton-width: var(--stepperInput-button-width);
3434
+ }
3435
+ .saltStepperInput-increment {
3436
+ }
3437
+ .saltStepperInput-decrement {
3438
+ --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin);
3439
+ }
3440
+ .saltStepperInput-stepperButtonIcon {
3441
+ }
3442
+ .saltStepperInput-input {
3443
+ max-height: var(--saltStepperInput-maxHeight, unset);
3444
+ }
3445
+
3446
+ /* src/tabs/Tab.css */
3447
+ .saltTab {
3448
+ --saltEditableLabel-padding: 0;
3449
+ --saltEditableLabel-height: var(--tabs-tabstrip-height);
3450
+ --saltInputLegacy-minWidth: 4em;
3451
+ --tabs-tab-background: transparent;
3452
+ --tabs-tab-cursor: pointer;
3453
+ --tabs-tab-spacing: var(--salt-size-unit);
3454
+ --tabs-tab-position: relative;
3455
+ }
3456
+ .saltTab {
3457
+ align-items: center;
3458
+ align-self: stretch;
3459
+ background: var(--saltTabs-tab-background, var(--tabs-tab-background));
3460
+ border: none;
3461
+ border-radius: 0;
3462
+ color: var(--salt-content-primary-foreground);
3463
+ cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));
3464
+ display: var(--tabs-tabstrip-display);
3465
+ height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));
3466
+ letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));
3467
+ min-width: var(--saltTabs-tab-minWidth, 40px);
3468
+ outline: none;
3469
+ position: var(--saltTabs-tab-position, var(--tabs-tab-position));
3470
+ user-select: none;
3471
+ font-family: var(--salt-text-fontFamily);
3472
+ font-size: var(--salt-text-fontSize);
3473
+ font-weight: var(--salt-text-fontWeight);
3474
+ }
3475
+ .saltTab.saltFocusVisible:after {
3476
+ inset: 2px 2px 4px 2px;
3477
+ }
3478
+ .saltTab:not(.saltTab-vertical) {
3479
+ margin: 0 var(--tabs-tab-spacing) 0 0;
3480
+ }
3481
+ .saltTab[aria-selected=true] {
3482
+ color: var(--salt-content-primary-foreground);
3483
+ font-weight: var(--salt-navigable-fontWeight-active);
3484
+ }
3485
+ .saltTab-dragAway {
3486
+ display: none;
3487
+ }
3488
+ .saltTab-main {
3489
+ background: inherit;
3490
+ border: none;
3491
+ color: inherit;
3492
+ cursor: inherit;
3493
+ font-family: inherit;
3494
+ font-size: inherit;
3495
+ font-weight: inherit;
3496
+ height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
3497
+ outline: none;
3498
+ padding: 0 var(--tabs-tab-spacing);
3499
+ position: relative;
3500
+ }
3501
+ .saltTab-closeable .saltTab-main {
3502
+ border-right: solid transparent var(--salt-size-unit);
3503
+ }
3504
+ .saltTab .saltTab-closeButton {
3505
+ display: flex;
3506
+ align-items: center;
3507
+ justify-content: center;
3508
+ }
3509
+ .saltTab-close-icon {
3510
+ display: block;
3511
+ }
3512
+ .saltTab .saltTab-text {
3513
+ display: inline-block;
3514
+ position: relative;
3515
+ overflow: hidden;
3516
+ text-align: var(--salt-text-textAlign-embedded);
3517
+ text-overflow: ellipsis;
3518
+ top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));
3519
+ white-space: nowrap;
3520
+ z-index: var(--salt-zIndex-default);
3521
+ }
3522
+ .saltTab-vertical .saltTab-text {
3523
+ text-align: var(--salt-text-textAlign);
3524
+ }
3525
+ .saltTab .saltTab-text:before {
3526
+ height: 0;
3527
+ content: attr(data-text);
3528
+ display: block;
3529
+ visibility: hidden;
3530
+ font-weight: var(--salt-navigable-fontWeight-active);
3531
+ }
3532
+ .saltTab-editing:after {
3533
+ content: "";
3534
+ position: absolute;
3535
+ top: 0;
3536
+ left: 0;
3537
+ right: 0;
3538
+ bottom: 2px;
3539
+ outline-color: var(--salt-focused-outlineColor);
3540
+ outline-style: var(--salt-focused-outlineStyle);
3541
+ outline-width: var(--salt-focused-outlineWidth);
3542
+ outline-offset: -2px;
3543
+ }
3544
+ .saltTab-vertical.saltTab-editing:after {
3545
+ right: 2px;
3546
+ bottom: 0;
3547
+ }
3548
+ .saltTab-vertical .saltFocusVisible:not([aria-selected="true"]):before {
3549
+ left: auto;
3550
+ height: auto;
3551
+ top: 0;
3552
+ width: 2px;
3553
+ }
3554
+ .saltTab.saltFocusVisible {
3555
+ background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));
3556
+ }
3557
+ .saltTab:before {
3558
+ content: var(--tabs-tab-before-content, none);
3559
+ background: var(--tabs-tab-before-background);
3560
+ height: var(--tabs-tab-before-height);
3561
+ inset: var(--tabs-tab-before-inset);
3562
+ position: absolute;
3563
+ width: var(--tabs-tab-before-width);
3564
+ z-index: 1;
3565
+ }
3566
+ .saltTabstrip-draggingTab .saltTab[aria-selected=true]:before {
3567
+ --tabs-tab-before-content: "";
3568
+ --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);
3569
+ --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
3570
+ --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);
3571
+ --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
3572
+ }
3573
+ .saltTab:not([aria-selected="true"]).saltFocusVisible:before,
3574
+ .saltTab:hover:not([aria-selected="true"]):before {
3575
+ --tabs-tab-before-content: "";
3576
+ --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
3577
+ --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
3578
+ --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);
3579
+ --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
3580
+ }
3581
+ .saltTab:hover:not(.saltTab-closeHover) {
3582
+ background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));
3583
+ }
3584
+
3585
+ /* src/tabs/TabActivationIndicator.css */
3586
+ .saltTabActivationIndicator-no-background {
3587
+ --tabs-activationIndicator-background: transparent !important;
3588
+ }
3589
+ .saltTabActivationIndicator {
3590
+ --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);
3591
+ background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));
3592
+ bottom: 0;
3593
+ height: var(--saltTabs-activationIndicator-height, auto);
3594
+ inset: var(--tabs-activationIndicator-inset);
3595
+ position: absolute;
3596
+ width: var(--tabs-activationIndicator-width, auto);
3597
+ }
3598
+ .saltTabActivationIndicator-thumb {
3599
+ inset: var(--saltTabs-activationIndicator-thumb-inset);
3600
+ position: absolute;
3601
+ height: var(--tabs-activationIndicator-thumb-height, auto);
3602
+ background: var(--salt-navigable-indicator-active);
3603
+ transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));
3604
+ width: var(--tabs-activationIndicator-thumb-width, auto);
3605
+ z-index: 1;
3606
+ }
3607
+
3608
+ /* src/tabs/TabPanel.css */
3609
+ .saltTabPanel {
3610
+ flex: 1 1 auto;
3611
+ }
3612
+
3613
+ /* src/tabs/Tabs.css */
3614
+ .saltTabs {
3615
+ display: flex;
3616
+ flex-direction: column;
3617
+ }
3618
+
3619
+ /* src/tabs/Tabstrip.css */
3620
+ .saltTabstrip {
3621
+ --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
3622
+ --tabs-tabstrip-dragging-display: none;
3623
+ --tabs-tabstrip-display: inline-flex;
3624
+ --tabs-tabstrip-background: transparent;
3625
+ align-items: flex-start;
3626
+ align-self: var(--saltTabs-tabstrip-alignSelf, stretch);
3627
+ font-size: var(--salt-text-fontSize);
3628
+ font-weight: var(--salt-text-fontWeight);
3629
+ position: relative;
3630
+ overflow: hidden;
3631
+ display: flex;
3632
+ min-width: 28px;
3633
+ width: 100%;
3634
+ }
3635
+ .saltTabstrip-horizontal {
3636
+ --saltTabs-activationIndicator-height: 1px;
3637
+ --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;
3638
+ --tabs-activationIndicator-borderStyle: none none solid none;
3639
+ --tabs-activationIndicator-inset: auto 0px 0px 0px;
3640
+ --tabs-activationIndicator-transitionProperty: left;
3641
+ --tabs-activationIndicator-thumb-height: 2px;
3642
+ }
3643
+ .saltTabstrip-vertical {
3644
+ --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;
3645
+ --tabs-activationIndicator-transition: top 0.3s ease;
3646
+ --tabs-activationIndicator-borderStyle: none solid none none;
3647
+ --tabs-activationIndicator-inset: 0px 0px 0px auto;
3648
+ --tabs-activationIndicator-transitionProperty: top;
3649
+ --tabs-activationIndicator-width: 1px;
3650
+ --tabs-activationIndicator-thumb-width: 2px;
3651
+ align-self: flex-start;
3652
+ display: inline-flex;
3653
+ }
3654
+ .saltTabstrip-draggingTab {
3655
+ --saltTabs-activationIndicator-transition: none;
3656
+ }
3657
+ .saltTabstrip-draggingTab .saltTab {
3658
+ pointer-events: none;
3659
+ }
3660
+ .saltTabstrip-horizontal {
3661
+ height: var(--tabs-tabstrip-height);
3662
+ }
3663
+ .saltTabstrip-addButton,
3664
+ .saltDropdown.saltTabstrip-overflowMenu {
3665
+ margin-left: var(--salt-size-unit);
3666
+ }
3667
+ .saltTabstrip-overflowMenu.saltDropdown {
3668
+ --saltIcon-margin: 2px 0 0 0px;
3669
+ }
3670
+ .saltTabstrip-overflowMenu-open {
3671
+ --saltButton-background: var(--salt-actionable-secondary-background-active);
3672
+ --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
3673
+ }
3674
+ .saltTabstrip-overflowMenu-open .saltButton {
3675
+ --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
3676
+ }
3677
+ .saltTabstrip-inner {
3678
+ width: 100%;
3679
+ align-items: center;
3680
+ display: flex;
3681
+ flex-basis: auto;
3682
+ flex-grow: 0;
3683
+ flex-shrink: 1;
3684
+ flex-wrap: wrap;
3685
+ justify-content: flex-start;
3686
+ line-height: var(--tabs-tabstrip-height);
3687
+ }
3688
+ .saltTabstrip-vertical .saltTabstrip-inner {
3689
+ flex-direction: column;
3690
+ height: auto;
3691
+ }
3692
+ .saltTabstrip-centered .saltTabstrip-inner {
3693
+ justify-content: center;
3694
+ }
3695
+ .saltDraggable[class*=tabstrip] {
3696
+ --tabs-tabstrip-display: flex;
3697
+ --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
3698
+ --tabs-tabstrip-dragging-display: block;
3699
+ --tabs-tab-background: var(--salt-navigable-background-hover);
3700
+ --tabs-tab-before-content: "";
3701
+ --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
3702
+ --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
3703
+ --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);
3704
+ --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
3705
+ --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);
3706
+ --tabs-tab-position: static;
3707
+ font-size: 12px;
3708
+ }
3709
+ .saltDraggable-tabstrip-horizontal {
3710
+ --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
3711
+ --tabs-activationIndicator-thumb-height: 2px;
3712
+ --tabs-activationIndicator-inset: auto 0px 0px 0px;
3713
+ line-height: var(--tabs-tabstrip-height);
3714
+ }
3715
+ .saltDraggable-tabstrip-vertical {
3716
+ --tabs-activationIndicator-inset: 0px 0px 0px auto;
3717
+ --tabs-activationIndicator-thumb-width: 2px;
3718
+ }
3719
+ .saltDraggable[class*=tabstrip] .saltTab[aria-selected=true]:before {
3720
+ --tabs-tab-before-background: var(--salt-navigable-indicator-active);
3721
+ }
3722
+ .saltDraggable[class*=tabstrip] .saltTab {
3723
+ box-shadow: var(--salt-overlayable-shadow-drag);
3724
+ }
3725
+ [data-overflowed] {
3726
+ order: 99;
3727
+ visibility: hidden;
3728
+ }
3729
+ .saltTabstrip-overflowMenu-dropTarget:after {
3730
+ background: var(--salt-selectable-background-selected);
3731
+ content: "";
3732
+ position: absolute;
3733
+ height: 2px;
3734
+ left: 0;
3735
+ right: 0;
3736
+ bottom: 0;
3737
+ }
3738
+
3739
+ /* src/tabs/ThemeTabstrip.css */
3740
+ .salt-density-touch {
3741
+ --toolbar-depth: calc(var(--salt-size-basis-unit) * 13);
3742
+ }
3743
+ .salt-density-low {
3744
+ --toolbar-depth: calc(var(--salt-size-basis-unit) * 11);
3745
+ }
3746
+ .salt-density-medium {
3747
+ --toolbar-depth: calc(var(--salt-size-basis-unit) * 9);
3748
+ }
3749
+ .salt-density-high {
3750
+ --toolbar-depth: calc(var(--salt-size-basis-unit) * 7);
3751
+ }
3752
+
3753
+ /* src/tabs-next/TabNext.css */
3754
+ .saltTabNext {
3755
+ align-items: center;
3756
+ justify-content: center;
3757
+ appearance: none;
3758
+ -webkit-appearance: none;
3759
+ display: inline-flex;
3760
+ background: var(--salt-navigable-primary-background);
3761
+ gap: var(--salt-spacing-100);
3762
+ border: none;
3763
+ border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
3764
+ border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
3765
+ border-radius: 0;
3766
+ white-space: pre;
3767
+ min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
3768
+ min-width: 4em;
3769
+ padding: var(--salt-spacing-50) var(--salt-spacing-100);
3770
+ position: relative;
3771
+ flex-shrink: 0;
3772
+ cursor: var(--salt-navigable-cursor-hover);
3773
+ color: var(--salt-content-primary-foreground);
3774
+ font-weight: var(--salt-navigable-fontWeight);
3775
+ font-family: var(--salt-text-fontFamily);
3776
+ text-align: var(--salt-text-textAlign);
3777
+ letter-spacing: var(--salt-text-letterSpacing);
3778
+ line-height: var(--salt-text-lineHeight);
3779
+ font-size: var(--salt-text-fontSize);
3780
+ }
3781
+ .saltTabNext-primary {
3782
+ --tabNext-background-active: var(--salt-container-primary-background);
3783
+ }
3784
+ .saltTabNext-secondary {
3785
+ --tabNext-background-active: var(--salt-container-secondary-background);
3786
+ }
3787
+ .saltTabNext::after {
3788
+ content: "";
3789
+ position: absolute;
3790
+ left: calc(var(--salt-size-border) * -1);
3791
+ right: calc(var(--salt-size-border) * -1);
3792
+ height: var(--salt-size-indicator);
3793
+ }
3794
+ .saltTabNext-main::after {
3795
+ top: 0;
3796
+ }
3797
+ .saltTabNext-inline::after {
3798
+ bottom: 0;
3799
+ }
3800
+ .saltTabNext:hover::after,
3801
+ .saltTabNext:focus-visible::after {
3802
+ background: var(--salt-navigable-indicator-hover);
3803
+ }
3804
+ .saltTabNext:disabled:hover::after,
3805
+ .saltTabNext:disabled:focus-visible::after {
3806
+ background: none;
3807
+ }
3808
+ .saltTabNext:focus-visible {
3809
+ outline: var(--salt-focused-outline);
3810
+ }
3811
+ .saltTabNext-main[aria-selected=true] {
3812
+ background: var(--tabNext-background-active);
3813
+ border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
3814
+ border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
3815
+ }
3816
+ .saltTabNext[aria-selected=true]::after {
3817
+ background: var(--salt-navigable-indicator-active);
3818
+ }
3819
+ .saltTabNext:disabled {
3820
+ cursor: var(--salt-navigable-cursor-disabled);
3821
+ color: var(--salt-content-primary-foreground-disabled);
3822
+ }
3823
+
3824
+ /* src/tabs-next/TabstripNext.css */
3825
+ .saltTabstripNext {
3826
+ display: flex;
3827
+ flex-wrap: nowrap;
3828
+ justify-content: var(--tabstripNext-justifyContent);
3829
+ align-items: center;
3830
+ position: relative;
3831
+ background: transparent;
3832
+ width: 100%;
3833
+ padding-left: var(--salt-spacing-300);
3834
+ padding-right: var(--salt-spacing-300);
3835
+ font-family: var(--salt-text-fontFamily);
3836
+ font-size: var(--salt-text-fontSize);
3837
+ font-weight: var(--salt-text-fontWeight);
3838
+ line-height: var(--salt-text-lineHeight);
3839
+ }
3840
+ .saltTabstripNext-main::before {
3841
+ content: "";
3842
+ position: absolute;
3843
+ inset: auto 0 0 0;
3844
+ height: var(--salt-size-border);
3845
+ border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
3846
+ }
3847
+ .saltTabstripNext .saltTabNext-wrapper:not(:last-child) {
3848
+ padding-right: var(--salt-spacing-100);
3849
+ }
3850
+
3851
+ /* src/toast-group/ToastGroup.css */
3852
+ .saltToastGroup {
3853
+ width: var(--toastGroup-width);
3854
+ max-height: calc(100% - var(--salt-spacing-300) * 2);
3855
+ margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200);
3856
+ overflow: auto;
3857
+ display: flex-inline;
3858
+ flex-direction: column;
3859
+ position: fixed;
3860
+ z-index: var(--salt-zIndex-flyover);
3861
+ }
3862
+ .saltToastGroup-bottom-right {
3863
+ bottom: 0;
3864
+ right: 0;
3865
+ justify-content: flex-end;
3866
+ }
3867
+ .saltToastGroup-top-right {
3868
+ top: 0;
3869
+ right: 0;
3870
+ justify-content: flex-start;
3871
+ }
3872
+ .salt-density-high {
3873
+ --toastGroup-width: 210px;
3874
+ }
3875
+ .salt-density-medium {
3876
+ --toastGroup-width: 260px;
3877
+ }
3878
+ .salt-density-low {
3879
+ --toastGroup-width: 310px;
3880
+ }
3881
+ .salt-density-touch {
3882
+ --toastGroup-width: 360px;
3883
+ }
3884
+
3885
+ /* src/tokenized-input/TokenizedInput.css */
3886
+ .salt-density-medium {
3887
+ --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
3888
+ --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);
3889
+ --tokenizedInput-last-pill-margin: var(--salt-size-unit);
3890
+ }
3891
+ .salt-density-touch {
3892
+ --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
3893
+ --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);
3894
+ --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);
3895
+ }
3896
+ .salt-density-low {
3897
+ --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
3898
+ --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);
3899
+ --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);
3900
+ }
3901
+ .salt-density-high {
3902
+ --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);
3903
+ --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);
3904
+ --tokenizedInput-last-pill-margin: var(--salt-size-unit);
3905
+ }
3906
+ .saltTokenizedInput {
3907
+ --tokenizedInput-spacing: var(--salt-size-unit);
3908
+ --tokenizedInput-height: var(--salt-size-base);
3909
+ }
3910
+ .saltTokenizedInput {
3911
+ display: inline-flex;
3912
+ justify-content: space-between;
3913
+ min-width: 8em;
3914
+ width: 100%;
3915
+ }
3916
+ .saltTokenizedInput:hover {
3917
+ cursor: var(--salt-selectable-cursor-hover);
3918
+ }
3919
+ .saltTokenizedInput.saltTokenizedInput-disabled:hover {
3920
+ cursor: var(--salt-selectable-cursor-disabled);
3921
+ }
3922
+ .saltTokenizedInput-pillGroup {
3923
+ align-content: flex-start;
3924
+ display: flex;
3925
+ flex: 1;
3926
+ flex-wrap: wrap;
3927
+ min-height: var(--tokenizedInput-height);
3928
+ padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);
3929
+ }
3930
+ .saltTokenizedInput-disabled {
3931
+ cursor: var(--salt-editable-cursor-disabled);
3932
+ opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));
3933
+ }
3934
+ .saltTokenizedInput-focused {
3935
+ outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));
3936
+ }
3937
+ .saltTokenizedInput-expanded {
3938
+ height: auto;
3939
+ --saltPill-maxWidth: calc(100px - var(--salt-size-unit));
3940
+ }
3941
+ .saltTokenizedInput-hidden,
3942
+ .saltTokenizedInput-input.saltTokenizedInput-hidden,
3943
+ .saltButton.saltTokenizedInput-hidden {
3944
+ display: none;
3945
+ }
3946
+ .saltInputLegacy.saltTokenizedInput-input {
3947
+ align-items: flex-start;
3948
+ cursor: text;
3949
+ flex-grow: 1;
3950
+ padding: 0;
3951
+ outline: none;
3952
+ width: auto;
3953
+ height: auto;
3954
+ min-width: 0;
3955
+ min-height: 0;
3956
+ }
3957
+ .saltTokenizedInput-clearButton {
3958
+ flex: none;
3959
+ align-self: flex-end;
3960
+ }
3961
+ .saltTokenizedInput-expandButton.saltButton {
3962
+ padding: 0 calc(var(--tokenizedInput-spacing) / 4);
3963
+ --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);
3964
+ --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;
3965
+ }
3966
+ .saltTokenizedInput-expanded,
3967
+ .saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {
3968
+ height: auto;
3969
+ }
3970
+ .saltTokenizedInput .saltInputPill,
3971
+ .saltInputLegacy.saltTokenizedInput-input,
3972
+ .saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {
3973
+ margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;
3974
+ height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);
3975
+ }
3976
+ .saltTokenizedInput .saltInputPill {
3977
+ min-width: 0;
3978
+ margin-right: var(--tokenizedInput-gutter-size);
3979
+ --saltPill-maxWidth: 100px;
3980
+ }
3981
+ .saltTokenizedInput .saltInputPill > * {
3982
+ min-width: 0;
3983
+ }
3984
+ .saltTokenizedInput .saltInputPill.saltInputPill-hidden {
3985
+ display: none;
3986
+ }
3987
+ .saltTokenizedInput .saltInputPill-pillLastVisible {
3988
+ margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));
3989
+ }
3990
+ .saltTokenizedInput .saltInputPill-pillActive {
3991
+ background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));
3992
+ }
3993
+ .saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {
3994
+ color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));
3995
+ }
3996
+ .saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {
3997
+ color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));
3998
+ background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));
3999
+ }
4000
+
4001
+ /* src/toolbar/Toolbar.css */
4002
+ .saltToolbar {
4003
+ --toolbar-background: var(--salt-container-secondary-background);
4004
+ --toolbar-fontSize: var(--salt-text-fontSize);
4005
+ }
4006
+ .saltToolbar {
4007
+ --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);
4008
+ background: var(--saltToolbar-background, var(--toolbar-background));
4009
+ font-size: var(--toolbar-fontSize);
4010
+ justify-content: flex-start;
4011
+ overflow: hidden;
4012
+ position: relative;
4013
+ font-family: var(--salt-text-fontFamily);
4014
+ font-size: var(--salt-text-fontSize);
4015
+ font-weight: var(--salt-text-fontWeight);
4016
+ line-height: var(--salt-text-lineHeight);
4017
+ }
4018
+ .saltToolbar > .Responsive-inner {
4019
+ align-items: center;
4020
+ flex: 1;
4021
+ flex-wrap: wrap;
4022
+ justify-content: inherit;
4023
+ margin: 0 !important;
4024
+ overflow: hidden;
4025
+ padding: 0 !important;
4026
+ }
4027
+ .saltToolbar[aria-orientation=horizontal] {
4028
+ display: flex;
4029
+ height: var(--saltToolbar-height, var(--toolbar-size));
4030
+ line-height: normal;
4031
+ min-width: 0;
4032
+ white-space: nowrap;
4033
+ width: var(--saltToolbar-width, 100%);
4034
+ }
4035
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner {
4036
+ display: flex;
4037
+ flex-direction: row;
4038
+ width: 100%;
4039
+ }
4040
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > :not(.saltTooltray) {
4041
+ margin-right: var(--salt-size-unit);
4042
+ align-self: center;
4043
+ }
4044
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {
4045
+ margin-top: var(--salt-size-unit);
4046
+ }
4047
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray {
4048
+ margin-top: 0;
4049
+ }
4050
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > [data-pad-end=true] {
4051
+ margin-right: auto;
4052
+ }
4053
+ .saltToolbar[aria-orientation=vertical] > .Responsive-inner > [data-pad-end=true] {
4054
+ margin-bottom: auto;
4055
+ }
4056
+ .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > *:first-child {
4057
+ margin-left: var(--salt-size-unit);
4058
+ }
4059
+ .saltToolbar[aria-orientation=vertical] {
4060
+ display: inline-flex;
4061
+ flex-direction: column;
4062
+ height: 100%;
4063
+ min-height: 0;
4064
+ }
4065
+ .saltToolbar[aria-orientation=vertical] > .Responsive-inner {
4066
+ display: inline-flex;
4067
+ flex-direction: column;
4068
+ max-height: 100%;
4069
+ }
4070
+ .saltToolbar > .Responsive-inner[data-collapsing=true] {
4071
+ flex-wrap: nowrap;
4072
+ }
4073
+ .saltToolbar > .Responsive-inner[data-collapsing=true] > *[data-overflowed=true] {
4074
+ min-width: 0;
4075
+ flex-shrink: 1;
4076
+ flex-basis: 0;
4077
+ padding: 0;
4078
+ margin: 0;
4079
+ visibility: visible;
4080
+ }
4081
+ .saltToolbar > .Responsive-inner > *[data-pad-start=true] {
4082
+ margin-left: auto;
4083
+ }
4084
+ .saltToolbarField-start {
4085
+ margin-left: 0 !important;
4086
+ order: -1;
4087
+ }
4088
+ .saltToolbar > .Responsive-inner > .saltToolbarField {
4089
+ flex-shrink: 0;
4090
+ flex-grow: 0;
4091
+ }
4092
+ .saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {
4093
+ padding-left: var(--salt-size-unit);
4094
+ }
4095
+ .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {
4096
+ background: var(--toolbar-background);
4097
+ }
4098
+ .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {
4099
+ background: var(--salt-actionable-secondary-background-hover);
4100
+ }
4101
+ .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,
4102
+ .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {
4103
+ background: var(--salt-actionable-secondary-background-active) !important;
4104
+ }
4105
+ [data-overflowed] {
4106
+ order: 99;
4107
+ visibility: hidden;
4108
+ }
4109
+
4110
+ /* src/toolbar/ToolbarButton.css */
4111
+ .saltToolbarButton:not([data-is-inside-panel]) {
4112
+ --saltButton-fontSize: 0;
4113
+ --saltButton-letterSpacing: 0;
4114
+ gap: 0;
4115
+ }
4116
+
4117
+ /* src/toolbar/Tooltray.css */
4118
+ .saltTooltray {
4119
+ --toolbar-tooltray-height: var(--toolbar-size);
4120
+ }
4121
+ .saltTooltray {
4122
+ background: inherit;
4123
+ flex-shrink: 0;
4124
+ flex-grow: 0;
4125
+ position: relative;
4126
+ overflow: hidden;
4127
+ align-items: flex-start;
4128
+ justify-content: flex-start;
4129
+ }
4130
+ .saltTooltray-horizontal {
4131
+ height: var(--toolbar-tooltray-height);
4132
+ }
4133
+ .saltTooltray > .Responsive-inner > .saltToolbarField {
4134
+ flex-shrink: 0;
4135
+ flex-grow: 0;
4136
+ }
4137
+ .saltTooltray > .Responsive-inner {
4138
+ align-items: center;
4139
+ display: flex;
4140
+ flex: 1;
4141
+ flex-wrap: nowrap;
4142
+ gap: 0 !important;
4143
+ justify-content: inherit;
4144
+ }
4145
+ .saltTooltray-horizontal > .Responsive-inner > * {
4146
+ margin-top: var(--salt-size-unit);
4147
+ margin-right: var(--salt-size-unit);
4148
+ }
4149
+ .saltTooltray-horizontal:not(:first-child) {
4150
+ margin-left: var(--salt-size-unit);
4151
+ padding-left: calc(var(--salt-size-unit) * 2);
4152
+ }
4153
+ .saltTooltray-horizontal:not(:first-child):before {
4154
+ content: "";
4155
+ position: absolute;
4156
+ background: var(--salt-separable-primary-borderColor);
4157
+ top: 8px;
4158
+ left: 0;
4159
+ width: 1px;
4160
+ height: 28px;
4161
+ }
4162
+ .saltTooltray > .Responsive-inner > .saltToolbarField {
4163
+ flex: 0 0 auto;
4164
+ }
4165
+ .saltTooltray > .Responsive-inner > *[data-pad-start=true] {
4166
+ margin-left: auto;
4167
+ }
4168
+ .saltTooltray[data-collapsible=dynamic] {
4169
+ flex-shrink: 0;
4170
+ }
4171
+ .saltTooltray[data-collapsible=dynamic] > .Responsive-inner {
4172
+ flex-wrap: wrap;
4173
+ }
4174
+ .saltTooltray[data-collapsing=true] {
4175
+ flex-shrink: 1;
4176
+ }
4177
+ .saltTooltray[data-collapsed=true] {
4178
+ flex-shrink: 1;
4179
+ }
4180
+ .saltTooltray[data-collapsible=dynamic][data-collapsed=true] {
4181
+ flex-basis: 0;
4182
+ }
4183
+
4184
+ /* src/tree/Tree.css */
4185
+ .saltTree {
4186
+ --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse));
4187
+ --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand));
4188
+ --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none);
4189
+ --tree-node-indent: 0px;
4190
+ --tree-toggle-width: 12px;
4191
+ --list-background-highlighted: rgba(1, 1, 1, 0.1);
4192
+ --list-item-height: 30px;
4193
+ --list-item-padding: 0 6px;
4194
+ --list-item-header-background: black;
4195
+ --list-item-header-color: white;
4196
+ --list-item-header-fontWeight: bold;
4197
+ --list-item-header-twisty-color: black;
4198
+ --list-item-header-twisty-content: "";
4199
+ --list-item-header-twisty-top: 50%;
4200
+ --list-item-header-twisty-left: -18px;
4201
+ --list-item-header-twisty-right: auto;
4202
+ --list-item-selected-color: white;
4203
+ margin: 0;
4204
+ padding: 0 1px;
4205
+ font-size: var(--saltTree-fontSize, 14px);
4206
+ max-height: inherit;
4207
+ outline: none;
4208
+ overflow-y: auto;
4209
+ position: relative;
4210
+ user-select: none;
4211
+ }
4212
+ .saltTree-child-nodes {
4213
+ width: 100%;
4214
+ }
4215
+ .saltTree-scrollingContentContainer {
4216
+ box-sizing: inherit;
4217
+ list-style: none;
4218
+ margin: 0;
4219
+ position: relative;
4220
+ }
4221
+
4222
+ /* src/tree/TreeNode.css */
4223
+ .saltTreeNode {
4224
+ --tree-item-text-color: var(--salt-content-primary-foreground);
4225
+ --tree-item-background: var(--salt-selectable-background);
4226
+ --tree-item-background-hover: var(--salt-selectable-background-hover);
4227
+ --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable));
4228
+ --tree-node-icon-size: 12px;
4229
+ --tree-node-icon-transform: none;
4230
+ --tree-node-paddingLeft: 6px;
4231
+ align-items: flex-start;
4232
+ min-height: var(--tree-node-height, auto);
4233
+ line-height: var(--salt-text-lineHeight);
4234
+ list-style: none;
4235
+ position: relative;
4236
+ text-align: var(--list-item-textAlign);
4237
+ }
4238
+ .saltTreeNode-highlighted {
4239
+ --tree-item-background: var(--salt-selectable-background-hover);
4240
+ }
4241
+ .saltTreeNode-item[aria-selected=true] {
4242
+ background: var(--salt-selectable-background-selected);
4243
+ color: var(--salt-content-primary-foreground);
4244
+ --saltIcon-color: var(--salt-content-primary-foreground);
4245
+ }
4246
+ .saltTreeNode[aria-expanded=true] {
4247
+ --tree-node-icon-transform: rotate(45deg) translate(1px, 1px);
4248
+ }
4249
+ .saltTreeNode-item {
4250
+ align-items: center;
4251
+ background: var(--tree-item-background);
4252
+ display: flex;
4253
+ height: var(--tree-node-height);
4254
+ padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent));
4255
+ position: relative;
4256
+ }
4257
+ .saltTreeNode-toggle {
4258
+ display: inline-block;
4259
+ flex: 0 0 18px;
4260
+ height: var(--tree-node-icon-size);
4261
+ transform: var(--tree-node-icon-transform);
4262
+ transition: transform 0.1s ease;
4263
+ }
4264
+ .saltTreeNode-label {
4265
+ align-items: center;
4266
+ display: inline-flex;
4267
+ height: var(--tree-node-height);
4268
+ }
4269
+ .saltTreeNode-description {
4270
+ align-items: center;
4271
+ display: inline-flex;
4272
+ height: var(--tree-node-height);
4273
+ padding-left: var(--salt-size-unit);
4274
+ }
4275
+ .saltTreeNode[aria-expanded] > .saltTreeNode-label {
4276
+ --checkbox-borderColor: black;
4277
+ --checkbox-borderWidth: 1px;
4278
+ --checkbox-tick: black;
4279
+ --list-svg-toggle: var(--tree-node-collapse);
4280
+ color: var(--list-item-text-color);
4281
+ flex-wrap: nowrap;
4282
+ line-height: var(--tree-node-height);
4283
+ padding: var(--list-item-padding);
4284
+ position: relative;
4285
+ cursor: default;
4286
+ margin: 0;
4287
+ white-space: nowrap;
4288
+ }
4289
+ .saltTreeNode:not([aria-expanded]) {
4290
+ padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));
4291
+ }
4292
+ .saltTreeNode[aria-expanded] > .saltTreeNode-label {
4293
+ padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent));
4294
+ }
4295
+ .saltTreeNode[aria-expanded] {
4296
+ flex-direction: column;
4297
+ }
4298
+ .saltTreeNode[aria-expanded] {
4299
+ flex-direction: column;
4300
+ height: auto;
4301
+ }
4302
+ .saltTreeNode > *[role=group] {
4303
+ padding-left: 0px;
4304
+ }
4305
+ [aria-level="2"] {
4306
+ --tree-node-indent: 24px;
4307
+ }
4308
+ [aria-level="3"] {
4309
+ --tree-node-indent: 36px;
4310
+ }
4311
+ [aria-level="4"] {
4312
+ --tree-node-indent: 48px;
4313
+ }
4314
+ .saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted],
4315
+ .saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child {
4316
+ background: var(--list-background-highlighted);
4317
+ }
4318
+ .saltTree-toggle {
4319
+ cursor: pointer;
4320
+ }
4321
+ .saltTreeNode[aria-selected=true] {
4322
+ --list-item-header-twisty-color: var(--list-item-selected-color);
4323
+ }
4324
+ .saltTreeNode:not(.focusVisible):focus {
4325
+ background: rgba(0, 0, 0, 0.1);
4326
+ }
4327
+ .saltTreeNode:not([aria-expanded]).focusVisible:before,
4328
+ .saltTreeNode[aria-expanded].focusVisible > div:first-child:before {
4329
+ content: "";
4330
+ position: absolute;
4331
+ top: 0px;
4332
+ left: var(--tree-offset-left-focusVisible, 0px);
4333
+ right: 0;
4334
+ bottom: 0px;
4335
+ border: dotted rgb(141, 154, 179) 2px;
4336
+ background: var(--list-background-highlighted);
4337
+ }
4338
+ .saltTreeNode[aria-expanded=false] > *:first-child:after {
4339
+ --list-svg-toggle: var(--tree-node-expand);
4340
+ }
4341
+ .saltTreeNode[aria-expanded=true] > *:first-child:after {
4342
+ transform: var(--tree-node-expanded-transform);
4343
+ }
4344
+ .saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=true],
4345
+ .saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=true] > div:first-child {
4346
+ --checkbox-borderColor: var(--list-item-selected-color);
4347
+ --checkbox-tick: var(--list-item-selected-color);
4348
+ --tree-borderColor-focusVisible: var(--list-item-selected-color);
4349
+ background: var(--list-item-background-active);
4350
+ color: var(--list-item-selected-color);
4351
+ }
4352
+ .with-checkbox .saltTreeNode {
4353
+ padding-left: 28px;
4354
+ }
4355
+ .with-checkbox .saltTreeNode:before {
4356
+ border-style: solid;
4357
+ border-width: var(--checkbox-borderWidth);
4358
+ border-color: var(--checkbox-borderColor);
4359
+ content: "";
4360
+ height: 12px;
4361
+ left: 3px;
4362
+ margin-top: -7px;
4363
+ position: absolute;
4364
+ top: 50%;
4365
+ width: 12px;
4366
+ }
4367
+
4368
+ /* src/window/ElectronWindow.css */
4369
+ .saltWindow {
4370
+ --saltDialog-boxShadow: none;
4371
+ --saltDialog-margin: 0;
4372
+ width: max-content;
4373
+ height: max-content;
4374
+ position: fixed;
4375
+ overflow: hidden;
4376
+ }
4377
+
4378
+ /* src/calendar/internal/CalendarCarousel.css */
4379
+ .saltCalendarCarousel-track {
4380
+ display: grid;
4381
+ grid-auto-flow: column;
4382
+ }
4383
+ .saltCalendarCarousel-track > * {
4384
+ position: absolute;
4385
+ left: 0;
4386
+ width: 100%;
4387
+ }
4388
+ .saltCalendarCarousel-track > :nth-child(2) {
4389
+ position: relative;
4390
+ }
4391
+ .saltCalendarCarousel-shouldAnimate {
4392
+ transition: transform 200ms ease-in-out;
4393
+ }
4394
+
4395
+ /* src/calendar/internal/CalendarDay.css */
4396
+ .saltCalendarDay {
4397
+ --calendar-day-text-color: var(--salt-content-primary-foreground);
4398
+ --calendar-day-background: var(--salt-selectable-background);
4399
+ --calendar-day-background-hover: var(--salt-selectable-background-hover);
4400
+ --calendar-day-text-color-hover: var(--salt-content-primary-foreground);
4401
+ --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);
4402
+ --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);
4403
+ --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);
4404
+ --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);
4405
+ --calendar-day-blocked-background: var(--calendar-day-background);
4406
+ --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);
4407
+ --calendar-day-unselectable-background: var(--calendar-day-background);
4408
+ --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);
4409
+ --calendar-day-selected-background: var(--salt-selectable-background-selected);
4410
+ --calendar-day-selected-text-color: var(--salt-content-primary-foreground);
4411
+ --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);
4412
+ --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);
4413
+ --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);
4414
+ --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);
4415
+ --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);
4416
+ --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);
4417
+ --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);
4418
+ --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);
4419
+ --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);
4420
+ --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);
4421
+ --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground);
4422
+ --calendar-day-focused-outline: var(--salt-focused-outline);
4423
+ --calendar-day-size: var(--salt-size-base);
4424
+ --calendar-day-fontSize: var(--salt-text-fontSize);
4425
+ }
4426
+ .saltCalendarDay {
4427
+ width: var(--calendar-day-size);
4428
+ height: var(--calendar-day-size);
4429
+ color: var(--calendar-day-text-color);
4430
+ background-color: var(--calendar-day-background);
4431
+ font-size: var(--calendar-day-fontSize);
4432
+ border: 0;
4433
+ cursor: pointer;
4434
+ position: relative;
4435
+ display: flex;
4436
+ justify-content: center;
4437
+ align-items: center;
4438
+ }
4439
+ .saltCalendarDay:focus-visible {
4440
+ outline: var(--calendar-day-focused-outline);
4441
+ outline-offset: calc(0px - var(--salt-focused-outlineWidth));
4442
+ }
4443
+ .saltCalendarDay-outOfRange {
4444
+ color: var(--calendar-day-outOfRange-text-color);
4445
+ }
4446
+ .saltCalendarDay:hover {
4447
+ background: var(--calendar-day-background-hover);
4448
+ color: var(--calendar-day-text-color-hover);
4449
+ }
4450
+ .saltCalendarDay-unselectableMedium,
4451
+ .saltCalendarDay-unselectableMedium:hover {
4452
+ color: var(--calendar-day-blocked-text-color);
4453
+ cursor: var(--calendar-day-blocked-cursor);
4454
+ background: var(--calendar-day-blocked-background);
4455
+ }
4456
+ .saltCalendarDay-today {
4457
+ border: 1px solid var(--calendar-day-currentDay-borderColor);
4458
+ }
4459
+ .saltCalendarDay-selectedSpan {
4460
+ background: var(--calendar-day-selectedSpan-background);
4461
+ color: var(--calendar-day-selectedSpan-text-color);
4462
+ }
4463
+ .saltCalendarDay-hoveredSpan,
4464
+ .saltCalendarDay-hoveredSpan:hover {
4465
+ background: var(--calendar-day-hoveredSpan-background);
4466
+ color: var(--calendar-day-hoveredSpan-text-color);
4467
+ }
4468
+ .saltCalendarDay-hoveredOffset,
4469
+ .saltCalendarDay-hoveredOffset:hover {
4470
+ background: var(--calendar-day-hoveredOffset-background);
4471
+ color: var(--calendar-day-hoveredOffset-text-color);
4472
+ }
4473
+ .saltCalendarDay-selected,
4474
+ .saltCalendarDay-selected:hover {
4475
+ background: var(--calendar-day-selected-background);
4476
+ color: var(--calendar-day-selected-text-color);
4477
+ }
4478
+ .saltCalendarDay-selectedStart,
4479
+ .saltCalendarDay-selectedStart:hover {
4480
+ background: var(--calendar-day-selectedStart-background);
4481
+ color: var(--calendar-day-selectedStart-text-color);
4482
+ }
4483
+ .saltCalendarDay-selectedEnd,
4484
+ .saltCalendarDay-selectedEnd:hover {
4485
+ background: var(--calendar-day-selectedEnd-background);
4486
+ color: var(--calendar-day-selectedEnd-text-color);
4487
+ }
4488
+ .saltCalendarDay-selected:focus-visible {
4489
+ outline-color: var(--calendar-day-selected-focused-outlineColor);
4490
+ }
4491
+ .saltCalendarDay-selectedStart:focus-visible {
4492
+ outline-color: var(--calendar-day-selectedStart-focused-outlineColor);
4493
+ }
4494
+ .saltCalendarDay-selectedEnd:focus-visible {
4495
+ outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);
4496
+ }
4497
+ .saltCalendarDay-unselectableLow,
4498
+ .saltCalendarDay-unselectableLow:hover {
4499
+ color: var(--calendar-day-unselectable-text-color);
4500
+ background: var(--calendar-day-unselectable-background);
4501
+ cursor: var(--calendar-day-unselectable-cursor);
4502
+ text-decoration: line-through;
4503
+ }
4504
+ .salt-density-high {
4505
+ --calendar-day-blocked-icon-size: 14px;
4506
+ }
4507
+ .salt-density-medium {
4508
+ --calendar-day-blocked-icon-size: 18px;
4509
+ }
4510
+ .salt-density-low {
4511
+ --calendar-day-blocked-icon-size: 24px;
4512
+ }
4513
+ .salt-density-touch {
4514
+ --calendar-day-blocked-icon-size: 28px;
4515
+ }
4516
+ .saltCalendarDay-blockedIcon {
4517
+ fill: var(--calendar-day-blocked-icon-color);
4518
+ position: absolute;
4519
+ --icon-size: var(--calendar-day-blocked-icon-size);
4520
+ pointer-events: none;
4521
+ line-height: 1.29;
4522
+ }
4523
+ .saltCalendarDay-hidden {
4524
+ visibility: hidden;
4525
+ }
4526
+
4527
+ /* src/calendar/internal/CalendarMonth.css */
4528
+ .saltCalendarMonth-dateGrid {
4529
+ display: grid;
4530
+ grid-template-columns: repeat(7, 1fr);
4531
+ text-align: center;
4532
+ }
4533
+
4534
+ /* src/calendar/internal/CalendarNavigation.css */
4535
+ .salt-density-medium,
4536
+ .salt-density-touch,
4537
+ .salt-density-low {
4538
+ --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);
4539
+ }
4540
+ .salt-density-high {
4541
+ --calendar-navigation-gap: 0px;
4542
+ }
4543
+ .saltCalendarNavigation-hideYearDropdown {
4544
+ --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);
4545
+ }
4546
+ .saltCalendarNavigation {
4547
+ display: grid;
4548
+ grid-template-columns: min-content auto auto min-content;
4549
+ grid-gap: var(--calendar-navigation-gap);
4550
+ }
4551
+ .saltCalendarNavigation-hideYearDropdown {
4552
+ grid-template-columns: min-content auto min-content;
4553
+ }
4554
+
4555
+ /* src/calendar/internal/CalendarWeekHeader.css */
4556
+ .saltCalendarWeekHeader {
4557
+ --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);
4558
+ --calendar-week-header-text-color: var(--salt-content-secondary-foreground);
4559
+ --calendar-week-header-size: var(--salt-size-base);
4560
+ --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));
4561
+ }
4562
+ .saltCalendarWeekHeader {
4563
+ display: grid;
4564
+ grid-template-columns: repeat(7, 1fr);
4565
+ text-align: center;
4566
+ box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);
4567
+ }
4568
+ .saltCalendarWeekHeader-dayOfWeek {
4569
+ width: var(--calendar-week-header-size);
4570
+ height: var(--calendar-week-header-size);
4571
+ color: var(--calendar-week-header-text-color);
4572
+ line-height: var(--calendar-week-header-size);
4573
+ font-size: var(--calendar-week-header-fontSize);
4574
+ }
4575
+
4576
+ /* src/list-deprecated/internal/Highlighter.css */
4577
+ .saltHighlighter-highlight {
4578
+ font-weight: 700;
4579
+ }
4580
+
4581
+ /* src/pill/internal/PillCheckbox.css */
4582
+ .saltPill-checkbox {
4583
+ height: var(--pill-checkbox-size);
4584
+ margin-left: 1px;
4585
+ padding-right: 0;
4586
+ width: var(--pill-checkbox-size);
4587
+ --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);
4588
+ --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);
4589
+ --saltCheckbox-icon-fill: none;
4590
+ --saltCheckbox-icon-fill-checked: none;
4591
+ --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);
4592
+ --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground);
4593
+ }
4594
+
4595
+ /* src/progress/CircularProgress/CircularProgress.css */
4596
+ .saltCircularProgress {
4597
+ color: var(--salt-content-primary-foreground);
4598
+ display: inline-flex;
4599
+ position: relative;
4600
+ }
4601
+ .saltCircularProgress-progressValue {
4602
+ align-items: center;
4603
+ color: var(--salt-content-primary-foreground);
4604
+ display: flex;
4605
+ font-family: var(--salt-text-fontFamily);
4606
+ font-size: var(--salt-text-label-fontSize);
4607
+ font-weight: var(--salt-text-label-fontWeight-strong);
4608
+ height: 100%;
4609
+ justify-content: center;
4610
+ left: 0;
4611
+ position: absolute;
4612
+ width: 100%;
4613
+ }
4614
+ .saltCircularProgress-track {
4615
+ inline-size: calc(var(--salt-size-base) * 3);
4616
+ block-size: calc(var(--salt-size-base) * 3);
4617
+ border-style: var(--salt-track-borderStyle);
4618
+ border-width: var(--salt-size-bar-small);
4619
+ border-radius: calc(var(--salt-size-base) * 3);
4620
+ border-color: var(--salt-palette-neutral-secondary-border);
4621
+ }
4622
+ .saltCircularProgress-bar {
4623
+ inline-size: calc(var(--salt-size-base) * 3);
4624
+ block-size: calc(var(--salt-size-base) * 3);
4625
+ border-style: var(--salt-track-borderStyle);
4626
+ border-width: var(--salt-size-bar-strong);
4627
+ border-radius: calc(var(--salt-size-base) * 3);
4628
+ border-color: var(--salt-accent-background);
4629
+ }
4630
+ .saltCircularProgress-bars {
4631
+ position: absolute;
4632
+ inset-block-start: 0;
4633
+ inset-inline-start: 0;
4634
+ inline-size: 100%;
4635
+ block-size: 100%;
4636
+ }
4637
+ .saltCircularProgress-barOverlayRight,
4638
+ .saltCircularProgress-barOverlayLeft {
4639
+ inline-size: 50%;
4640
+ block-size: 100%;
4641
+ transform-origin: 100% center;
4642
+ transform: rotate(180deg);
4643
+ overflow: hidden;
4644
+ position: absolute;
4645
+ }
4646
+ .saltCircularProgress-barSubOverlayRight,
4647
+ .saltCircularProgress-barSubOverlayLeft {
4648
+ inline-size: 100%;
4649
+ block-size: 100%;
4650
+ transform-origin: 100% center;
4651
+ overflow: hidden;
4652
+ transform: rotate(-180deg);
4653
+ }
4654
+ .saltCircularProgress-barOverlayLeft {
4655
+ transform: rotate(0deg);
4656
+ }
4657
+
4658
+ /* src/progress/LinearProgress/LinearProgress.css */
4659
+ .saltLinearProgress {
4660
+ align-items: center;
4661
+ color: var(--salt-content-primary-foreground);
4662
+ display: flex;
4663
+ min-width: 400px;
4664
+ font-size: var(--linearProgress-fontSize);
4665
+ }
4666
+ .saltLinearProgress-barContainer {
4667
+ background: none;
4668
+ position: relative;
4669
+ width: 100%;
4670
+ overflow: hidden;
4671
+ height: var(--salt-size-bar-strong);
4672
+ }
4673
+ .saltLinearProgress-bar {
4674
+ width: 100%;
4675
+ position: absolute;
4676
+ left: 0;
4677
+ bottom: 0;
4678
+ top: 0;
4679
+ transition: transform 0.2s linear;
4680
+ transform-origin: left;
4681
+ background: var(--salt-accent-background);
4682
+ z-index: 2;
4683
+ }
4684
+ .saltLinearProgress-track {
4685
+ background: var(--salt-palette-neutral-secondary-border);
4686
+ width: 100%;
4687
+ height: var(--salt-size-bar-small);
4688
+ position: absolute;
4689
+ top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);
4690
+ transition: transform 0.2s linear;
4691
+ transform-origin: left;
4692
+ }
4693
+ .saltLinearProgress-progressValue {
4694
+ color: inherit;
4695
+ font-family: var(--salt-text-fontFamily);
4696
+ font-size: var(--salt-text-label-fontSize);
4697
+ font-weight: var(--salt-text-label-fontWeight-strong);
4698
+ margin: 0;
4699
+ white-space: nowrap;
4700
+ padding-left: var(--salt-spacing-100);
4701
+ }
4702
+
4703
+ /* src/stepped-tracker/StepLabel/StepLabel.css */
4704
+ .saltStepLabel {
4705
+ width: 100%;
4706
+ text-align: center;
4707
+ }
4708
+
4709
+ /* src/stepped-tracker/TrackerConnector/TrackerConnector.css */
4710
+ .saltTrackerConnector {
4711
+ --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));
4712
+ --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));
4713
+ --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-palette-neutral-secondary-border));
4714
+ --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));
4715
+ --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));
4716
+ }
4717
+ .saltTrackerConnector {
4718
+ height: 0;
4719
+ border-top-width: var(--trackerConnector-thickness);
4720
+ border-top-style: var(--trackerConnector-style-default);
4721
+ border-top-color: var(--trackerConnector-color);
4722
+ position: absolute;
4723
+ width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
4724
+ left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
4725
+ top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));
4726
+ }
4727
+ .saltTrackerConnector.saltTrackerConnector-active {
4728
+ border-top-style: var(--trackerConnector-style-active);
4729
+ }
4730
+
4731
+ /* src/stepped-tracker/TrackerStep/TrackerStep.css */
4732
+ .saltTrackerStep {
4733
+ --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));
4734
+ --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));
4735
+ --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));
4736
+ --saltIcon-color: var(--trackerStep-icon-color);
4737
+ --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));
4738
+ }
4739
+ .saltTrackerStep {
4740
+ margin: 0;
4741
+ padding: 0;
4742
+ text-indent: 0;
4743
+ list-style-type: none;
4744
+ flex: 1;
4745
+ position: relative;
4746
+ display: flex;
4747
+ align-items: center;
4748
+ flex-direction: column;
4749
+ width: var(--saltTrackerStep-width, 100%);
4750
+ gap: var(--salt-spacing-50);
4751
+ color: var(--salt-content-primary-foreground);
4752
+ font-size: var(--salt-text-label-fontSize);
4753
+ line-height: var(--salt-text-label-lineHeight);
4754
+ padding: 0 var(--salt-spacing-25);
4755
+ }
4756
+ .saltTrackerStep:focus-visible {
4757
+ outline-style: var(--salt-focused-outlineStyle);
4758
+ outline-width: var(--salt-focused-outlineWidth);
4759
+ outline-color: var(--salt-focused-outlineColor);
4760
+ outline-offset: var(--salt-focused-outlineOffset);
4761
+ }
4762
+ .saltTrackerStep .saltTrackerStep-body {
4763
+ width: 100%;
4764
+ display: flex;
4765
+ align-items: center;
4766
+ flex-direction: column;
4767
+ }
4768
+ .saltTrackerStep.saltTrackerStep-active {
4769
+ --trackerStep-icon-color: var(--trackerStep-icon-color-active);
4770
+ }
4771
+ .saltTrackerStep.saltTrackerStep-completed {
4772
+ --trackerStep-icon-color: var(--trackerStep-icon-color-completed);
4773
+ }
4774
+
4775
+ /* src/tabs/drag-drop/Draggable.css */
4776
+ .saltDraggable {
4777
+ background: transparent;
4778
+ box-shadow: var(--salt-overlayable-shadow-drag);
4779
+ cursor: var(--salt-draggable-grab-cursor-active);
4780
+ position: absolute;
4781
+ }
4782
+ .saltDraggable-spacer {
4783
+ display: inline-block;
4784
+ height: var(--tabs-tabstrip-height);
4785
+ transition: width 0.4s ease;
4786
+ width: 0;
4787
+ }
4788
+
4789
+ /* src/tabs/drag-drop/DropIndicator.css */
4790
+ .saltDropIndicator {
4791
+ background: var(--salt-accent-background);
4792
+ cursor: move;
4793
+ position: absolute;
4794
+ transform: translate(-4px, 0);
4795
+ }
4796
+
4797
+ /* src/tokenized-input/internal/InputRuler.css */
4798
+ .saltInputRuler {
4799
+ position: absolute;
4800
+ left: 0;
4801
+ white-space: nowrap;
4802
+ visibility: hidden;
4803
+ overflow: hidden;
4804
+ max-width: 100%;
4805
+ }
4806
+
4807
+ /* src/toolbar/overflow-panel/OverflowPanel.css */
4808
+ .saltOverflowPanel.saltDropdown-popup {
4809
+ background: var(--salt-container-primary-background);
4810
+ border: solid 1px var(--salt-selectable-borderColor-hover);
4811
+ box-shadow: var(--salt-overlayable-shadow-popout);
4812
+ }
4813
+ .saltOverflowPanel-content {
4814
+ --saltButton-justifyContent: flex-start;
4815
+ --saltDropdown-popup-maxHeight: auto;
4816
+ align-items: stretch;
4817
+ color: var(--salt-content-primary-foreground);
4818
+ border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
4819
+ display: flex;
4820
+ flex-direction: column;
4821
+ padding: calc(var(--salt-size-unit) * 1.5) 0;
4822
+ outline: none;
4823
+ }
4824
+ .saltOverflowPanel [aria-expanded=true] {
4825
+ --saltButton-background: var(--salt-actionable-secondary-background-active);
4826
+ --saltButton-background-hover: var(--salt-actionable-secondary-background-active);
4827
+ --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
4828
+ }
4829
+ .saltOverflowPanel.saltDropdown {
4830
+ --saltIcon-margin: 2px 0 0 0px;
4831
+ }
4832
+ .saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {
4833
+ --saltFormFieldLegacy-margin: 0 12px 8px 12px;
4834
+ }
4835
+
4836
+ /* src/toolbar/overflow-panel/OverflowSeparator.css */
4837
+ .saltOverflowSeparator {
4838
+ background: var(--salt-separable-tertiary-borderColor);
4839
+ height: var(--salt-size-border);
4840
+ margin: calc(var(--salt-size-unit) / 2) 0;
4841
+ }
4842
+
4843
+ /* src/f1691297-5c93-439c-b260-ae415a5da7cd.css */