@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/dialog/dialog.css CHANGED
@@ -2,7 +2,7 @@
2
2
  box-sizing: border-box;
3
3
  border-style: solid;
4
4
  border-color: var(--ids-comp-dialog-container-color-border-surface-default);
5
- background-color: var(--ids-comp-dialog-container-color-bg-enabled);
5
+ background-color: var(--ids-comp-dialog-container-color-bg-default);
6
6
  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);
7
7
  }
8
8
  .ids-dialog::backdrop {
@@ -13,6 +13,7 @@
13
13
  background-color: var(--ids-comp-dialog-backdrop-background);
14
14
  }
15
15
  .ids-dialog .ids-dialog-container {
16
+ box-sizing: border-box;
16
17
  display: grid;
17
18
  grid-template-rows: auto 1fr auto;
18
19
  position: relative;
@@ -25,6 +26,9 @@
25
26
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
26
27
  font-style: normal;
27
28
  }
29
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
30
+ display: none;
31
+ }
28
32
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
29
33
  font-style: normal;
30
34
  }
@@ -44,7 +48,7 @@
44
48
  align-items: center;
45
49
  justify-content: center;
46
50
  overflow-y: auto;
47
- background: var(--ids-comp-dialog-content-color-bg-enabled);
51
+ background: var(--ids-comp-dialog-content-color-bg-default);
48
52
  }
49
53
  .ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow {
50
54
  overflow-y: auto;
@@ -58,7 +62,7 @@
58
62
  }
59
63
  .ids-dialog .ids-dialog-container .ids-dialog-actions {
60
64
  display: flex;
61
- background: var(--ids-comp-dialog-footer-color-bg-enabled);
65
+ background: var(--ids-comp-dialog-footer-color-bg-default);
62
66
  justify-content: flex-end;
63
67
  align-items: flex-start;
64
68
  align-content: flex-start;
@@ -66,158 +70,158 @@
66
70
  flex-wrap: wrap;
67
71
  }
68
72
  .ids-dialog.ids-dialog-compact {
69
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-compact);
70
- border-width: var(--ids-comp-size-dialog-container-size-border-width-compact);
73
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-compact);
74
+ border-width: var(--ids-comp-dialog-container-size-border-width-compact);
71
75
  }
72
76
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
73
- width: var(--ids-comp-size-dialog-container-size-width-compact);
74
- min-height: var(--ids-comp-size-dialog-container-size-min-height-compact);
75
- padding: var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact);
76
- gap: var(--ids-comp-size-dialog-container-size-gap-compact);
77
+ width: var(--ids-comp-dialog-container-size-width-compact);
78
+ min-height: var(--ids-comp-dialog-container-size-min-height-compact);
79
+ padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
80
+ gap: var(--ids-comp-dialog-container-size-gap-compact);
77
81
  }
78
82
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title {
79
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-compact);
80
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-compact);
81
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-compact);
82
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-compact);
83
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-compact);
83
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-compact);
84
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-compact);
85
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-compact);
86
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);
87
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-compact);
84
88
  }
85
89
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
86
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-compact);
87
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-compact);
88
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-compact);
89
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-compact);
90
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-compact);
90
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);
91
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);
92
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);
93
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);
94
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-compact);
91
95
  }
92
96
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
93
- gap: var(--ids-comp-size-dialog-header-size-gap-compact);
94
- padding: var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact);
97
+ gap: var(--ids-comp-dialog-header-size-gap-compact);
98
+ padding: var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact);
95
99
  }
96
100
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content {
97
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact);
101
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact);
98
102
  }
99
103
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
100
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact);
101
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
102
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
104
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);
105
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
106
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
103
107
  }
104
108
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions {
105
- padding: var(--ids-comp-size-dialog-footer-padding-y-compact) var(--ids-comp-size-dialog-footer-padding-x-compact);
109
+ padding: var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);
106
110
  }
107
111
  .ids-dialog.ids-dialog-comfortable {
108
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-comfortable);
109
- border-width: var(--ids-comp-size-dialog-container-size-border-width-comfortable);
112
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-comfortable);
113
+ border-width: var(--ids-comp-dialog-container-size-border-width-comfortable);
110
114
  }
111
115
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
112
- width: var(--ids-comp-size-dialog-container-size-width-comfortable);
113
- min-height: var(--ids-comp-size-dialog-container-size-min-height-comfortable);
114
- padding: var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable);
115
- gap: var(--ids-comp-size-dialog-container-size-gap-comfortable);
116
+ width: var(--ids-comp-dialog-container-size-width-comfortable);
117
+ min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
118
+ padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
119
+ gap: var(--ids-comp-dialog-container-size-gap-comfortable);
116
120
  }
117
121
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title {
118
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-comfortable);
119
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-comfortable);
120
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-comfortable);
121
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-comfortable);
122
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-comfortable);
122
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-comfortable);
123
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-comfortable);
124
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);
125
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);
126
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-comfortable);
123
127
  }
124
128
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
125
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-comfortable);
126
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-comfortable);
127
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-comfortable);
128
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-comfortable);
129
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-comfortable);
129
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);
130
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);
131
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);
132
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);
133
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable);
130
134
  }
131
135
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
132
- gap: var(--ids-comp-size-dialog-header-size-gap-comfortable);
133
- padding: var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable);
136
+ gap: var(--ids-comp-dialog-header-size-gap-comfortable);
137
+ padding: var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable);
134
138
  }
135
139
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content {
136
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable);
140
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable);
137
141
  }
138
142
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
139
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable);
140
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
141
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
143
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);
144
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
145
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
142
146
  }
