@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.
@@ -7150,10 +7150,8 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7150
7150
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__container {
7151
7151
  display: flex;
7152
7152
  justify-content: space-between;
7153
- align-items: center;
7154
7153
  align-content: center;
7155
7154
  flex: 1 0 0;
7156
- flex-wrap: wrap;
7157
7155
  }
7158
7156
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
7159
7157
  display: flex;
@@ -7169,11 +7167,19 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7169
7167
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7170
7168
  display: flex;
7171
7169
  align-items: center;
7170
+ flex-shrink: 0;
7172
7171
  }
7173
- .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-btn-container.ids-notification__label-btn {
7172
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container.ids-notification__label-button {
7174
7173
  display: flex;
7175
7174
  align-self: center;
7176
7175
  }
7176
+ .ids-notification.ids-notification-actions-bottom-mode > .ids-notification__content-wrapper > .ids-notification__container {
7177
+ flex-direction: column;
7178
+ align-items: flex-start;
7179
+ }
7180
+ .ids-notification:not(.ids-notification-actions-bottom-mode) > .ids-notification__content-wrapper > .ids-notification__container {
7181
+ align-items: center;
7182
+ }
7177
7183
  .ids-notification.ids-notification-filled.ids-notification-error > .ids-notification__content-wrapper {
7178
7184
  border-color: var(--ids-comp-notification-filled-color-border-error-default);
7179
7185
  background: var(--ids-comp-notification-filled-color-bg-error-default);
@@ -7265,7 +7271,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7265
7271
  .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7266
7272
  color: var(--ids-comp-notification-filled-color-fg-message-info-default);
7267
7273
  }
7268
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
7274
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper {
7269
7275
  gap: var(--ids-comp-notification-filled-container-size-gap-compact);
7270
7276
  padding: var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);
7271
7277
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-compact);
@@ -7274,45 +7280,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7274
7280
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);
7275
7281
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-compact);
7276
7282
  }
7277
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
7278
- padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
7279
- padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
7280
- }
7281
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
7282
- width: var(--ids-comp-notification-icon-size-icon-compact);
7283
- height: var(--ids-comp-notification-icon-size-icon-compact);
7284
- font-size: var(--ids-comp-notification-icon-typography-font-size-compact);
7285
- font-weight: var(--ids-comp-notification-icon-typography-font-weight-compact);
7286
- line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
7287
- }
7288
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7283
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7289
7284
  min-width: var(--ids-comp-notification-filled-container-size-min-width-compact);
7290
- padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
7291
- gap: var(--ids-comp-notification-message-size-gap-compact);
7292
7285
  }
7293
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
7294
- row-gap: var(--ids-comp-notification-message-size-gap-compact);
7295
- }
7296
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
7297
- font-size: var(--ids-comp-notification-title-typography-font-size-compact);
7298
- font-weight: var(--ids-comp-notification-title-typography-font-weight-compact);
7299
- line-height: var(--ids-comp-notification-title-typography-line-height-compact);
7300
- letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-compact);
7301
- }
7302
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7303
- font-size: var(--ids-comp-notification-message-typography-font-size-compact);
7304
- font-weight: var(--ids-comp-notification-message-typography-font-weight-compact);
7305
- line-height: var(--ids-comp-notification-message-typography-line-height-compact);
7306
- letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-compact);
7307
- }
7308
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7309
- gap: var(--ids-comp-notification-actions-size-gap-compact);
7310
- }
7311
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7312
- width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7313
- height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7314
- }
7315
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper {
7286
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
7316
7287
  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
7317
7288
  padding: var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);
7318
7289
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-comfortable);
@@ -7321,45 +7292,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7321
7292
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);
7322
7293
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-comfortable);
7323
7294
  }
7324
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
7325
- padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
7326
- padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
7327
- }
7328
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
7329
- width: var(--ids-comp-notification-icon-size-icon-comfortable);
7330
- height: var(--ids-comp-notification-icon-size-icon-comfortable);
7331
- font-size: var(--ids-comp-notification-icon-typography-font-size-comfortable);
7332
- font-weight: var(--ids-comp-notification-icon-typography-font-weight-comfortable);
7333
- line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
7334
- }
7335
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7295
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7336
7296
  min-width: var(--ids-comp-notification-filled-container-size-min-width-comfortable);
