@i-cell/ids-styles 0.0.21 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7265,7 +7265,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7265
7265
  .ids-notification.ids-notification-filled.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7266
7266
  color: var(--ids-comp-notification-filled-color-fg-message-info-default);
7267
7267
  }
7268
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
7268
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper {
7269
7269
  gap: var(--ids-comp-notification-filled-container-size-gap-compact);
7270
7270
  padding: var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);
7271
7271
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-compact);
@@ -7274,45 +7274,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7274
7274
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);
7275
7275
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-compact);
7276
7276
  }
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 {
7277
+ .ids-notification.ids-notification-filled.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7289
7278
  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
- }
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
7279
  }
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 {
7280
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper {
7316
7281
  gap: var(--ids-comp-notification-filled-container-size-gap-comfortable);
7317
7282
  padding: var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);
7318
7283
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-comfortable);
@@ -7321,45 +7286,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7321
7286
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);
7322
7287
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-comfortable);
7323
7288
  }
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 {
7289
+ .ids-notification.ids-notification-filled.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7336
7290
  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
7291
  }
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
- }
7362
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper {
7292
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper {
7363
7293
  gap: var(--ids-comp-notification-filled-container-size-gap-spacious);
7364
7294
  padding: var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);
7365
7295
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-spacious);
@@ -7368,45 +7298,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7368
7298
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);
7369
7299
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-spacious);
7370
7300
  }
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 {
7301
+ .ids-notification.ids-notification-filled.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7383
7302
  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
- }
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
7303
  }
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 {
7304
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper {
7410
7305
  gap: var(--ids-comp-notification-filled-container-size-gap-dense);
7411
7306
  padding: var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);
7412
7307
  border-radius: var(--ids-comp-notification-filled-container-size-border-radius-dense);
@@ -7415,43 +7310,8 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7415
7310
  border-bottom-width: var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);
7416
7311
  border-left-width: var(--ids-comp-notification-filled-container-size-border-left-width-dense);
7417
7312
  }
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 {
7313
+ .ids-notification.ids-notification-filled.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7430
7314
  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
7315
  }
7456
7316
  .ids-notification.ids-notification-outlined.ids-notification-error > .ids-notification__content-wrapper {
7457
7317
  border-color: var(--ids-comp-notification-outlined-color-border-error-default);
@@ -7544,7 +7404,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7544
7404
  .ids-notification.ids-notification-outlined.ids-notification-info > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__title-msg-container > .ids-notification__message {
7545
7405
  color: var(--ids-comp-notification-outlined-color-fg-message-info-default);
7546
7406
  }
7547
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper {
7407
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper {
7548
7408
  gap: var(--ids-comp-notification-outlined-container-size-gap-compact);
7549
7409
  padding: var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);
7550
7410
  border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-compact);
@@ -7553,6 +7413,45 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7553
7413
  border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);
7554
7414
  border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-compact);
7555
7415
  }
7416
+ .ids-notification.ids-notification-outlined.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container {
7417
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-compact);
7418
+ }
7419
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper {
7420
+ gap: var(--ids-comp-notification-outlined-container-size-gap-comfortable);
7421
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);
7422
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);
7423
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);
7424
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);
7425
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);
7426
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable);
7427
+ }
7428
+ .ids-notification.ids-notification-outlined.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container {
7429
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-comfortable);
7430
+ }
7431
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper {
7432
+ gap: var(--ids-comp-notification-outlined-container-size-gap-spacious);
7433
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);
7434
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-spacious);
7435
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);
7436
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);
7437
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);
7438
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-spacious);
7439
+ }
7440
+ .ids-notification.ids-notification-outlined.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container {
7441
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-spacious);
7442
+ }
7443
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper {
7444
+ gap: var(--ids-comp-notification-outlined-container-size-gap-dense);
7445
+ padding: var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);
7446
+ border-radius: var(--ids-comp-notification-outlined-container-size-border-radius-dense);
7447
+ border-top-width: var(--ids-comp-notification-outlined-container-size-border-top-width-dense);
7448
+ border-right-width: var(--ids-comp-notification-outlined-container-size-border-right-width-dense);
7449
+ border-bottom-width: var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);
7450
+ border-left-width: var(--ids-comp-notification-outlined-container-size-border-left-width-dense);
7451
+ }
7452
+ .ids-notification.ids-notification-outlined.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container {
7453
+ min-width: var(--ids-comp-notification-outlined-container-size-min-width-dense);
7454
+ }
7556
7455
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__leading-element {
7557
7456
  padding-left: var(--ids-comp-notification-icon-size-padding-left-compact);
7558
7457
  padding-right: var(--ids-comp-notification-icon-size-padding-right-compact);
@@ -7565,7 +7464,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7565
7464
  line-height: var(--ids-comp-notification-icon-typography-line-height-compact);
7566
7465
  }
