@carbon/styles 1.113.0 → 1.114.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/css/styles.css +1651 -198
  2. package/css/styles.min.css +1 -1
  3. package/index.scss +2 -1
  4. package/package.json +9 -9
  5. package/scss/__tests__/__snapshots__/border-radius-test.js.snap +24 -0
  6. package/scss/__tests__/__snapshots__/colors-test.js.snap +1 -1
  7. package/scss/__tests__/__snapshots__/config-test.js.snap +1 -1
  8. package/scss/__tests__/__snapshots__/spacing-test.js.snap +1 -1
  9. package/scss/__tests__/__snapshots__/type-test.js.snap +1 -1
  10. package/scss/__tests__/border-radius-test.js +31 -0
  11. package/scss/_border-radius.scss +10 -0
  12. package/scss/components/EditInPlace/_edit-in-place.scss +188 -0
  13. package/scss/components/EditInPlace/_index.scss +11 -0
  14. package/scss/components/FullPageError/_full-page-error.scss +91 -0
  15. package/scss/components/FullPageError/_index.scss +11 -0
  16. package/scss/components/InterstitialScreen/_index.scss +11 -0
  17. package/scss/components/InterstitialScreen/_interstitial-screen.scss +181 -0
  18. package/scss/components/OptionsTile/_index.scss +11 -0
  19. package/scss/components/OptionsTile/_options-tile.scss +240 -0
  20. package/scss/components/__tests__/data-table-test.js +43 -1
  21. package/scss/components/__tests__/file-uploader.js +30 -0
  22. package/scss/components/_index.scss +9 -1
  23. package/scss/components/big-number/_big-number.scss +164 -0
  24. package/scss/components/big-number/_index.scss +11 -0
  25. package/scss/components/card/_card.scss +37 -12
  26. package/scss/components/coachmark/_coachmark-beacon.scss +159 -0
  27. package/scss/components/coachmark/_coachmark-tagline.scss +142 -0
  28. package/scss/components/coachmark/_coachmark.scss +56 -0
  29. package/scss/components/coachmark/_index.scss +17 -0
  30. package/scss/components/data-table/_data-table.scss +140 -110
  31. package/scss/components/data-table/expandable/_data-table-expandable.scss +86 -59
  32. package/scss/components/data-table/skeleton/_data-table-skeleton.scss +10 -8
  33. package/scss/components/date-picker/_date-picker-next.scss +20 -20
  34. package/scss/components/file-uploader/_file-uploader.scss +6 -4
  35. package/scss/components/scroll-gradient/_index.scss +11 -0
  36. package/scss/components/scroll-gradient/_scroll-gradient.scss +107 -0
  37. package/scss/components/slider/_slider.scss +38 -15
  38. package/scss/components/tabs/_tabs.scss +11 -0
  39. package/scss/components/user-avatar/_index.scss +11 -0
  40. package/scss/components/user-avatar/_user-avatar.scss +160 -0
package/css/styles.css CHANGED
@@ -7182,6 +7182,169 @@ li.cds--accordion__item--disabled:last-of-type {
7182
7182
  margin-inline-end: 0.25rem;
7183
7183
  }
7184
7184
 
