@i-cell/ids-styles 0.0.32 → 0.0.34

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 (88) hide show
  1. package/dist/accordion/accordion.css +11 -0
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +17 -1
  4. package/dist/avatar/avatar.css +11 -0
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +11 -1
  7. package/dist/button/button-group.css +11 -0
  8. package/dist/button/button-group.min.css +1 -1
  9. package/dist/button/button-group.plugin.js +17 -1
  10. package/dist/button/button.css +11 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +11 -1
  13. package/dist/card/card.css +11 -0
  14. package/dist/card/card.min.css +1 -1
  15. package/dist/card/card.plugin.js +14 -1
  16. package/dist/checkbox/checkbox.css +11 -0
  17. package/dist/checkbox/checkbox.min.css +1 -1
  18. package/dist/checkbox/checkbox.plugin.js +16 -1
  19. package/dist/components.css +635 -105
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +741 -178
  22. package/dist/dialog/dialog.css +15 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +16 -9
  25. package/dist/divider/divider.css +11 -0
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +16 -1
  28. package/dist/form-elements/fieldset/fieldset.css +11 -0
  29. package/dist/form-elements/fieldset/fieldset.min.css +1 -1
  30. package/dist/form-elements/fieldset/fieldset.plugin.js +10 -2
  31. package/dist/form-elements/form-field/form-field.css +11 -0
  32. package/dist/form-elements/form-field/form-field.min.css +1 -1
  33. package/dist/form-elements/form-field/form-field.plugin.js +16 -1
  34. package/dist/form-elements/message/message.css +11 -0
  35. package/dist/form-elements/message/message.min.css +1 -1
  36. package/dist/form-elements/message/message.plugin.js +17 -1
  37. package/dist/icon/icon.css +11 -0
  38. package/dist/icon/icon.min.css +1 -1
  39. package/dist/icon/icon.plugin.js +11 -0
  40. package/dist/icon-button/icon-button.css +11 -0
  41. package/dist/icon-button/icon-button.min.css +1 -1
  42. package/dist/icon-button/icon-button.plugin.js +11 -1
  43. package/dist/menu-item/menu-item.css +252 -11
  44. package/dist/menu-item/menu-item.min.css +1 -1
  45. package/dist/menu-item/menu-item.plugin.js +247 -11
  46. package/dist/notification/notification.css +13 -0
  47. package/dist/notification/notification.min.css +1 -1
  48. package/dist/notification/notification.plugin.js +13 -0
  49. package/dist/overlay-panel/overlay-panel.css +11 -0
  50. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  51. package/dist/overlay-panel/overlay-panel.plugin.js +16 -1
  52. package/dist/paginator/paginator.css +11 -0
  53. package/dist/paginator/paginator.min.css +1 -1
  54. package/dist/paginator/paginator.plugin.js +14 -1
  55. package/dist/radio/radio.css +11 -0
  56. package/dist/radio/radio.min.css +1 -1
  57. package/dist/radio/radio.plugin.js +16 -1
  58. package/dist/reset.css +0 -0
  59. package/dist/reset.min.css +0 -0
  60. package/dist/reset.plugin.js +8 -0
  61. package/dist/segmented-control/segmented-control.css +11 -0
  62. package/dist/segmented-control/segmented-control.min.css +1 -1
  63. package/dist/segmented-control/segmented-control.plugin.js +13 -1
  64. package/dist/segmented-control-toggle/segmented-control-toggle.css +11 -0
  65. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  66. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +13 -1
  67. package/dist/select/select.css +11 -0
  68. package/dist/select/select.min.css +1 -1
  69. package/dist/select/select.plugin.js +14 -1
  70. package/dist/snackbar/snackbar.css +11 -0
  71. package/dist/snackbar/snackbar.min.css +1 -1
  72. package/dist/snackbar/snackbar.plugin.js +10 -1
  73. package/dist/switch/switch.css +11 -0
  74. package/dist/switch/switch.min.css +1 -1
  75. package/dist/switch/switch.plugin.js +15 -1
  76. package/dist/tab/tab.css +102 -92
  77. package/dist/tab/tab.min.css +1 -1
  78. package/dist/tab/tab.plugin.js +141 -135
  79. package/dist/table/table.css +11 -1
  80. package/dist/table/table.min.css +1 -1
  81. package/dist/table/table.plugin.js +16 -1
  82. package/dist/tag/tag.css +11 -0
  83. package/dist/tag/tag.min.css +1 -1
  84. package/dist/tag/tag.plugin.js +16 -1
  85. package/dist/tooltip/tooltip.css +11 -0
  86. package/dist/tooltip/tooltip.min.css +1 -1
  87. package/dist/tooltip/tooltip.plugin.js +14 -1
  88. package/package.json +3 -3