7567
7466
  .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
7467
  padding-right: var(--ids-comp-notification-message-size-padding-right-compact);
7570
7468
  gap: var(--ids-comp-notification-message-size-gap-compact);
7571
7469
  }
@@ -7587,19 +7485,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7587
7485
  .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7588
7486
  gap: var(--ids-comp-notification-actions-size-gap-compact);
7589
7487
  }
7590
- .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7488
+ .ids-notification.ids-notification-compact > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7591
7489
  width: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7592
7490
  height: var(--ids-comp-notification-icon-button-size-icon-button-compact);
7593
7491
  }
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
7492
  .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__leading-element {
7604
7493
  padding-left: var(--ids-comp-notification-icon-size-padding-left-comfortable);
7605
7494
  padding-right: var(--ids-comp-notification-icon-size-padding-right-comfortable);
@@ -7612,7 +7501,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7612
7501
  line-height: var(--ids-comp-notification-icon-typography-line-height-comfortable);
7613
7502
  }
7614
7503
  .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
7504
  padding-right: var(--ids-comp-notification-message-size-padding-right-comfortable);
7617
7505
  gap: var(--ids-comp-notification-message-size-gap-comfortable);
7618
7506
  }
@@ -7634,19 +7522,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7634
7522
  .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7635
7523
  gap: var(--ids-comp-notification-actions-size-gap-comfortable);
7636
7524
  }
7637
- .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7525
+ .ids-notification.ids-notification-comfortable > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7638
7526
  width: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7639
7527
  height: var(--ids-comp-notification-icon-button-size-icon-button-comfortable);
7640
7528
  }
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
7529
  .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__leading-element {
7651
7530
  padding-left: var(--ids-comp-notification-icon-size-padding-left-spacious);
7652
7531
  padding-right: var(--ids-comp-notification-icon-size-padding-right-spacious);
@@ -7659,7 +7538,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7659
7538
  line-height: var(--ids-comp-notification-icon-typography-line-height-spacious);
7660
7539
  }
7661
7540
  .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
7541
  padding-right: var(--ids-comp-notification-message-size-padding-right-spacious);
7664
7542
  gap: var(--ids-comp-notification-message-size-gap-spacious);
7665
7543
  }
@@ -7681,19 +7559,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7681
7559
  .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7682
7560
  gap: var(--ids-comp-notification-actions-size-gap-spacious);
7683
7561
  }
7684
- .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7562
+ .ids-notification.ids-notification-spacious > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7685
7563
  width: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7686
7564
  height: var(--ids-comp-notification-icon-button-size-icon-button-spacious);
7687
7565
  }
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
7566
  .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__leading-element {
7698
7567
  padding-left: var(--ids-comp-notification-icon-size-padding-left-dense);
7699
7568
  padding-right: var(--ids-comp-notification-icon-size-padding-right-dense);
@@ -7706,7 +7575,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7706
7575
  line-height: var(--ids-comp-notification-icon-typography-line-height-dense);
7707
7576
  }
7708
7577
  .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
7578
  padding-right: var(--ids-comp-notification-message-size-padding-right-dense);
7711
7579
  gap: var(--ids-comp-notification-message-size-gap-dense);
7712
7580
  }
@@ -7728,7 +7596,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7728
7596
  .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__container > .ids-notification__action {
7729
7597
  gap: var(--ids-comp-notification-actions-size-gap-dense);
7730
7598
  }
7731
- .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-btn-container > .ids-icon-button > .ids-icon {
7599
+ .ids-notification.ids-notification-dense > .ids-notification__content-wrapper > .ids-notification__close-button-container > .ids-icon-button > .ids-icon {
7732
7600
  width: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7733
7601
  height: var(--ids-comp-notification-icon-button-size-icon-button-dense);
7734
7602
  }