7185
+ .cds--big-number {
7186
+ margin: 0;
7187
+ }
7188
+
7189
+ .cds--big-number__label {
7190
+ font-size: var(--cds-label-01-font-size, 0.75rem);
7191
+ font-weight: var(--cds-label-01-font-weight, 400);
7192
+ line-height: var(--cds-label-01-line-height, 1.33333);
7193
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7194
+ display: block;
7195
+ margin: 0;
7196
+ color: var(--cds-text-secondary, #525252);
7197
+ }
7198
+
7199
+ .cds--big-number__value {
7200
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7201
+ font-weight: var(--cds-heading-04-font-weight, 400);
7202
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7203
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7204
+ margin-block-end: 0;
7205
+ }
7206
+
7207
+ .cds--big-number__total {
7208
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7209
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7210
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7211
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7212
+ }
7213
+
7214
+ .cds--big-number__total,
7215
+ .cds--big-number__percentage-mark {
7216
+ margin-block: auto 0.25rem;
7217
+ }
7218
+
7219
+ .cds--big-number__info {
7220
+ padding-inline-start: 0.5rem;
7221
+ vertical-align: top;
7222
+ }
7223
+
7224
+ .cds--big-number__trend {
7225
+ margin-block-start: 0.5rem;
7226
+ vertical-align: top;
7227
+ }
7228
+
7229
+ .cds--big-number__row {
7230
+ display: flex;
7231
+ }
7232
+
7233
+ .cds--big-number__percentage {
7234
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7235
+ font-weight: var(--cds-heading-04-font-weight, 400);
7236
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7237
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7238
+ }
7239
+
7240
+ .cds--big-number__percentage-mark {
7241
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7242
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7243
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7244
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7245
+ }
7246
+
7247
+ .cds--big-number__icon-button {
7248
+ margin-inline-start: 0.25rem;
7249
+ }
7250
+
7251
+ .cds--big-number--lg .cds--big-number__value,
7252
+ .cds--big-number--lg .cds--big-number__percentage {
7253
+ font-size: var(--cds-heading-06-font-size, 2.625rem);
7254
+ font-weight: var(--cds-heading-06-font-weight, 300);
7255
+ line-height: var(--cds-heading-06-line-height, 1.199);
7256
+ letter-spacing: var(--cds-heading-06-letter-spacing, 0);
7257
+ }
7258
+
7259
+ .cds--big-number--lg .cds--big-number__total,
7260
+ .cds--big-number--lg .cds--big-number__percentage-mark {
7261
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
7262
+ font-weight: var(--cds-heading-03-font-weight, 400);
7263
+ line-height: var(--cds-heading-03-line-height, 1.4);
7264
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
7265
+ }
7266
+
7267
+ .cds--big-number--xl .cds--big-number__label {
7268
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7269
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7270
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7271
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7272
+ }
7273
+
7274
+ .cds--big-number--xl .cds--big-number__value,
7275
+ .cds--big-number--xl .cds--big-number__percentage {
7276
+ font-size: var(--cds-heading-07-font-size, 3.375rem);
7277
+ font-weight: var(--cds-heading-07-font-weight, 300);
7278
+ line-height: var(--cds-heading-07-line-height, 1.19);
7279
+ letter-spacing: var(--cds-heading-07-letter-spacing, 0);
7280
+ }
7281
+
7282
+ .cds--big-number--xl .cds--big-number__total,
7283
+ .cds--big-number--xl .cds--big-number__percentage-mark {
7284
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7285
+ font-weight: var(--cds-heading-04-font-weight, 400);
7286
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7287
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7288
+ }
7289
+
7290
+ .cds--big-number--xl .cds--big-number__trend {
7291
+ margin-block-start: 0.75rem;
7292
+ }
7293
+
7294
+ .cds--big-number .cds--big-number__tooltip-trigger {
7295
+ display: inline-flex;
7296
+ padding: 0;
7297
+ border: 0;
7298
+ background: none;
7299
+ color: inherit;
7300
+ cursor: pointer;
7301
+ vertical-align: top;
7302
+ }
7303
+ .cds--big-number .cds--big-number__tooltip-trigger:focus {
7304
+ outline: 1px solid var(--cds-focus, #0f62fe);
7305
+ }
7306
+
7307
+ .cds--big-number-skeleton {
7308
+ inline-size: 4rem;
7309
+ }
7310
+
7311
+ .cds--big-number-skeleton__label {
7312
+ block-size: 0.75rem;
7313
+ margin-block: 0 0.5rem;
7314
+ }
7315
+
7316
+ .cds--big-number-skeleton__value {
7317
+ margin: 0;
7318
+ /* stylelint-disable-next-line declaration-no-important */
7319
+ block-size: 2.5rem !important;
7320
+ }
7321
+
7322
+ .cds--big-number-skeleton--lg {
7323
+ inline-size: 5rem;
7324
+ }
7325
+
7326
+ .cds--big-number-skeleton--xl {
7327
+ inline-size: 6rem;
7328
+ }
7329
+
7330
+ .cds--big-number-skeleton.cds--big-number-skeleton--lg .cds--big-number-skeleton__label {
7331
+ block-size: 0.75rem;
7332
+ }
7333
+
7334
+ .cds--big-number-skeleton.cds--big-number-skeleton--lg .cds--big-number-skeleton__value {
7335
+ /* stylelint-disable-next-line declaration-no-important */
7336
+ block-size: 3rem !important;
7337
+ }
7338
+
7339
+ .cds--big-number-skeleton.cds--big-number-skeleton--xl .cds--big-number-skeleton__label {
7340
+ block-size: 0.75rem;
7341
+ }
7342
+
7343
+ .cds--big-number-skeleton.cds--big-number-skeleton--xl .cds--big-number-skeleton__value {
7344
+ /* stylelint-disable-next-line declaration-no-important */
7345
+ block-size: 4rem !important;
7346
+ }
7347
+
7185
7348
  .cds--overflow-menu,
7186
7349
  .cds--overflow-menu__trigger {
7187
7350
  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
@@ -7940,17 +8103,19 @@ a.cds--overflow-menu-options__btn::before {
7940
8103
 
7941
8104
  .cds--card {
7942
8105
  position: relative;
7943
- border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
7944
- background-color: var(--cds-layer-01, #f4f4f4);
8106
+ background-color: var(--cds-layer);
7945
8107
  color: var(--cds-text-primary, #161616);
7946
8108
  }
7947
8109
 
7948
8110
  .cds--card--clickable {
8111
+ display: block;
8112
+ border: 1px solid var(--cds-border-tile-01, #c6c6c6);
7949
8113
  cursor: pointer;
8114
+ text-decoration: none;
7950
8115
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
7951
8116
  }
7952
8117
  .cds--card--clickable:hover {
7953
- background-color: var(--cds-layer-hover-01, #e8e8e8);
8118
+ background-color: var(--cds-layer-hover);
7954
8119
  }
7955
8120
  .cds--card--clickable:focus {
7956
8121
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -7961,13 +8126,28 @@ a.cds--overflow-menu-options__btn::before {
7961
8126
  outline-style: dotted;
7962
8127
  }
7963
8128
  }
8129
+ .cds--card--clickable:focus {
8130
+ outline-offset: 0;
8131
+ }
7964
8132
  .cds--card--clickable:active {
7965
- background-color: var(--cds-layer-active-01, #c6c6c6);
8133
+ background-color: var(--cds-layer-active);
8134
+ }
8135
+
8136
+ .cds--card__clickable-footer {
8137
+ display: flex;
8138
+ align-items: center;
8139
+ justify-content: flex-end;
8140
+ padding: 1rem;
8141
+ color: var(--cds-icon-interactive, #0f62fe);
8142
+ }
8143
+
8144
+ .cds--card--disabled .cds--card__clickable-footer {
8145
+ color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7966
8146
  }
7967
8147
 
7968
8148
  .cds--card--disabled {
7969
8149
  border-color: var(--cds-border-disabled, #c6c6c6);
7970
- background-color: var(--cds-layer-01, #f4f4f4);
8150
+ background-color: var(--cds-layer);
7971
8151
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7972
8152
  cursor: not-allowed;
7973
8153
  pointer-events: none;
@@ -7987,13 +8167,12 @@ a.cds--overflow-menu-options__btn::before {
7987
8167
  font-weight: var(--cds-body-compact-01-font-weight, 400);
7988
8168
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
7989
8169
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7990
- margin-block: 1rem;
7991
- margin-block-start: 0;
7992
- margin-inline: 1rem;
8170
+ padding-block: 1rem;
8171
+ padding-inline: 1rem;
7993
8172
  }
7994
8173
 
7995
- .cds--card > .cds--card__body:first-child {
7996
- margin-block-start: 1rem;
8174
+ .cds--card__body--flush {
8175
+ padding: 0;
7997
8176
  }
7998
8177
 
7999
8178
  .cds--card__footer {
@@ -8130,6 +8309,10 @@ a.cds--overflow-menu-options__btn::before {
8130
8309
  color: var(--cds-text-secondary, #525252);
8131
8310
  }
8132
8311
 
8312
+ .cds--card--disabled .cds--card__label {
8313
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8314
+ }
8315
+
8133
8316
  .cds--card__label--truncate {
8134
8317
  overflow: hidden;
8135
8318
  text-overflow: ellipsis;
@@ -8148,7 +8331,6 @@ a.cds--overflow-menu-options__btn::before {
8148
8331
  display: flex;
8149
8332
  overflow: hidden;
8150
8333
  flex-direction: column;
8151
- color: var(--cds-text-primary, #161616);
8152
8334
  gap: 0.125rem;
8153
8335
  margin-inline: 1rem;
8154
8336
  min-inline-size: 0;
@@ -8223,6 +8405,10 @@ a.cds--overflow-menu-options__btn::before {
8223
8405
  color: var(--cds-text-secondary, #525252);
8224
8406
  }
8225
8407
 
8408
+ .cds--card--disabled .cds--card__description {
8409
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8410
+ }
8411
+
8226
8412
  .cds--card__description--truncate {
8227
8413
  overflow: hidden;
8228
8414
  text-overflow: ellipsis;
@@ -8328,6 +8514,252 @@ a.cds--overflow-menu-options__btn::before {
8328
8514
  opacity: 1;
8329
8515
  }
8330
8516
 
8517
+ /* stylelint-disable declaration-no-important */
8518
+ .cds--coachmark--floating span:has(> div > .cds--coachmark--content-header--drag-icon) {
8519
+ margin-inline-end: auto;
8520
+ }
8521
+ .cds--coachmark .cds--coachmark--content-header--is-dragging {
8522
+ border-radius: 0;
8523
+ box-shadow: 0 0 0 0.25rem var(--cds-icon-inverse, #ffffff);
8524
+ outline: 0.125rem solid var(--cds-background-inverse, #393939);
8525
+ }
8526
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header {
8527
+ display: flex;
8528
+ justify-content: flex-end;
8529
+ }
8530
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon,
8531
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn {
8532
+ color: var(--cds-icon-inverse, #ffffff);
8533
+ }
8534
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon .cds--btn__icon,
8535
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon svg,
8536
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn .cds--btn__icon,
8537
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn svg {
8538
+ color: var(--cds-icon-inverse, #ffffff);
8539
+ fill: var(--cds-icon-inverse, #ffffff);
8540
+ }
8541
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-body {
8542
+ display: flex;
8543
+ flex-direction: column;
8544
+ padding: 0.125rem 1rem 0;
8545
+ }
8546
+
8547
+ .cds--coachmark-beacon {
8548
+ position: relative;
8549
+ }
8550
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target::before {
8551
+ display: none;
8552
+ }
8553
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target::after {
8554
+ position: absolute;
8555
+ border-radius: 50%;
8556
+ background-color: #4589ff;
8557
+ block-size: 0.75rem;
8558
+ content: "";
8559
+ inline-size: 0.75rem;
8560
+ inset-block-start: 0.625rem;
8561
+ inset-inline-start: 0.625rem;
8562
+ }
8563
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target:focus {
8564
+ outline: transparent;
8565
+ }
8566
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target:focus::before {
8567
+ position: absolute;
8568
+ display: block;
8569
+ border-radius: 100%;
8570
+ block-size: 18px;
8571
+ content: "";
8572
+ inline-size: 18px;
8573
+ inset-block-start: 7px;
8574
+ inset-inline-start: 7px;
8575
+ outline: 0.125rem var(--cds-focus, #0f62fe) solid;
8576
+ }
8577
+ .cds--coachmark-beacon .cds--coachmark-beacon__target {
8578
+ display: flex;
8579
+ padding: 0;
8580
+ border: none;
8581
+ border-radius: 50%;
8582
+ background-color: transparent;
8583
+ block-size: 2rem;
8584
+ cursor: pointer;
8585
+ inline-size: 2rem;
8586
+ }
8587
+ .cds--coachmark-beacon .cds--coachmark-beacon__target[aria-expanded=true] circle {
8588
+ animation: none;
8589
+ }
8590
+ .cds--coachmark-beacon__center {
8591
+ position: absolute;
8592
+ z-index: 6900;
8593
+ block-size: 5rem;
8594
+ inline-size: 5rem;
8595
+ inset-block-start: -1.375rem;
8596
+ inset-inline-start: -1.375rem;
8597
+ pointer-events: none;
8598
+ }
8599
+ .cds--coachmark-beacon__center circle {
8600
+ animation: ripple 2s infinite;
8601
+ fill: var(--cds-support-info, #0043ce);
8602
+ fill-opacity: 0;
8603
+ -webkit-mask-image: none;
8604
+ mask-image: none;
8605
+ stroke: var(--cds-support-info, #0043ce);
8606
+ stroke-opacity: 0;
8607
+ stroke-width: 1px;
8608
+ transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
8609
+ }
8610
+ @media (prefers-reduced-motion) {
8611
+ .cds--coachmark-beacon__center circle {
8612
+ animation: none;
8613
+ }
8614
+ }
8615
+
8616
+ @keyframes ripple {
8617
+ 0% {
8618
+ fill-opacity: 0;
8619
+ r: 1px;
8620
+ stroke-opacity: 0;
8621
+ transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
8622
+ }
8623
+ 31% {
8624
+ fill-opacity: 0.2;
8625
+ stroke-opacity: 1;
8626
+ }
8627
+ 62% {
8628
+ fill-opacity: 0;
8629
+ r: 32px;
8630
+ stroke-opacity: 0;
8631
+ }
8632
+ 100% {
8633
+ fill-opacity: 0;
8634
+ r: 32px;
8635
+ stroke-opacity: 0;
8636
+ }
8637
+ }
8638
+ @keyframes ring-ripple {
8639
+ 0% {
8640
+ fill-opacity: 0;
8641
+ r: 12px;
8642
+ stroke-opacity: 0;
8643
+ transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
8644
+ }
8645
+ 31% {
8646
+ fill-opacity: 0.2;
8647
+ stroke-opacity: 1;
8648
+ }
8649
+ 62% {
8650
+ fill-opacity: 0;
8651
+ r: 32px;
8652
+ stroke-opacity: 0;
8653
+ }
8654
+ 100% {
8655
+ fill-opacity: 0;
8656
+ r: 32px;
8657
+ stroke-opacity: 0;
8658
+ }
8659
+ }
8660
+ .cds--coachmark-tagline {
8661
+ position: fixed;
8662
+ z-index: 1000;
8663
+ display: grid;
8664
+ overflow: hidden;
8665
+ border-radius: 0.125rem 0.125rem 0 0;
8666
+ background: #6929c4;
8667
+ background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
8668
+ color: #ffffff !important;
8669
+ grid-template-columns: [cta-col] auto [close-btn-col] 2.5rem;
8670
+ inline-size: 18rem;
8671
+ inset-block-end: 0;
8672
+ inset-inline-end: 1rem;
8673
+ opacity: 1;
8674
+ transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
8675
+ transition-delay: 240ms;
8676
+ }
8677
+ @media (prefers-reduced-motion) {
8678
+ .cds--coachmark-tagline {
8679
+ transition: none;
8680
+ }
8681
+ }
8682
+ .cds--coachmark-tagline::before {
8683
+ position: absolute;
8684
+ z-index: -1;
8685
+ background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
8686
+ content: "";
8687
+ inset: 0;
8688
+ opacity: 0;
8689
+ transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
8690
+ }
8691
+ @media (prefers-reduced-motion) {
8692
+ .cds--coachmark-tagline::before {
8693
+ transition: none;
8694
+ }
8695
+ }
8696
+ .cds--coachmark-tagline:hover::before {
8697
+ opacity: 1;
8698
+ }
8699
+ .cds--coachmark-tagline--is-open {
8700
+ background: #ffffff;
8701
+ opacity: 0;
8702
+ }
8703
+ .cds--coachmark-tagline--is-open cds--coachmark-tagline__cta {
8704
+ opacity: 0;
8705
+ }
8706
+ .cds--coachmark-tagline--is-open cds--coachmark-tagline--close-btn {
8707
+ display: none;
8708
+ }
8709
+ .cds--coachmark-tagline--is-open::before {
8710
+ background: #ffffff;
8711
+ }
8712
+ .cds--coachmark-tagline__cta {
8713
+ display: grid;
8714
+ padding: 0.5rem 0;
8715
+ border: none;
8716
+ background: transparent;
8717
+ color: #ffffff !important;
8718
+ grid-template-columns: [icon-col] 2rem [body-col] auto;
8719
+ text-align: start;
8720
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
8721
+ font-weight: var(--cds-body-short-01-font-weight, 400);
8722
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
8723
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8724
+ }
8725
+ .cds--coachmark-tagline__cta:focus {
8726
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 0.25rem #ffffff;
8727
+ outline: 1px solid transparent;
8728
+ }
8729
+ .cds--coachmark-tagline__cta:hover {
8730
+ cursor: pointer !important;
8731
+ }
8732
+ .cds--coachmark-tagline__cta .cds--coachmark-tagline__idea {
8733
+ justify-self: center;
8734
+ }
8735
+ .cds--coachmark-tagline--close-btn-container {
8736
+ block-size: 2rem;
8737
+ inline-size: 2rem;
8738
+ margin-inline-start: auto;
8739
+ }
8740
+ .cds--coachmark-tagline--close-btn {
8741
+ border-color: transparent !important;
8742
+ border-radius: 0;
8743
+ block-size: 2rem;
8744
+ color: #ffffff;
8745
+ inline-size: 2rem;
8746
+ margin-inline-start: auto !important;
8747
+ outline: 1px solid transparent;
8748
+ }
8749
+ .cds--coachmark-tagline--close-btn:active {
8750
+ background-color: var(--cds-button-secondary-active, #6f6f6f);
8751
+ }
8752
+ .cds--coachmark-tagline--close-btn:focus {
8753
+ box-shadow: inset 0 0 0 1px var(--cds-background-inverse, #393939), inset 0 0 0 0.125rem #ffffff !important;
8754
+ }
8755
+ .cds--coachmark-tagline--close-btn svg > path {
8756
+ margin: 0;
8757
+ fill: #ffffff !important;
8758
+ }
8759
+ .cds--coachmark-tagline--close-btn:hover {
8760
+ background-color: #7c3dd6 !important;
8761
+ }
8762
+
8331
8763
  .cds--chat-btn {
8332
8764
  border-radius: 1.5rem;
8333
8765
  }
@@ -13717,26 +14149,24 @@ fieldset[disabled] .cds--form__helper-text {
13717
14149
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
13718
14150
  }
13719
14151
 
13720
- .cds--data-table tbody tr:not([data-child-row]):hover,
13721
- .cds--data-table tbody tr[data-child-row]:hover > td {
13722
- background-color: var(--cds-layer-hover);
13723
- }
13724
-
13725
- .cds--data-table tbody tr:hover td,
13726
- .cds--data-table tbody tr:hover th {
13727
- border-block-end: 1px solid var(--cds-layer-hover);
13728
- border-block-start: 1px solid var(--cds-layer-hover);
13729
- color: var(--cds-text-primary, #161616);
13730
- }
13731
-
13732
- .cds--data-table tr:hover .cds--link:not(.cds--popover-container .cds--link) {
13733
- color: var(--cds-link-secondary, #0043ce);
13734
- }
13735
-
13736
- .cds--data-table tr:hover .cds--link--disabled:not(.cds--popover-container .cds--link) {
13737
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
14152
+ @media (any-hover: hover) {
14153
+ .cds--data-table tbody tr:not([data-child-row]):hover,
14154
+ .cds--data-table tbody tr[data-child-row]:hover > td {
14155
+ background-color: var(--cds-layer-hover);
14156
+ }
14157
+ .cds--data-table tbody tr:hover td,
14158
+ .cds--data-table tbody tr:hover th {
14159
+ border-block-end: 1px solid var(--cds-layer-hover);
14160
+ border-block-start: 1px solid var(--cds-layer-hover);
14161
+ color: var(--cds-text-primary, #161616);
14162
+ }
14163
+ .cds--data-table tr:hover .cds--link:not(.cds--popover-container .cds--link) {
14164
+ color: var(--cds-link-secondary, #0043ce);
14165
+ }
14166
+ .cds--data-table tr:hover .cds--link--disabled:not(.cds--popover-container .cds--link) {
14167
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
14168
+ }
13738
14169
  }
13739
-
13740
14170
  .cds--data-table th,
13741
14171
  .cds--data-table td {
13742
14172
  text-align: start;
@@ -13859,11 +14289,15 @@ fieldset[disabled] .cds--form__helper-text {
13859
14289
 
13860
14290
  .cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon,
13861
14291
  .cds--data-table td.cds--table-column-menu .cds--overflow-menu:hover .cds--overflow-menu__icon,
13862
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon,
13863
- .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
14292
+ .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon {
13864
14293
  opacity: 1;
13865
14294
  }
13866
14295
 
14296
+ @media (any-hover: hover) {
14297
+ .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
14298
+ opacity: 1;
14299
+ }
14300
+ }
13867
14301
  .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
13868
14302
  position: relative;
13869
14303
  inset-block-start: 0.1875rem;
@@ -13915,15 +14349,15 @@ fieldset[disabled] .cds--form__helper-text {
13915
14349
  background-color: var(--cds-layer-accent);
13916
14350
  }
13917
14351
 
13918
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
13919
- border-block-end: 1px solid var(--cds-layer-hover);
13920
- border-block-start: 1px solid var(--cds-layer-hover);
13921
- }
13922
-
13923
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
13924
- background-color: var(--cds-layer-hover);
14352
+ @media (any-hover: hover) {
14353
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
14354
+ border-block-end: 1px solid var(--cds-layer-hover);
14355
+ border-block-start: 1px solid var(--cds-layer-hover);
14356
+ }
14357
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
14358
+ background-color: var(--cds-layer-hover);
14359
+ }
13925
14360
  }
13926
-
13927
14361
  .cds--table-column-checkbox .cds--checkbox-label {
13928
14362
  min-block-size: 1.5rem;
13929
14363
  padding-inline-start: 0;
@@ -14035,22 +14469,21 @@ tr.cds--data-table--selected:last-of-type td {
14035
14469
  border-block-end: 1px solid var(--cds-layer-active);
14036
14470
  }
14037
14471
 
14038
- .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
14039
- border-block-end: 1px solid var(--cds-layer-selected-hover);
14040
- }
14041
-
14042
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
14043
- .cds--data-table tbody .cds--data-table--selected:hover td {
14044
- border-block-end: 1px solid var(--cds-layer-selected-hover);
14045
- border-block-start: 1px solid var(--cds-layer-selected-hover);
14046
- color: var(--cds-text-primary, #161616);
14047
- }
14048
-
14049
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
14050
- .cds--data-table tbody .cds--data-table--selected:hover {
14051
- background-color: var(--cds-layer-selected-hover);
14472
+ @media (any-hover: hover) {
14473
+ .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
14474
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
14475
+ }
14476
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
14477
+ .cds--data-table tbody .cds--data-table--selected:hover td {
14478
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
14479
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
14480
+ color: var(--cds-text-primary, #161616);
14481
+ }
14482
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
14483
+ .cds--data-table tbody .cds--data-table--selected:hover {
14484
+ background-color: var(--cds-layer-selected-hover);
14485
+ }
14052
14486
  }
14053
-
14054
14487
  .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
14055
14488
  opacity: 1;
14056
14489
  }
@@ -14178,6 +14611,9 @@ tr.cds--data-table--selected:last-of-type td {
14178
14611
 
14179
14612
  .cds--data-table--sticky-header {
14180
14613
  display: block;
14614
+ inline-size: -moz-fit-content;
14615
+ inline-size: fit-content;
14616
+ min-inline-size: 100%;
14181
14617
  overflow-y: scroll;
14182
14618
  }
14183
14619
  .cds--data-table--sticky-header thead,
@@ -14190,7 +14626,6 @@ tr.cds--data-table--selected:last-of-type td {
14190
14626
  .cds--data-table--sticky-header thead {
14191
14627
  position: sticky;
14192
14628
  z-index: 1;
14193
- overflow: scroll;
14194
14629
  inline-size: 100%;
14195
14630
  inset-block-start: 0;
14196
14631
  -ms-overflow-style: none;
@@ -14202,7 +14637,6 @@ tr.cds--data-table--selected:last-of-type td {
14202
14637
  .cds--data-table--sticky-header tbody {
14203
14638
  flex-direction: column;
14204
14639
  -ms-overflow-style: none;
14205
- overflow-x: scroll;
14206
14640
  will-change: transform;
14207
14641
  }
14208
14642
  .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
@@ -14224,8 +14658,10 @@ tr.cds--data-table--selected:last-of-type td {
14224
14658
  .cds--data-table--sticky-header:not(.cds--data-table--xs):not(.cds--data-table--xl):not(.cds--data-table--sm) td:not(.cds--table-column-menu):not(.cds--table-column-checkbox) {
14225
14659
  padding-block-start: 0.875rem;
14226
14660
  }
14227
- .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
14228
- border-block-start: 1px solid var(--cds-layer-hover);
14661
+ @media (any-hover: hover) {
14662
+ .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
14663
+ border-block-start: 1px solid var(--cds-layer-hover);
14664
+ }
14229
14665
  }
14230
14666
  .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
14231
14667
  overflow: hidden;
@@ -14360,29 +14796,38 @@ tr.cds--data-table--ai-label-row + .cds--expandable-row {
14360
14796
  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
14361
14797
  }
14362
14798
 
14363
- .cds--data-table tbody tr.cds--data-table--ai-label-row:hover td,
14364
- tr.cds--data-table--ai-label-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
14365
- tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
14366
14799
  tr.cds--data-table--ai-label-row.cds--expandable-row--hover > td,
14367
14800
  tr.cds--data-table--selected.cds--data-table--ai-label-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
14368
- tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
14369
- tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
14370
- tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
14371
- tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
14372
14801
  tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
14373
14802
  tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
14374
14803
  background-color: transparent;
14375
14804
  }
14376
14805
 
14377
- .cds--data-table tbody tr.cds--data-table--ai-label-row:hover,
14378
- tr.cds--data-table--ai-label-row:hover + .cds--expandable-row[data-child-row],
14379
- tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
14806
+ @media (any-hover: hover) {
14807
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover td,
14808
+ tr.cds--data-table--ai-label-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
14809
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
14810
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
14811
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
14812
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
14813
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td {
14814
+ background-color: transparent;
14815
+ }
14816
+ }
14380
14817
  tr.cds--expandable-row--hover.cds--data-table--ai-label-row,
14381
14818
  tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--ai-label-row {
14382
14819
  background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
14383
14820
  background-attachment: fixed;
14384
14821
  }
14385
14822
 
14823
+ @media (any-hover: hover) {
14824
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover,
14825
+ tr.cds--data-table--ai-label-row:hover + .cds--expandable-row[data-child-row],
14826
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover {
14827
+ background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
14828
+ background-attachment: fixed;
14829
+ }
14830
+ }
14386
14831
  tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
14387
14832
  .cds--data-table--selected.cds--data-table--slug-row,
14388
14833
  tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row,
@@ -14393,24 +14838,29 @@ tr.cds--data-table--selected.cds--data-table--ai-label-row + .cds--expandable-ro
14393
14838
  background-attachment: fixed;
14394
14839
  }
14395
14840
 
14396
- tr.cds--data-table--ai-label-row.cds--data-table--selected td,
14397
- tr.cds--data-table--ai-label-row.cds--data-table--selected:hover td,
14398
- tbody tr.cds--data-table--ai-label-row:hover td,
14399
- tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
14841
+ tr.cds--data-table--ai-label-row.cds--data-table--selected td {
14400
14842
  border-block-end-color: var(--cds-border-subtle);
14401
14843
  }
14402
14844
 
14845
+ @media (any-hover: hover) {
14846
+ tr.cds--data-table--ai-label-row.cds--data-table--selected:hover td,
14847
+ tbody tr.cds--data-table--ai-label-row:hover td,
14848
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
14849
+ border-block-end-color: var(--cds-border-subtle);
14850
+ }
14851
+ }
14403
14852
  tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug),
14404
14853
  tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
14405
14854
  border-block-end: 1px solid var(--cds-layer-selected);
14406
14855
  }
14407
14856
 
14408
- tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type,
14409
- tr.cds--parent-row.cds--data-table--ai-label-row.cds--expandable-row:hover td:first-of-type,
14410
- tr.cds--parent-row.cds--data-table--decoratorß-row.cds--expandable-row:hover td:first-of-type {
14411
- border-block-end: 1px solid transparent;
14857
+ @media (any-hover: hover) {
14858
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type,
14859
+ tr.cds--parent-row.cds--data-table--ai-label-row.cds--expandable-row:hover td:first-of-type,
14860
+ tr.cds--parent-row.cds--data-table--decoratorß-row.cds--expandable-row:hover td:first-of-type {
14861
+ border-block-end: 1px solid transparent;
14862
+ }
14412
14863
  }
14413
-
14414
14864
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
14415
14865
  .cds--data-table thead th:has(> .cds--table-header-label--slug),
14416
14866
  .cds--data-table thead th.cds--table-sort__header--ai-label .cds--table-sort,
@@ -15402,37 +15852,35 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-i
15402
15852
  }
15403
15853
 
15404
15854
  .cds--parent-row.cds--expandable-row > td:first-of-type {
15405
- box-shadow: none;
15406
- }
15407
-
15408
- tr.cds--parent-row:not(.cds--expandable-row) td,
15409
- tr.cds--parent-row.cds--expandable-row td,
15410
- tr.cds--parent-row.cds--expandable-row {
15411
- transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15412
- }
15413
-
15414
- tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
15415
- border-block-end: 1px solid var(--cds-border-subtle);
15416
- border-block-start: 1px solid var(--cds-border-subtle);
15417
- }
15418
-
15419
- tr.cds--parent-row.cds--expandable-row:hover td {
15420
- background-color: var(--cds-layer-hover);
15421
- border-block-end: 1px solid var(--cds-border-subtle);
15422
- border-block-start: 1px solid var(--cds-border-subtle);
15423
- color: var(--cds-text-primary, #161616);
15855
+ box-shadow: none;
15424
15856
  }
15425
15857
 
15426
- tr.cds--parent-row.cds--expandable-row:hover td:first-of-type {
15427
- border-block-end: 1px solid var(--cds-layer-hover);
15858
+ tr.cds--parent-row:not(.cds--expandable-row) td,
15859
+ tr.cds--parent-row.cds--expandable-row td,
15860
+ tr.cds--parent-row.cds--expandable-row {
15861
+ transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15428
15862
  }
15429
15863
 
15430
- tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
15431
- background-color: var(--cds-layer-hover);
15432
- border-block-end: 1px solid var(--cds-border-subtle);
15433
- color: var(--cds-text-primary, #161616);
15864
+ @media (any-hover: hover) {
15865
+ tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
15866
+ border-block-end: 1px solid var(--cds-border-subtle);
15867
+ border-block-start: 1px solid var(--cds-border-subtle);
15868
+ }
15869
+ tr.cds--parent-row.cds--expandable-row:hover td {
15870
+ background-color: var(--cds-layer-hover);
15871
+ border-block-end: 1px solid var(--cds-border-subtle);
15872
+ border-block-start: 1px solid var(--cds-border-subtle);
15873
+ color: var(--cds-text-primary, #161616);
15874
+ }
15875
+ tr.cds--parent-row.cds--expandable-row:hover td:first-of-type {
15876
+ border-block-end: 1px solid var(--cds-layer-hover);
15877
+ }
15878
+ tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
15879
+ background-color: var(--cds-layer-hover);
15880
+ border-block-end: 1px solid var(--cds-border-subtle);
15881
+ color: var(--cds-text-primary, #161616);
15882
+ }
15434
15883
  }
15435
-
15436
15884
  tr.cds--expandable-row--hover + tr[data-child-row] td {
15437
15885
  border-block-end: 1px solid var(--cds-border-subtle);
15438
15886
  }
@@ -15581,14 +16029,15 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
15581
16029
  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
15582
16030
  }
15583
16031
 
15584
- .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
15585
- .cds--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td,
15586
- .cds--data-table--zebra tbody tr[data-child-row]:hover td {
15587
- background-color: var(--cds-layer-hover);
15588
- border-block-end: 1px solid var(--cds-layer-hover);
15589
- border-block-start: 1px solid var(--cds-layer-hover);
16032
+ @media (any-hover: hover) {
16033
+ .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
16034
+ .cds--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td,
16035
+ .cds--data-table--zebra tbody tr[data-child-row]:hover td {
16036
+ background-color: var(--cds-layer-hover);
16037
+ border-block-end: 1px solid var(--cds-layer-hover);
16038
+ border-block-start: 1px solid var(--cds-layer-hover);
16039
+ }
15590
16040
  }
15591
-
15592
16041
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
15593
16042
  background-color: var(--cds-layer-hover);
15594
16043
  border-block-end: 1px solid var(--cds-layer-hover);
@@ -15615,21 +16064,20 @@ tr.cds--parent-row.cds--data-table--selected:last-of-type td {
15615
16064
  box-shadow: 0 1px var(--cds-border-subtle);
15616
16065
  }
15617
16066
 
15618
- tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
15619
- background-color: var(--cds-layer-selected-hover);
15620
- border-block-end: 1px solid var(--cds-border-subtle);
15621
- border-block-start: 1px solid var(--cds-layer-selected-hover);
15622
- box-shadow: 0 1px var(--cds-layer-selected-hover);
16067
+ @media (any-hover: hover) {
16068
+ tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
16069
+ background-color: var(--cds-layer-selected-hover);
16070
+ border-block-end: 1px solid var(--cds-border-subtle);
16071
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
16072
+ box-shadow: 0 1px var(--cds-layer-selected-hover);
16073
+ }
15623
16074
  }
15624
-
15625
16075
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td,
15626
16076
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td:first-of-type {
15627
16077
  border-block-end: 1px solid transparent;
15628
16078
  box-shadow: 0 1px var(--cds-layer-selected);
15629
16079
  }
15630
16080
 
15631
- tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
15632
- tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
15633
16081
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
15634
16082
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
15635
16083
  background-color: var(--cds-layer-selected-hover);
@@ -15638,6 +16086,15 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first
15638
16086
  box-shadow: 0 1px var(--cds-layer-selected-hover);
15639
16087
  }
15640
16088
 
16089
+ @media (any-hover: hover) {
16090
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
16091
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type {
16092
+ background-color: var(--cds-layer-selected-hover);
16093
+ border-block-end: 1px solid transparent;
16094
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
16095
+ box-shadow: 0 1px var(--cds-layer-selected-hover);
16096
+ }
16097
+ }
15641
16098
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row] td {
15642
16099
  background-color: var(--cds-layer-hover);
15643
16100
  border-block-end: 1px solid var(--cds-border-subtle);
@@ -15651,11 +16108,15 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
15651
16108
  padding-block-end: 1.5rem;
15652
16109
  }
15653
16110
 
15654
- tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
15655
16111
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
15656
16112
  background-color: var(--cds-layer-selected);
15657
16113
  }
15658
16114
 
16115
+ @media (any-hover: hover) {
16116
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td {
16117
+ background-color: var(--cds-layer-selected);
16118
+ }
16119
+ }
15659
16120
  .cds--parent-row .cds--table-column-slug,
15660
16121
  .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
15661
16122
  .cds--parent-row .cds--table-column-decorator,
@@ -15671,12 +16132,16 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
15671
16132
  }
15672
16133
 
15673
16134
  .cds--data-table--slug-row td,
15674
- .cds--data-table tr.cds--data-table--slug-row:hover td,
15675
- .cds--data-table--ai-label-row td,
15676
- .cds--data-table tr.cds--data-table--ai-label-row:hover td {
16135
+ .cds--data-table--ai-label-row td {
15677
16136
  border-block-start: 1px solid transparent;
15678
16137
  }
15679
16138
 
16139
+ @media (any-hover: hover) {
16140
+ .cds--data-table tr.cds--data-table--slug-row:hover td,
16141
+ .cds--data-table tr.cds--data-table--ai-label-row:hover td {
16142
+ border-block-start: 1px solid transparent;
16143
+ }
16144
+ }
15680
16145
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15681
16146
  .cds--table-expand__button:focus .cds--table-expand__svg {
15682
16147
  color: Highlight;
@@ -15741,16 +16206,16 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
15741
16206
  inline-size: 4rem;
15742
16207
  }
15743
16208
 
15744
- .cds--data-table.cds--skeleton tr:hover td {
15745
- border-color: var(--cds-border-subtle);
15746
- background: transparent;
15747
- }
15748
-
15749
- .cds--data-table.cds--skeleton tr:hover td:first-of-type,
15750
- .cds--data-table.cds--skeleton tr:hover td:last-of-type {
15751
- border-color: var(--cds-border-subtle);
16209
+ @media (any-hover: hover) {
16210
+ .cds--data-table.cds--skeleton tr:hover td {
16211
+ border-color: var(--cds-border-subtle);
16212
+ background: transparent;
16213
+ }
16214
+ .cds--data-table.cds--skeleton tr:hover td:first-of-type,
16215
+ .cds--data-table.cds--skeleton tr:hover td:last-of-type {
16216
+ border-color: var(--cds-border-subtle);
16217
+ }
15752
16218
  }
15753
-
15754
16219
  .cds--data-table.cds--skeleton .cds--table-sort {
15755
16220
  pointer-events: none;
15756
16221
  }
@@ -16132,6 +16597,22 @@ th .cds--table-sort__flex {
16132
16597
  opacity: 1;
16133
16598
  }
16134
16599
  }
16600
+ @position-try --bottom-left {
16601
+ inset-area: block-end span-inline-start;
16602
+ margin-block-start: 0.25rem;
16603
+ }
16604
+ @position-try --top-left {
16605
+ inset-area: block-start span-inline-start;
16606
+ margin-block-end: 0.25rem;
16607
+ }
16608
+ @position-try --bottom-right {
16609
+ inset-area: block-end span-inline-end;
16610
+ margin-block-start: 0.25rem;
16611
+ }
16612
+ @position-try --top-right {
16613
+ inset-area: block-start span-inline-end;
16614
+ margin-block-end: 0.25rem;
16615
+ }
16135
16616
  .flatpickr-calendar {
16136
16617
  position: absolute;
16137
16618
  overflow: hidden;
@@ -16993,30 +17474,6 @@ th .cds--table-sort__flex {
16993
17474
  .cds--date-picker--next .cds--date-picker__calendar-popover {
16994
17475
  position-try-options: --bottom-left, --top-left, --bottom-right, --top-right;
16995
17476
  }
16996
- @position-try --bottom-left {
16997
- .cds--date-picker--next .cds--date-picker__calendar-popover {
16998
- inset-area: block-end span-inline-start;
16999
- margin-block-start: 0.25rem;
17000
- }
17001
- }
17002
- @position-try --top-left {
17003
- .cds--date-picker--next .cds--date-picker__calendar-popover {
17004
- inset-area: block-start span-inline-start;
17005
- margin-block-end: 0.25rem;
17006
- }
17007
- }
17008
- @position-try --bottom-right {
17009
- .cds--date-picker--next .cds--date-picker__calendar-popover {
17010
- inset-area: block-end span-inline-end;
17011
- margin-block-start: 0.25rem;
17012
- }
17013
- }
17014
- @position-try --top-right {
17015
- .cds--date-picker--next .cds--date-picker__calendar-popover {
17016
- inset-area: block-start span-inline-end;
17017
- margin-block-end: 0.25rem;
17018
- }
17019
- }
17020
17477
  .cds--date-picker--next .cds--date-picker__calendar.open {
17021
17478
  margin-block-start: 0;
17022
17479
  }
@@ -18342,10 +18799,6 @@ button.cds--dropdown-text:focus {
18342
18799
  text-decoration: none;
18343
18800
  }
18344
18801
 
18345
- .cds--file-browse-btn--disabled .cds--file__drop-container {
18346
- border: 1px dashed var(--cds-button-disabled, #c6c6c6);
18347
- }
18348
-
18349
18802
  .cds--label-description html {
18350
18803
  font-size: 100%;
18351
18804
  }
@@ -18709,6 +19162,12 @@ button.cds--dropdown-text:focus {
18709
19162
  block-size: 6rem;
18710
19163
  }
18711
19164
 
19165
+ .cds--file-browse-btn--disabled.cds--file__drop-container,
19166
+ .cds--file-browse-btn--disabled .cds--file__drop-container {
19167
+ border: 1px dashed var(--cds-button-disabled, #c6c6c6);
19168
+ cursor: no-drop;
19169
+ }
19170
+
18712
19171
  .cds--file__drop-container--drag-over {
18713
19172
  background: none;
18714
19173
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -21950,6 +22409,119 @@ optgroup.cds--select-optgroup:disabled,
21950
22409
  inline-size: 50%;
21951
22410
  }
21952
22411
 
22412
+ .cds--full-page-error {
22413
+ block-size: inherit;
22414
+ }
22415
+
22416
+ .cds--full-page-error__container {
22417
+ margin: 0 1.5rem;
22418
+ block-size: 100%;
22419
+ }
22420
+ @media (max-width: 41.98rem) {
22421
+ .cds--full-page-error__container {
22422
+ margin: 0 0.5rem;
22423
+ }
22424
+ }
22425
+
22426
+ .cds--full-page-error__grid {
22427
+ block-size: 100%;
22428
+ padding-block: 2rem;
22429
+ }
22430
+
22431
+ .cds--full-page-error__column {
22432
+ padding: 0;
22433
+ }
22434
+ @media (min-width: 66rem) {
22435
+ .cds--full-page-error__column {
22436
+ padding: 0 2rem 0 0;
22437
+ }
22438
+ }
22439
+
22440
+ .cds--full-page-error__svg-container {
22441
+ display: flex;
22442
+ padding: 0.5rem 0.5rem 5rem 0.5rem;
22443
+ block-size: 100%;
22444
+ }
22445
+ @media (min-width: 42rem) {
22446
+ .cds--full-page-error__svg-container {
22447
+ padding: auto 0.5rem 5rem;
22448
+ }
22449
+ }
22450
+
22451
+ .cds--full-page-error__label,
22452
+ .cds--full-page-error__title {
22453
+ font-size: 2rem;
22454
+ font-weight: 400;
22455
+ line-height: 1.25;
22456
+ letter-spacing: 0;
22457
+ font-size: calc(2rem + 0.25 * (100vw - 20rem) / 22);
22458
+ }
22459
+ @media (min-width: 42rem) {
22460
+ .cds--full-page-error__label,
22461
+ .cds--full-page-error__title {
22462
+ font-size: 2.25rem;
22463
+ font-weight: 300;
22464
+ line-height: 1.22;
22465
+ font-size: calc(2.25rem + 0.375 * (100vw - 42rem) / 24);
22466
+ }
22467
+ }
22468
+ @media (min-width: 66rem) {
22469
+ .cds--full-page-error__label,
22470
+ .cds--full-page-error__title {
22471
+ font-size: 2.625rem;
22472
+ line-height: 1.19;
22473
+ font-size: calc(2.625rem + 0.375 * (100vw - 66rem) / 16);
22474
+ }
22475
+ }
22476
+ @media (min-width: 82rem) {
22477
+ .cds--full-page-error__label,
22478
+ .cds--full-page-error__title {
22479
+ font-size: 3rem;
22480
+ line-height: 1.17;
22481
+ font-size: calc(3rem + 0.75 * (100vw - 82rem) / 17);
22482
+ }
22483
+ }
22484
+ @media (min-width: 99rem) {
22485
+ .cds--full-page-error__label,
22486
+ .cds--full-page-error__title {
22487
+ font-size: 3.75rem;
22488
+ font-size: 3.75rem;
22489
+ }
22490
+ }
22491
+
22492
+ .cds--full-page-error__label {
22493
+ display: block;
22494
+ color: var(--cds-text-error, #da1e28);
22495
+ }
22496
+
22497
+ .cds--full-page-error__title {
22498
+ margin-block-end: 3rem;
22499
+ }
22500
+
22501
+ .cds--full-page-error__description {
22502
+ font-size: var(--cds-body-02-font-size, 1rem);
22503
+ font-weight: var(--cds-body-02-font-weight, 400);
22504
+ line-height: var(--cds-body-02-line-height, 1.5);
22505
+ letter-spacing: var(--cds-body-02-letter-spacing, 0);
22506
+ margin-block-end: 2rem;
22507
+ }
22508
+
22509
+ .cds--full-page-error__body {
22510
+ font-size: var(--cds-body-02-font-size, 1rem);
22511
+ font-weight: var(--cds-body-02-font-weight, 400);
22512
+ line-height: var(--cds-body-02-line-height, 1.5);
22513
+ letter-spacing: var(--cds-body-02-letter-spacing, 0);
22514
+ }
22515
+
22516
+ .cds--full-page-error__svg-container svg.cds--full-page-error__svg {
22517
+ inline-size: 100%;
22518
+ }
22519
+
22520
+ .cds--full-page-error__svg-container svg.cds--full-page-error__svg path {
22521
+ fill: var(--cds-background, #ffffff);
22522
+ stroke: var(--cds-border-inverse, #161616);
22523
+ }
22524
+
21953
22525
  .cds--icon-indicator {
21954
22526
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
21955
22527
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -22134,29 +22706,163 @@ optgroup.cds--select-optgroup:disabled,
22134
22706
  .cds--loading--small .cds--inline-loading__svg {
22135
22707
  stroke: var(--cds-interactive, #0f62fe);
22136
22708
  }
22137
-
22138
- .cds--btn .cds--inline-loading--btn {
22139
- min-block-size: 0;
22709
+
22710
+ .cds--btn .cds--inline-loading--btn {
22711
+ min-block-size: 0;
22712
+ }
22713
+ .cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
22714
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
22715
+ font-weight: var(--cds-body-short-01-font-weight, 400);
22716
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
22717
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
22718
+ }
22719
+
22720
+ /* If IE11 Don't show check animation */
22721
+ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
22722
+ .cds--inline-loading__checkmark-container {
22723
+ inset-block-start: 1px;
22724
+ inset-inline-end: 0.5rem;
22725
+ }
22726
+ .cds--inline-loading__checkmark {
22727
+ animation: none;
22728
+ stroke-dasharray: 0;
22729
+ stroke-dashoffset: 0;
22730
+ }
22731
+ }
22732
+ /* stylelint-disable declaration-no-important */
22733
+ .cds--interstitial-screen--body {
22734
+ overflow: hidden auto;
22735
+ flex-grow: 1;
22736
+ padding: 0;
22737
+ margin: 0;
22738
+ background-color: var(--cds-background, #ffffff);
22739
+ }
22740
+ .cds--interstitial-screen--progress {
22741
+ overflow: auto;
22742
+ margin-block-end: 0.75rem;
22743
+ }
22744
+ .cds--interstitial-screen__carousel {
22745
+ block-size: 100%;
22746
+ }
22747
+ .cds--interstitial-screen__carousel .cds--carousel__item {
22748
+ flex: 0 0 100%;
22749
+ scroll-snap-align: start;
22750
+ }
22751
+ .cds--interstitial-screen--internal-body {
22752
+ padding: 0 !important;
22753
+ margin: 0 !important;
22754
+ }
22755
+ .cds--interstitial-screen--content {
22756
+ block-size: 100%;
22757
+ }
22758
+ .cds--interstitial-screen--internal-header {
22759
+ position: relative;
22760
+ background-color: var(--cds-background, #ffffff);
22761
+ margin-block-end: 0 !important;
22762
+ padding-block-start: 1.5rem !important;
22763
+ padding-inline-start: 2rem !important;
22764
+ }
22765
+ @media (max-width: 41.98rem) {
22766
+ .cds--interstitial-screen--internal-header {
22767
+ padding-inline: 1rem !important;
22768
+ }
22769
+ }
22770
+ .cds--interstitial-screen--internal-header:empty {
22771
+ min-block-size: 0;
22772
+ }
22773
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer {
22774
+ margin-block-end: 1rem;
22775
+ }
22776
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h1 {
22777
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
22778
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
22779
+ line-height: var(--cds-productive-heading-04-line-height, 1.28572);
22780
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
22781
+ margin-block-end: 0.5rem;
22782
+ }
22783
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h1:empty {
22784
+ padding: 0;
22785
+ }
22786
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h2 {
22787
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
22788
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
22789
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
22790
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
22791
+ }
22792
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h2:empty {
22793
+ padding: 0;
22794
+ }
22795
+ .cds--interstitial-screen--internal-header--has-title {
22796
+ background: var(--cds-layer-01, #f4f4f4);
22797
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
22798
+ }
22799
+ .cds--interstitial-screen--internal-header--has-title .cds--interstitial-screen--progress {
22800
+ margin-block-start: 0;
22801
+ }
22802
+ .cds--interstitial-screen--footer {
22803
+ background: var(--cds-background, #ffffff);
22804
+ border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
22805
+ inline-size: 100%;
22806
+ }
22807
+ @media (max-width: 41.98rem) {
22808
+ .cds--interstitial-screen--footer {
22809
+ block-size: auto;
22810
+ }
22811
+ }
22812
+ .cds--interstitial-screen--footer .cds--btn-set {
22813
+ display: flex;
22814
+ justify-content: flex-end;
22815
+ inline-size: 100%;
22816
+ }
22817
+ @media (max-width: 41.98rem) {
22818
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--prev-btn,
22819
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--next-btn,
22820
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--start-btn,
22821
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--skip-btn {
22822
+ flex: 1 1;
22823
+ inline-size: auto;
22824
+ max-inline-size: none;
22825
+ min-inline-size: 0;
22826
+ }
22827
+ }
22828
+ @media (min-width: 42rem) {
22829
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--prev-btn,
22830
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--next-btn,
22831
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--start-btn {
22832
+ flex: 0 0 auto;
22833
+ inline-size: 15rem;
22834
+ max-inline-size: 15rem;
22835
+ }
22836
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--skip-btn {
22837
+ flex: 1 1 auto;
22838
+ max-inline-size: none;
22839
+ }
22840
+ }
22841
+ .cds--interstitial-screen--footer .cds--inline-loading {
22842
+ position: absolute;
22843
+ inline-size: 2rem;
22844
+ inset-block-start: 0;
22845
+ inset-inline-end: 0;
22846
+ }
22847
+ .cds--interstitial-screen--footer-controls {
22848
+ display: flex;
22849
+ flex-direction: row;
22850
+ margin-inline-start: auto;
22851
+ }
22852
+ .cds--interstitial-screen--full-screen {
22853
+ position: fixed;
22854
+ inset-block-start: 0;
22855
+ inset-inline: 0;
22140
22856
  }
22141
- .cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
22142
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
22143
- font-weight: var(--cds-body-short-01-font-weight, 400);
22144
- line-height: var(--cds-body-short-01-line-height, 1.28572);
22145
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
22857
+ .cds--interstitial-screen--full-screen .cds--interstitial-screen--container {
22858
+ display: flex;
22859
+ flex-direction: column;
22860
+ padding: 0;
22861
+ margin: 0;
22862
+ block-size: 100vh;
22863
+ max-inline-size: 100vw;
22146
22864
  }
22147
22865
 
22148
- /* If IE11 Don't show check animation */
22149
- @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
22150
- .cds--inline-loading__checkmark-container {
22151
- inset-block-start: 1px;
22152
- inset-inline-end: 0.5rem;
22153
- }
22154
- .cds--inline-loading__checkmark {
22155
- animation: none;
22156
- stroke-dasharray: 0;
22157
- stroke-dashoffset: 0;
22158
- }
22159
- }
22160
22866
  .cds--list--nested,
22161
22867
  .cds--list--unordered,
22162
22868
  .cds--list--ordered,
@@ -23864,6 +24570,230 @@ optgroup.cds--select-optgroup:disabled,
23864
24570
  }
23865
24571
  }
23866
24572
 
24573
+ .cds--options-tile {
24574
+ position: relative;
24575
+ display: flex;
24576
+ justify-content: space-between;
24577
+ background-color: var(--cds-layer);
24578
+ border-block-end: 1px solid var(--cds-border-subtle);
24579
+ }
24580
+
24581
+ .cds--options-tile__toggle-container {
24582
+ position: absolute;
24583
+ display: inline-flex;
24584
+ align-items: center;
24585
+ justify-content: center;
24586
+ inline-size: calc(1rem + 2rem + 1rem);
24587
+ inset-block: 0;
24588
+ inset-inline-end: 0;
24589
+ padding-inline-end: 1rem;
24590
+ padding-inline-start: 1rem;
24591
+ }
24592
+
24593
+ .cds--options-tile__toggle {
24594
+ position: absolute;
24595
+ }
24596
+
24597
+ .cds--options-tile__toggle .cds--toggle-input__label .cds--toggle__switch {
24598
+ margin: 0;
24599
+ }
24600
+
24601
+ .cds--options-tile__toggle .cds--toggle__label-text {
24602
+ position: absolute;
24603
+ overflow: hidden;
24604
+ padding: 0;
24605
+ border: 0;
24606
+ margin: -1px;
24607
+ block-size: 1px;
24608
+ clip: rect(0, 0, 0, 0);
24609
+ inline-size: 1px;
24610
+ visibility: inherit;
24611
+ white-space: nowrap;
24612
+ }
24613
+
24614
+ .cds--options-tile__details {
24615
+ display: inline-flex;
24616
+ flex-direction: column;
24617
+ flex-grow: 1;
24618
+ }
24619
+
24620
+ .cds--options-tile__header,
24621
+ .cds--options-tile__static-content {
24622
+ display: grid;
24623
+ box-sizing: border-box;
24624
+ align-items: center;
24625
+ grid-template-columns: 3rem 1fr 0;
24626
+ padding-inline-end: 1rem;
24627
+ }
24628
+
24629
+ .cds--options-tile__header {
24630
+ flex-grow: 1;
24631
+ background-color: transparent;
24632
+ cursor: pointer;
24633
+ inline-size: 100%;
24634
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
24635
+ }
24636
+ .cds--options-tile__header--has-toggle {
24637
+ inline-size: calc(100% - (1rem + 2rem + 1rem));
24638
+ }
24639
+
24640
+ .cds--options-tile__header::-webkit-details-marker {
24641
+ display: none;
24642
+ }
24643
+
24644
+ .cds--options-tile__header:hover {
24645
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
24646
+ }
24647
+
24648
+ .cds--options-tile__header:has(.cds--options-tile__toggle-container:hover) {
24649
+ background-color: transparent;
24650
+ }
24651
+
24652
+ .cds--options-tile__header:focus {
24653
+ outline: 2px solid var(--cds-focus, #0f62fe);
24654
+ outline-offset: -2px;
24655
+ }
24656
+ @media screen and (prefers-contrast) {
24657
+ .cds--options-tile__header:focus {
24658
+ outline-style: dotted;
24659
+ }
24660
+ }
24661
+
24662
+ .cds--options-tile__heading {
24663
+ grid-column: 2;
24664
+ }
24665
+
24666
+ .cds--options-tile__title {
24667
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
24668
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
24669
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
24670
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
24671
+ color: var(--cds-text-primary, #161616);
24672
+ }
24673
+
24674
+ .cds--options-tile__summary {
24675
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
24676
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
24677
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
24678
+ display: grid;
24679
+ block-size: 1rem;
24680
+ color: var(--cds-text-secondary, #525252);
24681
+ margin-block-start: 0.25rem;
24682
+ opacity: 1;
24683
+ transition-duration: 150ms;
24684
+ transition-property: height, opacity, margin-top;
24685
+ transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
24686
+ }
24687
+
24688
+ .cds--options-tile__summary--invalid,
24689
+ .cds--options-tile__summary--warn,
24690
+ .cds--options-tile__summary--locked {
24691
+ -moz-column-gap: 0.25rem;
24692
+ column-gap: 0.25rem;
24693
+ grid-template-columns: 1rem 1fr;
24694
+ }
24695
+
24696
+ .cds--options-tile__summary--invalid {
24697
+ color: var(--cds-support-error, #da1e28);
24698
+ }
24699
+
24700
+ .cds--options-tile__summary--warn {
24701
+ color: var(--cds-text-primary, #161616);
24702
+ }
24703
+
24704
+ .cds--options-tile__summary--warn svg {
24705
+ color: var(--cds-support-warning, #f1c21b);
24706
+ }
24707
+
24708
+ .cds--options-tile__summary--warn svg path[fill=none] {
24709
+ fill: #000000;
24710
+ }
24711
+
24712
+ .cds--options-tile__summary-text {
24713
+ overflow: hidden;
24714
+ block-size: -moz-max-content;
24715
+ block-size: max-content;
24716
+ padding-inline-end: 1rem;
24717
+ text-overflow: ellipsis;
24718
+ white-space: nowrap;
24719
+ }
24720
+
24721
+ .cds--options-tile__chevron {
24722
+ display: block;
24723
+ justify-self: center;
24724
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
24725
+ }
24726
+
24727
+ .cds--options-tile__content {
24728
+ padding-inline: 3rem 1rem;
24729
+ }
24730
+
24731
+ .cds--options-tile__content > .cds--fieldset > .cds--label:empty {
24732
+ display: none;
24733
+ }
24734
+
24735
+ .cds--options-tile--closing .cds--options-tile__content {
24736
+ overflow: hidden;
24737
+ }
24738
+
24739
+ .cds--options-tile__summary.cds--options-tile__summary--open:not(.cds--options-tile__summary--closing),
24740
+ .cds--options-tile__summary--hidden {
24741
+ block-size: 0;
24742
+ margin-block-start: 0;
24743
+ opacity: 0;
24744
+ }
24745
+
24746
+ .cds--options-tile__chevron.cds--options-tile__chevron--open:not(.cds--options-tile__chevron--closing) {
24747
+ transform: rotate(180deg);
24748
+ }
24749
+
24750
+ .cds--options-tile > details[open] .cds--options-tile__content {
24751
+ padding-block: 0.5rem 1.5rem;
24752
+ }
24753
+
24754
+ .cds--options-tile__locked-text {
24755
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
24756
+ font-weight: var(--cds-body-long-01-font-weight, 400);
24757
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
24758
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
24759
+ display: inline-flex;
24760
+ align-items: center;
24761
+ color: var(--cds-text-secondary, #525252);
24762
+ margin-block-end: 1.5rem;
24763
+ }
24764
+
24765
+ .cds--options-tile__locked-text > svg {
24766
+ margin-inline-end: 0.25rem;
24767
+ }
24768
+
24769
+ .cds--options-tile--lg .cds--options-tile__header,
24770
+ .cds--options-tile--lg .cds--options-tile__static-content {
24771
+ block-size: 3rem;
24772
+ }
24773
+
24774
+ .cds--options-tile--xl .cds--options-tile__header,
24775
+ .cds--options-tile--xl .cds--options-tile__static-content {
24776
+ block-size: 4rem;
24777
+ }
24778
+
24779
+ .cds--options-tile--lg .cds--options-tile__toggle {
24780
+ inset-block-start: 1rem;
24781
+ }
24782
+
24783
+ .cds--options-tile--xl .cds--options-tile__toggle {
24784
+ inset-block-start: 1.5rem;
24785
+ }
24786
+
24787
+ .cds--options-tile--lg .cds--options-tile__summary {
24788
+ margin-block-start: 0.125rem;
24789
+ }
24790
+
24791
+ @media (prefers-reduced-motion: reduce) {
24792
+ .cds--options-tile__summary,
24793
+ .cds--options-tile__chevron {
24794
+ transition: none;
24795
+ }
24796
+ }
23867
24797
  .cds--page-header {
23868
24798
  background-color: var(--cds-layer-01, #f4f4f4);
23869
24799
  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -25320,6 +26250,89 @@ span.cds--pagination__text.cds--pagination__items-count {
25320
26250
  }
25321
26251
  }
25322
26252
 
26253
+ .cds--scroll-gradient {
26254
+ position: relative;
26255
+ display: flex;
26256
+ align-items: stretch;
26257
+ justify-content: stretch;
26258
+ block-size: inherit;
26259
+ inline-size: inherit;
26260
+ }
26261
+
26262
+ .cds--scroll-gradient__content {
26263
+ display: grid;
26264
+ overflow: auto;
26265
+ block-size: inherit;
26266
+ grid-template-columns: 1fr;
26267
+ inline-size: 100%;
26268
+ }
26269
+
26270
+ .cds--scroll-gradient__content-children {
26271
+ block-size: 100%;
26272
+ grid-column-start: 1;
26273
+ grid-row-start: 1;
26274
+ inline-size: 100%;
26275
+ }
26276
+
26277
+ .cds--scroll-gradient__content-children > * {
26278
+ grid-area: 1/1;
26279
+ }
26280
+
26281
+ .cds--scroll-gradient__start-vertical,
26282
+ .cds--scroll-gradient__start-horizontal,
26283
+ .cds--scroll-gradient__end-vertical,
26284
+ .cds--scroll-gradient__end-horizontal {
26285
+ position: absolute;
26286
+ z-index: 1;
26287
+ display: none;
26288
+ pointer-events: none;
26289
+ }
26290
+
26291
+ .cds--scroll-gradient--y-scrollable .cds--scroll-gradient__start-vertical {
26292
+ block-size: 3rem;
26293
+ inset-block-start: 0;
26294
+ inset-inline-start: 0;
26295
+ }
26296
+
26297
+ .cds--scroll-gradient--y-scrollable .cds--scroll-gradient__end-vertical {
26298
+ block-size: 3rem;
26299
+ inset-block-end: 0;
26300
+ inset-inline-start: 0;
26301
+ }
26302
+
26303
+ .cds--scroll-gradient--x-scrollable .cds--scroll-gradient__start-horizontal {
26304
+ inline-size: 3rem;
26305
+ inset-block-start: 0;
26306
+ inset-inline-start: 0;
26307
+ }
26308
+
26309
+ .cds--scroll-gradient--x-scrollable .cds--scroll-gradient__end-horizontal {
26310
+ inline-size: 3rem;
26311
+ inset-block-start: 0;
26312
+ inset-inline-end: 0;
26313
+ }
26314
+
26315
+ .cds--scroll-gradient [data-start-vertical],
26316
+ .cds--scroll-gradient [data-end-vertical] {
26317
+ block-size: 3rem;
26318
+ grid-column-start: 1;
26319
+ grid-row-start: 1;
26320
+ inline-size: 100%;
26321
+ }
26322
+
26323
+ .cds--scroll-gradient [data-end-vertical],
26324
+ .cds--scroll-gradient [data-end-horizontal] {
26325
+ place-self: flex-end;
26326
+ }
26327
+
26328
+ .cds--scroll-gradient [data-start-horizontal],
26329
+ .cds--scroll-gradient [data-end-horizontal] {
26330
+ block-size: 100%;
26331
+ grid-column-start: 1;
26332
+ grid-row-start: 1;
26333
+ inline-size: 3rem;
26334
+ }
26335
+
25323
26336
  @keyframes side-panel-entrance-reduced {
25324
26337
  0% {
25325
26338
  opacity: 0;
@@ -26294,8 +27307,10 @@ span.cds--pagination__text.cds--pagination__items-count {
26294
27307
  outline: none;
26295
27308
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
26296
27309
  }
26297
- .cds--slider__thumb:hover {
26298
- transform: scale(1.4286);
27310
+ @media (any-hover: hover) {
27311
+ .cds--slider__thumb:hover {
27312
+ transform: scale(1.4286);
27313
+ }
26299
27314
  }
26300
27315
  .cds--slider__thumb:focus {
26301
27316
  background-color: var(--cds-interactive, #0f62fe);
@@ -26337,13 +27352,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26337
27352
  inset-block-start: calc(50% - 0.0625rem);
26338
27353
  inset-inline-end: 0;
26339
27354
  }
26340
- .cds--slider__thumb--lower:hover,
26341
- .cds--slider__thumb--upper:hover {
26342
- transform: none;
26343
- }
26344
- .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
26345
- .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
26346
- fill: var(--cds-text-secondary, #525252);
27355
+ @media (any-hover: hover) {
27356
+ .cds--slider__thumb--lower:hover,
27357
+ .cds--slider__thumb--upper:hover {
27358
+ transform: none;
27359
+ }
27360
+ .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
27361
+ .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
27362
+ fill: var(--cds-text-secondary, #525252);
27363
+ }
26347
27364
  }
26348
27365
  .cds--slider__thumb--lower:active,
26349
27366
  .cds--slider__thumb--upper:active {
@@ -26377,9 +27394,14 @@ span.cds--pagination__text.cds--pagination__items-count {
26377
27394
  .cds--slider__thumb--upper::before {
26378
27395
  inset-inline: 0 auto;
26379
27396
  }
26380
- .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
27397
+ .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
26381
27398
  transform: none;
26382
27399
  }
27400
+ @media (any-hover: hover) {
27401
+ .cds--slider__thumb--upper:hover {
27402
+ transform: none;
27403
+ }
27404
+ }
26383
27405
 
26384
27406
  .cds--slider__input {
26385
27407
  display: none;
@@ -26456,9 +27478,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26456
27478
  .cds--slider--disabled .cds--slider__thumb {
26457
27479
  background-color: var(--cds-border-disabled, #c6c6c6);
26458
27480
  }
26459
- .cds--slider--disabled .cds--slider__thumb:hover {
26460
- cursor: not-allowed;
26461
- transform: none;
27481
+ @media (any-hover: hover) {
27482
+ .cds--slider--disabled .cds--slider__thumb:hover {
27483
+ cursor: not-allowed;
27484
+ transform: none;
27485
+ }
26462
27486
  }
26463
27487
  .cds--slider--disabled .cds--slider__thumb:focus {
26464
27488
  background-color: var(--cds-border-disabled, #c6c6c6);
@@ -26476,13 +27500,19 @@ span.cds--pagination__text.cds--pagination__items-count {
26476
27500
  .cds--slider--disabled .cds--slider__thumb--upper {
26477
27501
  background-color: transparent;
26478
27502
  }
26479
- .cds--slider--disabled .cds--slider__thumb--lower:active, .cds--slider--disabled .cds--slider__thumb--lower:hover, .cds--slider--disabled .cds--slider__thumb--lower:focus,
27503
+ .cds--slider--disabled .cds--slider__thumb--lower:active, .cds--slider--disabled .cds--slider__thumb--lower:focus,
26480
27504
  .cds--slider--disabled .cds--slider__thumb--upper:active,
26481
- .cds--slider--disabled .cds--slider__thumb--upper:hover,
26482
27505
  .cds--slider--disabled .cds--slider__thumb--upper:focus {
26483
27506
  background-color: transparent;
26484
27507
  transform: none;
26485
27508
  }
27509
+ @media (any-hover: hover) {
27510
+ .cds--slider--disabled .cds--slider__thumb--lower:hover,
27511
+ .cds--slider--disabled .cds--slider__thumb--upper:hover {
27512
+ background-color: transparent;
27513
+ transform: none;
27514
+ }
27515
+ }
26486
27516
  .cds--slider--disabled .cds--slider__thumb--lower .cds--slider__thumb-icon,
26487
27517
  .cds--slider--disabled .cds--slider__thumb--upper .cds--slider__thumb-icon {
26488
27518
  fill: var(--cds-border-disabled, #c6c6c6);
@@ -26502,13 +27532,19 @@ span.cds--pagination__text.cds--pagination__items-count {
26502
27532
  cursor: not-allowed;
26503
27533
  transition: none;
26504
27534
  }
26505
- .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
27535
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus,
26506
27536
  .cds--slider--disabled ~ .cds--slider-text-input:active,
26507
- .cds--slider--disabled ~ .cds--slider-text-input:focus,
26508
- .cds--slider--disabled ~ .cds--slider-text-input:hover {
27537
+ .cds--slider--disabled ~ .cds--slider-text-input:focus {
26509
27538
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
26510
27539
  outline: none;
26511
27540
  }
27541
+ @media (any-hover: hover) {
27542
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
27543
+ .cds--slider--disabled ~ .cds--slider-text-input:hover {
27544
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
27545
+ outline: none;
27546
+ }
27547
+ }
26512
27548
 
26513
27549
  .cds--slider--readonly {
26514
27550
  cursor: default;
@@ -26966,6 +28002,14 @@ span.cds--pagination__text.cds--pagination__items-count {
26966
28002
  white-space: normal;
26967
28003
  }
26968
28004
 
28005
+ .cds--tabs .cds--icon-tooltip .cds--popover-content {
28006
+ --cds-popover-offset: 0.5rem;
28007
+ }
28008
+
28009
+ .cds--tabs .cds--icon-tooltip .cds--popover-caret {
28010
+ --cds-popover-offset: 0.5rem;
28011
+ }
28012
+
26969
28013
  .cds--tabs.cds--tabs--vertical.cds--layout--size-sm .cds--tabs__nav-link .cds--tabs__nav-item-label {
26970
28014
  -webkit-line-clamp: 1;
26971
28015
  }
@@ -31038,4 +32082,413 @@ a.cds--side-nav__link--current::before {
31038
32082
  .cds--switcher__item-link--selected {
31039
32083
  background: var(--cds-layer-selected);
31040
32084
  color: var(--cds-text-primary, #161616);
32085
+ }
32086
+
32087
+ .cds--edit-in-place {
32088
+ --cds--edit-in-place--size: 2rem;
32089
+ display: flex;
32090
+ align-items: center;
32091
+ background: transparent;
32092
+ cursor: pointer;
32093
+ }
32094
+
32095
+ .cds--edit-in-place--sm {
32096
+ --cds--edit-in-place--size: 2.5rem;
32097
+ }
32098
+
32099
+ .cds--edit-in-place--md {
32100
+ --cds--edit-in-place--size: 3rem;
32101
+ }
32102
+
32103
+ .cds--edit-in-place--lg {
32104
+ --cds--edit-in-place--size: 4rem;
32105
+ }
32106
+
32107
+ .cds--edit-in-place__toggletip-wrapper {
32108
+ display: block;
32109
+ inline-size: 100%;
32110
+ }
32111
+
32112
+ .cds--edit-in-place__toggletip-wrapper .cds--toggletip-button {
32113
+ display: block;
32114
+ inline-size: 100%;
32115
+ }
32116
+
32117
+ .cds--edit-in-place:hover {
32118
+ background: var(--cds-field-01, #f4f4f4);
32119
+ }
32120
+
32121
+ .cds--edit-in-place:hover .cds--edit-in-place__btn-edit,
32122
+ .cds--edit-in-place__btn-edit.cds--edit-in-place__btn-edit--always-visible {
32123
+ visibility: visible;
32124
+ }
32125
+
32126
+ .cds--edit-in-place__btn-edit {
32127
+ visibility: hidden;
32128
+ }
32129
+
32130
+ .cds--edit-in-place--invalid {
32131
+ border: 2px solid var(--cds-support-error, #da1e28);
32132
+ }
32133
+
32134
+ .cds--edit-in-place--focused {
32135
+ background: var(--cds-field-01, #f4f4f4);
32136
+ }
32137
+
32138
+ .cds--edit-in-place--focused:has(.cds--edit-in-place__text-input:focus) {
32139
+ outline: 2px solid var(--cds-focus, #0f62fe);
32140
+ }
32141
+
32142
+ .cds--edit-in-place--invalid.cds--edit-in-place--focused {
32143
+ border: none;
32144
+ }
32145
+
32146
+ .cds--edit-in-place__text-input {
32147
+ flex: 1 1;
32148
+ }
32149
+
32150
+ .cds--edit-in-place--inherit-type .cds--edit-in-place__text-input {
32151
+ /* match font of container */
32152
+ font-size: inherit;
32153
+ font-weight: inherit;
32154
+ letter-spacing: inherit;
32155
+ line-height: inherit;
32156
+ }
32157
+
32158
+ .cds--edit-in-place__text-input-label {
32159
+ display: none;
32160
+ }
32161
+
32162
+ .cds--edit-in-place__warning-icon {
32163
+ margin: auto 0.5rem;
32164
+ color: var(--cds-support-error, #da1e28);
32165
+ inline-size: 1rem;
32166
+ }
32167
+
32168
+ .cds--edit-in-place__warning-text {
32169
+ font-size: var(--cds-label-01-font-size, 0.75rem);
32170
+ font-weight: var(--cds-label-01-font-weight, 400);
32171
+ line-height: var(--cds-label-01-line-height, 1.33333);
32172
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
32173
+ color: var(--cds-support-error, #da1e28);
32174
+ margin-block-start: 0.5rem;
32175
+ }
32176
+
32177
+ .cds--edit-in-place__text-input.cds--text-input {
32178
+ border: none;
32179
+ background: transparent;
32180
+ cursor: pointer;
32181
+ outline: none;
32182
+ }
32183
+
32184
+ .cds--edit-in-place:not(.cds--edit-in-place--focused) .cds--edit-in-place__text-input.cds--text-input:focus,
32185
+ .cds--edit-in-place:not(.cds--edit-in-place--focused) .cds--edit-in-place__text-input.cds--text-input:active {
32186
+ outline: none;
32187
+ }
32188
+
32189
+ .cds--edit-in-place__toolbar {
32190
+ --toolbar-width: var(--cds--edit-in-place--size);
32191
+ --toolbar-width-focussed: calc(2 * var(--cds--edit-in-place--size));
32192
+ display: inline-flex;
32193
+ align-self: stretch;
32194
+ inline-size: var(--toolbar-width);
32195
+ }
32196
+ .cds--edit-in-place__toolbar .cds--btn.cds--btn--icon-only:not(cds-icon-button) {
32197
+ padding: 0;
32198
+ min-block-size: unset;
32199
+ }
32200
+
32201
+ .cds--edit-in-place__toolbar .cds--btn.cds--btn--icon-only:not(cds-icon-button) {
32202
+ block-size: var(--cds--edit-in-place--size);
32203
+ inline-size: var(--cds--edit-in-place--size);
32204
+ }
32205
+
32206
+ .cds--edit-in-place__toolbar cds-icon-button::part(button) {
32207
+ padding: 0.25rem;
32208
+ }
32209
+
32210
+ .cds--edit-in-place--invalid .cds--edit-in-place__toolbar {
32211
+ --toolbar-width: calc(var(--cds--edit-in-place--size) + 2rem);
32212
+ --toolbar-width-focussed: calc(
32213
+ 2 * var(--cds--edit-in-place--size) + 2rem
32214
+ );
32215
+ }
32216
+
32217
+ @keyframes edit-in-place-slide-in {
32218
+ 0% {
32219
+ overflow: hidden;
32220
+ inline-size: var(--toolbar-width);
32221
+ }
32222
+ 99% {
32223
+ overflow: hidden;
32224
+ inline-size: var(--toolbar-width-focussed);
32225
+ }
32226
+ 100% {
32227
+ overflow: visible;
32228
+ inline-size: var(--toolbar-width-focussed);
32229
+ }
32230
+ }
32231
+ .cds--edit-in-place--focused:not(.cds--edit-in-place--readonly) .cds--edit-in-place__toolbar {
32232
+ overflow: initial;
32233
+ animation: edit-in-place-slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
32234
+ inline-size: var(--toolbar-width-focussed);
32235
+ }
32236
+
32237
+ .cds--user-avatar {
32238
+ position: relative;
32239
+ display: flex;
32240
+ align-items: center;
32241
+ justify-content: center;
32242
+ border: 0.5px solid transparent;
32243
+ border-radius: 100%;
32244
+ block-size: 4rem;
32245
+ color: var(--cds-text-inverse, #ffffff);
32246
+ inline-size: 4rem;
32247
+ outline: none;
32248
+ outline-offset: 3px;
32249
+ }
32250
+
32251
+ .cds--user-avatar svg {
32252
+ color: var(--cds-icon-inverse, #ffffff);
32253
+ }
32254
+
32255
+ .cds--user-avatar__tooltip-trigger {
32256
+ display: flex;
32257
+ box-sizing: border-box;
32258
+ align-items: center;
32259
+ justify-content: center;
32260
+ padding: 0;
32261
+ border: 0;
32262
+ margin: 0;
32263
+ -webkit-appearance: none;
32264
+ -moz-appearance: none;
32265
+ appearance: none;
32266
+ background: none;
32267
+ block-size: 100%;
32268
+ cursor: pointer;
32269
+ inline-size: 100%;
32270
+ outline: none;
32271
+ }
32272
+
32273
+ .cds--user-avatar__tooltip:focus-within .cds--user-avatar {
32274
+ outline: 2px solid var(--cds-focus, #0f62fe);
32275
+ outline-offset: 1px;
32276
+ }
32277
+
32278
+ .cds--user-avatar__photo {
32279
+ border-radius: 100%;
32280
+ -o-object-fit: contain;
32281
+ object-fit: contain;
32282
+ }
32283
+
32284
+ .cds--user-avatar--xl {
32285
+ block-size: 4rem;
32286
+ inline-size: 4rem;
32287
+ }
32288
+
32289
+ .cds--user-avatar--lg {
32290
+ block-size: 3rem;
32291
+ inline-size: 3rem;
32292
+ }
32293
+
32294
+ .cds--user-avatar--md {
32295
+ block-size: 2rem;
32296
+ inline-size: 2rem;
32297
+ }
32298
+
32299
+ .cds--user-avatar--sm {
32300
+ block-size: 1.5rem;
32301
+ inline-size: 1.5rem;
32302
+ }
32303
+
32304
+ .cds--user-avatar--xl {
32305
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
32306
+ font-weight: var(--cds-heading-04-font-weight, 400);
32307
+ line-height: var(--cds-heading-04-line-height, 1.28572);
32308
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
32309
+ }
32310
+
32311
+ .cds--user-avatar--lg {
32312
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
32313
+ font-weight: var(--cds-heading-03-font-weight, 400);
32314
+ line-height: var(--cds-heading-03-line-height, 1.4);
32315
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
32316
+ }
32317
+
32318
+ .cds--user-avatar--md {
32319
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
32320
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
32321
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
32322
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
32323
+ }
32324
+
32325
+ .cds--user-avatar--sm {
32326
+ font-size: var(--cds-label-01-font-size, 0.75rem);
32327
+ font-weight: var(--cds-label-01-font-weight, 400);
32328
+ line-height: var(--cds-label-01-line-height, 1.33333);
32329
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
32330
+ }
32331
+
32332
+ .cds--user-avatar__photo--xl {
32333
+ border-radius: 100%;
32334
+ block-size: 4rem;
32335
+ inline-size: 4rem;
32336
+ -o-object-fit: fill;
32337
+ object-fit: fill;
32338
+ }
32339
+
32340
+ .cds--user-avatar__photo--lg {
32341
+ border-radius: 100%;
32342
+ block-size: 3rem;
32343
+ inline-size: 3rem;
32344
+ -o-object-fit: fill;
32345
+ object-fit: fill;
32346
+ }
32347
+
32348
+ .cds--user-avatar__photo--md {
32349
+ border-radius: 100%;
32350
+ block-size: 2rem;
32351
+ inline-size: 2rem;
32352
+ -o-object-fit: fill;
32353
+ object-fit: fill;
32354
+ }
32355
+
32356
+ .cds--user-avatar__photo--sm {
32357
+ border-radius: 100%;
32358
+ block-size: 1.5rem;
32359
+ inline-size: 1.5rem;
32360
+ -o-object-fit: fill;
32361
+ object-fit: fill;
32362
+ }
32363
+
32364
+ :root .cds--user-avatar--order-1-cyan,
32365
+ .cds--g10 .cds--user-avatar--order-1-cyan,
32366
+ .cds--white .cds--user-avatar--order-1-cyan {
32367
+ background-color: #0072c3;
32368
+ }
32369
+
32370
+ :root .cds--user-avatar--order-2-gray,
32371
+ .cds--g10 .cds--user-avatar--order-2-gray,
32372
+ .cds--white .cds--user-avatar--order-2-gray {
32373
+ background-color: #6f6f6f;
32374
+ }
32375
+
32376
+ :root .cds--user-avatar--order-3-green,
32377
+ .cds--g10 .cds--user-avatar--order-3-green,
32378
+ .cds--white .cds--user-avatar--order-3-green {
32379
+ background-color: #198038;
32380
+ }
32381
+
32382
+ :root .cds--user-avatar--order-4-magenta,
32383
+ .cds--g10 .cds--user-avatar--order-4-magenta,
32384
+ .cds--white .cds--user-avatar--order-4-magenta {
32385
+ background-color: #d02670;
32386
+ }
32387
+
32388
+ :root .cds--user-avatar--order-5-purple,
32389
+ .cds--g10 .cds--user-avatar--order-5-purple,
32390
+ .cds--white .cds--user-avatar--order-5-purple {
32391
+ background-color: #8a3ffc;
32392
+ }
32393
+
32394
+ :root .cds--user-avatar--order-6-teal,
32395
+ .cds--g10 .cds--user-avatar--order-6-teal,
32396
+ .cds--white .cds--user-avatar--order-6-teal {
32397
+ background-color: #007d79;
32398
+ }
32399
+
32400
+ :root .cds--user-avatar--order-7-cyan,
32401
+ .cds--g10 .cds--user-avatar--order-7-cyan,
32402
+ .cds--white .cds--user-avatar--order-7-cyan {
32403
+ background-color: #003a6d;
32404
+ }
32405
+
32406
+ :root .cds--user-avatar--order-8-gray,
32407
+ .cds--g10 .cds--user-avatar--order-8-gray,
32408
+ .cds--white .cds--user-avatar--order-8-gray {
32409
+ background-color: #393939;
32410
+ }
32411
+
32412
+ :root .cds--user-avatar--order-9-green,
32413
+ .cds--g10 .cds--user-avatar--order-9-green,
32414
+ .cds--white .cds--user-avatar--order-9-green {
32415
+ background-color: #044317;
32416
+ }
32417
+
32418
+ :root .cds--user-avatar--order-10-magenta,
32419
+ .cds--g10 .cds--user-avatar--order-10-magenta,
32420
+ .cds--white .cds--user-avatar--order-10-magenta {
32421
+ background-color: #740937;
32422
+ }
32423
+
32424
+ :root .cds--user-avatar--order-11-purple,
32425
+ .cds--g10 .cds--user-avatar--order-11-purple,
32426
+ .cds--white .cds--user-avatar--order-11-purple {
32427
+ background-color: #491d8b;
32428
+ }
32429
+
32430
+ :root .cds--user-avatar--order-12-teal,
32431
+ .cds--g10 .cds--user-avatar--order-12-teal,
32432
+ .cds--white .cds--user-avatar--order-12-teal {
32433
+ background-color: #004144;
32434
+ }
32435
+
32436
+ .cds--g90 .cds--user-avatar--order-1-cyan,
32437
+ .cds--g100 .cds--user-avatar--order-1-cyan {
32438
+ background-color: #1192e8;
32439
+ }
32440
+
32441
+ .cds--g90 .cds--user-avatar--order-2-gray,
32442
+ .cds--g100 .cds--user-avatar--order-2-gray {
32443
+ background-color: #8d8d8d;
32444
+ }
32445
+
32446
+ .cds--g90 .cds--user-avatar--order-3-green,
32447
+ .cds--g100 .cds--user-avatar--order-3-green {
32448
+ background-color: #24a148;
32449
+ }
32450
+
32451
+ .cds--g90 .cds--user-avatar--order-4-magenta,
32452
+ .cds--g100 .cds--user-avatar--order-4-magenta {
32453
+ background-color: #ee5396;
32454
+ }
32455
+
32456
+ .cds--g90 .cds--user-avatar--order-5-purple,
32457
+ .cds--g100 .cds--user-avatar--order-5-purple {
32458
+ background-color: #a56eff;
32459
+ }
32460
+
32461
+ .cds--g90 .cds--user-avatar--order-6-teal,
32462
+ .cds--g100 .cds--user-avatar--order-6-teal {
32463
+ background-color: #009d9a;
32464
+ }
32465
+
32466
+ .cds--g90 .cds--user-avatar--order-7-cyan,
32467
+ .cds--g100 .cds--user-avatar--order-7-cyan {
32468
+ background-color: #82cfff;
32469
+ }
32470
+
32471
+ .cds--g90 .cds--user-avatar--order-8-gray,
32472
+ .cds--g100 .cds--user-avatar--order-8-gray {
32473
+ background-color: #c6c6c6;
32474
+ }
32475
+
32476
+ .cds--g90 .cds--user-avatar--order-9-green,
32477
+ .cds--g100 .cds--user-avatar--order-9-green {
32478
+ background-color: #6fdc8c;
32479
+ }
32480
+
32481
+ .cds--g90 .cds--user-avatar--order-10-magenta,
32482
+ .cds--g100 .cds--user-avatar--order-10-magenta {
32483
+ background-color: #ffafd2;
32484
+ }
32485
+
32486
+ .cds--g90 .cds--user-avatar--order-11-purple,
32487
+ .cds--g100 .cds--user-avatar--order-11-purple {
32488
+ background-color: #d4bbff;
32489
+ }
32490
+
32491
+ .cds--g90 .cds--user-avatar--order-12-teal,
32492
+ .cds--g100 .cds--user-avatar--order-12-teal {
32493
+ background-color: #3ddbd9;
31041
32494
  }