package/dist/menu-item/menu-item.plugin.js CHANGED
@@ -2,15 +2,41 @@
2
2
  module.exports = function MenuItemPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-menu-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
5
+ 'a.ids-menu-item:link,a.ids-menu-item:visited': { textDecoration: 'none' },
6
+ '.ids-menu-item': {
7
+ boxSizing: ['border-box', 'border-box'],
8
+ borderWidth: '0',
9
+ borderStyle: 'none',
10
+ borderColor: 'rgba(0,0,0,0)',
11
+ lineHeight: 1.5,
12
+ width: '100%',
13
+ display: 'inline-flex',
14
+ flexShrink: 0,
15
+ alignItems: 'center',
16
+ },
17
+ '.ids-menu-item::before,.ids-menu-item::after,.ids-menu-item *,.ids-menu-item ::before,.ids-menu-item ::after': {
18
+ boxSizing: 'border-box',
19
+ borderWidth: '0',
20
+ borderStyle: 'none',
21
+ borderColor: 'rgba(0,0,0,0)',
22
+ },
23
+ '.ids-menu-item.ids-menu-item-no-label': { justifyContent: 'space-between' },
6
24
  '.ids-menu-item .ids-menu-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
7
- '.ids-menu-item:not(:disabled)': { cursor: 'pointer' },
8
- '.ids-menu-item:disabled': { cursor: 'not-allowed' },
25
+ '.ids-menu-item .ids-menu-item-label--wrapper': {
26
+ display: 'flex',
27
+ flex: '1 1 0',
28
+ alignItems: 'center',
29
+ justifyContent: 'flex-start',
30
+ },
31
+ '.ids-menu-item:not(:is(:disabled,.ids-menu-item-disabled))': { cursor: 'pointer' },
32
+ '.ids-menu-item:is(:disabled,.ids-menu-item-disabled)': { cursor: 'not-allowed' },
9
33
  '.ids-menu-item.ids-menu-item-compact': {
10
34
  gap: 'var(--ids-comp-menu-item-size-gap-compact)',
11
35
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-compact)',
12
36
  padding: 'var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact)',
13
37
  height: 'var(--ids-comp-menu-item-size-height-compact)',
38
+ },
39
+ '.ids-menu-item.ids-menu-item-compact>.ids-menu-item-label--wrapper>.ids-menu-item-label': {
14
40
  fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-compact)',
15
41
  fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-compact)',
16
42
  fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-compact)',
@@ -32,9 +58,20 @@ module.exports = function MenuItemPlugin() {
32
58
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover': {
33
59
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
34
60
  },
35
- '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled': {
61
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
36
62
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
37
63
  },
64
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light': {
65
+ borderStyle: 'solid',
66
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
67
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
68
+ },
69
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:hover': {
70
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
71
+ },
72
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
73
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
74
+ },
38
75
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface': {
39
76
  borderStyle: 'solid',
40
77
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
@@ -43,14 +80,27 @@ module.exports = function MenuItemPlugin() {
43
80
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover': {
44
81
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
45
82
  },
46
- '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled': {
83
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
47
84
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
48
85
  },