7337
- padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
7338
- gap: var(--ids-comp-notification-message-size-gap-comfortable);
7339
- }
7340
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
7341
- row-gap: var(--ids-comp-notification-message-size-gap-comfortable);
7342
- }
7343
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
7344
- font-size: var(--ids-comp-notification-title-typography-font-size-comfortable);
7345
- font-weight: var(--ids-comp-notification-title-typography-font-weight-comfortable);
7346
- line-height: var(--ids-comp-notification-title-typography-line-height-comfortable);
7347
- letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-comfortable);
7348
- }
7349
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7350
- font-size: var(--ids-comp-notification-message-typography-font-size-comfortable);
7351
- font-weight: var(--ids-comp-notification-message-typography-font-weight-comfortable);
7352
- line-height: var(--ids-comp-notification-message-typography-line-height-comfortable);
7353
- letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-comfortable);
7354
- }
7355
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7356
- gap: var(--ids-comp-notification-actions-size-gap-comfortable);
7357
- }
7358
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7359
- width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7360
- height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7361
7297
  }
7362
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper {
7298
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
7363
7299
  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
7364
7300
  padding: var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);
7365
7301
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-spacious);
@@ -7368,45 +7304,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7368
7304
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);
7369
7305
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-spacious);
7370
7306
  }
7371
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
7372
- padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
7373
- padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
7374
- }
7375
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
7376
- width: var(--ids-comp-notification-icon-size-icon-spacious);
7377
- height: var(--ids-comp-notification-icon-size-icon-spacious);
7378
- font-size: var(--ids-comp-notification-icon-typography-font-size-spacious);
7379
- font-weight: var(--ids-comp-notification-icon-typography-font-weight-spacious);
7380
- line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
7381
- }
7382
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7307
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7383
7308
  min-width: var(--ids-comp-notification-filled-container-size-min-width-spacious);
7384
- padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
7385
- gap: var(--ids-comp-notification-message-size-gap-spacious);
7386
- }
7387
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
7388
- row-gap: var(--ids-comp-notification-message-size-gap-spacious);
7389
7309
  }
7390
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
7391
- font-size: var(--ids-comp-notification-title-typography-font-size-spacious);
7392
- font-weight: var(--ids-comp-notification-title-typography-font-weight-spacious);
7393
- line-height: var(--ids-comp-notification-title-typography-line-height-spacious);
7394
- letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-spacious);
7395
- }
7396
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7397
- font-size: var(--ids-comp-notification-message-typography-font-size-spacious);
7398
- font-weight: var(--ids-comp-notification-message-typography-font-weight-spacious);
7399
- line-height: var(--ids-comp-notification-message-typography-line-height-spacious);
7400
- letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-spacious);
7401
- }
7402
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7403
- gap: var(--ids-comp-notification-actions-size-gap-spacious);
7404
- }
7405
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7406
- width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7407
- height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7408
- }
7409
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper {
7310
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
7410
7311
  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
7411
7312
  padding: var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);
7412
7313
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-dense);
@@ -7415,43 +7316,8 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7415
7316
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);
7416
7317
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-dense);
7417
7318
  }
7418
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
7419
- padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
7420
- padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
7421
- }
7422
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element > .ids-icon {
7423
- width: var(--ids-comp-notification-icon-size-icon-dense);
7424
- height: var(--ids-comp-notification-icon-size-icon-dense);
7425
- font-size: var(--ids-comp-notification-icon-typography-font-size-dense);
7426
- font-weight: var(--ids-comp-notification-icon-typography-font-weight-dense);
7427
- line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
7428
- }
7429
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7319
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7430
7320
  min-width: var(--ids-comp-notification-filled-container-size-min-width-dense);
7431
- padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
7432
- gap: var(--ids-comp-notification-message-size-gap-dense);
7433
- }
7434
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container {
7435
- row-gap: var(--ids-comp-notification-message-size-gap-dense);
7436
- }
7437
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__title {
7438
- font-size: var(--ids-comp-notification-title-typography-font-size-dense);
7439
- font-weight: var(--ids-comp-notification-title-typography-font-weight-dense);
7440
- line-height: var(--ids-comp-notification-title-typography-line-height-dense);
7441
- letter-spacing: var(--ids-comp-notification-title-typography-letter-spacing-dense);
7442
- }
7443
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7444
- font-size: var(--ids-comp-notification-message-typography-font-size-dense);
7445
- font-weight: var(--ids-comp-notification-message-typography-font-weight-dense);
7446
- line-height: var(--ids-comp-notification-message-typography-line-height-dense);
7447
- letter-spacing: var(--ids-comp-notification-message-typography-letter-spacing-dense);
7448
- }
7449
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7450
- gap: var(--ids-comp-notification-actions-size-gap-dense);
7451
- }
7452
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7453
- width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7454
- height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7455
7321
  }
7456
7322
  .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
7457
7323
  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
@@ -7544,7 +7410,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7544
7410
  .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7545
7411
  color: var(--ids-comp-notification-outlined-color-fg-message-info-default);
7546
7412
  }
