@i-cell/ids-styles 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,757 @@
1
+ .ids-tab-group {
2
+ display: flex;
3
+ }
4
+ .ids-tab-group .ids-tab-group__container {
5
+ display: flex;
6
+ flex-direction: column;
7
+ position: relative;
8
+ flex-shrink: 0;
9
+ }
10
+ .ids-tab-group .ids-tab-item__indicator {
11
+ display: flex;
12
+ justify-content: center;
13
+ position: absolute;
14
+ height: 100%;
15
+ pointer-events: none;
16
+ z-index: 1;
17
+ }
18
+ .ids-tab-group .ids-tab-item__indicator .ids-tab-item__line {
19
+ position: relative;
20
+ box-sizing: border-box;
21
+ opacity: 0;
22
+ }
23
+ .ids-tab-group.ids-tab-group-horizontal {
24
+ flex-direction: column;
25
+ align-items: center;
26
+ flex-shrink: 0;
27
+ }
28
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container {
29
+ width: 100%;
30
+ }
31
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
32
+ justify-content: center;
33
+ }
34
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
35
+ outline-offset: 4px;
36
+ }
37
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
38
+ border-bottom-style: solid;
39
+ border-bottom-color: var(--ids-comp-tab-tabgroup-color-border-default);
40
+ }
41
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab-item__line {
42
+ align-self: flex-end;
43
+ border-bottom-style: solid;
44
+ }
45
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
46
+ border-top-style: solid;
47
+ border-top-color: var(--ids-comp-tab-tabgroup-color-border-default);
48
+ }
49
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab-item__line {
50
+ align-self: flex-start;
51
+ border-top-style: solid;
52
+ }
53
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs > .ids-tab-group__container .ids-tab-group__header {
54
+ align-self: stretch;
55
+ }
56
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
57
+ flex-grow: 1;
58
+ }
59
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-start > .ids-tab-group__container .ids-tab-group__header {
60
+ align-self: flex-start;
61
+ }
62
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-center > .ids-tab-group__container .ids-tab-group__header {
63
+ align-self: center;
64
+ }
65
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-end > .ids-tab-group__container .ids-tab-group__header {
66
+ align-self: flex-end;
67
+ }
68
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-body-content {
69
+ display: flex;
70
+ align-items: flex-start;
71
+ align-self: stretch;
72
+ }
73
+ .ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator {
74
+ left: 0;
75
+ width: 100%;
76
+ }
77
+ .ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator .ids-tab-item__line {
78
+ width: 100%;
79
+ }
80
+ .ids-tab-group.ids-tab-group-vertical {
81
+ display: inline-flex;
82
+ align-items: flex-start;
83
+ width: 100%;
84
+ }
85
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header {
86
+ display: flex;
87
+ flex-direction: column;
88
+ align-items: center;
89
+ flex-shrink: 0;
90
+ }
91
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
92
+ align-self: stretch;
93
+ }
94
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
95
+ outline-offset: 2px;
96
+ }
97
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-body-content {
98
+ display: flex;
99
+ justify-content: center;
100
+ align-self: stretch;
101
+ }
102
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
103
+ left: 0;
104
+ }
105
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
106
+ border-left-style: solid;
107
+ }
108
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
109
+ right: 0;
110
+ }
111
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
112
+ border-right-style: solid;
113
+ }
114
+ .ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator {
115
+ top: 0;
116
+ }
117
+ .ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator .ids-tab-item__line {
118
+ align-self: flex-start;
119
+ height: 100%;
120
+ }
121
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header {
122
+ display: flex;
123
+ justify-content: center;
124
+ align-items: flex-start;
125
+ list-style-type: none;
126
+ margin: 0;
127
+ }
128
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
129
+ display: flex;
130
+ align-items: center;
131
+ cursor: pointer;
132
+ position: relative;
133
+ border-style: solid;
134
+ }
135
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
136
+ outline-style: solid;
137
+ }
138
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item__label {
139
+ display: inline-block;
140
+ text-overflow: ellipsis;
141
+ overflow: hidden;
142
+ white-space: nowrap;
143
+ }
144
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
145
+ pointer-events: none;
146
+ user-select: none;
147
+ }
148
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-tab-item__indicator .ids-tab-item__line {
149
+ opacity: 1;
150
+ }
151
+ .ids-tab-group.ids-tab-group-compact {
152
+ padding: var(--ids-comp-tab-container-size-padding-y-compact) var(--ids-comp-tab-container-size-padding-x-compact);
153
+ gap: var(--ids-comp-tab-container-size-gap-compact);
154
+ }
155
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
156
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
157
+ }
158
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
159
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
160
+ }
161
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
162
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
163
+ }
164
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top {
165
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
166
+ }
167
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
168
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
169
+ }
170
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
171
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
172
+ }
173
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
174
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
175
+ }
176
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
177
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
178
+ }
179
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
180
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
181
+ }
182
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
183
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
184
+ }
185
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-body-content {
186
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-compact) var(--ids-comp-tab-tabpanel-size-padding-x-compact);
187
+ }
188
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header {
189
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-compact) var(--ids-comp-tab-tabgroup-size-padding-x-compact);
190
+ gap: var(--ids-comp-tab-tabgroup-size-gap-compact);
191
+ }
192
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
193
+ padding: var(--ids-comp-tab-item-size-padding-y-compact) var(--ids-comp-tab-item-size-padding-x-compact);
194
+ gap: var(--ids-comp-tab-item-size-gap-compact);
195
+ border-radius: var(--ids-comp-tab-item-size-border-radius-compact);
196
+ border-width: var(--ids-comp-tab-item-size-border-width-compact);
197
+ }
198
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
199
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-compact);
200
+ }
201
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
202
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-compact);
203
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-compact);
204
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-compact);
205
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-compact);
206
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-compact);
207
+ }
208
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
209
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-compact);
210
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-compact);
211
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-compact);
212
+ width: var(--ids-comp-tab-item-icon-size-width-compact);
213
+ height: var(--ids-comp-tab-item-icon-size-height-compact);
214
+ }
215
+ .ids-tab-group.ids-tab-group-comfortable {
216
+ padding: var(--ids-comp-tab-container-size-padding-y-comfortable) var(--ids-comp-tab-container-size-padding-x-comfortable);
217
+ gap: var(--ids-comp-tab-container-size-gap-comfortable);
218
+ }
219
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
220
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
221
+ }
222
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
223
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
224
+ }
225
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
226
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
227
+ }
228
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top {
229
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
230
+ }
231
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
232
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
233
+ }
234
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
235
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
236
+ }
237
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
238
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
239
+ }
240
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
241
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
242
+ }
243
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
244
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
245
+ }
246
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
247
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
248
+ }
249
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-body-content {
250
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-comfortable) var(--ids-comp-tab-tabpanel-size-padding-x-comfortable);
251
+ }
252
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header {
253
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-comfortable) var(--ids-comp-tab-tabgroup-size-padding-x-comfortable);
254
+ gap: var(--ids-comp-tab-tabgroup-size-gap-comfortable);
255
+ }
256
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
257
+ padding: var(--ids-comp-tab-item-size-padding-y-comfortable) var(--ids-comp-tab-item-size-padding-x-comfortable);
258
+ gap: var(--ids-comp-tab-item-size-gap-comfortable);
259
+ border-radius: var(--ids-comp-tab-item-size-border-radius-comfortable);
260
+ border-width: var(--ids-comp-tab-item-size-border-width-comfortable);
261
+ }
262
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
263
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-comfortable);
264
+ }
265
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
266
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-comfortable);
267
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-comfortable);
268
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-comfortable);
269
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-comfortable);
270
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-comfortable);
271
+ }
272
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
273
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-comfortable);
274
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-comfortable);
275
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-comfortable);
276
+ width: var(--ids-comp-tab-item-icon-size-width-comfortable);
277
+ height: var(--ids-comp-tab-item-icon-size-height-comfortable);
278
+ }
279
+ .ids-tab-group.ids-tab-group-spacious {
280
+ padding: var(--ids-comp-tab-container-size-padding-y-spacious) var(--ids-comp-tab-container-size-padding-x-spacious);
281
+ gap: var(--ids-comp-tab-container-size-gap-spacious);
282
+ }
283
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
284
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
285
+ }
286
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
287
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
288
+ }
289
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
290
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
291
+ }
292
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top {
293
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
294
+ }
295
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
296
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
297
+ }
298
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
299
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
300
+ }
301
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
302
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
303
+ }
304
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
305
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
306
+ }
307
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
308
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
309
+ }
310
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
311
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
312
+ }
313
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-body-content {
314
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-spacious) var(--ids-comp-tab-tabpanel-size-padding-x-spacious);
315
+ }
316
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header {
317
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-spacious) var(--ids-comp-tab-tabgroup-size-padding-x-spacious);
318
+ gap: var(--ids-comp-tab-tabgroup-size-gap-spacious);
319
+ }
320
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
321
+ padding: var(--ids-comp-tab-item-size-padding-y-spacious) var(--ids-comp-tab-item-size-padding-x-spacious);
322
+ gap: var(--ids-comp-tab-item-size-gap-spacious);
323
+ border-radius: var(--ids-comp-tab-item-size-border-radius-spacious);
324
+ border-width: var(--ids-comp-tab-item-size-border-width-spacious);
325
+ }
326
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
327
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-spacious);
328
+ }
329
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
330
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-spacious);
331
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-spacious);
332
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-spacious);
333
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-spacious);
334
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-spacious);
335
+ }
336
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
337
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-spacious);
338
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-spacious);
339
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-spacious);
340
+ width: var(--ids-comp-tab-item-icon-size-width-spacious);
341
+ height: var(--ids-comp-tab-item-icon-size-height-spacious);
342
+ }
343
+ .ids-tab-group.ids-tab-group-dense {
344
+ padding: var(--ids-comp-tab-container-size-padding-y-dense) var(--ids-comp-tab-container-size-padding-x-dense);
345
+ gap: var(--ids-comp-tab-container-size-gap-dense);
346
+ }
347
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
348
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
349
+ }
350
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
351
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
352
+ }
353
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
354
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
355
+ }
356
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top {
357
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
358
+ }
359
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
360
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
361
+ }
362
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
363
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
364
+ }
365
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
366
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
367
+ }
368
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
369
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
370
+ }
371
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
372
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
373
+ }
374
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
375
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
376
+ }
377
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-body-content {
378
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-dense) var(--ids-comp-tab-tabpanel-size-padding-x-dense);
379
+ }
380
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header {
381
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-dense) var(--ids-comp-tab-tabgroup-size-padding-x-dense);
382
+ gap: var(--ids-comp-tab-tabgroup-size-gap-dense);
383
+ }
384
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
385
+ padding: var(--ids-comp-tab-item-size-padding-y-dense) var(--ids-comp-tab-item-size-padding-x-dense);
386
+ gap: var(--ids-comp-tab-item-size-gap-dense);
387
+ border-radius: var(--ids-comp-tab-item-size-border-radius-dense);
388
+ border-width: var(--ids-comp-tab-item-size-border-width-dense);
389
+ }
390
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
391
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-dense);
392
+ }
393
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
394
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-dense);
395
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-dense);
396
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-dense);
397
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-dense);
398
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-dense);
399
+ }
400
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
401
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-dense);
402
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-dense);
403
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-dense);
404
+ width: var(--ids-comp-tab-item-icon-size-width-dense);
405
+ height: var(--ids-comp-tab-item-icon-size-height-dense);
406
+ }
407
+ .ids-tab-group.ids-tab-group-surface {
408
+ background-color: var(--ids-comp-tab-container-color-bg-default);
409
+ }
410
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header {
411
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
412
+ }
413
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
414
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-default);
415
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-default);
416
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-default);
417
+ }
418
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
419
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-default);
420
+ }
421
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
422
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
423
+ }
424
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
425
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-hovered);
426
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-hovered);
427
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-hovered);
428
+ }
429
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
430
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-hovered);
431
+ }
432
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
433
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
434
+ }
435
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
436
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-focused);
437
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-focused);
438
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-focused);
439
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
440
+ }
441
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-icon, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-icon {
442
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-focused);
443
+ }
444
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-tab-item__indicator {
445
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
446
+ }
447
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
448
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-pressed);
449
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-pressed);
450
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-pressed);
451
+ }
452
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
453
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-pressed);
454
+ }
455
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
456
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
457
+ }
458
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
459
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
460
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-disabled);
461
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled);
462
+ }
463
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
464
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
465
+ }
466
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-tab-item__indicator {
467
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
468
+ }
469
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
470
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-default);
471
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-default);
472
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-default);
473
+ }
474
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
475
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-default);
476
+ }
477
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-tab-item__indicator {
478
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
479
+ }
480
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
481
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-hovered);
482
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-hovered);
483
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-hovered);
484
+ }
485
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-icon {
486
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-hovered);
487
+ }
488
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-tab-item__indicator {
489
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
490
+ }
491
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible {
492
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-focused);
493
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-focused);
494
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-focused);
495
+ }
496
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-icon, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-icon {
497
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-focused);
498
+ }
499
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-tab-item__indicator {
500
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
501
+ }
502
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
503
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-pressed);
504
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-pressed);
505
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-pressed);
506
+ }
507
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-icon {
508
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-pressed);
509
+ }
510
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-tab-item__indicator {
511
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
512
+ }
513
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled {
514
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
515
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-disabled);
516
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled);
517
+ }
518
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-icon {
519
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
520
+ }
521
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-tab-item__indicator {
522
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
523
+ }
524
+ .ids-tab-group.ids-tab-group-light {
525
+ background-color: var(--ids-comp-tab-container-color-bg-default);
526
+ }
527
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header {
528
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
529
+ }
530
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
531
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-default);
532
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-default);
533
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-default);
534
+ }
535
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
536
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-default);
537
+ }
538
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
539
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
540
+ }
541
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
542
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-hovered);
543
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-hovered);
544
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-hovered);
545
+ }
546
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
547
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-hovered);
548
+ }
549
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
550
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
551
+ }
552
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
553
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-focused);
554
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-focused);
555
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-focused);
556
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
557
+ }
558
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-icon, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-icon {
559
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-focused);
560
+ }
561
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-tab-item__indicator {
562
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
563
+ }
564
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
565
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-pressed);
566
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-pressed);
567
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-pressed);
568
+ }
569
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
570
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-pressed);
571
+ }
572
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
573
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
574
+ }
575
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
576
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
577
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-disabled);
578
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled);
579
+ }
580
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
581
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
582
+ }
583
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-tab-item__indicator {
584
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
585
+ }
586
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
587
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-default);
588
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-default);
589
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-default);
590
+ }
591
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
592
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-default);
593
+ }
594
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-tab-item__indicator {
595
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
596
+ }
597
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
598
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-hovered);
599
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-hovered);
600
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-hovered);
601
+ }
602
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-icon {
603
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-hovered);
604
+ }
605
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-tab-item__indicator {
606
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
607
+ }
608
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible {
609
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-focused);
610
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-focused);
611
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-focused);
612
+ }
613
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-icon, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-icon {
614
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-focused);
615
+ }
616
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-tab-item__indicator {
617
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
618
+ }
619
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
620
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-pressed);
621
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-pressed);
622
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-pressed);
623
+ }
624
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-icon {
625
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-pressed);
626
+ }
627
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-tab-item__indicator {
628
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
629
+ }
630
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled {
631
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
632
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-disabled);
633
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled);
634
+ }
635
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-icon {
636
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
637
+ }
638
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-tab-item__indicator {
639
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
640
+ }
641
+ .ids-tab-group.ids-tab-group-primary {
642
+ background-color: var(--ids-comp-tab-container-color-bg-default);
643
+ }
644
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header {
645
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
646
+ }
647
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
648
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-default);
649
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-default);
650
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-default);
651
+ }
652
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
653
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-default);
654
+ }
655
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
656
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
657
+ }
658
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
659
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-hovered);
660
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-hovered);
661
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-hovered);
662
+ }
663
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
664
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-hovered);
665
+ }
666
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
667
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
668
+ }
669
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible {
670
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-focused);
671
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-focused);
672
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-focused);
673
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
674
+ }
675
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-icon, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-icon {
676
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-focused);
677
+ }
678
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:focus-visible > .ids-tab-item__indicator {
679
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
680
+ }
681
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
682
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-pressed);
683
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-pressed);
684
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-pressed);
685
+ }
686
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
687
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-pressed);
688
+ }
689
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
690
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
691
+ }
692
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
693
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
694
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-disabled);
695
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled);
696
+ }
697
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
698
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
699
+ }
700
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-tab-item__indicator {
701
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
702
+ }
703
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
704
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-default);
705
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-default);
706
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-default);
707
+ }
708
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
709
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-default);
710
+ }
711
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-tab-item__indicator {
712
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
713
+ }
714
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
715
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-hovered);
716
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-hovered);
717
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-hovered);
718
+ }
719
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-icon {
720
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-hovered);
721
+ }
722
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover > .ids-tab-item__indicator {
723
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
724
+ }
725
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible {
726
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-focused);
727
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-focused);
728
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-focused);
729
+ }
730
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-icon, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-icon {
731
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-focused);
732
+ }
733
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus > .ids-tab-item__indicator, .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:focus-visible > .ids-tab-item__indicator {
734
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
735
+ }
736
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
737
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-pressed);
738
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-pressed);
739
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-pressed);
740
+ }
741
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-icon {
742
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-pressed);
743
+ }
744
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active > .ids-tab-item__indicator {
745
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
746
+ }
747
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled {
748
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
749
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-disabled);
750
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled);
751
+ }
752
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-icon {
753
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
754
+ }
755
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active.ids-tab-item-disabled > .ids-tab-item__indicator {
756
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
757
+ }