86
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light': {
87
+ borderStyle: 'solid',
88
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
89
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
90
+ },
91
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:hover': {
92
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
93
+ },
94
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
95
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
96
+ },
49
97
  '.ids-menu-item.ids-menu-item-comfortable': {
50
98
  gap: 'var(--ids-comp-menu-item-size-gap-comfortable)',
51
99
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-comfortable)',
52
100
  padding: 'var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable)',
53
101
  height: 'var(--ids-comp-menu-item-size-height-comfortable)',
102
+ },
103
+ '.ids-menu-item.ids-menu-item-comfortable>.ids-menu-item-label--wrapper>.ids-menu-item-label': {
54
104
  fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-comfortable)',
55
105
  fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-comfortable)',
56
106
  fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-comfortable)',
@@ -72,9 +122,20 @@ module.exports = function MenuItemPlugin() {
72
122
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover': {
73
123
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
74
124
  },
75
- '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled': {
125
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
76
126
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
77
127
  },
128
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light': {
129
+ borderStyle: 'solid',
130
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
131
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
132
+ },
133
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:hover': {
134
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
135
+ },
136
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
137
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
138
+ },
78
139
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface': {
79
140
  borderStyle: 'solid',
80
141
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
@@ -83,14 +144,27 @@ module.exports = function MenuItemPlugin() {
83
144
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover': {
84
145
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
85
146
  },
86
- '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled': {
147
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
87
148
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
88
149
  },
150
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light': {
151
+ borderStyle: 'solid',
152
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
153
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
154
+ },
155
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:hover': {
156
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
157
+ },
158
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
159
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
160
+ },
89
161
  '.ids-menu-item.ids-menu-item-spacious': {
90
162
  gap: 'var(--ids-comp-menu-item-size-gap-spacious)',
91
163
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-spacious)',
92
164
  padding: 'var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious)',
93
165
  height: 'var(--ids-comp-menu-item-size-height-spacious)',
166
+ },
167
+ '.ids-menu-item.ids-menu-item-spacious>.ids-menu-item-label--wrapper>.ids-menu-item-label': {
94
168
  fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-spacious)',
95
169
  fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-spacious)',
96
170
  fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-spacious)',
@@ -112,9 +186,20 @@ module.exports = function MenuItemPlugin() {
112
186
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover': {
113
187
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
114
188
  },
115
- '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled': {
189
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
116
190
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
117
191
  },
192
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light': {
193
+ borderStyle: 'solid',
194
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
195
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
196
+ },
197
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:hover': {
198
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
199
+ },
200
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
201
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
202
+ },
118
203
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface': {
119
204
  borderStyle: 'solid',
120
205
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
@@ -123,9 +208,84 @@ module.exports = function MenuItemPlugin() {
123
208
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover': {
124
209
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
125
210
  },
126
- '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled': {
211
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
212
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
213
+ },
214
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light': {
215
+ borderStyle: 'solid',
216
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
217
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
218
+ },
219
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:hover': {
220
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
221
+ },
222
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
223
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
224
+ },
225
+ '.ids-menu-item.ids-menu-item-dense': {
226
+ gap: 'var(--ids-comp-menu-item-size-gap-dense)',
227
+ borderRadius: 'var(--ids-comp-menu-item-size-border-radius-dense)',
228
+ padding: 'var(--ids-comp-menu-item-size-padding-y-dense) var(--ids-comp-menu-item-size-padding-x-dense)',
229
+ height: 'var(--ids-comp-menu-item-size-height-dense)',
230
+ },
231
+ '.ids-menu-item.ids-menu-item-dense>.ids-menu-item-label--wrapper>.ids-menu-item-label': {
232
+ fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-dense)',
233
+ fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-dense)',
234
+ fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-dense)',
235
+ letterSpacing: 'var(--ids-comp-menu-item-label-typography-letter-spacing-dense)',
236
+ lineHeight: 'var(--ids-comp-menu-item-label-typography-line-height-dense)',
237
+ },
238
+ '.ids-menu-item.ids-menu-item-dense .ids-icon': {
239
+ width: 'var(--ids-comp-menu-item-size-icon-dense)',
240
+ height: 'var(--ids-comp-menu-item-size-icon-dense)',
241
+ fontSize: 'var(--ids-comp-menu-item-icon-typography-font-size-dense)',
242
+ fontWeight: 'var(--ids-comp-menu-item-icon-typography-font-weight-dense)',
243
+ lineHeight: 'var(--ids-comp-menu-item-icon-typography-line-height-dense)',
244
+ },
245
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface': {
246
+ borderStyle: 'solid',
247
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-dense)',
248
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-default)',
249
+ },
250
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:hover': {
251
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
252
+ },
253
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
254
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
255
+ },
256
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light': {
257
+ borderStyle: 'solid',
258
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-dense)',
259
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
260
+ },
261
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:hover': {
262
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
263
+ },
264
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
265
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
266
+ },
267
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface': {
268
+ borderStyle: 'solid',
269
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-dense)',
270
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-default)',
271
+ },
272
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:hover': {
273
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
274
+ },
275
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
127
276
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
128
277
  },