7547
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
7413
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper {
7548
7414
  gap: var(--ids-comp-notification-outlined-container-size-gap-compact);
7549
7415
  padding: var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);
7550
7416
  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-compact);
@@ -7553,6 +7419,45 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7553
7419
  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);
7554
7420
  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-compact);
7555
7421
  }
7422
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7423
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
7424
+ }
7425
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
7426
+ gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
7427
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
7428
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
7429
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
7430
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
7431
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
7432
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
7433
+ }
7434
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7435
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
7436
+ }
7437
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
7438
+ gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
7439
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
7440
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
7441
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
7442
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
7443
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
7444
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
7445
+ }
7446
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7447
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
7448
+ }
7449
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
7450
+ gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
7451
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
7452
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
7453
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
7454
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
7455
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
7456
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
7457
+ }
7458
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7459
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
7460
+ }
7556
7461
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
7557
7462
  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
7558
7463
  padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
@@ -7565,7 +7470,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7565
7470
  line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
7566
7471
  }
7567
7472
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7568
- min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
7569
7473
  padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
7570
7474
  gap: var(--ids-comp-notification-message-size-gap-compact);
7571
7475
  }
@@ -7587,19 +7491,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7587
7491
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7588
7492
  gap: var(--ids-comp-notification-actions-size-gap-compact);
7589
7493
  }
7590
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7494
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7591
7495
  width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7592
7496
  height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7593
7497
  }
7594
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper {
7595
- gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
7596
- padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
7597
- border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
7598
- border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
7599
- border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
7600
- border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
7601
- border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
7602
- }
7603
7498
  .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
7604
7499
  padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
7605
7500
  padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
@@ -7612,7 +7507,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7612
7507
  line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
7613
7508
  }
7614
7509
  .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7615
- min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
7616
7510
  padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
7617
7511
  gap: var(--ids-comp-notification-message-size-gap-comfortable);
7618
7512
  }
@@ -7634,19 +7528,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7634
7528
  .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7635
7529
  gap: var(--ids-comp-notification-actions-size-gap-comfortable);
7636
7530
  }
7637
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7531
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7638
7532
  width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7639
7533
  height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7640
7534
  }
7641
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper {
7642
- gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
7643
- padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
7644
- border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
7645
- border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
7646
- border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
7647
- border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
7648
- border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
7649
- }
7650
7535
  .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
7651
7536
  padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
7652
7537
  padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
@@ -7659,7 +7544,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7659
7544
  line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
7660
7545
  }
7661
7546
  .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7662
- min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
7663
7547
  padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
7664
7548
  gap: var(--ids-comp-notification-message-size-gap-spacious);
7665
7549
  }
@@ -7681,19 +7565,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7681
7565
  .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7682
7566
  gap: var(--ids-comp-notification-actions-size-gap-spacious);
7683
7567
  }
7684
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7568
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7685
7569
  width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7686
7570
  height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7687
7571
  }
7688
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper {
7689
- gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
7690
- padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
7691
- border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
7692
- border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
7693
- border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
7694
- border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
7695
- border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
7696
- }
7697
7572
  .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
7698
7573
  padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
7699
7574
  padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
@@ -7706,7 +7581,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7706
7581
  line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
7707
7582
  }
7708
7583
  .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7709
- min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
7710
7584
  padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
7711
7585
  gap: var(--ids-comp-notification-message-size-gap-dense);
7712
7586
  }
@@ -7728,7 +7602,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7728
7602
  .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7729
7603
  gap: var(--ids-comp-notification-actions-size-gap-dense);
7730
7604
  }
7731
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7605
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7732
7606
  width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7733
7607
  height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7734
7608
  }
@@ -11646,6 +11520,764 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
11646
11520
  cursor: not-allowed;
11647
11521
  }
11648
11522
 