143
147
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions {
144
- padding: var(--ids-comp-size-dialog-footer-padding-y-comfortable) var(--ids-comp-size-dialog-footer-padding-x-comfortable);
148
+ padding: var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);
145
149
  }
146
150
  .ids-dialog.ids-dialog-spacious {
147
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-spacious);
148
- border-width: var(--ids-comp-size-dialog-container-size-border-width-spacious);
151
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-spacious);
152
+ border-width: var(--ids-comp-dialog-container-size-border-width-spacious);
149
153
  }
150
154
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
151
- width: var(--ids-comp-size-dialog-container-size-width-spacious);
152
- min-height: var(--ids-comp-size-dialog-container-size-min-height-spacious);
153
- padding: var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious);
154
- gap: var(--ids-comp-size-dialog-container-size-gap-spacious);
155
+ width: var(--ids-comp-dialog-container-size-width-spacious);
156
+ min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
157
+ padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
158
+ gap: var(--ids-comp-dialog-container-size-gap-spacious);
155
159
  }
156
160
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title {
157
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-spacious);
158
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-spacious);
159
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-spacious);
160
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-spacious);
161
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-spacious);
161
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-spacious);
162
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-spacious);
163
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-spacious);
164
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);
165
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-spacious);
162
166
  }
163
167
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
164
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-spacious);
165
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-spacious);
166
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-spacious);
167
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-spacious);
168
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-spacious);
168
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);
169
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);
170
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);
171
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);
172
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious);
169
173
  }
170
174
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
171
- gap: var(--ids-comp-size-dialog-header-size-gap-spacious);
172
- padding: var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious);
175
+ gap: var(--ids-comp-dialog-header-size-gap-spacious);
176
+ padding: var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious);
173
177
  }
174
178
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content {
175
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious);
179
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious);
176
180
  }
177
181
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
178
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious);
179
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
180
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
182
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);
183
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
184
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
181
185
  }
182
186
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions {
183
- padding: var(--ids-comp-size-dialog-footer-padding-y-spacious) var(--ids-comp-size-dialog-footer-padding-x-spacious);
187
+ padding: var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);
184
188
  }
185
189
  .ids-dialog.ids-dialog-dense {
186
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-dense);
187
- border-width: var(--ids-comp-size-dialog-container-size-border-width-dense);
190
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-dense);
191
+ border-width: var(--ids-comp-dialog-container-size-border-width-dense);
188
192
  }
189
193
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
190
- width: var(--ids-comp-size-dialog-container-size-width-dense);
191
- min-height: var(--ids-comp-size-dialog-container-size-min-height-dense);
192
- padding: var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense);
193
- gap: var(--ids-comp-size-dialog-container-size-gap-dense);
194
+ width: var(--ids-comp-dialog-container-size-width-dense);
195
+ min-height: var(--ids-comp-dialog-container-size-min-height-dense);
196
+ padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
197
+ gap: var(--ids-comp-dialog-container-size-gap-dense);
194
198
  }
195
199
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title {
196
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-dense);
197
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-dense);
198
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-dense);
199
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-dense);
200
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-dense);
200
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-dense);
201
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-dense);
202
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-dense);
203
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);
204
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-dense);
201
205
  }
202
206
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
203
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-dense);
204
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-dense);
205
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-dense);
206
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-dense);
207
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-dense);
207
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);
208
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);
209
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);
210
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);
211
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-dense);
208
212
  }
209
213
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
210
- gap: var(--ids-comp-size-dialog-header-size-gap-dense);
211
- padding: var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense);
214
+ gap: var(--ids-comp-dialog-header-size-gap-dense);
215
+ padding: var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense);
212
216
  }
213
217
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content {
214
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense);
218
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense);
215
219
  }
216
220
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
217
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense);
218
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
219
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
221
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);
222
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
223
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
220
224
  }
221
225
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions {
222
- padding: var(--ids-comp-size-dialog-footer-padding-y-dense) var(--ids-comp-size-dialog-footer-padding-x-dense);
226
+ padding: var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);
223
227
  }
package/dist/dialog/dialog.min.css CHANGED
@@ -1 +1 @@
1
- .ids-dialog{box-sizing:border-box;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-enabled);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-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-opacity);background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-enabled)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-enabled);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-size-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-compact);min-height:var(--ids-comp-size-dialog-container-size-min-height-compact);padding:var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact);gap:var(--ids-comp-size-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-size-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-size-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-size-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-size-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-size-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-size-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-size-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-compact);padding:var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-compact) var(--ids-comp-size-dialog-footer-padding-x-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-size-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-comfortable);min-height:var(--ids-comp-size-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-size-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-size-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-size-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-size-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-size-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-size-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-comfortable);padding:var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-comfortable) var(--ids-comp-size-dialog-footer-padding-x-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-size-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-spacious);min-height:var(--ids-comp-size-dialog-container-size-min-height-spacious);padding:var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-size-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-size-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-size-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-size-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-size-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-size-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-spacious);padding:var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-spacious) var(--ids-comp-size-dialog-footer-padding-x-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-size-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-size-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{width:var(--ids-comp-size-dialog-container-size-width-dense);min-height:var(--ids-comp-size-dialog-container-size-min-height-dense);padding:var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense);gap:var(--ids-comp-size-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-size-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-size-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-size-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-size-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-size-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-size-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-size-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-size-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-size-dialog-header-size-gap-dense);padding:var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-size-dialog-footer-padding-y-dense) var(--ids-comp-size-dialog-footer-padding-x-dense)}
1
+ .ids-dialog{box-sizing:border-box;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);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-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-opacity);background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)}