278
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light': {
279
+ borderStyle: 'solid',
280
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-dense)',
281
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
282
+ },
283
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:hover': {
284
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
285
+ },
286
+ '.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
287
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
288
+ },
129
289
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface': {
130
290
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-default)',
131
291
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-default)',
@@ -146,10 +306,33 @@ module.exports = function MenuItemPlugin() {
146
306
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active': {
147
307
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-pressed)',
148
308
  },
149
- '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled': {
309
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
150
310
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-disabled)',
151
311
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-disabled)',
152
312
  },
313
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light': {
314
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-default)',
315
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-default)',
316
+ },
317
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active': {
318
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-active)',
319
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-active)',
320
+ },
321
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover': {
322
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-hovered)',
323
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-hovered)',
324
+ },
325
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible': {
326
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-focused)',
327
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-focused)',
328
+ },
329
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active': {
330
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-pressed)',
331
+ },
332
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
333
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-disabled)',
334
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-disabled)',
335
+ },
153
336
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface': {
154
337
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-default)',
155
338
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-default)',
@@ -170,10 +353,63 @@ module.exports = function MenuItemPlugin() {
170
353
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active': {
171
354
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-pressed)',
172
355
  },
173
- '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled': {
356
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
174
357
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
175
358
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-disabled)',
176
359
  },
360
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light': {
361
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-default)',
362
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-default)',
363
+ },
364
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active': {
365
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-active)',
366
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-active)',
367
+ },
368
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover': {
369
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-hovered)',
370
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-hovered)',
371
+ },
372
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible':
373
+ {
374
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-focused)',
375
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-focused)',
376
+ },
377
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active': {
378
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-pressed)',
379
+ },
380
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
381
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-disabled)',
382
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-disabled)',
383
+ },
384
+ '.ids-active-indicator': { display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' },
385
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item)::after': {
386
+ content: '""',
387
+ position: 'absolute',
388
+ width: '100%',
389
+ bottom: '0',
390
+ },
391
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-compact)::after': {
392
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-compact)',
393
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-compact)',
394
+ },
395
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-comfortable)::after': {
396
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-comfortable)',
397
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-comfortable)',
398
+ },
399
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-spacious)::after': {
400
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-spacious)',
401
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-spacious)',
402
+ },
403
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-dense)::after': {
404
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-dense)',
405
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-dense)',
406
+ },
407
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-surface)::after': {
408
+ backgroundColor: 'var(--ids-comp-menu-item-active-indicator-color-bg-surface-default)',
409
+ },
410
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-light)::after': {
411
+ backgroundColor: 'var(--ids-comp-menu-item-active-indicator-color-bg-light-default)',
412
+ },
177
413
  };
178
414
 
179
415
  addComponents(cssObj);
