@i-cell/ids-styles 0.0.20 → 0.0.22

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 (7) hide show
  1. package/dist/components.css +467 -0
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +426 -0
  4. package/dist/notification/notification.css +466 -0
  5. package/dist/notification/notification.min.css +1 -0
  6. package/dist/notification/notification.plugin.js +435 -0
  7. package/package.json +1 -1
package/dist/notification/notification.css ADDED
@@ -0,0 +1,466 @@
1
+ .ids-notification > .ids-notification__content-wrapper {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: flex-start;
5
+ align-content: flex-start;
6
+ flex-wrap: wrap;
7
+ border-style: solid;
8
+ }
9
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__leading-element {
10
+ display: flex;
11
+ align-items: center;
12
+ flex-shrink: 0;
13
+ }
14
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__container {
15
+ display: flex;
16
+ justify-content: space-between;
17
+ align-items: center;
18
+ align-content: center;
19
+ flex: 1 0 0;
20
+ flex-wrap: wrap;
21
+ }
22
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
23
+ display: flex;
24
+ flex-direction: column;
25
+ }
26
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
27
+ font-style: normal;
28
+ }
29
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
30
+ flex: 1 0 0;
31
+ font-style: normal;
32
+ }
33
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-btn-container.ids-notification__label-btn {
38
+ display: flex;
39
+ align-self: center;
40
+ }
41
+ .ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper {
42
+ border-color: var(--ids-comp-notification-filled-color-border-error-default);
43
+ background: var(--ids-comp-notification-filled-color-bg-error-default);
44
+ }
45
+ .ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
46
+ color: var(--ids-comp-notification-filled-color-fg-icon-error-default);
47
+ }
48
+ .ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
49
+ color: var(--ids-comp-notification-filled-color-fg-title-error-default);
50
+ }
51
+ .ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
52
+ color: var(--ids-comp-notification-filled-color-fg-message-error-default);
53
+ }
54
+ .ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper {
55
+ border-color: var(--ids-comp-notification-filled-color-border-success-default);
56
+ background: var(--ids-comp-notification-filled-color-bg-success-default);
57
+ }
58
+ .ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
59
+ color: var(--ids-comp-notification-filled-color-fg-icon-success-default);
60
+ }
61
+ .ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
62
+ color: var(--ids-comp-notification-filled-color-fg-title-success-default);
63
+ }
64
+ .ids-notification.ids-notification-filled.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
65
+ color: var(--ids-comp-notification-filled-color-fg-message-success-default);
66
+ }
67
+ .ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper {
68
+ border-color: var(--ids-comp-notification-filled-color-border-warning-default);
69
+ background: var(--ids-comp-notification-filled-color-bg-warning-default);
70
+ }
71
+ .ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
72
+ color: var(--ids-comp-notification-filled-color-fg-icon-warning-default);
73
+ }
74
+ .ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
75
+ color: var(--ids-comp-notification-filled-color-fg-title-warning-default);
76
+ }
77
+ .ids-notification.ids-notification-filled.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
78
+ color: var(--ids-comp-notification-filled-color-fg-message-warning-default);
79
+ }
80
+ .ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper {
81
+ border-color: var(--ids-comp-notification-filled-color-border-light-default);
82
+ background: var(--ids-comp-notification-filled-color-bg-light-default);
83
+ }
84
+ .ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
85
+ color: var(--ids-comp-notification-filled-color-fg-icon-light-default);
86
+ }
87
+ .ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
88
+ color: var(--ids-comp-notification-filled-color-fg-title-light-default);
89
+ }
90
+ .ids-notification.ids-notification-filled.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
91
+ color: var(--ids-comp-notification-filled-color-fg-message-light-default);
92
+ }
93
+ .ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper {
94
+ border-color: var(--ids-comp-notification-filled-color-border-dark-default);
95
+ background: var(--ids-comp-notification-filled-color-bg-dark-default);
96
+ }
97
+ .ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
98
+ color: var(--ids-comp-notification-filled-color-fg-icon-dark-default);
99
+ }
100
+ .ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
101
+ color: var(--ids-comp-notification-filled-color-fg-title-dark-default);
102
+ }
103
+ .ids-notification.ids-notification-filled.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
104
+ color: var(--ids-comp-notification-filled-color-fg-message-dark-default);
105
+ }
106
+ .ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper {
107
+ border-color: var(--ids-comp-notification-filled-color-border-surface-default);
108
+ background: var(--ids-comp-notification-filled-color-bg-surface-default);
109
+ }
110
+ .ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
111
+ color: var(--ids-comp-notification-filled-color-fg-icon-surface-default);
112
+ }
113
+ .ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
114
+ color: var(--ids-comp-notification-filled-color-fg-title-surface-default);
115
+ }
116
+ .ids-notification.ids-notification-filled.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
117
+ color: var(--ids-comp-notification-filled-color-fg-message-surface-default);
118
+ }
119
+ .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper {
120
+ border-color: var(--ids-comp-notification-filled-color-border-info-default);
121
+ background: var(--ids-comp-notification-filled-color-bg-info-default);
122
+ }
123
+ .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
124
+ color: var(--ids-comp-notification-filled-color-fg-icon-info-default);
125
+ }
126
+ .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
127
+ color: var(--ids-comp-notification-filled-color-fg-title-info-default);
128
+ }
129
+ .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
130
+ color: var(--ids-comp-notification-filled-color-fg-message-info-default);
131
+ }
132
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper {
133
+ gap: var(--ids-comp-notification-filled-container-size-gap-compact);
134
+ padding: var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);
135
+ border-radius: var(--ids-comp-notification-filled-container-size-border-radius-compact);
136
+ border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-compact);
137
+ border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-compact);
138
+ border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);
139
+ border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-compact);
140
+ }
141
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
142
+ min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
143
+ }
144
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
145
+ gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
146
+ padding: var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);
147
+ border-radius: var(--ids-comp-notification-filled-container-size-border-radius-comfortable);
148
+ border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);
149
+ border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);
150
+ border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);
151
+ border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-comfortable);
152
+ }
153
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
154
+ min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
155
+ }
156
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
157
+ gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
158
+ padding: var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);
159
+ border-radius: var(--ids-comp-notification-filled-container-size-border-radius-spacious);
160
+ border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-spacious);
161
+ border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-spacious);
162
+ border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);
163
+ border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-spacious);
164
+ }
165
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
166
+ min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
167
+ }
168
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
169
+ gap: var(--ids-comp-notification-filled-container-size-gap-dense);
170
+ padding: var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);
171
+ border-radius: var(--ids-comp-notification-filled-container-size-border-radius-dense);
172
+ border-top-width: var(--ids-comp-notification-filled-container-size-border-top-width-dense);
173
+ border-right-width: var(--ids-comp-notification-filled-container-size-border-right-width-dense);
174
+ border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);
175
+ border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-dense);
176
+ }
177
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
178
+ min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
179
+ }
180
+ .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
181
+ border-color: var(--ids-comp-notification-outlined-color-border-error-default);
182
+ background: var(--ids-comp-notification-outlined-color-bg-error-default);
183
+ }
184
+ .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
185
+ color: var(--ids-comp-notification-outlined-color-fg-icon-error-default);
186
+ }
187
+ .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
188
+ color: var(--ids-comp-notification-outlined-color-fg-title-error-default);
189
+ }
190
+ .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
191
+ color: var(--ids-comp-notification-outlined-color-fg-message-error-default);
192
+ }
193
+ .ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper {
194
+ border-color: var(--ids-comp-notification-outlined-color-border-success-default);
195
+ background: var(--ids-comp-notification-outlined-color-bg-success-default);
196
+ }
197
+ .ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
198
+ color: var(--ids-comp-notification-outlined-color-fg-icon-success-default);
199
+ }
200
+ .ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
201
+ color: var(--ids-comp-notification-outlined-color-fg-title-success-default);
202
+ }
203
+ .ids-notification.ids-notification-outlined.ids-notification-success > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
204
+ color: var(--ids-comp-notification-outlined-color-fg-message-success-default);
205
+ }
206
+ .ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper {
207
+ border-color: var(--ids-comp-notification-outlined-color-border-warning-default);
208
+ background: var(--ids-comp-notification-outlined-color-bg-warning-default);
209
+ }
210
+ .ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
211
+ color: var(--ids-comp-notification-outlined-color-fg-icon-warning-default);
212
+ }
213
+ .ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
214
+ color: var(--ids-comp-notification-outlined-color-fg-title-warning-default);
215
+ }
216
+ .ids-notification.ids-notification-outlined.ids-notification-warning > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
217
+ color: var(--ids-comp-notification-outlined-color-fg-message-warning-default);
218
+ }
219
+ .ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper {
220
+ border-color: var(--ids-comp-notification-outlined-color-border-light-default);
221
+ background: var(--ids-comp-notification-outlined-color-bg-light-default);
222
+ }
223
+ .ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
224
+ color: var(--ids-comp-notification-outlined-color-fg-icon-light-default);
225
+ }
226
+ .ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
227
+ color: var(--ids-comp-notification-outlined-color-fg-title-light-default);
228
+ }
229
+ .ids-notification.ids-notification-outlined.ids-notification-light > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
230
+ color: var(--ids-comp-notification-outlined-color-fg-message-light-default);
231
+ }
232
+ .ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper {
233
+ border-color: var(--ids-comp-notification-outlined-color-border-dark-default);
234
+ background: var(--ids-comp-notification-outlined-color-bg-dark-default);
235
+ }
236
+ .ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
237
+ color: var(--ids-comp-notification-outlined-color-fg-icon-dark-default);
238
+ }
239
+ .ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
240
+ color: var(--ids-comp-notification-outlined-color-fg-title-dark-default);
241
+ }
242
+ .ids-notification.ids-notification-outlined.ids-notification-dark > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
243
+ color: var(--ids-comp-notification-outlined-color-fg-message-dark-default);
244
+ }
245
+ .ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper {
246
+ border-color: var(--ids-comp-notification-outlined-color-border-surface-default);
247
+ background: var(--ids-comp-notification-outlined-color-bg-surface-default);
248
+ }
249
+ .ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
250
+ color: var(--ids-comp-notification-outlined-color-fg-icon-surface-default);
251
+ }
252
+ .ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
253
+ color: var(--ids-comp-notification-outlined-color-fg-title-surface-default);
254
+ }
255
+ .ids-notification.ids-notification-outlined.ids-notification-surface > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
256
+ color: var(--ids-comp-notification-outlined-color-fg-message-surface-default);
257
+ }
258
+ .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper {
259
+ border-color: var(--ids-comp-notification-outlined-color-border-info-default);
260
+ background: var(--ids-comp-notification-outlined-color-bg-info-default);
261
+ }
262
+ .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
263
+ color: var(--ids-comp-notification-outlined-color-fg-icon-info-default);
264
+ }
265
+ .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
266
+ color: var(--ids-comp-notification-outlined-color-fg-title-info-default);
267
+ }
268
+ .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
269
+ color: var(--ids-comp-notification-outlined-color-fg-message-info-default);
270
+ }
271
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper {
272
+ gap: var(--ids-comp-notification-outlined-container-size-gap-compact);
273
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);
274
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-compact);
275
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-compact);
276
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-compact);
277
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);
278
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-compact);
279
+ }
280
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
281
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
282
+ }
283
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
284
+ gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
285
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
286
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
287
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
288
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
289
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
290
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
291
+ }
292
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
293
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
294
+ }
295
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
296
+ gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
297
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
298
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
299
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
300
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
301
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
302
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
303
+ }
304
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
305
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
306
+ }
307
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
308
+ gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
309
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
310
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
311
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
312
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
313
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
314
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
315
+ }
316
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
317
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
318
+ }
319
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
320
+ padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
321
+ padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
322
+ }
323
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
324
+ width: var(--ids-comp-notification-icon-size-icon-compact);
325
+ height: var(--ids-comp-notification-icon-size-icon-compact);
326
+ font-size: var(--ids-comp-notification-icon-typography-font-size-compact);
327
+ font-weight: var(--ids-comp-notification-icon-typography-font-weight-compact);
328
+ line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
329
+ }
330
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
331
+ padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
332
+ gap: var(--ids-comp-notification-message-size-gap-compact);
333
+ }
334
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
335
+ row-gap: var(--ids-comp-notification-message-size-gap-compact);
336
+ }
337
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
338
+ font-size: var(--ids-comp-notification-title-typography-font-size-compact);
339
+ font-weight: var(--ids-comp-notification-title-typography-font-weight-compact);
340
+ line-height: var(--ids-comp-notification-title-typography-line-height-compact);
341
+ letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-compact);
342
+ }
343
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
344
+ font-size: var(--ids-comp-notification-message-typography-font-size-compact);
345
+ font-weight: var(--ids-comp-notification-message-typography-font-weight-compact);
346
+ line-height: var(--ids-comp-notification-message-typography-line-height-compact);
347
+ letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-compact);
348
+ }
349
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
350
+ gap: var(--ids-comp-notification-actions-size-gap-compact);
351
+ }
352
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
353
+ width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
354
+ height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
355
+ }
356
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
357
+ padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
358
+ padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
359
+ }
360
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
361
+ width: var(--ids-comp-notification-icon-size-icon-comfortable);
362
+ height: var(--ids-comp-notification-icon-size-icon-comfortable);
363
+ font-size: var(--ids-comp-notification-icon-typography-font-size-comfortable);
364
+ font-weight: var(--ids-comp-notification-icon-typography-font-weight-comfortable);
365
+ line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
366
+ }
367
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
368
+ padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
369
+ gap: var(--ids-comp-notification-message-size-gap-comfortable);
370
+ }
371
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
372
+ row-gap: var(--ids-comp-notification-message-size-gap-comfortable);
373
+ }
374
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
375
+ font-size: var(--ids-comp-notification-title-typography-font-size-comfortable);
376
+ font-weight: var(--ids-comp-notification-title-typography-font-weight-comfortable);
377
+ line-height: var(--ids-comp-notification-title-typography-line-height-comfortable);
378
+ letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-comfortable);
379
+ }
380
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
381
+ font-size: var(--ids-comp-notification-message-typography-font-size-comfortable);
382
+ font-weight: var(--ids-comp-notification-message-typography-font-weight-comfortable);
383
+ line-height: var(--ids-comp-notification-message-typography-line-height-comfortable);
384
+ letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-comfortable);
385
+ }
386
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
387
+ gap: var(--ids-comp-notification-actions-size-gap-comfortable);
388
+ }
389
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
390
+ width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
391
+ height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
392
+ }
393
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
394
+ padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
395
+ padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
396
+ }
397
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
398
+ width: var(--ids-comp-notification-icon-size-icon-spacious);
399
+ height: var(--ids-comp-notification-icon-size-icon-spacious);
400
+ font-size: var(--ids-comp-notification-icon-typography-font-size-spacious);
401
+ font-weight: var(--ids-comp-notification-icon-typography-font-weight-spacious);
402
+ line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
403
+ }
404
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
405
+ padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
406
+ gap: var(--ids-comp-notification-message-size-gap-spacious);
407
+ }
408
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
409
+ row-gap: var(--ids-comp-notification-message-size-gap-spacious);
410
+ }
411
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
412
+ font-size: var(--ids-comp-notification-title-typography-font-size-spacious);
413
+ font-weight: var(--ids-comp-notification-title-typography-font-weight-spacious);
414
+ line-height: var(--ids-comp-notification-title-typography-line-height-spacious);
415
+ letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-spacious);
416
+ }
417
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
418
+ font-size: var(--ids-comp-notification-message-typography-font-size-spacious);
419
+ font-weight: var(--ids-comp-notification-message-typography-font-weight-spacious);
420
+ line-height: var(--ids-comp-notification-message-typography-line-height-spacious);
421
+ letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-spacious);
422
+ }
423
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
424
+ gap: var(--ids-comp-notification-actions-size-gap-spacious);
425
+ }
426
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
427
+ width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
428
+ height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
429
+ }
430
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
431
+ padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
432
+ padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
433
+ }
434
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
435
+ width: var(--ids-comp-notification-icon-size-icon-dense);
436
+ height: var(--ids-comp-notification-icon-size-icon-dense);
437
+ font-size: var(--ids-comp-notification-icon-typography-font-size-dense);
438
+ font-weight: var(--ids-comp-notification-icon-typography-font-weight-dense);
439
+ line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
440
+ }
441
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
442
+ padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
443
+ gap: var(--ids-comp-notification-message-size-gap-dense);
444
+ }
445
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
446
+ row-gap: var(--ids-comp-notification-message-size-gap-dense);
447
+ }
448
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
449
+ font-size: var(--ids-comp-notification-title-typography-font-size-dense);
450
+ font-weight: var(--ids-comp-notification-title-typography-font-weight-dense);
451
+ line-height: var(--ids-comp-notification-title-typography-line-height-dense);
452
+ letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-dense);
453
+ }
454
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
455
+ font-size: var(--ids-comp-notification-message-typography-font-size-dense);
456
+ font-weight: var(--ids-comp-notification-message-typography-font-weight-dense);
457
+ line-height: var(--ids-comp-notification-message-typography-line-height-dense);
458
+ letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-dense);
459
+ }
460
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
461
+ gap: var(--ids-comp-notification-actions-size-gap-dense);
462
+ }
463
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
464
+ width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
465
+ height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
466
+ }
package/dist/notification/notification.min.css ADDED
@@ -0,0 +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-items:center;align-content:center;flex:1 0 0;flex-wrap:wrap}.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}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-btn-container.ids-notification__label-btn{display:flex;align-self: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)}