11523
+ .ids-tab-group {
11524
+ display: flex;
11525
+ }
11526
+ .ids-tab-group .ids-tab-group__container {
11527
+ display: flex;
11528
+ flex-direction: column;
11529
+ position: relative;
11530
+ flex-shrink: 0;
11531
+ }
11532
+ .ids-tab-group .ids-tab-item__indicator {
11533
+ display: flex;
11534
+ justify-content: center;
11535
+ position: absolute;
11536
+ height: 100%;
11537
+ pointer-events: none;
11538
+ z-index: 1;
11539
+ }
11540
+ .ids-tab-group .ids-tab-item__indicator .ids-tab-item__line {
11541
+ position: relative;
11542
+ box-sizing: border-box;
11543
+ opacity: 0;
11544
+ }
11545
+ .ids-tab-group.ids-tab-group-horizontal {
11546
+ flex-direction: column;
11547
+ align-items: center;
11548
+ flex-shrink: 0;
11549
+ }
11550
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container {
11551
+ width: 100%;
11552
+ }
11553
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11554
+ justify-content: center;
11555
+ }
11556
+ .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 {
11557
+ outline-offset: 4px;
11558
+ }
11559
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container {
11560
+ border-bottom-style: solid;
11561
+ border-bottom-color: var(--ids-comp-tab-tabgroup-color-border-default);
11562
+ }
11563
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-bottom > .ids-tab-group__container .ids-tab-item__line {
11564
+ align-self: flex-end;
11565
+ border-bottom-style: solid;
11566
+ }
11567
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container {
11568
+ border-top-style: solid;
11569
+ border-top-color: var(--ids-comp-tab-tabgroup-color-border-default);
11570
+ }
11571
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-indicator-top > .ids-tab-group__container .ids-tab-item__line {
11572
+ align-self: flex-start;
11573
+ border-top-style: solid;
11574
+ }
11575
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs > .ids-tab-group__container .ids-tab-group__header {
11576
+ align-self: stretch;
11577
+ }
11578
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-stretch-tabs > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11579
+ flex-grow: 1;
11580
+ }
11581
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-start > .ids-tab-group__container .ids-tab-group__header {
11582
+ align-self: flex-start;
11583
+ }
11584
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-center > .ids-tab-group__container .ids-tab-group__header {
11585
+ align-self: center;
11586
+ }
11587
+ .ids-tab-group.ids-tab-group-horizontal.ids-tab-group-end > .ids-tab-group__container .ids-tab-group__header {
11588
+ align-self: flex-end;
11589
+ }
11590
+ .ids-tab-group.ids-tab-group-horizontal > .ids-tab-body-content {
11591
+ display: flex;
11592
+ align-items: flex-start;
11593
+ align-self: stretch;
11594
+ }
11595
+ .ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator {
11596
+ left: 0;
11597
+ width: 100%;
11598
+ }
11599
+ .ids-tab-group.ids-tab-group-horizontal .ids-tab-item__indicator .ids-tab-item__line {
11600
+ width: 100%;
11601
+ }
11602
+ .ids-tab-group.ids-tab-group-vertical {
11603
+ display: inline-flex;
11604
+ align-items: flex-start;
11605
+ width: 100%;
11606
+ }
11607
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header {
11608
+ display: flex;
11609
+ flex-direction: column;
11610
+ align-items: center;
11611
+ flex-shrink: 0;
11612
+ }
11613
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11614
+ align-self: stretch;
11615
+ }
11616
+ .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 {
11617
+ outline-offset: 2px;
11618
+ }
11619
+ .ids-tab-group.ids-tab-group-vertical > .ids-tab-body-content {
11620
+ display: flex;
11621
+ justify-content: center;
11622
+ align-self: stretch;
11623
+ }
11624
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
11625
+ left: 0;
11626
+ }
11627
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
11628
+ border-left-style: solid;
11629
+ }
11630
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
11631
+ right: 0;
11632
+ }
11633
+ .ids-tab-group.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
11634
+ border-right-style: solid;
11635
+ }
11636
+ .ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator {
11637
+ top: 0;
11638
+ }
11639
+ .ids-tab-group.ids-tab-group-vertical .ids-tab-item__indicator .ids-tab-item__line {
11640
+ align-self: flex-start;
11641
+ height: 100%;
11642
+ }
11643
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header {
11644
+ display: flex;
11645
+ justify-content: center;
11646
+ align-items: flex-start;
11647
+ list-style-type: none;
11648
+ margin: 0;
11649
+ }
11650
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11651
+ display: flex;
11652
+ align-items: center;
11653
+ cursor: pointer;
11654
+ position: relative;
11655
+ border-style: solid;
11656
+ }
11657
+ .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 {
11658
+ outline-style: solid;
11659
+ }
11660
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item__label {
11661
+ display: inline-block;
11662
+ text-overflow: ellipsis;
11663
+ overflow: hidden;
11664
+ white-space: nowrap;
11665
+ }
11666
+ .ids-tab-group .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
11667
+ pointer-events: none;
11668
+ user-select: none;
11669
+ }
11670
+ .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 {
11671
+ opacity: 1;
11672
+ }
11673
+ .ids-tab-group.ids-tab-group-compact {
11674
+ padding: var(--ids-comp-tab-container-size-padding-y-compact) var(--ids-comp-tab-container-size-padding-x-compact);
11675
+ gap: var(--ids-comp-tab-container-size-gap-compact);
11676
+ }
11677
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
11678
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11679
+ }
11680
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
11681
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
11682
+ }
11683
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
11684
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11685
+ }
11686
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top {
11687
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11688
+ }
11689
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
11690
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-compact) + var(--ids-comp-tab-item-size-border-width-compact)));
11691
+ }
11692
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
11693
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11694
+ }
11695
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
11696
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11697
+ }
11698
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
11699
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11700
+ }
11701
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
11702
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11703
+ }
11704
+ .ids-tab-group.ids-tab-group-compact.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
11705
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-compact);
11706
+ }
11707
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-body-content {
11708
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-compact) var(--ids-comp-tab-tabpanel-size-padding-x-compact);
11709
+ }
11710
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header {
11711
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-compact) var(--ids-comp-tab-tabgroup-size-padding-x-compact);
11712
+ gap: var(--ids-comp-tab-tabgroup-size-gap-compact);
11713
+ }
11714
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11715
+ padding: var(--ids-comp-tab-item-size-padding-y-compact) var(--ids-comp-tab-item-size-padding-x-compact);
11716
+ gap: var(--ids-comp-tab-item-size-gap-compact);
11717
+ border-radius: var(--ids-comp-tab-item-size-border-radius-compact);
11718
+ border-width: var(--ids-comp-tab-item-size-border-width-compact);
11719
+ }
11720
+ .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 {
11721
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-compact);
11722
+ }
11723
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
11724
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-compact);
11725
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-compact);
11726
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-compact);
11727
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-compact);
11728
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-compact);
11729
+ }
11730
+ .ids-tab-group.ids-tab-group-compact > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
11731
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-compact);
11732
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-compact);
11733
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-compact);
11734
+ width: var(--ids-comp-tab-item-icon-size-width-compact);
11735
+ height: var(--ids-comp-tab-item-icon-size-height-compact);
11736
+ }
11737
+ .ids-tab-group.ids-tab-group-comfortable {
11738
+ padding: var(--ids-comp-tab-container-size-padding-y-comfortable) var(--ids-comp-tab-container-size-padding-x-comfortable);
11739
+ gap: var(--ids-comp-tab-container-size-gap-comfortable);
11740
+ }
11741
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
11742
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11743
+ }
11744
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
11745
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
11746
+ }
11747
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
11748
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11749
+ }
11750
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top {
11751
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11752
+ }
11753
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
11754
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-comfortable) + var(--ids-comp-tab-item-size-border-width-comfortable)));
11755
+ }
11756
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
11757
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11758
+ }
11759
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
11760
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11761
+ }
11762
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
11763
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11764
+ }
11765
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
11766
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11767
+ }
11768
+ .ids-tab-group.ids-tab-group-comfortable.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
11769
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-comfortable);
11770
+ }
11771
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-body-content {
11772
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-comfortable) var(--ids-comp-tab-tabpanel-size-padding-x-comfortable);
11773
+ }
11774
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header {
11775
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-comfortable) var(--ids-comp-tab-tabgroup-size-padding-x-comfortable);
11776
+ gap: var(--ids-comp-tab-tabgroup-size-gap-comfortable);
11777
+ }
11778
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11779
+ padding: var(--ids-comp-tab-item-size-padding-y-comfortable) var(--ids-comp-tab-item-size-padding-x-comfortable);
11780
+ gap: var(--ids-comp-tab-item-size-gap-comfortable);
11781
+ border-radius: var(--ids-comp-tab-item-size-border-radius-comfortable);
11782
+ border-width: var(--ids-comp-tab-item-size-border-width-comfortable);
11783
+ }
11784
+ .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 {
11785
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-comfortable);
11786
+ }
11787
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
11788
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-comfortable);
11789
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-comfortable);
11790
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-comfortable);
11791
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-comfortable);
11792
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-comfortable);
11793
+ }
11794
+ .ids-tab-group.ids-tab-group-comfortable > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
11795
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-comfortable);
11796
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-comfortable);
11797
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-comfortable);
11798
+ width: var(--ids-comp-tab-item-icon-size-width-comfortable);
11799
+ height: var(--ids-comp-tab-item-icon-size-height-comfortable);
11800
+ }
11801
+ .ids-tab-group.ids-tab-group-spacious {
11802
+ padding: var(--ids-comp-tab-container-size-padding-y-spacious) var(--ids-comp-tab-container-size-padding-x-spacious);
11803
+ gap: var(--ids-comp-tab-container-size-gap-spacious);
11804
+ }
11805
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
11806
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11807
+ }
11808
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
11809
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
11810
+ }
11811
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
11812
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11813
+ }
11814
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top {
11815
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11816
+ }
11817
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
11818
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-spacious) + var(--ids-comp-tab-item-size-border-width-spacious)));
11819
+ }
11820
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
11821
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11822
+ }
11823
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
11824
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11825
+ }
11826
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
11827
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11828
+ }
11829
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
11830
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11831
+ }
11832
+ .ids-tab-group.ids-tab-group-spacious.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
11833
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-spacious);
11834
+ }
11835
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-body-content {
11836
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-spacious) var(--ids-comp-tab-tabpanel-size-padding-x-spacious);
11837
+ }
11838
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header {
11839
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-spacious) var(--ids-comp-tab-tabgroup-size-padding-x-spacious);
11840
+ gap: var(--ids-comp-tab-tabgroup-size-gap-spacious);
11841
+ }
11842
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11843
+ padding: var(--ids-comp-tab-item-size-padding-y-spacious) var(--ids-comp-tab-item-size-padding-x-spacious);
11844
+ gap: var(--ids-comp-tab-item-size-gap-spacious);
11845
+ border-radius: var(--ids-comp-tab-item-size-border-radius-spacious);
11846
+ border-width: var(--ids-comp-tab-item-size-border-width-spacious);
11847
+ }
11848
+ .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 {
11849
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-spacious);
11850
+ }
11851
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
11852
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-spacious);
11853
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-spacious);
11854
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-spacious);
11855
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-spacious);
11856
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-spacious);
11857
+ }
11858
+ .ids-tab-group.ids-tab-group-spacious > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
11859
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-spacious);
11860
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-spacious);
11861
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-spacious);
11862
+ width: var(--ids-comp-tab-item-icon-size-width-spacious);
11863
+ height: var(--ids-comp-tab-item-icon-size-height-spacious);
11864
+ }
11865
+ .ids-tab-group.ids-tab-group-dense {
11866
+ padding: var(--ids-comp-tab-container-size-padding-y-dense) var(--ids-comp-tab-container-size-padding-x-dense);
11867
+ gap: var(--ids-comp-tab-container-size-gap-dense);
11868
+ }
11869
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom {
11870
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11871
+ }
11872
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator {
11873
+ bottom: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
11874
+ }
11875
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-bottom .ids-tab-item__indicator .ids-tab-item__line {
11876
+ border-bottom-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11877
+ }
11878
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top {
11879
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11880
+ }
11881
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator {
11882
+ top: calc(0px - (var(--ids-comp-tab-item-active-indicator-size-width-dense) + var(--ids-comp-tab-item-size-border-width-dense)));
11883
+ }
11884
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-horizontal.ids-tab-group-indicator-top .ids-tab-item__indicator .ids-tab-item__line {
11885
+ border-top-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11886
+ }
11887
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator {
11888
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11889
+ }
11890
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-left .ids-tab-item__indicator .ids-tab-item__line {
11891
+ border-left-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11892
+ }
11893
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator {
11894
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11895
+ }
11896
+ .ids-tab-group.ids-tab-group-dense.ids-tab-group-vertical.ids-tab-group-indicator-right .ids-tab-item__indicator .ids-tab-item__line {
11897
+ border-right-width: var(--ids-comp-tab-item-active-indicator-size-width-dense);
11898
+ }
11899
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-body-content {
11900
+ padding: var(--ids-comp-tab-tabpanel-size-padding-y-dense) var(--ids-comp-tab-tabpanel-size-padding-x-dense);
11901
+ }
11902
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header {
11903
+ padding: var(--ids-comp-tab-tabgroup-size-padding-y-dense) var(--ids-comp-tab-tabgroup-size-padding-x-dense);
11904
+ gap: var(--ids-comp-tab-tabgroup-size-gap-dense);
11905
+ }
11906
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11907
+ padding: var(--ids-comp-tab-item-size-padding-y-dense) var(--ids-comp-tab-item-size-padding-x-dense);
11908
+ gap: var(--ids-comp-tab-item-size-gap-dense);
11909
+ border-radius: var(--ids-comp-tab-item-size-border-radius-dense);
11910
+ border-width: var(--ids-comp-tab-item-size-border-width-dense);
11911
+ }
11912
+ .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 {
11913
+ outline-width: var(--ids-comp-tab-item-focused-outline-size-outline-dense);
11914
+ }
11915
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__label {
11916
+ font-family: var(--ids-comp-tab-item-label-typography-font-family-dense);
11917
+ font-size: var(--ids-comp-tab-item-label-typography-font-size-dense);
11918
+ font-weight: var(--ids-comp-tab-item-label-typography-font-weight-dense);
11919
+ letter-spacing: var(--ids-comp-tab-item-label-typography-letter-spacing-dense);
11920
+ line-height: var(--ids-comp-tab-item-label-typography-line-height-dense);
11921
+ }
11922
+ .ids-tab-group.ids-tab-group-dense > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
11923
+ font-size: var(--ids-comp-tab-item-icon-typography-font-size-dense);
11924
+ font-weight: var(--ids-comp-tab-item-icon-typography-font-weight-dense);
11925
+ line-height: var(--ids-comp-tab-item-icon-typography-line-height-dense);
11926
+ width: var(--ids-comp-tab-item-icon-size-width-dense);
11927
+ height: var(--ids-comp-tab-item-icon-size-height-dense);
11928
+ }
11929
+ .ids-tab-group.ids-tab-group-surface {
11930
+ background-color: var(--ids-comp-tab-container-color-bg-default);
11931
+ }
11932
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header {
11933
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
11934
+ }
11935
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
11936
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-default);
11937
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-default);
11938
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-default);
11939
+ }
11940
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
11941
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-default);
11942
+ }
11943
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
11944
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
11945
+ }
11946
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
11947
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-hovered);
11948
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-hovered);
11949
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-hovered);
11950
+ }
11951
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
11952
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-hovered);
11953
+ }
11954
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
11955
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
11956
+ }
11957
+ .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 {
11958
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-focused);
11959
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-focused);
11960
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-focused);
11961
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
11962
+ }
11963
+ .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 {
11964
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-focused);
11965
+ }
11966
+ .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 {
11967
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
11968
+ }
11969
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
11970
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-pressed);
11971
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-pressed);
11972
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-pressed);
11973
+ }
11974
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
11975
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-pressed);
11976
+ }
11977
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
11978
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
11979
+ }
11980
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
11981
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
11982
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-disabled);
11983
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled);
11984
+ }
11985
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
11986
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
11987
+ }
11988
+ .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 {
11989
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
11990
+ }
11991
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
11992
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-default);
11993
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-default);
11994
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-default);
11995
+ }
11996
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
11997
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-default);
11998
+ }
11999
+ .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 {
12000
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-default);
12001
+ }
12002
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
12003
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-hovered);
12004
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-hovered);
12005
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-hovered);
12006
+ }
12007
+ .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 {
12008
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-hovered);
12009
+ }
12010
+ .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 {
12011
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-hovered);
12012
+ }
12013
+ .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 {
12014
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-focused);
12015
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-focused);
12016
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-focused);
12017
+ }
12018
+ .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 {
12019
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-focused);
12020
+ }
12021
+ .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 {
12022
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-focused);
12023
+ }
12024
+ .ids-tab-group.ids-tab-group-surface > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
12025
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-surface-pressed);
12026
+ border-color: var(--ids-comp-tab-item-standard-selected-border-surface-pressed);
12027
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-surface-pressed);
12028
+ }
12029
+ .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 {
12030
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-surface-pressed);
12031
+ }
12032
+ .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 {
12033
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-pressed);
12034
+ }
12035
+ .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 {
12036
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-surface-disabled);
12037
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-surface-disabled);
12038
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-surface-disabled);
12039
+ }
12040
+ .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 {
12041
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-surface-disabled);
12042
+ }
12043
+ .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 {
12044
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-surface-disabled);
12045
+ }
12046
+ .ids-tab-group.ids-tab-group-light {
12047
+ background-color: var(--ids-comp-tab-container-color-bg-default);
12048
+ }
12049
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header {
12050
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
12051
+ }
12052
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
12053
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-default);
12054
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-default);
12055
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-default);
12056
+ }
12057
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
12058
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-default);
12059
+ }
12060
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
12061
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
12062
+ }
12063
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
12064
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-hovered);
12065
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-hovered);
12066
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-hovered);
12067
+ }
12068
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
12069
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-hovered);
12070
+ }
12071
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
12072
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
12073
+ }
12074
+ .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 {
12075
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-focused);
12076
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-focused);
12077
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-focused);
12078
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
12079
+ }
12080
+ .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 {
12081
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-focused);
12082
+ }
12083
+ .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 {
12084
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
12085
+ }
12086
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
12087
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-pressed);
12088
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-pressed);
12089
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-pressed);
12090
+ }
12091
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
12092
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-pressed);
12093
+ }
12094
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
12095
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
12096
+ }
12097
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
12098
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
12099
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-disabled);
12100
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled);
12101
+ }
12102
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
12103
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
12104
+ }
12105
+ .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 {
12106
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
12107
+ }
12108
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
12109
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-default);
12110
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-default);
12111
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-default);
12112
+ }
12113
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
12114
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-default);
12115
+ }
12116
+ .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 {
12117
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-default);
12118
+ }
12119
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
12120
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-hovered);
12121
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-hovered);
12122
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-hovered);
12123
+ }
12124
+ .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 {
12125
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-hovered);
12126
+ }
12127
+ .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 {
12128
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-hovered);
12129
+ }
12130
+ .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 {
12131
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-focused);
12132
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-focused);
12133
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-focused);
12134
+ }
12135
+ .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 {
12136
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-focused);
12137
+ }
12138
+ .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 {
12139
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-focused);
12140
+ }
12141
+ .ids-tab-group.ids-tab-group-light > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
12142
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-light-pressed);
12143
+ border-color: var(--ids-comp-tab-item-standard-selected-border-light-pressed);
12144
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-light-pressed);
12145
+ }
12146
+ .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 {
12147
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-light-pressed);
12148
+ }
12149
+ .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 {
12150
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-pressed);
12151
+ }
12152
+ .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 {
12153
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-light-disabled);
12154
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-light-disabled);
12155
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-light-disabled);
12156
+ }
12157
+ .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 {
12158
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-light-disabled);
12159
+ }
12160
+ .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 {
12161
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-light-disabled);
12162
+ }
12163
+ .ids-tab-group.ids-tab-group-primary {
12164
+ background-color: var(--ids-comp-tab-container-color-bg-default);
12165
+ }
12166
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header {
12167
+ background-color: var(--ids-comp-tab-tabgroup-color-bg-default);
12168
+ }
12169
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item {
12170
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-default);
12171
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-default);
12172
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-default);
12173
+ }
12174
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-icon {
12175
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-default);
12176
+ }
12177
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item > .ids-tab-item__indicator {
12178
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
12179
+ }
12180
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover {
12181
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-hovered);
12182
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-hovered);
12183
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-hovered);
12184
+ }
12185
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-icon {
12186
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-hovered);
12187
+ }
12188
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:hover > .ids-tab-item__indicator {
12189
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
12190
+ }
12191
+ .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 {
12192
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-focused);
12193
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-focused);
12194
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-focused);
12195
+ outline-color: var(--ids-comp-tab-item-standard-focused-outline-color-dark-default);
12196
+ }
12197
+ .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 {
12198
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-focused);
12199
+ }
12200
+ .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 {
12201
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
12202
+ }
12203
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active {
12204
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-pressed);
12205
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-pressed);
12206
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-pressed);
12207
+ }
12208
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-icon {
12209
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-pressed);
12210
+ }
12211
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item:active > .ids-tab-item__indicator {
12212
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
12213
+ }
12214
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled {
12215
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
12216
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-disabled);
12217
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled);
12218
+ }
12219
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item-disabled > .ids-icon {
12220
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
12221
+ }
12222
+ .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 {
12223
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
12224
+ }
12225
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active {
12226
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-default);
12227
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-default);
12228
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-default);
12229
+ }
12230
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active > .ids-icon {
12231
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-default);
12232
+ }
12233
+ .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 {
12234
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-default);
12235
+ }
12236
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:hover {
12237
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-hovered);
12238
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-hovered);
12239
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-hovered);
12240
+ }
12241
+ .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 {
12242
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-hovered);
12243
+ }
12244
+ .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 {
12245
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-hovered);
12246
+ }
12247
+ .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 {
12248
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-focused);
12249
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-focused);
12250
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-focused);
12251
+ }
12252
+ .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 {
12253
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-focused);
12254
+ }
12255
+ .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 {
12256
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-focused);
12257
+ }
12258
+ .ids-tab-group.ids-tab-group-primary > .ids-tab-group__container .ids-tab-group__header .ids-tab-item.ids-tab-item--active:active {
12259
+ background-color: var(--ids-comp-tab-item-standard-selected-bg-primary-pressed);
12260
+ border-color: var(--ids-comp-tab-item-standard-selected-border-primary-pressed);
12261
+ color: var(--ids-comp-tab-item-standard-selected-fg-label-primary-pressed);
12262
+ }
12263
+ .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 {
12264
+ color: var(--ids-comp-tab-item-standard-selected-fg-icon-primary-pressed);
12265
+ }
12266
+ .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 {
12267
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-pressed);
12268
+ }
12269
+ .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 {
12270
+ background-color: var(--ids-comp-tab-item-standard-unselected-bg-primary-disabled);
12271
+ border-color: var(--ids-comp-tab-item-standard-unselected-border-primary-disabled);
12272
+ color: var(--ids-comp-tab-item-standard-unselected-fg-label-primary-disabled);
12273
+ }
12274
+ .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 {
12275
+ color: var(--ids-comp-tab-item-standard-unselected-fg-icon-primary-disabled);
12276
+ }
12277
+ .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 {
12278
+ color: var(--ids-comp-tab-item-standard-active-indicator-bg-primary-disabled);
12279
+ }
12280
+
11649
12281
  .ids-tag {
11650
12282
  display: inline-flex;
11651
12283
  align-items: center;