package/dist/notification/notification.css CHANGED
@@ -1,3 +1,16 @@
1
+ .ids-notification {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
7
+ }
8
+ .ids-notification::before, .ids-notification::after, .ids-notification *, .ids-notification ::before, .ids-notification ::after {
9
+ box-sizing: border-box;
10
+ border-width: 0;
11
+ border-style: none;
12
+ border-color: transparent;
13
+ }
1
14
  .ids-notification > .ids-notification__content-wrapper {
2
15
  display: flex;
3
16
  justify-content: space-between;
package/dist/notification/notification.min.css CHANGED
@@ -1 +1 @@
1
- .ids-notification>.ids-notification__content-wrapper{display:flex;justify-content:space-between;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-style:solid}.ids-notification>.ids-notification__content-wrapper>.ids-notification__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container{display:flex;justify-content:space-between;align-content:center;flex:1 0 0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{display:flex;flex-direction:column}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{flex:1 0 0;font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button{display:flex;align-self:center}.ids-notification.ids-notification-actions-bottom-mode>.ids-notification__content-wrapper>.ids-notification__container{flex-direction:column;align-items:flex-start}.ids-notification:not(.ids-notification-actions-bottom-mode)>.ids-notification__content-wrapper>.ids-notification__container{align-items:center}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-error-default);background:var(--ids-comp-notification-filled-color-bg-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-error-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-success-default);background:var(--ids-comp-notification-filled-color-bg-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-success-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-warning-default);background:var(--ids-comp-notification-filled-color-bg-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-warning-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-light-default);background:var(--ids-comp-notification-filled-color-bg-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-light-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-dark-default);background:var(--ids-comp-notification-filled-color-bg-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-dark-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-surface-default);background:var(--ids-comp-notification-filled-color-bg-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-surface-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-info-default);background:var(--ids-comp-notification-filled-color-bg-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-info-default)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-compact);padding:var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-compact)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-compact)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-comfortable);padding:var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-spacious);padding:var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-dense);padding:var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-dense)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-error-default);background:var(--ids-comp-notification-outlined-color-bg-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-error-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-success-default);background:var(--ids-comp-notification-outlined-color-bg-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-success-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-warning-default);background:var(--ids-comp-notification-outlined-color-bg-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-light-default);background:var(--ids-comp-notification-outlined-color-bg-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-light-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-dark-default);background:var(--ids-comp-notification-outlined-color-bg-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-surface-default);background:var(--ids-comp-notification-outlined-color-bg-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-info-default);background:var(--ids-comp-notification-outlined-color-bg-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-info-default)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-compact);padding:var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-comfortable);padding:var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-spacious);padding:var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-dense);padding:var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-dense)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-compact);padding-right:var(--ids-comp-notification-icon-size-padding-right-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-compact);height:var(--ids-comp-notification-icon-size-icon-compact);font-size:var(--ids-comp-notification-icon-typography-font-size-compact);font-weight:var(--ids-comp-notification-icon-typography-font-weight-compact);line-height:var(--ids-comp-notification-icon-typography-line-height-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-compact);gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-compact);font-weight:var(--ids-comp-notification-title-typography-font-weight-compact);line-height:var(--ids-comp-notification-title-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-compact);font-weight:var(--ids-comp-notification-message-typography-font-weight-compact);line-height:var(--ids-comp-notification-message-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-compact);height:var(--ids-comp-notification-icon-button-size-icon-button-compact)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-notification-icon-size-padding-right-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-comfortable);height:var(--ids-comp-notification-icon-size-icon-comfortable);font-size:var(--ids-comp-notification-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-icon-typography-line-height-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-comfortable);gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-title-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-message-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-comfortable);height:var(--ids-comp-notification-icon-button-size-icon-button-comfortable)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-spacious);padding-right:var(--ids-comp-notification-icon-size-padding-right-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-spacious);height:var(--ids-comp-notification-icon-size-icon-spacious);font-size:var(--ids-comp-notification-icon-typography-font-size-spacious);font-weight:var(--ids-comp-notification-icon-typography-font-weight-spacious);line-height:var(--ids-comp-notification-icon-typography-line-height-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-spacious);gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-spacious);font-weight:var(--ids-comp-notification-title-typography-font-weight-spacious);line-height:var(--ids-comp-notification-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-spacious);font-weight:var(--ids-comp-notification-message-typography-font-weight-spacious);line-height:var(--ids-comp-notification-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-spacious);height:var(--ids-comp-notification-icon-button-size-icon-button-spacious)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-dense);padding-right:var(--ids-comp-notification-icon-size-padding-right-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-dense);height:var(--ids-comp-notification-icon-size-icon-dense);font-size:var(--ids-comp-notification-icon-typography-font-size-dense);font-weight:var(--ids-comp-notification-icon-typography-font-weight-dense);line-height:var(--ids-comp-notification-icon-typography-line-height-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-dense);gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-dense);font-weight:var(--ids-comp-notification-title-typography-font-weight-dense);line-height:var(--ids-comp-notification-title-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-dense);font-weight:var(--ids-comp-notification-message-typography-font-weight-dense);line-height:var(--ids-comp-notification-message-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-dense);height:var(--ids-comp-notification-icon-button-size-icon-button-dense)}
1
+ .ids-notification{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-notification::before,.ids-notification::after,.ids-notification *,.ids-notification ::before,.ids-notification ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-notification>.ids-notification__content-wrapper{display:flex;justify-content:space-between;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-style:solid}.ids-notification>.ids-notification__content-wrapper>.ids-notification__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container{display:flex;justify-content:space-between;align-content:center;flex:1 0 0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{display:flex;flex-direction:column}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{flex:1 0 0;font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button{display:flex;align-self:center}.ids-notification.ids-notification-actions-bottom-mode>.ids-notification__content-wrapper>.ids-notification__container{flex-direction:column;align-items:flex-start}.ids-notification:not(.ids-notification-actions-bottom-mode)>.ids-notification__content-wrapper>.ids-notification__container{align-items:center}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-error-default);background:var(--ids-comp-notification-filled-color-bg-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-error-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-success-default);background:var(--ids-comp-notification-filled-color-bg-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-success-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-warning-default);background:var(--ids-comp-notification-filled-color-bg-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-warning-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-light-default);background:var(--ids-comp-notification-filled-color-bg-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-light-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-dark-default);background:var(--ids-comp-notification-filled-color-bg-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-dark-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-surface-default);background:var(--ids-comp-notification-filled-color-bg-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-surface-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-info-default);background:var(--ids-comp-notification-filled-color-bg-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-info-default)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-compact);padding:var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-compact)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-compact)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-comfortable);padding:var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-spacious);padding:var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-dense);padding:var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-dense)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-error-default);background:var(--ids-comp-notification-outlined-color-bg-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-error-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-success-default);background:var(--ids-comp-notification-outlined-color-bg-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-success-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-warning-default);background:var(--ids-comp-notification-outlined-color-bg-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-light-default);background:var(--ids-comp-notification-outlined-color-bg-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-light-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-dark-default);background:var(--ids-comp-notification-outlined-color-bg-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-surface-default);background:var(--ids-comp-notification-outlined-color-bg-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-info-default);background:var(--ids-comp-notification-outlined-color-bg-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-info-default)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-compact);padding:var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-comfortable);padding:var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-spacious);padding:var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-dense);padding:var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-dense)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-compact);padding-right:var(--ids-comp-notification-icon-size-padding-right-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-compact);height:var(--ids-comp-notification-icon-size-icon-compact);font-size:var(--ids-comp-notification-icon-typography-font-size-compact);font-weight:var(--ids-comp-notification-icon-typography-font-weight-compact);line-height:var(--ids-comp-notification-icon-typography-line-height-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-compact);gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-compact);font-weight:var(--ids-comp-notification-title-typography-font-weight-compact);line-height:var(--ids-comp-notification-title-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-compact);font-weight:var(--ids-comp-notification-message-typography-font-weight-compact);line-height:var(--ids-comp-notification-message-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-compact);height:var(--ids-comp-notification-icon-button-size-icon-button-compact)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-notification-icon-size-padding-right-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-comfortable);height:var(--ids-comp-notification-icon-size-icon-comfortable);font-size:var(--ids-comp-notification-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-icon-typography-line-height-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-comfortable);gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-title-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-message-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-comfortable);height:var(--ids-comp-notification-icon-button-size-icon-button-comfortable)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-spacious);padding-right:var(--ids-comp-notification-icon-size-padding-right-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-spacious);height:var(--ids-comp-notification-icon-size-icon-spacious);font-size:var(--ids-comp-notification-icon-typography-font-size-spacious);font-weight:var(--ids-comp-notification-icon-typography-font-weight-spacious);line-height:var(--ids-comp-notification-icon-typography-line-height-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-spacious);gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-spacious);font-weight:var(--ids-comp-notification-title-typography-font-weight-spacious);line-height:var(--ids-comp-notification-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-spacious);font-weight:var(--ids-comp-notification-message-typography-font-weight-spacious);line-height:var(--ids-comp-notification-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-spacious);height:var(--ids-comp-notification-icon-button-size-icon-button-spacious)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-dense);padding-right:var(--ids-comp-notification-icon-size-padding-right-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-dense);height:var(--ids-comp-notification-icon-size-icon-dense);font-size:var(--ids-comp-notification-icon-typography-font-size-dense);font-weight:var(--ids-comp-notification-icon-typography-font-weight-dense);line-height:var(--ids-comp-notification-icon-typography-line-height-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-dense);gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-dense);font-weight:var(--ids-comp-notification-title-typography-font-weight-dense);line-height:var(--ids-comp-notification-title-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-dense);font-weight:var(--ids-comp-notification-message-typography-font-weight-dense);line-height:var(--ids-comp-notification-message-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-dense);height:var(--ids-comp-notification-icon-button-size-icon-button-dense)}
package/dist/notification/notification.plugin.js CHANGED
@@ -2,6 +2,19 @@
2
2
  module.exports = function NotificationPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
+ '.ids-notification': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: '0',
8
+ borderStyle: 'none',
9
+ borderColor: 'rgba(0,0,0,0)',
10
+ lineHeight: 1.5,
11
+ },
12
+ '.ids-notification::before,.ids-notification::after,.ids-notification *,.ids-notification ::before,.ids-notification ::after': {
13
+ boxSizing: 'border-box',
14
+ borderWidth: '0',
15
+ borderStyle: 'none',
16
+ borderColor: 'rgba(0,0,0,0)',
17
+ },
5
18
  '.ids-notification>.ids-notification__content-wrapper': {
6
19
  display: 'flex',
7
20
  justifyContent: 'space-between',
package/dist/overlay-panel/overlay-panel.css CHANGED
@@ -1,9 +1,20 @@
1
1
  .ids-overlay-panel {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
2
7
  display: flex;
3
8
  flex-direction: column;
4
9
  align-items: flex-start;
5
10
  box-sizing: border-box;
6
11
  }
12
+ .ids-overlay-panel::before, .ids-overlay-panel::after, .ids-overlay-panel *, .ids-overlay-panel ::before, .ids-overlay-panel ::after {
13
+ box-sizing: border-box;
14
+ border-width: 0;
15
+ border-style: none;
16
+ border-color: transparent;
17
+ }
7
18
  .ids-overlay-panel.ids-overlay-panel-compact {
8
19
  gap: var(--ids-comp-overlay-panel-size-gap-compact);
9
20
  padding: var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);
package/dist/overlay-panel/overlay-panel.min.css CHANGED
@@ -1 +1 @@
1
- .ids-overlay-panel{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible{outline-style:none !important}
1
+ .ids-overlay-panel{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel::before,.ids-overlay-panel::after,.ids-overlay-panel *,.ids-overlay-panel ::before,.ids-overlay-panel ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible{outline-style:none !important}