@carbon/styles 1.113.0 → 1.114.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 (60) hide show
  1. package/css/styles.css +2167 -536
  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__/button-test.js +27 -0
  21. package/scss/components/__tests__/data-table-test.js +43 -1
  22. package/scss/components/__tests__/file-uploader.js +30 -0
  23. package/scss/components/__tests__/overflow-menu-test.js +40 -1
  24. package/scss/components/__tests__/structured-list-test.js +38 -1
  25. package/scss/components/__tests__/tag-test.js +1 -2
  26. package/scss/components/__tests__/text-input-test.js +1 -1
  27. package/scss/components/__tests__/treeview-test.js +60 -1
  28. package/scss/components/_index.scss +9 -1
  29. package/scss/components/big-number/_big-number.scss +164 -0
  30. package/scss/components/big-number/_index.scss +11 -0
  31. package/scss/components/button/_button.scss +0 -1
  32. package/scss/components/card/_card.scss +37 -12
  33. package/scss/components/coachmark/_coachmark-beacon.scss +159 -0
  34. package/scss/components/coachmark/_coachmark-tagline.scss +142 -0
  35. package/scss/components/coachmark/_coachmark.scss +56 -0
  36. package/scss/components/coachmark/_index.scss +17 -0
  37. package/scss/components/data-table/_data-table.scss +140 -110
  38. package/scss/components/data-table/expandable/_data-table-expandable.scss +86 -59
  39. package/scss/components/data-table/skeleton/_data-table-skeleton.scss +10 -8
  40. package/scss/components/date-picker/_date-picker-next.scss +20 -20
  41. package/scss/components/date-picker/_date-picker.scss +5 -3
  42. package/scss/components/date-picker/_flatpickr.scss +46 -28
  43. package/scss/components/file-uploader/_file-uploader.scss +23 -10
  44. package/scss/components/loading/_loading.scss +2 -1
  45. package/scss/components/overflow-menu/_overflow-menu.scss +12 -6
  46. package/scss/components/pagination/_pagination.scss +12 -0
  47. package/scss/components/pagination-nav/_pagination-nav.scss +5 -3
  48. package/scss/components/scroll-gradient/_index.scss +11 -0
  49. package/scss/components/scroll-gradient/_scroll-gradient.scss +107 -0
  50. package/scss/components/slider/_slider.scss +38 -15
  51. package/scss/components/structured-list/_structured-list.scss +27 -20
  52. package/scss/components/tabs/_tabs.scss +11 -0
  53. package/scss/components/tag/_mixins.scss +9 -5
  54. package/scss/components/tag/_tag.scss +44 -26
  55. package/scss/components/text-input/_text-input.scss +11 -7
  56. package/scss/components/treeview/_treeview.scss +52 -33
  57. package/scss/components/ui-shell/side-nav/_side-nav.scss +58 -42
  58. package/scss/components/ui-shell/switcher/_switcher.scss +7 -5
  59. package/scss/components/user-avatar/_index.scss +11 -0
  60. package/scss/components/user-avatar/_user-avatar.scss +160 -0
package/css/styles.css CHANGED
@@ -5785,7 +5785,6 @@ li.cds--accordion__item--disabled:last-of-type {
5785
5785
  position: static;
5786
5786
  }
5787
5787
  .cds--btn--icon-only.cds--btn--ghost:focus {
5788
- background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
5789
5788
  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
5790
5789
  }
5791
5790
  .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
@@ -7182,6 +7181,169 @@ li.cds--accordion__item--disabled:last-of-type {
7182
7181
  margin-inline-end: 0.25rem;
7183
7182
  }
7184
7183
 
7184
+ .cds--big-number {
7185
+ margin: 0;
7186
+ }
7187
+
7188
+ .cds--big-number__label {
7189
+ font-size: var(--cds-label-01-font-size, 0.75rem);
7190
+ font-weight: var(--cds-label-01-font-weight, 400);
7191
+ line-height: var(--cds-label-01-line-height, 1.33333);
7192
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7193
+ display: block;
7194
+ margin: 0;
7195
+ color: var(--cds-text-secondary, #525252);
7196
+ }
7197
+
7198
+ .cds--big-number__value {
7199
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7200
+ font-weight: var(--cds-heading-04-font-weight, 400);
7201
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7202
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7203
+ margin-block-end: 0;
7204
+ }
7205
+
7206
+ .cds--big-number__total {
7207
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7208
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7209
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7210
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7211
+ }
7212
+
7213
+ .cds--big-number__total,
7214
+ .cds--big-number__percentage-mark {
7215
+ margin-block: auto 0.25rem;
7216
+ }
7217
+
7218
+ .cds--big-number__info {
7219
+ padding-inline-start: 0.5rem;
7220
+ vertical-align: top;
7221
+ }
7222
+
7223
+ .cds--big-number__trend {
7224
+ margin-block-start: 0.5rem;
7225
+ vertical-align: top;
7226
+ }
7227
+
7228
+ .cds--big-number__row {
7229
+ display: flex;
7230
+ }
7231
+
7232
+ .cds--big-number__percentage {
7233
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7234
+ font-weight: var(--cds-heading-04-font-weight, 400);
7235
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7236
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7237
+ }
7238
+
7239
+ .cds--big-number__percentage-mark {
7240
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7241
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7242
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7243
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7244
+ }
7245
+
7246
+ .cds--big-number__icon-button {
7247
+ margin-inline-start: 0.25rem;
7248
+ }
7249
+
7250
+ .cds--big-number--lg .cds--big-number__value,
7251
+ .cds--big-number--lg .cds--big-number__percentage {
7252
+ font-size: var(--cds-heading-06-font-size, 2.625rem);
7253
+ font-weight: var(--cds-heading-06-font-weight, 300);
7254
+ line-height: var(--cds-heading-06-line-height, 1.199);
7255
+ letter-spacing: var(--cds-heading-06-letter-spacing, 0);
7256
+ }
7257
+
7258
+ .cds--big-number--lg .cds--big-number__total,
7259
+ .cds--big-number--lg .cds--big-number__percentage-mark {
7260
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
7261
+ font-weight: var(--cds-heading-03-font-weight, 400);
7262
+ line-height: var(--cds-heading-03-line-height, 1.4);
7263
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
7264
+ }
7265
+
7266
+ .cds--big-number--xl .cds--big-number__label {
7267
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7268
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
7269
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
7270
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7271
+ }
7272
+
7273
+ .cds--big-number--xl .cds--big-number__value,
7274
+ .cds--big-number--xl .cds--big-number__percentage {
7275
+ font-size: var(--cds-heading-07-font-size, 3.375rem);
7276
+ font-weight: var(--cds-heading-07-font-weight, 300);
7277
+ line-height: var(--cds-heading-07-line-height, 1.19);
7278
+ letter-spacing: var(--cds-heading-07-letter-spacing, 0);
7279
+ }
7280
+
7281
+ .cds--big-number--xl .cds--big-number__total,
7282
+ .cds--big-number--xl .cds--big-number__percentage-mark {
7283
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
7284
+ font-weight: var(--cds-heading-04-font-weight, 400);
7285
+ line-height: var(--cds-heading-04-line-height, 1.28572);
7286
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
7287
+ }
7288
+
7289
+ .cds--big-number--xl .cds--big-number__trend {
7290
+ margin-block-start: 0.75rem;
7291
+ }
7292
+
7293
+ .cds--big-number .cds--big-number__tooltip-trigger {
7294
+ display: inline-flex;
7295
+ padding: 0;
7296
+ border: 0;
7297
+ background: none;
7298
+ color: inherit;
7299
+ cursor: pointer;
7300
+ vertical-align: top;
7301
+ }
7302
+ .cds--big-number .cds--big-number__tooltip-trigger:focus {
7303
+ outline: 1px solid var(--cds-focus, #0f62fe);
7304
+ }
7305
+
7306
+ .cds--big-number-skeleton {
7307
+ inline-size: 4rem;
7308
+ }
7309
+
7310
+ .cds--big-number-skeleton__label {
7311
+ block-size: 0.75rem;
7312
+ margin-block: 0 0.5rem;
7313
+ }
7314
+
7315
+ .cds--big-number-skeleton__value {
7316
+ margin: 0;
7317
+ /* stylelint-disable-next-line declaration-no-important */
7318
+ block-size: 2.5rem !important;
7319
+ }
7320
+
7321
+ .cds--big-number-skeleton--lg {
7322
+ inline-size: 5rem;
7323
+ }
7324
+
7325
+ .cds--big-number-skeleton--xl {
7326
+ inline-size: 6rem;
7327
+ }
7328
+
7329
+ .cds--big-number-skeleton.cds--big-number-skeleton--lg .cds--big-number-skeleton__label {
7330
+ block-size: 0.75rem;
7331
+ }
7332
+
7333
+ .cds--big-number-skeleton.cds--big-number-skeleton--lg .cds--big-number-skeleton__value {
7334
+ /* stylelint-disable-next-line declaration-no-important */
7335
+ block-size: 3rem !important;
7336
+ }
7337
+
7338
+ .cds--big-number-skeleton.cds--big-number-skeleton--xl .cds--big-number-skeleton__label {
7339
+ block-size: 0.75rem;
7340
+ }
7341
+
7342
+ .cds--big-number-skeleton.cds--big-number-skeleton--xl .cds--big-number-skeleton__value {
7343
+ /* stylelint-disable-next-line declaration-no-important */
7344
+ block-size: 4rem !important;
7345
+ }
7346
+
7185
7347
  .cds--overflow-menu,
7186
7348
  .cds--overflow-menu__trigger {
7187
7349
  --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)));
@@ -7258,9 +7420,11 @@ li.cds--accordion__item--disabled:last-of-type {
7258
7420
  outline-style: dotted;
7259
7421
  }
7260
7422
  }
7261
- .cds--overflow-menu:hover,
7262
- .cds--overflow-menu__trigger:hover {
7263
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
7423
+ @media (any-hover: hover) {
7424
+ .cds--overflow-menu:hover,
7425
+ .cds--overflow-menu__trigger:hover {
7426
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
7427
+ }
7264
7428
  }
7265
7429
 
7266
7430
  .cds--overflow-menu > :first-child {
@@ -7343,10 +7507,11 @@ li.cds--accordion__item--disabled:last-of-type {
7343
7507
  }
7344
7508
  }
7345
7509
 
7346
- .cds--overflow-menu.cds--overflow-menu--open:hover {
7347
- background-color: var(--cds-layer);
7510
+ @media (any-hover: hover) {
7511
+ .cds--overflow-menu.cds--overflow-menu--open:hover {
7512
+ background-color: var(--cds-layer);
7513
+ }
7348
7514
  }
7349
-
7350
7515
  .cds--overflow-menu-options--light {
7351
7516
  background-color: var(--cds-layer-hover);
7352
7517
  }
@@ -7354,10 +7519,11 @@ li.cds--accordion__item--disabled:last-of-type {
7354
7519
  background-color: var(--cds-layer);
7355
7520
  }
7356
7521
 
7357
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
7358
- background-color: var(--cds-layer-hover);
7522
+ @media (any-hover: hover) {
7523
+ .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
7524
+ background-color: var(--cds-layer-hover);
7525
+ }
7359
7526
  }
7360
-
7361
7527
  .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
7362
7528
  block-size: 0.1875rem;
7363
7529
  inline-size: var(--cds-layout-size-height-local);
@@ -7940,17 +8106,19 @@ a.cds--overflow-menu-options__btn::before {
7940
8106
 
7941
8107
  .cds--card {
7942
8108
  position: relative;
7943
- border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
7944
- background-color: var(--cds-layer-01, #f4f4f4);
8109
+ background-color: var(--cds-layer);
7945
8110
  color: var(--cds-text-primary, #161616);
7946
8111
  }
7947
8112
 
7948
8113
  .cds--card--clickable {
8114
+ display: block;
8115
+ border: 1px solid var(--cds-border-tile-01, #c6c6c6);
7949
8116
  cursor: pointer;
8117
+ text-decoration: none;
7950
8118
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
7951
8119
  }
7952
8120
  .cds--card--clickable:hover {
7953
- background-color: var(--cds-layer-hover-01, #e8e8e8);
8121
+ background-color: var(--cds-layer-hover);
7954
8122
  }
7955
8123
  .cds--card--clickable:focus {
7956
8124
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -7961,13 +8129,28 @@ a.cds--overflow-menu-options__btn::before {
7961
8129
  outline-style: dotted;
7962
8130
  }
7963
8131
  }
8132
+ .cds--card--clickable:focus {
8133
+ outline-offset: 0;
8134
+ }
7964
8135
  .cds--card--clickable:active {
7965
- background-color: var(--cds-layer-active-01, #c6c6c6);
8136
+ background-color: var(--cds-layer-active);
8137
+ }
8138
+
8139
+ .cds--card__clickable-footer {
8140
+ display: flex;
8141
+ align-items: center;
8142
+ justify-content: flex-end;
8143
+ padding: 1rem;
8144
+ color: var(--cds-icon-interactive, #0f62fe);
8145
+ }
8146
+
8147
+ .cds--card--disabled .cds--card__clickable-footer {
8148
+ color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7966
8149
  }
7967
8150
 
7968
8151
  .cds--card--disabled {
7969
8152
  border-color: var(--cds-border-disabled, #c6c6c6);
7970
- background-color: var(--cds-layer-01, #f4f4f4);
8153
+ background-color: var(--cds-layer);
7971
8154
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7972
8155
  cursor: not-allowed;
7973
8156
  pointer-events: none;
@@ -7987,13 +8170,12 @@ a.cds--overflow-menu-options__btn::before {
7987
8170
  font-weight: var(--cds-body-compact-01-font-weight, 400);
7988
8171
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
7989
8172
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7990
- margin-block: 1rem;
7991
- margin-block-start: 0;
7992
- margin-inline: 1rem;
8173
+ padding-block: 1rem;
8174
+ padding-inline: 1rem;
7993
8175
  }
7994
8176
 
7995
- .cds--card > .cds--card__body:first-child {
7996
- margin-block-start: 1rem;
8177
+ .cds--card__body--flush {
8178
+ padding: 0;
7997
8179
  }
7998
8180
 
7999
8181
  .cds--card__footer {
@@ -8130,6 +8312,10 @@ a.cds--overflow-menu-options__btn::before {
8130
8312
  color: var(--cds-text-secondary, #525252);
8131
8313
  }
8132
8314
 
8315
+ .cds--card--disabled .cds--card__label {
8316
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8317
+ }
8318
+
8133
8319
  .cds--card__label--truncate {
8134
8320
  overflow: hidden;
8135
8321
  text-overflow: ellipsis;
@@ -8148,7 +8334,6 @@ a.cds--overflow-menu-options__btn::before {
8148
8334
  display: flex;
8149
8335
  overflow: hidden;
8150
8336
  flex-direction: column;
8151
- color: var(--cds-text-primary, #161616);
8152
8337
  gap: 0.125rem;
8153
8338
  margin-inline: 1rem;
8154
8339
  min-inline-size: 0;
@@ -8223,6 +8408,10 @@ a.cds--overflow-menu-options__btn::before {
8223
8408
  color: var(--cds-text-secondary, #525252);
8224
8409
  }
8225
8410
 
8411
+ .cds--card--disabled .cds--card__description {
8412
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8413
+ }
8414
+
8226
8415
  .cds--card__description--truncate {
8227
8416
  overflow: hidden;
8228
8417
  text-overflow: ellipsis;
@@ -8328,82 +8517,328 @@ a.cds--overflow-menu-options__btn::before {
8328
8517
  opacity: 1;
8329
8518
  }
8330
8519
 
8331
- .cds--chat-btn {
8332
- border-radius: 1.5rem;
8333
- }
8334
-
8335
- .cds--chat-btn:not(.cds--chat-btn--with-icon) {
8336
- padding-inline-end: 0.9375rem;
8520
+ /* stylelint-disable declaration-no-important */
8521
+ .cds--coachmark--floating span:has(> div > .cds--coachmark--content-header--drag-icon) {
8522
+ margin-inline-end: auto;
8337
8523
  }
8338
-
8339
- .cds--chat-btn.cds--btn--md {
8340
- border-radius: 1.25rem;
8524
+ .cds--coachmark .cds--coachmark--content-header--is-dragging {
8525
+ border-radius: 0;
8526
+ box-shadow: 0 0 0 0.25rem var(--cds-icon-inverse, #ffffff);
8527
+ outline: 0.125rem solid var(--cds-background-inverse, #393939);
8341
8528
  }
8342
-
8343
- .cds--chat-btn.cds--btn--sm {
8344
- border-radius: 1rem;
8529
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header {
8530
+ display: flex;
8531
+ justify-content: flex-end;
8345
8532
  }
8346
-
8347
- .cds--chat-btn--quick-action {
8348
- align-items: center;
8349
- border: 1px solid var(--cds-chat-button, #0f62fe);
8350
- background: transparent;
8351
- color: var(--cds-chat-button, #0f62fe);
8533
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon,
8534
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn {
8535
+ color: var(--cds-icon-inverse, #ffffff);
8352
8536
  }
8353
-
8354
- .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
8355
- border-color: transparent;
8356
- background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12));
8357
- color: var(--cds-chat-button-text-hover, #0043ce);
8537
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon .cds--btn__icon,
8538
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header--drag-icon svg,
8539
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn .cds--btn__icon,
8540
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-header .cds--btn svg {
8541
+ color: var(--cds-icon-inverse, #ffffff);
8542
+ fill: var(--cds-icon-inverse, #ffffff);
8358
8543
  }
8359
-
8360
- .cds--chat-btn--quick-action:active {
8361
- border-color: transparent;
8362
- background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5));
8363
- color: var(--cds-chat-button-text-hover, #0043ce);
8544
+ .cds--coachmark .cds--coachmark--coachmark-content .cds--coachmark--content-body {
8545
+ display: flex;
8546
+ flex-direction: column;
8547
+ padding: 0.125rem 1rem 0;
8364
8548
  }
8365
8549
 
8366
- .cds--chat-btn--quick-action.cds--btn--ghost:focus {
8367
- border-color: var(--cds-focus, #0f62fe);
8368
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
8550
+ .cds--coachmark-beacon {
8551
+ position: relative;
8369
8552
  }
8370
-
8371
- .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
8372
- border-color: var(--cds-focus, #0f62fe);
8373
- box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
8553
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target::before {
8554
+ display: none;
8374
8555
  }
8375
-
8376
- .cds--chat-btn--quick-action[disabled],
8377
- .cds--chat-btn--quick-action[disabled]:hover {
8378
- border-color: var(--cds-button-disabled, #c6c6c6);
8379
- color: var(--cds-button-disabled, #c6c6c6);
8556
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target::after {
8557
+ position: absolute;
8558
+ border-radius: 50%;
8559
+ background-color: #4589ff;
8560
+ block-size: 0.75rem;
8561
+ content: "";
8562
+ inline-size: 0.75rem;
8563
+ inset-block-start: 0.625rem;
8564
+ inset-inline-start: 0.625rem;
8380
8565
  }
8381
-
8382
- .cds--chat-btn--quick-action--selected,
8383
- .cds--chat-btn--quick-action--selected[disabled],
8384
- .cds--chat-btn--quick-action--selected[disabled]:hover {
8385
- border-color: transparent;
8386
- background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2));
8387
- color: var(--cds-chat-button-text-selected, #525252);
8566
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target:focus {
8567
+ outline: transparent;
8388
8568
  }
8389
-
8390
- .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover,
8391
- .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active {
8392
- color: var(--cds-chat-button-text-selected, #525252);
8569
+ .cds--coachmark-beacon-default .cds--coachmark-beacon__target:focus::before {
8570
+ position: absolute;
8571
+ display: block;
8572
+ border-radius: 100%;
8573
+ block-size: 18px;
8574
+ content: "";
8575
+ inline-size: 18px;
8576
+ inset-block-start: 7px;
8577
+ inset-inline-start: 7px;
8578
+ outline: 0.125rem var(--cds-focus, #0f62fe) solid;
8393
8579
  }
8394
-
8395
- .cds--chat-btn.cds--skeleton {
8396
- overflow: hidden;
8580
+ .cds--coachmark-beacon .cds--coachmark-beacon__target {
8581
+ display: flex;
8582
+ padding: 0;
8583
+ border: none;
8584
+ border-radius: 50%;
8585
+ background-color: transparent;
8586
+ block-size: 2rem;
8587
+ cursor: pointer;
8588
+ inline-size: 2rem;
8397
8589
  }
8398
-
8399
- input:-webkit-autofill,
8400
- input:-webkit-autofill:hover,
8401
- input:-webkit-autofill:focus,
8402
- textarea:-webkit-autofill,
8403
- textarea:-webkit-autofill:hover,
8404
- textarea:-webkit-autofill:focus {
8405
- box-shadow: 0 0 0 1000px var(--cds-field) inset;
8406
- -webkit-text-fill-color: var(--cds-text-primary, #161616);
8590
+ .cds--coachmark-beacon .cds--coachmark-beacon__target[aria-expanded=true] circle {
8591
+ animation: none;
8592
+ }
8593
+ .cds--coachmark-beacon__center {
8594
+ position: absolute;
8595
+ z-index: 6900;
8596
+ block-size: 5rem;
8597
+ inline-size: 5rem;
8598
+ inset-block-start: -1.375rem;
8599
+ inset-inline-start: -1.375rem;
8600
+ pointer-events: none;
8601
+ }
8602
+ .cds--coachmark-beacon__center circle {
8603
+ animation: ripple 2s infinite;
8604
+ fill: var(--cds-support-info, #0043ce);
8605
+ fill-opacity: 0;
8606
+ -webkit-mask-image: none;
8607
+ mask-image: none;
8608
+ stroke: var(--cds-support-info, #0043ce);
8609
+ stroke-opacity: 0;
8610
+ stroke-width: 1px;
8611
+ transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
8612
+ }
8613
+ @media (prefers-reduced-motion) {
8614
+ .cds--coachmark-beacon__center circle {
8615
+ animation: none;
8616
+ }
8617
+ }
8618
+
8619
+ @keyframes ripple {
8620
+ 0% {
8621
+ fill-opacity: 0;
8622
+ r: 1px;
8623
+ stroke-opacity: 0;
8624
+ transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
8625
+ }
8626
+ 31% {
8627
+ fill-opacity: 0.2;
8628
+ stroke-opacity: 1;
8629
+ }
8630
+ 62% {
8631
+ fill-opacity: 0;
8632
+ r: 32px;
8633
+ stroke-opacity: 0;
8634
+ }
8635
+ 100% {
8636
+ fill-opacity: 0;
8637
+ r: 32px;
8638
+ stroke-opacity: 0;
8639
+ }
8640
+ }
8641
+ @keyframes ring-ripple {
8642
+ 0% {
8643
+ fill-opacity: 0;
8644
+ r: 12px;
8645
+ stroke-opacity: 0;
8646
+ transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
8647
+ }
8648
+ 31% {
8649
+ fill-opacity: 0.2;
8650
+ stroke-opacity: 1;
8651
+ }
8652
+ 62% {
8653
+ fill-opacity: 0;
8654
+ r: 32px;
8655
+ stroke-opacity: 0;
8656
+ }
8657
+ 100% {
8658
+ fill-opacity: 0;
8659
+ r: 32px;
8660
+ stroke-opacity: 0;
8661
+ }
8662
+ }
8663
+ .cds--coachmark-tagline {
8664
+ position: fixed;
8665
+ z-index: 1000;
8666
+ display: grid;
8667
+ overflow: hidden;
8668
+ border-radius: 0.125rem 0.125rem 0 0;
8669
+ background: #6929c4;
8670
+ background-image: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
8671
+ color: #ffffff !important;
8672
+ grid-template-columns: [cta-col] auto [close-btn-col] 2.5rem;
8673
+ inline-size: 18rem;
8674
+ inset-block-end: 0;
8675
+ inset-inline-end: 1rem;
8676
+ opacity: 1;
8677
+ transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9) 300ms;
8678
+ transition-delay: 240ms;
8679
+ }
8680
+ @media (prefers-reduced-motion) {
8681
+ .cds--coachmark-tagline {
8682
+ transition: none;
8683
+ }
8684
+ }
8685
+ .cds--coachmark-tagline::before {
8686
+ position: absolute;
8687
+ z-index: -1;
8688
+ background: linear-gradient(90deg, #0043ce 0%, #6929c4 100%);
8689
+ content: "";
8690
+ inset: 0;
8691
+ opacity: 0;
8692
+ transition: opacity 240ms cubic-bezier(0.2, 0, 1, 0.9);
8693
+ }
8694
+ @media (prefers-reduced-motion) {
8695
+ .cds--coachmark-tagline::before {
8696
+ transition: none;
8697
+ }
8698
+ }
8699
+ .cds--coachmark-tagline:hover::before {
8700
+ opacity: 1;
8701
+ }
8702
+ .cds--coachmark-tagline--is-open {
8703
+ background: #ffffff;
8704
+ opacity: 0;
8705
+ }
8706
+ .cds--coachmark-tagline--is-open cds--coachmark-tagline__cta {
8707
+ opacity: 0;
8708
+ }
8709
+ .cds--coachmark-tagline--is-open cds--coachmark-tagline--close-btn {
8710
+ display: none;
8711
+ }
8712
+ .cds--coachmark-tagline--is-open::before {
8713
+ background: #ffffff;
8714
+ }
8715
+ .cds--coachmark-tagline__cta {
8716
+ display: grid;
8717
+ padding: 0.5rem 0;
8718
+ border: none;
8719
+ background: transparent;
8720
+ color: #ffffff !important;
8721
+ grid-template-columns: [icon-col] 2rem [body-col] auto;
8722
+ text-align: start;
8723
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
8724
+ font-weight: var(--cds-body-short-01-font-weight, 400);
8725
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
8726
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
8727
+ }
8728
+ .cds--coachmark-tagline__cta:focus {
8729
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 0.25rem #ffffff;
8730
+ outline: 1px solid transparent;
8731
+ }
8732
+ .cds--coachmark-tagline__cta:hover {
8733
+ cursor: pointer !important;
8734
+ }
8735
+ .cds--coachmark-tagline__cta .cds--coachmark-tagline__idea {
8736
+ justify-self: center;
8737
+ }
8738
+ .cds--coachmark-tagline--close-btn-container {
8739
+ block-size: 2rem;
8740
+ inline-size: 2rem;
8741
+ margin-inline-start: auto;
8742
+ }
8743
+ .cds--coachmark-tagline--close-btn {
8744
+ border-color: transparent !important;
8745
+ border-radius: 0;
8746
+ block-size: 2rem;
8747
+ color: #ffffff;
8748
+ inline-size: 2rem;
8749
+ margin-inline-start: auto !important;
8750
+ outline: 1px solid transparent;
8751
+ }
8752
+ .cds--coachmark-tagline--close-btn:active {
8753
+ background-color: var(--cds-button-secondary-active, #6f6f6f);
8754
+ }
8755
+ .cds--coachmark-tagline--close-btn:focus {
8756
+ box-shadow: inset 0 0 0 1px var(--cds-background-inverse, #393939), inset 0 0 0 0.125rem #ffffff !important;
8757
+ }
8758
+ .cds--coachmark-tagline--close-btn svg > path {
8759
+ margin: 0;
8760
+ fill: #ffffff !important;
8761
+ }
8762
+ .cds--coachmark-tagline--close-btn:hover {
8763
+ background-color: #7c3dd6 !important;
8764
+ }
8765
+
8766
+ .cds--chat-btn {
8767
+ border-radius: 1.5rem;
8768
+ }
8769
+
8770
+ .cds--chat-btn:not(.cds--chat-btn--with-icon) {
8771
+ padding-inline-end: 0.9375rem;
8772
+ }
8773
+
8774
+ .cds--chat-btn.cds--btn--md {
8775
+ border-radius: 1.25rem;
8776
+ }
8777
+
8778
+ .cds--chat-btn.cds--btn--sm {
8779
+ border-radius: 1rem;
8780
+ }
8781
+
8782
+ .cds--chat-btn--quick-action {
8783
+ align-items: center;
8784
+ border: 1px solid var(--cds-chat-button, #0f62fe);
8785
+ background: transparent;
8786
+ color: var(--cds-chat-button, #0f62fe);
8787
+ }
8788
+
8789
+ .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
8790
+ border-color: transparent;
8791
+ background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12));
8792
+ color: var(--cds-chat-button-text-hover, #0043ce);
8793
+ }
8794
+
8795
+ .cds--chat-btn--quick-action:active {
8796
+ border-color: transparent;
8797
+ background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5));
8798
+ color: var(--cds-chat-button-text-hover, #0043ce);
8799
+ }
8800
+
8801
+ .cds--chat-btn--quick-action.cds--btn--ghost:focus {
8802
+ border-color: var(--cds-focus, #0f62fe);
8803
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
8804
+ }
8805
+
8806
+ .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
8807
+ border-color: var(--cds-focus, #0f62fe);
8808
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
8809
+ }
8810
+
8811
+ .cds--chat-btn--quick-action[disabled],
8812
+ .cds--chat-btn--quick-action[disabled]:hover {
8813
+ border-color: var(--cds-button-disabled, #c6c6c6);
8814
+ color: var(--cds-button-disabled, #c6c6c6);
8815
+ }
8816
+
8817
+ .cds--chat-btn--quick-action--selected,
8818
+ .cds--chat-btn--quick-action--selected[disabled],
8819
+ .cds--chat-btn--quick-action--selected[disabled]:hover {
8820
+ border-color: transparent;
8821
+ background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2));
8822
+ color: var(--cds-chat-button-text-selected, #525252);
8823
+ }
8824
+
8825
+ .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover,
8826
+ .cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active {
8827
+ color: var(--cds-chat-button-text-selected, #525252);
8828
+ }
8829
+
8830
+ .cds--chat-btn.cds--skeleton {
8831
+ overflow: hidden;
8832
+ }
8833
+
8834
+ input:-webkit-autofill,
8835
+ input:-webkit-autofill:hover,
8836
+ input:-webkit-autofill:focus,
8837
+ textarea:-webkit-autofill,
8838
+ textarea:-webkit-autofill:hover,
8839
+ textarea:-webkit-autofill:focus {
8840
+ box-shadow: 0 0 0 1000px var(--cds-field) inset;
8841
+ -webkit-text-fill-color: var(--cds-text-primary, #161616);
8407
8842
  }
8408
8843
 
8409
8844
  .cds--fieldset {
@@ -10192,8 +10627,10 @@ fieldset[disabled] .cds--form__helper-text {
10192
10627
  .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
10193
10628
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10194
10629
  }
10195
- .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
10196
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10630
+ @media (any-hover: hover) {
10631
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
10632
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10633
+ }
10197
10634
  }
10198
10635
 
10199
10636
  .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg {
@@ -10203,13 +10640,14 @@ fieldset[disabled] .cds--form__helper-text {
10203
10640
  cursor: default;
10204
10641
  }
10205
10642
 
10206
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
10207
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10208
- }
10209
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
10210
- cursor: default;
10643
+ @media (any-hover: hover) {
10644
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
10645
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10646
+ }
10647
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
10648
+ cursor: default;
10649
+ }
10211
10650
  }
10212
-
10213
10651
  .cds--text-input__counter-alert {
10214
10652
  position: absolute;
10215
10653
  overflow: hidden;
@@ -10543,11 +10981,15 @@ fieldset[disabled] .cds--form__helper-text {
10543
10981
  .cds--tag.cds--tag--operational {
10544
10982
  border: 1px solid var(--cds-tag-background-gray, #e0e0e0);
10545
10983
  }
10546
- .cds--tag.cds--tag--operational:hover {
10547
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
10984
+ @media (any-hover: hover) {
10985
+ .cds--tag.cds--tag--operational:hover {
10986
+ background-color: var(--cds-tag-hover-gray, #d1d1d1);
10987
+ }
10548
10988
  }
10549
- .cds--tag .cds--tag__close-icon:hover {
10550
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
10989
+ @media (any-hover: hover) {
10990
+ .cds--tag .cds--tag__close-icon:hover {
10991
+ background-color: var(--cds-tag-hover-gray, #d1d1d1);
10992
+ }
10551
10993
  }
10552
10994
  .cds--tag .cds--definition-term .cds--tag__label {
10553
10995
  color: var(--cds-tag-color-gray, #161616);
@@ -10602,8 +11044,10 @@ fieldset[disabled] .cds--form__helper-text {
10602
11044
  padding-block: 0;
10603
11045
  padding-inline-end: 0;
10604
11046
  }
10605
- .cds--tag--filter:hover {
10606
- outline: none;
11047
+ @media (any-hover: hover) {
11048
+ .cds--tag--filter:hover {
11049
+ outline: none;
11050
+ }
10607
11051
  }
10608
11052
 
10609
11053
  .cds--tag--selectable {
@@ -10612,9 +11056,11 @@ fieldset[disabled] .cds--form__helper-text {
10612
11056
  color: var(--cds-text-primary, #161616);
10613
11057
  cursor: pointer;
10614
11058
  }
10615
- .cds--tag--selectable:hover {
10616
- background-color: var(--cds-layer-hover);
10617
- outline: none;
11059
+ @media (any-hover: hover) {
11060
+ .cds--tag--selectable:hover {
11061
+ background-color: var(--cds-layer-hover);
11062
+ outline: none;
11063
+ }
10618
11064
  }
10619
11065
  .cds--tag--selectable:focus {
10620
11066
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -10625,8 +11071,10 @@ fieldset[disabled] .cds--form__helper-text {
10625
11071
  background-color: var(--cds-layer-selected-inverse, #161616);
10626
11072
  color: var(--cds-text-inverse, #ffffff);
10627
11073
  }
10628
- .cds--tag--selectable-selected:hover {
10629
- background-color: var(--cds-layer-selected-inverse, #161616);
11074
+ @media (any-hover: hover) {
11075
+ .cds--tag--selectable-selected:hover {
11076
+ background-color: var(--cds-layer-selected-inverse, #161616);
11077
+ }
10630
11078
  }
10631
11079
 
10632
11080
  .cds--tag--operational {
@@ -10635,9 +11083,11 @@ fieldset[disabled] .cds--form__helper-text {
10635
11083
  color: var(--cds-tag-color-gray, #161616);
10636
11084
  cursor: pointer;
10637
11085
  }
10638
- .cds--tag--operational:hover {
10639
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
10640
- outline: none;
11086
+ @media (any-hover: hover) {
11087
+ .cds--tag--operational:hover {
11088
+ background-color: var(--cds-tag-hover-gray, #d1d1d1);
11089
+ outline: none;
11090
+ }
10641
11091
  }
10642
11092
  .cds--tag--operational:focus {
10643
11093
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -10651,11 +11101,15 @@ fieldset[disabled] .cds--form__helper-text {
10651
11101
  .cds--tag--red.cds--tag--operational {
10652
11102
  border: 1px solid var(--cds-tag-border-red, #ff8389);
10653
11103
  }
10654
- .cds--tag--red.cds--tag--operational:hover {
10655
- background-color: var(--cds-tag-hover-red, #ffc2c5);
11104
+ @media (any-hover: hover) {
11105
+ .cds--tag--red.cds--tag--operational:hover {
11106
+ background-color: var(--cds-tag-hover-red, #ffc2c5);
11107
+ }
10656
11108
  }
10657
- .cds--tag--red .cds--tag__close-icon:hover {
10658
- background-color: var(--cds-tag-hover-red, #ffc2c5);
11109
+ @media (any-hover: hover) {
11110
+ .cds--tag--red .cds--tag__close-icon:hover {
11111
+ background-color: var(--cds-tag-hover-red, #ffc2c5);
11112
+ }
10659
11113
  }
10660
11114
  .cds--tag--red .cds--definition-term .cds--tag__label {
10661
11115
  color: var(--cds-tag-color-red, #a2191f);
@@ -10668,11 +11122,15 @@ fieldset[disabled] .cds--form__helper-text {
10668
11122
  .cds--tag--magenta.cds--tag--operational {
10669
11123
  border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
10670
11124
  }
10671
- .cds--tag--magenta.cds--tag--operational:hover {
10672
- background-color: var(--cds-tag-hover-magenta, #ffbdda);
11125
+ @media (any-hover: hover) {
11126
+ .cds--tag--magenta.cds--tag--operational:hover {
11127
+ background-color: var(--cds-tag-hover-magenta, #ffbdda);
11128
+ }
10673
11129
  }
10674
- .cds--tag--magenta .cds--tag__close-icon:hover {
10675
- background-color: var(--cds-tag-hover-magenta, #ffbdda);
11130
+ @media (any-hover: hover) {
11131
+ .cds--tag--magenta .cds--tag__close-icon:hover {
11132
+ background-color: var(--cds-tag-hover-magenta, #ffbdda);
11133
+ }
10676
11134
  }
10677
11135
  .cds--tag--magenta .cds--definition-term .cds--tag__label {
10678
11136
  color: var(--cds-tag-color-magenta, #9f1853);
@@ -10685,11 +11143,15 @@ fieldset[disabled] .cds--form__helper-text {
10685
11143
  .cds--tag--purple.cds--tag--operational {
10686
11144
  border: 1px solid var(--cds-tag-border-purple, #be95ff);
10687
11145
  }
10688
- .cds--tag--purple.cds--tag--operational:hover {
10689
- background-color: var(--cds-tag-hover-purple, #dcc7ff);
11146
+ @media (any-hover: hover) {
11147
+ .cds--tag--purple.cds--tag--operational:hover {
11148
+ background-color: var(--cds-tag-hover-purple, #dcc7ff);
11149
+ }
10690
11150
  }
10691
- .cds--tag--purple .cds--tag__close-icon:hover {
10692
- background-color: var(--cds-tag-hover-purple, #dcc7ff);
11151
+ @media (any-hover: hover) {
11152
+ .cds--tag--purple .cds--tag__close-icon:hover {
11153
+ background-color: var(--cds-tag-hover-purple, #dcc7ff);
11154
+ }
10693
11155
  }
10694
11156
  .cds--tag--purple .cds--definition-term .cds--tag__label {
10695
11157
  color: var(--cds-tag-color-purple, #6929c4);
@@ -10702,11 +11164,15 @@ fieldset[disabled] .cds--form__helper-text {
10702
11164
  .cds--tag--blue.cds--tag--operational {
10703
11165
  border: 1px solid var(--cds-tag-border-blue, #78a9ff);
10704
11166
  }
10705
- .cds--tag--blue.cds--tag--operational:hover {
10706
- background-color: var(--cds-tag-hover-blue, #b8d3ff);
11167
+ @media (any-hover: hover) {
11168
+ .cds--tag--blue.cds--tag--operational:hover {
11169
+ background-color: var(--cds-tag-hover-blue, #b8d3ff);
11170
+ }
10707
11171
  }
10708
- .cds--tag--blue .cds--tag__close-icon:hover {
10709
- background-color: var(--cds-tag-hover-blue, #b8d3ff);
11172
+ @media (any-hover: hover) {
11173
+ .cds--tag--blue .cds--tag__close-icon:hover {
11174
+ background-color: var(--cds-tag-hover-blue, #b8d3ff);
11175
+ }
10710
11176
  }
10711
11177
  .cds--tag--blue .cds--definition-term .cds--tag__label {
10712
11178
  color: var(--cds-tag-color-blue, #0043ce);
@@ -10719,11 +11185,15 @@ fieldset[disabled] .cds--form__helper-text {
10719
11185
  .cds--tag--cyan.cds--tag--operational {
10720
11186
  border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
10721
11187
  }
10722
- .cds--tag--cyan.cds--tag--operational:hover {
10723
- background-color: var(--cds-tag-hover-cyan, #99daff);
11188
+ @media (any-hover: hover) {
11189
+ .cds--tag--cyan.cds--tag--operational:hover {
11190
+ background-color: var(--cds-tag-hover-cyan, #99daff);
11191
+ }
10724
11192
  }
10725
- .cds--tag--cyan .cds--tag__close-icon:hover {
10726
- background-color: var(--cds-tag-hover-cyan, #99daff);
11193
+ @media (any-hover: hover) {
11194
+ .cds--tag--cyan .cds--tag__close-icon:hover {
11195
+ background-color: var(--cds-tag-hover-cyan, #99daff);
11196
+ }
10727
11197
  }
10728
11198
  .cds--tag--cyan .cds--definition-term .cds--tag__label {
10729
11199
  color: var(--cds-tag-color-cyan, #00539a);
@@ -10736,11 +11206,15 @@ fieldset[disabled] .cds--form__helper-text {
10736
11206
  .cds--tag--teal.cds--tag--operational {
10737
11207
  border: 1px solid var(--cds-tag-border-teal, #08bdba);
10738
11208
  }
10739
- .cds--tag--teal.cds--tag--operational:hover {
10740
- background-color: var(--cds-tag-hover-teal, #57e5e5);
11209
+ @media (any-hover: hover) {
11210
+ .cds--tag--teal.cds--tag--operational:hover {
11211
+ background-color: var(--cds-tag-hover-teal, #57e5e5);
11212
+ }
10741
11213
  }
10742
- .cds--tag--teal .cds--tag__close-icon:hover {
10743
- background-color: var(--cds-tag-hover-teal, #57e5e5);
11214
+ @media (any-hover: hover) {
11215
+ .cds--tag--teal .cds--tag__close-icon:hover {
11216
+ background-color: var(--cds-tag-hover-teal, #57e5e5);
11217
+ }
10744
11218
  }
10745
11219
  .cds--tag--teal .cds--definition-term .cds--tag__label {
10746
11220
  color: var(--cds-tag-color-teal, #005d5d);
@@ -10753,11 +11227,15 @@ fieldset[disabled] .cds--form__helper-text {
10753
11227
  .cds--tag--green.cds--tag--operational {
10754
11228
  border: 1px solid var(--cds-tag-border-green, #42be65);
10755
11229
  }
10756
- .cds--tag--green.cds--tag--operational:hover {
10757
- background-color: var(--cds-tag-hover-green, #74e792);
11230
+ @media (any-hover: hover) {
11231
+ .cds--tag--green.cds--tag--operational:hover {
11232
+ background-color: var(--cds-tag-hover-green, #74e792);
11233
+ }
10758
11234
  }
10759
- .cds--tag--green .cds--tag__close-icon:hover {
10760
- background-color: var(--cds-tag-hover-green, #74e792);
11235
+ @media (any-hover: hover) {
11236
+ .cds--tag--green .cds--tag__close-icon:hover {
11237
+ background-color: var(--cds-tag-hover-green, #74e792);
11238
+ }
10761
11239
  }
10762
11240
  .cds--tag--green .cds--definition-term .cds--tag__label {
10763
11241
  color: var(--cds-tag-color-green, #0e6027);
@@ -10770,11 +11248,15 @@ fieldset[disabled] .cds--form__helper-text {
10770
11248
  .cds--tag--gray.cds--tag--operational {
10771
11249
  border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
10772
11250
  }
10773
- .cds--tag--gray.cds--tag--operational:hover {
10774
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
11251
+ @media (any-hover: hover) {
11252
+ .cds--tag--gray.cds--tag--operational:hover {
11253
+ background-color: var(--cds-tag-hover-gray, #d1d1d1);
11254
+ }
10775
11255
  }
10776
- .cds--tag--gray .cds--tag__close-icon:hover {
10777
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
11256
+ @media (any-hover: hover) {
11257
+ .cds--tag--gray .cds--tag__close-icon:hover {
11258
+ background-color: var(--cds-tag-hover-gray, #d1d1d1);
11259
+ }
10778
11260
  }
10779
11261
  .cds--tag--gray .cds--definition-term .cds--tag__label {
10780
11262
  color: var(--cds-tag-color-gray, #161616);
@@ -10787,11 +11269,15 @@ fieldset[disabled] .cds--form__helper-text {
10787
11269
  .cds--tag--cool-gray.cds--tag--operational {
10788
11270
  border: 1px solid var(--cds-tag-border-cool-gray, #a2a9b0);
10789
11271
  }
10790
- .cds--tag--cool-gray.cds--tag--operational:hover {
10791
- background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
11272
+ @media (any-hover: hover) {
11273
+ .cds--tag--cool-gray.cds--tag--operational:hover {
11274
+ background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
11275
+ }
10792
11276
  }
10793
- .cds--tag--cool-gray .cds--tag__close-icon:hover {
10794
- background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
11277
+ @media (any-hover: hover) {
11278
+ .cds--tag--cool-gray .cds--tag__close-icon:hover {
11279
+ background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
11280
+ }
10795
11281
  }
10796
11282
  .cds--tag--cool-gray .cds--definition-term .cds--tag__label {
10797
11283
  color: var(--cds-tag-color-cool-gray, #121619);
@@ -10804,11 +11290,15 @@ fieldset[disabled] .cds--form__helper-text {
10804
11290
  .cds--tag--warm-gray.cds--tag--operational {
10805
11291
  border: 1px solid var(--cds-tag-border-warm-gray, #ada8a8);
10806
11292
  }
10807
- .cds--tag--warm-gray.cds--tag--operational:hover {
10808
- background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
11293
+ @media (any-hover: hover) {
11294
+ .cds--tag--warm-gray.cds--tag--operational:hover {
11295
+ background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
11296
+ }
10809
11297
  }
10810
- .cds--tag--warm-gray .cds--tag__close-icon:hover {
10811
- background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
11298
+ @media (any-hover: hover) {
11299
+ .cds--tag--warm-gray .cds--tag__close-icon:hover {
11300
+ background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
11301
+ }
10812
11302
  }
10813
11303
  .cds--tag--warm-gray .cds--definition-term .cds--tag__label {
10814
11304
  color: var(--cds-tag-color-warm-gray, #171414);
@@ -10821,18 +11311,24 @@ fieldset[disabled] .cds--form__helper-text {
10821
11311
  .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational {
10822
11312
  border: 1px solid var(--cds-background-inverse, #393939);
10823
11313
  }
10824
- .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover {
10825
- background-color: var(--cds-background-inverse-hover, #474747);
11314
+ @media (any-hover: hover) {
11315
+ .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover {
11316
+ background-color: var(--cds-background-inverse-hover, #474747);
11317
+ }
10826
11318
  }
10827
- .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
10828
- background-color: var(--cds-background-inverse-hover, #474747);
11319
+ @media (any-hover: hover) {
11320
+ .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
11321
+ background-color: var(--cds-background-inverse-hover, #474747);
11322
+ }
10829
11323
  }
10830
11324
  .cds--tag--high-contrast:not(.cds--tag--operational) .cds--definition-term .cds--tag__label {
10831
11325
  color: var(--cds-text-inverse, #ffffff);
10832
11326
  }
10833
11327
 
10834
- .cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
10835
- background-color: transparent;
11328
+ @media (any-hover: hover) {
11329
+ .cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
11330
+ background-color: transparent;
11331
+ }
10836
11332
  }
10837
11333
 
10838
11334
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
@@ -10842,11 +11338,15 @@ fieldset[disabled] .cds--form__helper-text {
10842
11338
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational {
10843
11339
  border: 1px solid var(--cds-background, #ffffff);
10844
11340
  }
10845
- .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover {
10846
- background-color: var(--cds-layer-hover);
10847
- }
10848
- .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
10849
- background-color: var(--cds-layer-hover);
11341
+ @media (any-hover: hover) {
11342
+ .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover {
11343
+ background-color: var(--cds-layer-hover);
11344
+ }
11345
+ }
11346
+ @media (any-hover: hover) {
11347
+ .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
11348
+ background-color: var(--cds-layer-hover);
11349
+ }
10850
11350
  }
10851
11351
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label {
10852
11352
  color: var(--cds-text-primary, #161616);
@@ -10867,15 +11367,19 @@ fieldset[disabled] .cds--form__helper-text {
10867
11367
  .cds--tag--interactive.cds--tag--disabled.cds--tag--operational {
10868
11368
  border: 1px solid var(--cds-layer);
10869
11369
  }
10870
- .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
10871
- .cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
10872
- .cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
10873
- background-color: var(--cds-layer);
11370
+ @media (any-hover: hover) {
11371
+ .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
11372
+ .cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
11373
+ .cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
11374
+ background-color: var(--cds-layer);
11375
+ }
10874
11376
  }
10875
- .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
10876
- .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
10877
- .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
10878
- background-color: var(--cds-layer);
11377
+ @media (any-hover: hover) {
11378
+ .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
11379
+ .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
11380
+ .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
11381
+ background-color: var(--cds-layer);
11382
+ }
10879
11383
  }
10880
11384
  .cds--tag--disabled:not(.cds--tag--operational) .cds--definition-term .cds--tag__label,
10881
11385
  .cds--tag--filter.cds--tag--disabled .cds--definition-term .cds--tag__label,
@@ -10888,10 +11392,12 @@ fieldset[disabled] .cds--form__helper-text {
10888
11392
  box-shadow: none;
10889
11393
  outline: none;
10890
11394
  }
10891
- .cds--tag--disabled:not(.cds--tag--operational):hover,
10892
- .cds--tag--filter.cds--tag--disabled:hover,
10893
- .cds--tag--interactive.cds--tag--disabled:hover {
10894
- cursor: not-allowed;
11395
+ @media (any-hover: hover) {
11396
+ .cds--tag--disabled:not(.cds--tag--operational):hover,
11397
+ .cds--tag--filter.cds--tag--disabled:hover,
11398
+ .cds--tag--interactive.cds--tag--disabled:hover {
11399
+ cursor: not-allowed;
11400
+ }
10895
11401
  }
10896
11402
  .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__label,
10897
11403
  .cds--tag--filter.cds--tag--disabled .cds--tag__label,
@@ -10906,10 +11412,12 @@ fieldset[disabled] .cds--form__helper-text {
10906
11412
  background-color: var(--cds-layer);
10907
11413
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
10908
11414
  }
10909
- .cds--tag--selectable.cds--tag--disabled:hover,
10910
- .cds--tag--operational.cds--tag--disabled:hover {
10911
- background-color: var(--cds-layer);
10912
- cursor: not-allowed;
11415
+ @media (any-hover: hover) {
11416
+ .cds--tag--selectable.cds--tag--disabled:hover,
11417
+ .cds--tag--operational.cds--tag--disabled:hover {
11418
+ background-color: var(--cds-layer);
11419
+ cursor: not-allowed;
11420
+ }
10913
11421
  }
10914
11422
 
10915
11423
  .cds--tag--interactive {
@@ -10966,10 +11474,11 @@ fieldset[disabled] .cds--form__helper-text {
10966
11474
  box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff);
10967
11475
  }
10968
11476
 
10969
- .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover {
10970
- background-color: transparent;
11477
+ @media (any-hover: hover) {
11478
+ .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover {
11479
+ background-color: transparent;
11480
+ }
10971
11481
  }
10972
-
10973
11482
  .cds--tag--filter.cds--tag--disabled svg {
10974
11483
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10975
11484
  }
@@ -11026,11 +11535,15 @@ fieldset[disabled] .cds--form__helper-text {
11026
11535
  .cds--tag.cds--skeleton.cds--tag--operational {
11027
11536
  border: 1px solid var(--cds-skeleton-background, #e8e8e8);
11028
11537
  }
11029
- .cds--tag.cds--skeleton.cds--tag--operational:hover {
11030
- background-color: var(--cds-skeleton-background, #e8e8e8);
11538
+ @media (any-hover: hover) {
11539
+ .cds--tag.cds--skeleton.cds--tag--operational:hover {
11540
+ background-color: var(--cds-skeleton-background, #e8e8e8);
11541
+ }
11031
11542
  }
11032
- .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
11033
- background-color: var(--cds-skeleton-background, #e8e8e8);
11543
+ @media (any-hover: hover) {
11544
+ .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
11545
+ background-color: var(--cds-skeleton-background, #e8e8e8);
11546
+ }
11034
11547
  }
11035
11548
  .cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
11036
11549
  color: var(--cds-text-primary, #161616);
@@ -11056,11 +11569,12 @@ fieldset[disabled] .cds--form__helper-text {
11056
11569
  background-color: currentColor;
11057
11570
  }
11058
11571
 
11059
- .cds--tag .cds--ai-label .cds--ai-label__button--inline:hover,
11060
- .cds--tag .cds--slug .cds--slug__button--inline:hover {
11061
- border-color: currentColor;
11572
+ @media (any-hover: hover) {
11573
+ .cds--tag .cds--ai-label .cds--ai-label__button--inline:hover,
11574
+ .cds--tag .cds--slug .cds--slug__button--inline:hover {
11575
+ border-color: currentColor;
11576
+ }
11062
11577
  }
11063
-
11064
11578
  .cds--tag--filter .cds--tag__decorator > *,
11065
11579
  .cds--tag--filter .cds--ai-label,
11066
11580
  .cds--tag--filter .cds--slug {
@@ -11621,11 +12135,15 @@ fieldset[disabled] .cds--form__helper-text {
11621
12135
  .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational {
11622
12136
  border: 1px solid var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11623
12137
  }
11624
- .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational:hover {
11625
- background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
12138
+ @media (any-hover: hover) {
12139
+ .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational:hover {
12140
+ background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
12141
+ }
11626
12142
  }
11627
- .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
11628
- background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
12143
+ @media (any-hover: hover) {
12144
+ .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
12145
+ background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
12146
+ }
11629
12147
  }
11630
12148
  .cds--list-box--disabled .cds--list-box__selection--multi .cds--definition-term .cds--tag__label {
11631
12149
  color: var(--cds-layer);
@@ -13717,26 +14235,24 @@ fieldset[disabled] .cds--form__helper-text {
13717
14235
  transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
13718
14236
  }
13719
14237
 
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));
14238
+ @media (any-hover: hover) {
14239
+ .cds--data-table tbody tr:not([data-child-row]):hover,
14240
+ .cds--data-table tbody tr[data-child-row]:hover > td {
14241
+ background-color: var(--cds-layer-hover);
14242
+ }
14243
+ .cds--data-table tbody tr:hover td,
14244
+ .cds--data-table tbody tr:hover th {
14245
+ border-block-end: 1px solid var(--cds-layer-hover);
14246
+ border-block-start: 1px solid var(--cds-layer-hover);
14247
+ color: var(--cds-text-primary, #161616);
14248
+ }
14249
+ .cds--data-table tr:hover .cds--link:not(.cds--popover-container .cds--link) {
14250
+ color: var(--cds-link-secondary, #0043ce);
14251
+ }
14252
+ .cds--data-table tr:hover .cds--link--disabled:not(.cds--popover-container .cds--link) {
14253
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
14254
+ }
13738
14255
  }
13739
-
13740
14256
  .cds--data-table th,
13741
14257
  .cds--data-table td {
13742
14258
  text-align: start;
@@ -13859,11 +14375,15 @@ fieldset[disabled] .cds--form__helper-text {
13859
14375
 
13860
14376
  .cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon,
13861
14377
  .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 {
14378
+ .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon {
13864
14379
  opacity: 1;
13865
14380
  }
13866
14381
 
14382
+ @media (any-hover: hover) {
14383
+ .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
14384
+ opacity: 1;
14385
+ }
14386
+ }
13867
14387
  .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
13868
14388
  position: relative;
13869
14389
  inset-block-start: 0.1875rem;
@@ -13915,15 +14435,15 @@ fieldset[disabled] .cds--form__helper-text {
13915
14435
  background-color: var(--cds-layer-accent);
13916
14436
  }
13917
14437
 
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);
14438
+ @media (any-hover: hover) {
14439
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
14440
+ border-block-end: 1px solid var(--cds-layer-hover);
14441
+ border-block-start: 1px solid var(--cds-layer-hover);
14442
+ }
14443
+ .cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
14444
+ background-color: var(--cds-layer-hover);
14445
+ }
13925
14446
  }
13926
-
13927
14447
  .cds--table-column-checkbox .cds--checkbox-label {
13928
14448
  min-block-size: 1.5rem;
13929
14449
  padding-inline-start: 0;
@@ -14035,22 +14555,21 @@ tr.cds--data-table--selected:last-of-type td {
14035
14555
  border-block-end: 1px solid var(--cds-layer-active);
14036
14556
  }
14037
14557
 
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);
14558
+ @media (any-hover: hover) {
14559
+ .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
14560
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
14561
+ }
14562
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
14563
+ .cds--data-table tbody .cds--data-table--selected:hover td {
14564
+ border-block-end: 1px solid var(--cds-layer-selected-hover);
14565
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
14566
+ color: var(--cds-text-primary, #161616);
14567
+ }
14568
+ .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
14569
+ .cds--data-table tbody .cds--data-table--selected:hover {
14570
+ background-color: var(--cds-layer-selected-hover);
14571
+ }
14052
14572
  }
14053
-
14054
14573
  .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
14055
14574
  opacity: 1;
14056
14575
  }
@@ -14178,6 +14697,9 @@ tr.cds--data-table--selected:last-of-type td {
14178
14697
 
14179
14698
  .cds--data-table--sticky-header {
14180
14699
  display: block;
14700
+ inline-size: -moz-fit-content;
14701
+ inline-size: fit-content;
14702
+ min-inline-size: 100%;
14181
14703
  overflow-y: scroll;
14182
14704
  }
14183
14705
  .cds--data-table--sticky-header thead,
@@ -14190,7 +14712,6 @@ tr.cds--data-table--selected:last-of-type td {
14190
14712
  .cds--data-table--sticky-header thead {
14191
14713
  position: sticky;
14192
14714
  z-index: 1;
14193
- overflow: scroll;
14194
14715
  inline-size: 100%;
14195
14716
  inset-block-start: 0;
14196
14717
  -ms-overflow-style: none;
@@ -14202,7 +14723,6 @@ tr.cds--data-table--selected:last-of-type td {
14202
14723
  .cds--data-table--sticky-header tbody {
14203
14724
  flex-direction: column;
14204
14725
  -ms-overflow-style: none;
14205
- overflow-x: scroll;
14206
14726
  will-change: transform;
14207
14727
  }
14208
14728
  .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
@@ -14224,8 +14744,10 @@ tr.cds--data-table--selected:last-of-type td {
14224
14744
  .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
14745
  padding-block-start: 0.875rem;
14226
14746
  }
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);
14747
+ @media (any-hover: hover) {
14748
+ .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
14749
+ border-block-start: 1px solid var(--cds-layer-hover);
14750
+ }
14229
14751
  }
14230
14752
  .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
14231
14753
  overflow: hidden;
@@ -14360,29 +14882,38 @@ tr.cds--data-table--ai-label-row + .cds--expandable-row {
14360
14882
  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
14361
14883
  }
14362
14884
 
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
14885
  tr.cds--data-table--ai-label-row.cds--expandable-row--hover > td,
14367
14886
  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
14887
  tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
14373
14888
  tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
14374
14889
  background-color: transparent;
14375
14890
  }
14376
14891
 
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,
14892
+ @media (any-hover: hover) {
14893
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover td,
14894
+ tr.cds--data-table--ai-label-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
14895
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
14896
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
14897
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
14898
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
14899
+ tr.cds--data-table--ai-label-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td {
14900
+ background-color: transparent;
14901
+ }
14902
+ }
14380
14903
  tr.cds--expandable-row--hover.cds--data-table--ai-label-row,
14381
14904
  tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--ai-label-row {
14382
14905
  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
14906
  background-attachment: fixed;
14384
14907
  }
14385
14908
 
14909
+ @media (any-hover: hover) {
14910
+ .cds--data-table tbody tr.cds--data-table--ai-label-row:hover,
14911
+ tr.cds--data-table--ai-label-row:hover + .cds--expandable-row[data-child-row],
14912
+ tr.cds--data-table--ai-label-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover {
14913
+ 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);
14914
+ background-attachment: fixed;
14915
+ }
14916
+ }
14386
14917
  tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
14387
14918
  .cds--data-table--selected.cds--data-table--slug-row,
14388
14919
  tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row,
@@ -14393,24 +14924,29 @@ tr.cds--data-table--selected.cds--data-table--ai-label-row + .cds--expandable-ro
14393
14924
  background-attachment: fixed;
14394
14925
  }
14395
14926
 
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) {
14927
+ tr.cds--data-table--ai-label-row.cds--data-table--selected td {
14400
14928
  border-block-end-color: var(--cds-border-subtle);
14401
14929
  }
14402
14930
 
14931
+ @media (any-hover: hover) {
14932
+ tr.cds--data-table--ai-label-row.cds--data-table--selected:hover td,
14933
+ tbody tr.cds--data-table--ai-label-row:hover td,
14934
+ 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) {
14935
+ border-block-end-color: var(--cds-border-subtle);
14936
+ }
14937
+ }
14403
14938
  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
14939
  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
14940
  border-block-end: 1px solid var(--cds-layer-selected);
14406
14941
  }
14407
14942
 
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;
14943
+ @media (any-hover: hover) {
14944
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type,
14945
+ tr.cds--parent-row.cds--data-table--ai-label-row.cds--expandable-row:hover td:first-of-type,
14946
+ tr.cds--parent-row.cds--data-table--decoratorß-row.cds--expandable-row:hover td:first-of-type {
14947
+ border-block-end: 1px solid transparent;
14948
+ }
14412
14949
  }
14413
-
14414
14950
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
14415
14951
  .cds--data-table thead th:has(> .cds--table-header-label--slug),
14416
14952
  .cds--data-table thead th.cds--table-sort__header--ai-label .cds--table-sort,
@@ -15411,28 +15947,26 @@ tr.cds--parent-row.cds--expandable-row {
15411
15947
  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
15948
  }
15413
15949
 
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);
15424
- }
15425
-
15426
- tr.cds--parent-row.cds--expandable-row:hover td:first-of-type {
15427
- border-block-end: 1px solid var(--cds-layer-hover);
15428
- }
15429
-
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);
15950
+ @media (any-hover: hover) {
15951
+ tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
15952
+ border-block-end: 1px solid var(--cds-border-subtle);
15953
+ border-block-start: 1px solid var(--cds-border-subtle);
15954
+ }
15955
+ tr.cds--parent-row.cds--expandable-row:hover td {
15956
+ background-color: var(--cds-layer-hover);
15957
+ border-block-end: 1px solid var(--cds-border-subtle);
15958
+ border-block-start: 1px solid var(--cds-border-subtle);
15959
+ color: var(--cds-text-primary, #161616);
15960
+ }
15961
+ tr.cds--parent-row.cds--expandable-row:hover td:first-of-type {
15962
+ border-block-end: 1px solid var(--cds-layer-hover);
15963
+ }
15964
+ tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
15965
+ background-color: var(--cds-layer-hover);
15966
+ border-block-end: 1px solid var(--cds-border-subtle);
15967
+ color: var(--cds-text-primary, #161616);
15968
+ }
15434
15969
  }
15435
-
15436
15970
  tr.cds--expandable-row--hover + tr[data-child-row] td {
15437
15971
  border-block-end: 1px solid var(--cds-border-subtle);
15438
15972
  }
@@ -15581,14 +16115,15 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
15581
16115
  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
16116
  }
15583
16117
 
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);
16118
+ @media (any-hover: hover) {
16119
+ .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
16120
+ .cds--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td,
16121
+ .cds--data-table--zebra tbody tr[data-child-row]:hover td {
16122
+ background-color: var(--cds-layer-hover);
16123
+ border-block-end: 1px solid var(--cds-layer-hover);
16124
+ border-block-start: 1px solid var(--cds-layer-hover);
16125
+ }
15590
16126
  }
15591
-
15592
16127
  .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
15593
16128
  background-color: var(--cds-layer-hover);
15594
16129
  border-block-end: 1px solid var(--cds-layer-hover);
@@ -15615,21 +16150,20 @@ tr.cds--parent-row.cds--data-table--selected:last-of-type td {
15615
16150
  box-shadow: 0 1px var(--cds-border-subtle);
15616
16151
  }
15617
16152
 
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);
16153
+ @media (any-hover: hover) {
16154
+ tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
16155
+ background-color: var(--cds-layer-selected-hover);
16156
+ border-block-end: 1px solid var(--cds-border-subtle);
16157
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
16158
+ box-shadow: 0 1px var(--cds-layer-selected-hover);
16159
+ }
15623
16160
  }
15624
-
15625
16161
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td,
15626
16162
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row td:first-of-type {
15627
16163
  border-block-end: 1px solid transparent;
15628
16164
  box-shadow: 0 1px var(--cds-layer-selected);
15629
16165
  }
15630
16166
 
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
16167
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
15634
16168
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
15635
16169
  background-color: var(--cds-layer-selected-hover);
@@ -15638,6 +16172,15 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first
15638
16172
  box-shadow: 0 1px var(--cds-layer-selected-hover);
15639
16173
  }
15640
16174
 
16175
+ @media (any-hover: hover) {
16176
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
16177
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type {
16178
+ background-color: var(--cds-layer-selected-hover);
16179
+ border-block-end: 1px solid transparent;
16180
+ border-block-start: 1px solid var(--cds-layer-selected-hover);
16181
+ box-shadow: 0 1px var(--cds-layer-selected-hover);
16182
+ }
16183
+ }
15641
16184
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child-row] td {
15642
16185
  background-color: var(--cds-layer-hover);
15643
16186
  border-block-end: 1px solid var(--cds-border-subtle);
@@ -15651,11 +16194,15 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
15651
16194
  padding-block-end: 1.5rem;
15652
16195
  }
15653
16196
 
15654
- tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
15655
16197
  tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
15656
16198
  background-color: var(--cds-layer-selected);
15657
16199
  }
15658
16200
 
16201
+ @media (any-hover: hover) {
16202
+ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td {
16203
+ background-color: var(--cds-layer-selected);
16204
+ }
16205
+ }
15659
16206
  .cds--parent-row .cds--table-column-slug,
15660
16207
  .cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed],
15661
16208
  .cds--parent-row .cds--table-column-decorator,
@@ -15671,12 +16218,16 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
15671
16218
  }
15672
16219
 
15673
16220
  .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 {
16221
+ .cds--data-table--ai-label-row td {
15677
16222
  border-block-start: 1px solid transparent;
15678
16223
  }
15679
16224
 
16225
+ @media (any-hover: hover) {
16226
+ .cds--data-table tr.cds--data-table--slug-row:hover td,
16227
+ .cds--data-table tr.cds--data-table--ai-label-row:hover td {
16228
+ border-block-start: 1px solid transparent;
16229
+ }
16230
+ }
15680
16231
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
15681
16232
  .cds--table-expand__button:focus .cds--table-expand__svg {
15682
16233
  color: Highlight;
@@ -15741,16 +16292,16 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
15741
16292
  inline-size: 4rem;
15742
16293
  }
15743
16294
 
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);
16295
+ @media (any-hover: hover) {
16296
+ .cds--data-table.cds--skeleton tr:hover td {
16297
+ border-color: var(--cds-border-subtle);
16298
+ background: transparent;
16299
+ }
16300
+ .cds--data-table.cds--skeleton tr:hover td:first-of-type,
16301
+ .cds--data-table.cds--skeleton tr:hover td:last-of-type {
16302
+ border-color: var(--cds-border-subtle);
16303
+ }
15752
16304
  }
15753
-
15754
16305
  .cds--data-table.cds--skeleton .cds--table-sort {
15755
16306
  pointer-events: none;
15756
16307
  }
@@ -16132,6 +16683,22 @@ th .cds--table-sort__flex {
16132
16683
  opacity: 1;
16133
16684
  }
16134
16685
  }
16686
+ @position-try --bottom-left {
16687
+ inset-area: block-end span-inline-start;
16688
+ margin-block-start: 0.25rem;
16689
+ }
16690
+ @position-try --top-left {
16691
+ inset-area: block-start span-inline-start;
16692
+ margin-block-end: 0.25rem;
16693
+ }
16694
+ @position-try --bottom-right {
16695
+ inset-area: block-end span-inline-end;
16696
+ margin-block-start: 0.25rem;
16697
+ }
16698
+ @position-try --top-right {
16699
+ inset-area: block-start span-inline-end;
16700
+ margin-block-end: 0.25rem;
16701
+ }
16135
16702
  .flatpickr-calendar {
16136
16703
  position: absolute;
16137
16704
  overflow: hidden;
@@ -16293,9 +16860,11 @@ th .cds--table-sort__flex {
16293
16860
  transition: none;
16294
16861
  }
16295
16862
  }
16296
- .flatpickr-prev-month:hover,
16297
- .flatpickr-next-month:hover {
16298
- background-color: var(--cds-layer-hover);
16863
+ @media (any-hover: hover) {
16864
+ .flatpickr-prev-month:hover,
16865
+ .flatpickr-next-month:hover {
16866
+ background-color: var(--cds-layer-hover);
16867
+ }
16299
16868
  }
16300
16869
 
16301
16870
  .flatpickr-next-month.disabled svg,
@@ -16304,11 +16873,12 @@ th .cds--table-sort__flex {
16304
16873
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16305
16874
  }
16306
16875
 
16307
- .flatpickr-next-month.disabled:hover svg,
16308
- .flatpickr-prev-month.disabled:hover svg {
16309
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16876
+ @media (any-hover: hover) {
16877
+ .flatpickr-next-month.disabled:hover svg,
16878
+ .flatpickr-prev-month.disabled:hover svg {
16879
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16880
+ }
16310
16881
  }
16311
-
16312
16882
  .flatpickr-current-month {
16313
16883
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16314
16884
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -16324,16 +16894,20 @@ th .cds--table-sort__flex {
16324
16894
  .flatpickr-current-month .cur-month {
16325
16895
  margin-inline: 0.25rem 0.25rem;
16326
16896
  }
16327
- .flatpickr-current-month .cur-month:hover {
16328
- background-color: var(--cds-layer-hover);
16897
+ @media (any-hover: hover) {
16898
+ .flatpickr-current-month .cur-month:hover {
16899
+ background-color: var(--cds-layer-hover);
16900
+ }
16329
16901
  }
16330
16902
 
16331
16903
  .numInputWrapper {
16332
16904
  position: relative;
16333
16905
  inline-size: 3.75rem;
16334
16906
  }
16335
- .numInputWrapper:hover {
16336
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
16907
+ @media (any-hover: hover) {
16908
+ .numInputWrapper:hover {
16909
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
16910
+ }
16337
16911
  }
16338
16912
 
16339
16913
  .numInputWrapper .numInput {
@@ -16404,10 +16978,12 @@ th .cds--table-sort__flex {
16404
16978
  content: "";
16405
16979
  inset-block-start: 33%;
16406
16980
  }
16407
- .numInputWrapper .arrowUp:hover::after,
16408
- .numInputWrapper .arrowDown:hover::after {
16409
- border-block-end-color: var(--cds-button-primary, #0f62fe);
16410
- border-block-start-color: var(--cds-button-primary, #0f62fe);
16981
+ @media (any-hover: hover) {
16982
+ .numInputWrapper .arrowUp:hover::after,
16983
+ .numInputWrapper .arrowDown:hover::after {
16984
+ border-block-end-color: var(--cds-button-primary, #0f62fe);
16985
+ border-block-start-color: var(--cds-button-primary, #0f62fe);
16986
+ }
16411
16987
  }
16412
16988
  .numInputWrapper .arrowUp:active::after,
16413
16989
  .numInputWrapper .arrowDown:active::after {
@@ -16423,16 +16999,16 @@ th .cds--table-sort__flex {
16423
16999
  border-block-start-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16424
17000
  }
16425
17001
 
16426
- .numInputWrapper:hover .arrowUp,
16427
- .numInputWrapper:hover .arrowDown {
16428
- opacity: 1;
16429
- }
16430
-
16431
- .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
16432
- .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
16433
- opacity: 0;
17002
+ @media (any-hover: hover) {
17003
+ .numInputWrapper:hover .arrowUp,
17004
+ .numInputWrapper:hover .arrowDown {
17005
+ opacity: 1;
17006
+ }
17007
+ .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
17008
+ .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
17009
+ opacity: 0;
17010
+ }
16434
17011
  }
16435
-
16436
17012
  .flatpickr-weekdays {
16437
17013
  display: flex;
16438
17014
  align-items: center;
@@ -16494,8 +17070,10 @@ th .cds--table-sort__flex {
16494
17070
  inline-size: 2.5rem;
16495
17071
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16496
17072
  }
16497
- .flatpickr-day:hover {
16498
- background: var(--cds-layer-hover);
17073
+ @media (any-hover: hover) {
17074
+ .flatpickr-day:hover {
17075
+ background: var(--cds-layer-hover);
17076
+ }
16499
17077
  }
16500
17078
  .flatpickr-day:focus {
16501
17079
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -16592,20 +17170,19 @@ th .cds--table-sort__flex {
16592
17170
  background: var(--cds-layer-01, #f4f4f4);
16593
17171
  }
16594
17172
 
16595
- .flatpickr-day.endRange:hover {
16596
- outline: 2px solid var(--cds-focus, #0f62fe);
16597
- outline-offset: -2px;
17173
+ @media (any-hover: hover) {
17174
+ .flatpickr-day.endRange:hover {
17175
+ outline: 2px solid var(--cds-focus, #0f62fe);
17176
+ outline-offset: -2px;
17177
+ background: var(--cds-layer-01, #f4f4f4);
17178
+ color: var(--cds-text-primary, #161616);
17179
+ }
16598
17180
  }
16599
- @media screen and (prefers-contrast) {
17181
+ @media screen and (any-hover: hover) and (prefers-contrast) {
16600
17182
  .flatpickr-day.endRange:hover {
16601
17183
  outline-style: dotted;
16602
17184
  }
16603
17185
  }
16604
- .flatpickr-day.endRange:hover {
16605
- background: var(--cds-layer-01, #f4f4f4);
16606
- color: var(--cds-text-primary, #161616);
16607
- }
16608
-
16609
17186
  .flatpickr-day.endRange.inRange.selected {
16610
17187
  background: var(--cds-button-primary, #0f62fe);
16611
17188
  color: var(--cds-text-on-color, #ffffff);
@@ -16615,8 +17192,10 @@ th .cds--table-sort__flex {
16615
17192
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16616
17193
  cursor: not-allowed;
16617
17194
  }
16618
- .flatpickr-day.flatpickr-disabled:hover {
16619
- background-color: transparent;
17195
+ @media (any-hover: hover) {
17196
+ .flatpickr-day.flatpickr-disabled:hover {
17197
+ background-color: transparent;
17198
+ }
16620
17199
  }
16621
17200
 
16622
17201
  .flatpickr-input[readonly] {
@@ -16739,8 +17318,10 @@ th .cds--table-sort__flex {
16739
17318
  .cds--date-picker__input:disabled::placeholder {
16740
17319
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16741
17320
  }
16742
- .cds--date-picker__input:disabled:hover {
16743
- border-block-end: 1px solid transparent;
17321
+ @media (any-hover: hover) {
17322
+ .cds--date-picker__input:disabled:hover {
17323
+ border-block-end: 1px solid transparent;
17324
+ }
16744
17325
  }
16745
17326
  .cds--date-picker__input::-moz-placeholder {
16746
17327
  color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
@@ -16993,40 +17574,16 @@ th .cds--table-sort__flex {
16993
17574
  .cds--date-picker--next .cds--date-picker__calendar-popover {
16994
17575
  position-try-options: --bottom-left, --top-left, --bottom-right, --top-right;
16995
17576
  }
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
- }
17577
+ .cds--date-picker--next .cds--date-picker__calendar.open {
17578
+ margin-block-start: 0;
17001
17579
  }
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
- .cds--date-picker--next .cds--date-picker__calendar.open {
17021
- margin-block-start: 0;
17022
- }
17023
- .cds--date-picker--next .cds--date-picker__calendar-container {
17024
- position: absolute;
17025
- z-index: 9000;
17026
- display: block;
17027
- inset-block-start: 100%;
17028
- inset-inline-start: 0;
17029
- margin-block-start: 0;
17580
+ .cds--date-picker--next .cds--date-picker__calendar-container {
17581
+ position: absolute;
17582
+ z-index: 9000;
17583
+ display: block;
17584
+ inset-block-start: 100%;
17585
+ inset-inline-start: 0;
17586
+ margin-block-start: 0;
17030
17587
  }
17031
17588
  .cds--date-picker--next .cds--date-picker-container {
17032
17589
  outline: none;
@@ -18212,6 +18769,9 @@ button.cds--dropdown-text:focus {
18212
18769
  inset-block-start: 0;
18213
18770
  inset-inline-start: 0;
18214
18771
  transition: background-color 700ms cubic-bezier(0.4, 0.14, 0.3, 1);
18772
+ -webkit-user-select: none;
18773
+ -moz-user-select: none;
18774
+ user-select: none;
18215
18775
  }
18216
18776
 
18217
18777
  .cds--loading-overlay--stop {
@@ -18320,10 +18880,17 @@ button.cds--dropdown-text:focus {
18320
18880
  outline-offset: -2px;
18321
18881
  transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
18322
18882
  }
18323
- .cds--file-browse-btn:focus, .cds--file-browse-btn:hover {
18883
+ @media (any-hover: hover) {
18884
+ .cds--file-browse-btn:hover {
18885
+ outline: 2px solid var(--cds-focus, #0f62fe);
18886
+ text-decoration: underline;
18887
+ }
18888
+ }
18889
+ .cds--file-browse-btn:focus {
18324
18890
  outline: 2px solid var(--cds-focus, #0f62fe);
18891
+ text-decoration: underline;
18325
18892
  }
18326
- .cds--file-browse-btn:hover, .cds--file-browse-btn:focus, .cds--file-browse-btn:active, .cds--file-browse-btn:active:visited {
18893
+ .cds--file-browse-btn:active, .cds--file-browse-btn:active:visited {
18327
18894
  text-decoration: underline;
18328
18895
  }
18329
18896
  .cds--file-browse-btn:active {
@@ -18336,16 +18903,19 @@ button.cds--dropdown-text:focus {
18336
18903
  text-decoration: none;
18337
18904
  transition: none;
18338
18905
  }
18339
- .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
18906
+ @media (any-hover: hover) {
18907
+ .cds--file-browse-btn--disabled:hover {
18908
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
18909
+ outline: none;
18910
+ text-decoration: none;
18911
+ }
18912
+ }
18913
+ .cds--file-browse-btn--disabled:focus {
18340
18914
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
18341
18915
  outline: none;
18342
18916
  text-decoration: none;
18343
18917
  }
18344
18918
 
18345
- .cds--file-browse-btn--disabled .cds--file__drop-container {
18346
- border: 1px dashed var(--cds-button-disabled, #c6c6c6);
18347
- }
18348
-
18349
18919
  .cds--label-description html {
18350
18920
  font-size: 100%;
18351
18921
  }
@@ -18709,6 +19279,12 @@ button.cds--dropdown-text:focus {
18709
19279
  block-size: 6rem;
18710
19280
  }
18711
19281
 
19282
+ .cds--file-browse-btn--disabled.cds--file__drop-container,
19283
+ .cds--file-browse-btn--disabled .cds--file__drop-container {
19284
+ border: 1px dashed var(--cds-button-disabled, #c6c6c6);
19285
+ cursor: no-drop;
19286
+ }
19287
+
18712
19288
  .cds--file__drop-container--drag-over {
18713
19289
  background: none;
18714
19290
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -21950,6 +22526,119 @@ optgroup.cds--select-optgroup:disabled,
21950
22526
  inline-size: 50%;
21951
22527
  }
21952
22528
 
22529
+ .cds--full-page-error {
22530
+ block-size: inherit;
22531
+ }
22532
+
22533
+ .cds--full-page-error__container {
22534
+ margin: 0 1.5rem;
22535
+ block-size: 100%;
22536
+ }
22537
+ @media (max-width: 41.98rem) {
22538
+ .cds--full-page-error__container {
22539
+ margin: 0 0.5rem;
22540
+ }
22541
+ }
22542
+
22543
+ .cds--full-page-error__grid {
22544
+ block-size: 100%;
22545
+ padding-block: 2rem;
22546
+ }
22547
+
22548
+ .cds--full-page-error__column {
22549
+ padding: 0;
22550
+ }
22551
+ @media (min-width: 66rem) {
22552
+ .cds--full-page-error__column {
22553
+ padding: 0 2rem 0 0;
22554
+ }
22555
+ }
22556
+
22557
+ .cds--full-page-error__svg-container {
22558
+ display: flex;
22559
+ padding: 0.5rem 0.5rem 5rem 0.5rem;
22560
+ block-size: 100%;
22561
+ }
22562
+ @media (min-width: 42rem) {
22563
+ .cds--full-page-error__svg-container {
22564
+ padding: auto 0.5rem 5rem;
22565
+ }
22566
+ }
22567
+
22568
+ .cds--full-page-error__label,
22569
+ .cds--full-page-error__title {
22570
+ font-size: 2rem;
22571
+ font-weight: 400;
22572
+ line-height: 1.25;
22573
+ letter-spacing: 0;
22574
+ font-size: calc(2rem + 0.25 * (100vw - 20rem) / 22);
22575
+ }
22576
+ @media (min-width: 42rem) {
22577
+ .cds--full-page-error__label,
22578
+ .cds--full-page-error__title {
22579
+ font-size: 2.25rem;
22580
+ font-weight: 300;
22581
+ line-height: 1.22;
22582
+ font-size: calc(2.25rem + 0.375 * (100vw - 42rem) / 24);
22583
+ }
22584
+ }
22585
+ @media (min-width: 66rem) {
22586
+ .cds--full-page-error__label,
22587
+ .cds--full-page-error__title {
22588
+ font-size: 2.625rem;
22589
+ line-height: 1.19;
22590
+ font-size: calc(2.625rem + 0.375 * (100vw - 66rem) / 16);
22591
+ }
22592
+ }
22593
+ @media (min-width: 82rem) {
22594
+ .cds--full-page-error__label,
22595
+ .cds--full-page-error__title {
22596
+ font-size: 3rem;
22597
+ line-height: 1.17;
22598
+ font-size: calc(3rem + 0.75 * (100vw - 82rem) / 17);
22599
+ }
22600
+ }
22601
+ @media (min-width: 99rem) {
22602
+ .cds--full-page-error__label,
22603
+ .cds--full-page-error__title {
22604
+ font-size: 3.75rem;
22605
+ font-size: 3.75rem;
22606
+ }
22607
+ }
22608
+
22609
+ .cds--full-page-error__label {
22610
+ display: block;
22611
+ color: var(--cds-text-error, #da1e28);
22612
+ }
22613
+
22614
+ .cds--full-page-error__title {
22615
+ margin-block-end: 3rem;
22616
+ }
22617
+
22618
+ .cds--full-page-error__description {
22619
+ font-size: var(--cds-body-02-font-size, 1rem);
22620
+ font-weight: var(--cds-body-02-font-weight, 400);
22621
+ line-height: var(--cds-body-02-line-height, 1.5);
22622
+ letter-spacing: var(--cds-body-02-letter-spacing, 0);
22623
+ margin-block-end: 2rem;
22624
+ }
22625
+
22626
+ .cds--full-page-error__body {
22627
+ font-size: var(--cds-body-02-font-size, 1rem);
22628
+ font-weight: var(--cds-body-02-font-weight, 400);
22629
+ line-height: var(--cds-body-02-line-height, 1.5);
22630
+ letter-spacing: var(--cds-body-02-letter-spacing, 0);
22631
+ }
22632
+
22633
+ .cds--full-page-error__svg-container svg.cds--full-page-error__svg {
22634
+ inline-size: 100%;
22635
+ }
22636
+
22637
+ .cds--full-page-error__svg-container svg.cds--full-page-error__svg path {
22638
+ fill: var(--cds-background, #ffffff);
22639
+ stroke: var(--cds-border-inverse, #161616);
22640
+ }
22641
+
21953
22642
  .cds--icon-indicator {
21954
22643
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
21955
22644
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -22157,6 +22846,140 @@ optgroup.cds--select-optgroup:disabled,
22157
22846
  stroke-dashoffset: 0;
22158
22847
  }
22159
22848
  }
22849
+ /* stylelint-disable declaration-no-important */
22850
+ .cds--interstitial-screen--body {
22851
+ overflow: hidden auto;
22852
+ flex-grow: 1;
22853
+ padding: 0;
22854
+ margin: 0;
22855
+ background-color: var(--cds-background, #ffffff);
22856
+ }
22857
+ .cds--interstitial-screen--progress {
22858
+ overflow: auto;
22859
+ margin-block-end: 0.75rem;
22860
+ }
22861
+ .cds--interstitial-screen__carousel {
22862
+ block-size: 100%;
22863
+ }
22864
+ .cds--interstitial-screen__carousel .cds--carousel__item {
22865
+ flex: 0 0 100%;
22866
+ scroll-snap-align: start;
22867
+ }
22868
+ .cds--interstitial-screen--internal-body {
22869
+ padding: 0 !important;
22870
+ margin: 0 !important;
22871
+ }
22872
+ .cds--interstitial-screen--content {
22873
+ block-size: 100%;
22874
+ }
22875
+ .cds--interstitial-screen--internal-header {
22876
+ position: relative;
22877
+ background-color: var(--cds-background, #ffffff);
22878
+ margin-block-end: 0 !important;
22879
+ padding-block-start: 1.5rem !important;
22880
+ padding-inline-start: 2rem !important;
22881
+ }
22882
+ @media (max-width: 41.98rem) {
22883
+ .cds--interstitial-screen--internal-header {
22884
+ padding-inline: 1rem !important;
22885
+ }
22886
+ }
22887
+ .cds--interstitial-screen--internal-header:empty {
22888
+ min-block-size: 0;
22889
+ }
22890
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer {
22891
+ margin-block-end: 1rem;
22892
+ }
22893
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h1 {
22894
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
22895
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
22896
+ line-height: var(--cds-productive-heading-04-line-height, 1.28572);
22897
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
22898
+ margin-block-end: 0.5rem;
22899
+ }
22900
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h1:empty {
22901
+ padding: 0;
22902
+ }
22903
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h2 {
22904
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
22905
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
22906
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
22907
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
22908
+ }
22909
+ .cds--interstitial-screen--internal-header .cds--interstitial-screen--titleContainer h2:empty {
22910
+ padding: 0;
22911
+ }
22912
+ .cds--interstitial-screen--internal-header--has-title {
22913
+ background: var(--cds-layer-01, #f4f4f4);
22914
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
22915
+ }
22916
+ .cds--interstitial-screen--internal-header--has-title .cds--interstitial-screen--progress {
22917
+ margin-block-start: 0;
22918
+ }
22919
+ .cds--interstitial-screen--footer {
22920
+ background: var(--cds-background, #ffffff);
22921
+ border-block-start: 1px solid var(--cds-border-subtle-01, #c6c6c6);
22922
+ inline-size: 100%;
22923
+ }
22924
+ @media (max-width: 41.98rem) {
22925
+ .cds--interstitial-screen--footer {
22926
+ block-size: auto;
22927
+ }
22928
+ }
22929
+ .cds--interstitial-screen--footer .cds--btn-set {
22930
+ display: flex;
22931
+ justify-content: flex-end;
22932
+ inline-size: 100%;
22933
+ }
22934
+ @media (max-width: 41.98rem) {
22935
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--prev-btn,
22936
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--next-btn,
22937
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--start-btn,
22938
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--skip-btn {
22939
+ flex: 1 1;
22940
+ inline-size: auto;
22941
+ max-inline-size: none;
22942
+ min-inline-size: 0;
22943
+ }
22944
+ }
22945
+ @media (min-width: 42rem) {
22946
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--prev-btn,
22947
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--next-btn,
22948
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--start-btn {
22949
+ flex: 0 0 auto;
22950
+ inline-size: 15rem;
22951
+ max-inline-size: 15rem;
22952
+ }
22953
+ .cds--interstitial-screen--footer .cds--btn.cds--interstitial-screen--skip-btn {
22954
+ flex: 1 1 auto;
22955
+ max-inline-size: none;
22956
+ }
22957
+ }
22958
+ .cds--interstitial-screen--footer .cds--inline-loading {
22959
+ position: absolute;
22960
+ inline-size: 2rem;
22961
+ inset-block-start: 0;
22962
+ inset-inline-end: 0;
22963
+ }
22964
+ .cds--interstitial-screen--footer-controls {
22965
+ display: flex;
22966
+ flex-direction: row;
22967
+ margin-inline-start: auto;
22968
+ }
22969
+ .cds--interstitial-screen--full-screen {
22970
+ position: fixed;
22971
+ inset-block-start: 0;
22972
+ inset-inline: 0;
22973
+ }
22974
+ .cds--interstitial-screen--full-screen .cds--interstitial-screen--container {
22975
+ display: flex;
22976
+ flex-direction: column;
22977
+ padding: 0;
22978
+ margin: 0;
22979
+ block-size: 100vh;
22980
+ max-inline-size: 100vw;
22981
+ }
22982
+
22160
22983
  .cds--list--nested,
22161
22984
  .cds--list--unordered,
22162
22985
  .cds--list--ordered,
@@ -23864,55 +24687,279 @@ optgroup.cds--select-optgroup:disabled,
23864
24687
  }
23865
24688
  }
23866
24689
 
23867
- .cds--page-header {
23868
- background-color: var(--cds-layer-01, #f4f4f4);
23869
- border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
23870
- }
23871
-
23872
- .cds--page-header__breadcrumb-bar {
23873
- block-size: 2.5rem;
23874
- }
23875
-
23876
- .cds--page-header__breadcrumb-bar .cds--subgrid {
23877
- block-size: 100%;
24690
+ .cds--options-tile {
24691
+ position: relative;
24692
+ display: flex;
24693
+ justify-content: space-between;
24694
+ background-color: var(--cds-layer);
24695
+ border-block-end: 1px solid var(--cds-border-subtle);
23878
24696
  }
23879
24697
 
23880
- .cds--page-header__breadcrumb-container {
24698
+ .cds--options-tile__toggle-container {
24699
+ position: absolute;
23881
24700
  display: inline-flex;
23882
24701
  align-items: center;
23883
- justify-content: space-between;
23884
- block-size: 100%;
23885
- inline-size: 100%;
24702
+ justify-content: center;
24703
+ inline-size: calc(1rem + 2rem + 1rem);
24704
+ inset-block: 0;
24705
+ inset-inline-end: 0;
24706
+ padding-inline-end: 1rem;
24707
+ padding-inline-start: 1rem;
23886
24708
  }
23887
24709
 
23888
- .cds--page-header__breadcrumb__actions-flush .cds--css-grid {
23889
- padding-inline-end: 0;
23890
- }
23891
- .cds--page-header__breadcrumb__actions-flush .cds--css-grid-column {
23892
- margin-inline-end: 0;
24710
+ .cds--options-tile__toggle {
24711
+ position: absolute;
23893
24712
  }
23894
24713
 
23895
- .cds--page-header__breadcrumb-bar-border {
23896
- border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
24714
+ .cds--options-tile__toggle .cds--toggle-input__label .cds--toggle__switch {
24715
+ margin: 0;
23897
24716
  }
23898
24717
 
23899
- .cds--page-header__breadcrumb__icon {
23900
- margin-inline-end: 0.5rem;
24718
+ .cds--options-tile__toggle .cds--toggle__label-text {
24719
+ position: absolute;
24720
+ overflow: hidden;
24721
+ padding: 0;
24722
+ border: 0;
24723
+ margin: -1px;
24724
+ block-size: 1px;
24725
+ clip: rect(0, 0, 0, 0);
24726
+ inline-size: 1px;
24727
+ visibility: inherit;
24728
+ white-space: nowrap;
23901
24729
  }
23902
24730
 
23903
- .cds--page-header__breadcrumb__actions {
24731
+ .cds--options-tile__details {
23904
24732
  display: inline-flex;
24733
+ flex-direction: column;
24734
+ flex-grow: 1;
23905
24735
  }
23906
24736
 
23907
- .cds--page-header__breadcrumb__content-actions {
23908
- margin-inline-end: 0.75rem;
24737
+ .cds--options-tile__header,
24738
+ .cds--options-tile__static-content {
24739
+ display: grid;
24740
+ box-sizing: border-box;
24741
+ align-items: center;
24742
+ grid-template-columns: 3rem 1fr 0;
24743
+ padding-inline-end: 1rem;
23909
24744
  }
23910
24745
 
23911
- .cds--page-header__breadcrumb-wrapper {
23912
- display: inline-flex;
24746
+ .cds--options-tile__header {
24747
+ flex-grow: 1;
24748
+ background-color: transparent;
24749
+ cursor: pointer;
24750
+ inline-size: 100%;
24751
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
24752
+ }
24753
+ .cds--options-tile__header--has-toggle {
24754
+ inline-size: calc(100% - (1rem + 2rem + 1rem));
23913
24755
  }
23914
24756
 
23915
- .cds--page-header__content {
24757
+ .cds--options-tile__header::-webkit-details-marker {
24758
+ display: none;
24759
+ }
24760
+
24761
+ .cds--options-tile__header:hover {
24762
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
24763
+ }
24764
+
24765
+ .cds--options-tile__header:has(.cds--options-tile__toggle-container:hover) {
24766
+ background-color: transparent;
24767
+ }
24768
+
24769
+ .cds--options-tile__header:focus {
24770
+ outline: 2px solid var(--cds-focus, #0f62fe);
24771
+ outline-offset: -2px;
24772
+ }
24773
+ @media screen and (prefers-contrast) {
24774
+ .cds--options-tile__header:focus {
24775
+ outline-style: dotted;
24776
+ }
24777
+ }
24778
+
24779
+ .cds--options-tile__heading {
24780
+ grid-column: 2;
24781
+ }
24782
+
24783
+ .cds--options-tile__title {
24784
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
24785
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
24786
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
24787
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
24788
+ color: var(--cds-text-primary, #161616);
24789
+ }
24790
+
24791
+ .cds--options-tile__summary {
24792
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
24793
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
24794
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
24795
+ display: grid;
24796
+ block-size: 1rem;
24797
+ color: var(--cds-text-secondary, #525252);
24798
+ margin-block-start: 0.25rem;
24799
+ opacity: 1;
24800
+ transition-duration: 150ms;
24801
+ transition-property: height, opacity, margin-top;
24802
+ transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
24803
+ }
24804
+
24805
+ .cds--options-tile__summary--invalid,
24806
+ .cds--options-tile__summary--warn,
24807
+ .cds--options-tile__summary--locked {
24808
+ -moz-column-gap: 0.25rem;
24809
+ column-gap: 0.25rem;
24810
+ grid-template-columns: 1rem 1fr;
24811
+ }
24812
+
24813
+ .cds--options-tile__summary--invalid {
24814
+ color: var(--cds-support-error, #da1e28);
24815
+ }
24816
+
24817
+ .cds--options-tile__summary--warn {
24818
+ color: var(--cds-text-primary, #161616);
24819
+ }
24820
+
24821
+ .cds--options-tile__summary--warn svg {
24822
+ color: var(--cds-support-warning, #f1c21b);
24823
+ }
24824
+
24825
+ .cds--options-tile__summary--warn svg path[fill=none] {
24826
+ fill: #000000;
24827
+ }
24828
+
24829
+ .cds--options-tile__summary-text {
24830
+ overflow: hidden;
24831
+ block-size: -moz-max-content;
24832
+ block-size: max-content;
24833
+ padding-inline-end: 1rem;
24834
+ text-overflow: ellipsis;
24835
+ white-space: nowrap;
24836
+ }
24837
+
24838
+ .cds--options-tile__chevron {
24839
+ display: block;
24840
+ justify-self: center;
24841
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
24842
+ }
24843
+
24844
+ .cds--options-tile__content {
24845
+ padding-inline: 3rem 1rem;
24846
+ }
24847
+
24848
+ .cds--options-tile__content > .cds--fieldset > .cds--label:empty {
24849
+ display: none;
24850
+ }
24851
+
24852
+ .cds--options-tile--closing .cds--options-tile__content {
24853
+ overflow: hidden;
24854
+ }
24855
+
24856
+ .cds--options-tile__summary.cds--options-tile__summary--open:not(.cds--options-tile__summary--closing),
24857
+ .cds--options-tile__summary--hidden {
24858
+ block-size: 0;
24859
+ margin-block-start: 0;
24860
+ opacity: 0;
24861
+ }
24862
+
24863
+ .cds--options-tile__chevron.cds--options-tile__chevron--open:not(.cds--options-tile__chevron--closing) {
24864
+ transform: rotate(180deg);
24865
+ }
24866
+
24867
+ .cds--options-tile > details[open] .cds--options-tile__content {
24868
+ padding-block: 0.5rem 1.5rem;
24869
+ }
24870
+
24871
+ .cds--options-tile__locked-text {
24872
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
24873
+ font-weight: var(--cds-body-long-01-font-weight, 400);
24874
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
24875
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
24876
+ display: inline-flex;
24877
+ align-items: center;
24878
+ color: var(--cds-text-secondary, #525252);
24879
+ margin-block-end: 1.5rem;
24880
+ }
24881
+
24882
+ .cds--options-tile__locked-text > svg {
24883
+ margin-inline-end: 0.25rem;
24884
+ }
24885
+
24886
+ .cds--options-tile--lg .cds--options-tile__header,
24887
+ .cds--options-tile--lg .cds--options-tile__static-content {
24888
+ block-size: 3rem;
24889
+ }
24890
+
24891
+ .cds--options-tile--xl .cds--options-tile__header,
24892
+ .cds--options-tile--xl .cds--options-tile__static-content {
24893
+ block-size: 4rem;
24894
+ }
24895
+
24896
+ .cds--options-tile--lg .cds--options-tile__toggle {
24897
+ inset-block-start: 1rem;
24898
+ }
24899
+
24900
+ .cds--options-tile--xl .cds--options-tile__toggle {
24901
+ inset-block-start: 1.5rem;
24902
+ }
24903
+
24904
+ .cds--options-tile--lg .cds--options-tile__summary {
24905
+ margin-block-start: 0.125rem;
24906
+ }
24907
+
24908
+ @media (prefers-reduced-motion: reduce) {
24909
+ .cds--options-tile__summary,
24910
+ .cds--options-tile__chevron {
24911
+ transition: none;
24912
+ }
24913
+ }
24914
+ .cds--page-header {
24915
+ background-color: var(--cds-layer-01, #f4f4f4);
24916
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
24917
+ }
24918
+
24919
+ .cds--page-header__breadcrumb-bar {
24920
+ block-size: 2.5rem;
24921
+ }
24922
+
24923
+ .cds--page-header__breadcrumb-bar .cds--subgrid {
24924
+ block-size: 100%;
24925
+ }
24926
+
24927
+ .cds--page-header__breadcrumb-container {
24928
+ display: inline-flex;
24929
+ align-items: center;
24930
+ justify-content: space-between;
24931
+ block-size: 100%;
24932
+ inline-size: 100%;
24933
+ }
24934
+
24935
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid {
24936
+ padding-inline-end: 0;
24937
+ }
24938
+ .cds--page-header__breadcrumb__actions-flush .cds--css-grid-column {
24939
+ margin-inline-end: 0;
24940
+ }
24941
+
24942
+ .cds--page-header__breadcrumb-bar-border {
24943
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
24944
+ }
24945
+
24946
+ .cds--page-header__breadcrumb__icon {
24947
+ margin-inline-end: 0.5rem;
24948
+ }
24949
+
24950
+ .cds--page-header__breadcrumb__actions {
24951
+ display: inline-flex;
24952
+ }
24953
+
24954
+ .cds--page-header__breadcrumb__content-actions {
24955
+ margin-inline-end: 0.75rem;
24956
+ }
24957
+
24958
+ .cds--page-header__breadcrumb-wrapper {
24959
+ display: inline-flex;
24960
+ }
24961
+
24962
+ .cds--page-header__content {
23916
24963
  padding: 1.5rem 0;
23917
24964
  }
23918
24965
 
@@ -24148,6 +25195,14 @@ optgroup.cds--select-optgroup:disabled,
24148
25195
  .cds--pagination__right {
24149
25196
  border-inline-start: 1px solid var(--cds-border-subtle);
24150
25197
  }
25198
+ @container pagination (max-width: 42rem) {
25199
+ .cds--pagination__right {
25200
+ border-inline-start: 0;
25201
+ }
25202
+ }
25203
+ .cds--pagination__right.cds--pagination__right--no-content {
25204
+ border-inline-start: 0;
25205
+ }
24151
25206
 
24152
25207
  .cds--pagination__left,
24153
25208
  .cds--pagination__right {
@@ -24189,6 +25244,9 @@ optgroup.cds--select-optgroup:disabled,
24189
25244
  .cds--pagination__left {
24190
25245
  padding: 0 1rem 0 0;
24191
25246
  }
25247
+ .cds--pagination__left.cds--pagination__left--no-sizer {
25248
+ padding: 0;
25249
+ }
24192
25250
  @container pagination (min-width: 42rem) {
24193
25251
  .cds--pagination__left {
24194
25252
  padding: 0 1rem;
@@ -24594,9 +25652,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24594
25652
  -moz-user-select: none;
24595
25653
  user-select: none;
24596
25654
  }
24597
- .cds--pagination-nav__page:hover {
24598
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
24599
- color: var(--cds-text-primary, #161616);
25655
+ @media (any-hover: hover) {
25656
+ .cds--pagination-nav__page:hover {
25657
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
25658
+ color: var(--cds-text-primary, #161616);
25659
+ }
24600
25660
  }
24601
25661
  .cds--pagination-nav__page:focus {
24602
25662
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -25320,6 +26380,89 @@ span.cds--pagination__text.cds--pagination__items-count {
25320
26380
  }
25321
26381
  }
25322
26382
 
26383
+ .cds--scroll-gradient {
26384
+ position: relative;
26385
+ display: flex;
26386
+ align-items: stretch;
26387
+ justify-content: stretch;
26388
+ block-size: inherit;
26389
+ inline-size: inherit;
26390
+ }
26391
+
26392
+ .cds--scroll-gradient__content {
26393
+ display: grid;
26394
+ overflow: auto;
26395
+ block-size: inherit;
26396
+ grid-template-columns: 1fr;
26397
+ inline-size: 100%;
26398
+ }
26399
+
26400
+ .cds--scroll-gradient__content-children {
26401
+ block-size: 100%;
26402
+ grid-column-start: 1;
26403
+ grid-row-start: 1;
26404
+ inline-size: 100%;
26405
+ }
26406
+
26407
+ .cds--scroll-gradient__content-children > * {
26408
+ grid-area: 1/1;
26409
+ }
26410
+
26411
+ .cds--scroll-gradient__start-vertical,
26412
+ .cds--scroll-gradient__start-horizontal,
26413
+ .cds--scroll-gradient__end-vertical,
26414
+ .cds--scroll-gradient__end-horizontal {
26415
+ position: absolute;
26416
+ z-index: 1;
26417
+ display: none;
26418
+ pointer-events: none;
26419
+ }
26420
+
26421
+ .cds--scroll-gradient--y-scrollable .cds--scroll-gradient__start-vertical {
26422
+ block-size: 3rem;
26423
+ inset-block-start: 0;
26424
+ inset-inline-start: 0;
26425
+ }
26426
+
26427
+ .cds--scroll-gradient--y-scrollable .cds--scroll-gradient__end-vertical {
26428
+ block-size: 3rem;
26429
+ inset-block-end: 0;
26430
+ inset-inline-start: 0;
26431
+ }
26432
+
26433
+ .cds--scroll-gradient--x-scrollable .cds--scroll-gradient__start-horizontal {
26434
+ inline-size: 3rem;
26435
+ inset-block-start: 0;
26436
+ inset-inline-start: 0;
26437
+ }
26438
+
26439
+ .cds--scroll-gradient--x-scrollable .cds--scroll-gradient__end-horizontal {
26440
+ inline-size: 3rem;
26441
+ inset-block-start: 0;
26442
+ inset-inline-end: 0;
26443
+ }
26444
+
26445
+ .cds--scroll-gradient [data-start-vertical],
26446
+ .cds--scroll-gradient [data-end-vertical] {
26447
+ block-size: 3rem;
26448
+ grid-column-start: 1;
26449
+ grid-row-start: 1;
26450
+ inline-size: 100%;
26451
+ }
26452
+
26453
+ .cds--scroll-gradient [data-end-vertical],
26454
+ .cds--scroll-gradient [data-end-horizontal] {
26455
+ place-self: flex-end;
26456
+ }
26457
+
26458
+ .cds--scroll-gradient [data-start-horizontal],
26459
+ .cds--scroll-gradient [data-end-horizontal] {
26460
+ block-size: 100%;
26461
+ grid-column-start: 1;
26462
+ grid-row-start: 1;
26463
+ inline-size: 3rem;
26464
+ }
26465
+
25323
26466
  @keyframes side-panel-entrance-reduced {
25324
26467
  0% {
25325
26468
  opacity: 0;
@@ -26294,8 +27437,10 @@ span.cds--pagination__text.cds--pagination__items-count {
26294
27437
  outline: none;
26295
27438
  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
27439
  }
26297
- .cds--slider__thumb:hover {
26298
- transform: scale(1.4286);
27440
+ @media (any-hover: hover) {
27441
+ .cds--slider__thumb:hover {
27442
+ transform: scale(1.4286);
27443
+ }
26299
27444
  }
26300
27445
  .cds--slider__thumb:focus {
26301
27446
  background-color: var(--cds-interactive, #0f62fe);
@@ -26337,13 +27482,15 @@ span.cds--pagination__text.cds--pagination__items-count {
26337
27482
  inset-block-start: calc(50% - 0.0625rem);
26338
27483
  inset-inline-end: 0;
26339
27484
  }
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);
27485
+ @media (any-hover: hover) {
27486
+ .cds--slider__thumb--lower:hover,
27487
+ .cds--slider__thumb--upper:hover {
27488
+ transform: none;
27489
+ }
27490
+ .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
27491
+ .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
27492
+ fill: var(--cds-text-secondary, #525252);
27493
+ }
26347
27494
  }
26348
27495
  .cds--slider__thumb--lower:active,
26349
27496
  .cds--slider__thumb--upper:active {
@@ -26377,9 +27524,14 @@ span.cds--pagination__text.cds--pagination__items-count {
26377
27524
  .cds--slider__thumb--upper::before {
26378
27525
  inset-inline: 0 auto;
26379
27526
  }
26380
- .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
27527
+ .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
26381
27528
  transform: none;
26382
27529
  }
27530
+ @media (any-hover: hover) {
27531
+ .cds--slider__thumb--upper:hover {
27532
+ transform: none;
27533
+ }
27534
+ }
26383
27535
 
26384
27536
  .cds--slider__input {
26385
27537
  display: none;
@@ -26456,9 +27608,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26456
27608
  .cds--slider--disabled .cds--slider__thumb {
26457
27609
  background-color: var(--cds-border-disabled, #c6c6c6);
26458
27610
  }
26459
- .cds--slider--disabled .cds--slider__thumb:hover {
26460
- cursor: not-allowed;
26461
- transform: none;
27611
+ @media (any-hover: hover) {
27612
+ .cds--slider--disabled .cds--slider__thumb:hover {
27613
+ cursor: not-allowed;
27614
+ transform: none;
27615
+ }
26462
27616
  }
26463
27617
  .cds--slider--disabled .cds--slider__thumb:focus {
26464
27618
  background-color: var(--cds-border-disabled, #c6c6c6);
@@ -26476,13 +27630,19 @@ span.cds--pagination__text.cds--pagination__items-count {
26476
27630
  .cds--slider--disabled .cds--slider__thumb--upper {
26477
27631
  background-color: transparent;
26478
27632
  }
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,
27633
+ .cds--slider--disabled .cds--slider__thumb--lower:active, .cds--slider--disabled .cds--slider__thumb--lower:focus,
26480
27634
  .cds--slider--disabled .cds--slider__thumb--upper:active,
26481
- .cds--slider--disabled .cds--slider__thumb--upper:hover,
26482
27635
  .cds--slider--disabled .cds--slider__thumb--upper:focus {
26483
27636
  background-color: transparent;
26484
27637
  transform: none;
26485
27638
  }
27639
+ @media (any-hover: hover) {
27640
+ .cds--slider--disabled .cds--slider__thumb--lower:hover,
27641
+ .cds--slider--disabled .cds--slider__thumb--upper:hover {
27642
+ background-color: transparent;
27643
+ transform: none;
27644
+ }
27645
+ }
26486
27646
  .cds--slider--disabled .cds--slider__thumb--lower .cds--slider__thumb-icon,
26487
27647
  .cds--slider--disabled .cds--slider__thumb--upper .cds--slider__thumb-icon {
26488
27648
  fill: var(--cds-border-disabled, #c6c6c6);
@@ -26502,13 +27662,19 @@ span.cds--pagination__text.cds--pagination__items-count {
26502
27662
  cursor: not-allowed;
26503
27663
  transition: none;
26504
27664
  }
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,
27665
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus,
26506
27666
  .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 {
27667
+ .cds--slider--disabled ~ .cds--slider-text-input:focus {
26509
27668
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
26510
27669
  outline: none;
26511
27670
  }
27671
+ @media (any-hover: hover) {
27672
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
27673
+ .cds--slider--disabled ~ .cds--slider-text-input:hover {
27674
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
27675
+ outline: none;
27676
+ }
27677
+ }
26512
27678
 
26513
27679
  .cds--slider--readonly {
26514
27680
  cursor: default;
@@ -26747,16 +27913,16 @@ span.cds--pagination__text.cds--pagination__items-count {
26747
27913
  border: none;
26748
27914
  }
26749
27915
 
26750
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
26751
- border-color: var(--cds-layer-hover);
26752
- background-color: var(--cds-layer-hover);
26753
- cursor: pointer;
26754
- }
26755
-
26756
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
26757
- border-color: var(--cds-layer-hover);
26758
- }
26759
-
27916
+ @media (any-hover: hover) {
27917
+ .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
27918
+ border-color: var(--cds-layer-hover);
27919
+ background-color: var(--cds-layer-hover);
27920
+ cursor: pointer;
27921
+ }
27922
+ .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
27923
+ border-color: var(--cds-layer-hover);
27924
+ }
27925
+ }
26760
27926
  .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
26761
27927
  border-color: var(--cds-layer-selected);
26762
27928
  background-color: var(--cds-layer-selected);
@@ -26774,7 +27940,11 @@ span.cds--pagination__text.cds--pagination__items-count {
26774
27940
  cursor: inherit;
26775
27941
  }
26776
27942
 
26777
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td,
27943
+ @media (any-hover: hover) {
27944
+ .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td {
27945
+ color: var(--cds-text-primary, #161616);
27946
+ }
27947
+ }
26778
27948
  .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
26779
27949
  color: var(--cds-text-primary, #161616);
26780
27950
  }
@@ -26966,6 +28136,14 @@ span.cds--pagination__text.cds--pagination__items-count {
26966
28136
  white-space: normal;
26967
28137
  }
26968
28138
 
28139
+ .cds--tabs .cds--icon-tooltip .cds--popover-content {
28140
+ --cds-popover-offset: 0.5rem;
28141
+ }
28142
+
28143
+ .cds--tabs .cds--icon-tooltip .cds--popover-caret {
28144
+ --cds-popover-offset: 0.5rem;
28145
+ }
28146
+
26969
28147
  .cds--tabs.cds--tabs--vertical.cds--layout--size-sm .cds--tabs__nav-link .cds--tabs__nav-item-label {
26970
28148
  -webkit-line-clamp: 1;
26971
28149
  }
@@ -28651,8 +29829,10 @@ span.cds--pagination__text.cds--pagination__items-count {
28651
29829
  .cds--tree-node:focus {
28652
29830
  outline: none;
28653
29831
  }
28654
- .cds--tree-node:hover {
28655
- cursor: pointer;
29832
+ @media (any-hover: hover) {
29833
+ .cds--tree-node:hover {
29834
+ cursor: pointer;
29835
+ }
28656
29836
  }
28657
29837
 
28658
29838
  .cds--tree-node--hidden {
@@ -28699,25 +29879,31 @@ span.cds--pagination__text.cds--pagination__items-count {
28699
29879
  outline: none;
28700
29880
  }
28701
29881
 
28702
- .cds--tree-node--disabled,
28703
- .cds--tree-node--disabled .cds--tree-node__label:hover,
28704
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
29882
+ .cds--tree-node--disabled {
28705
29883
  background-color: var(--cds-field-01, #f4f4f4);
28706
29884
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29885
+ cursor: not-allowed;
28707
29886
  }
28708
29887
 
28709
29888
  .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,
28710
- .cds--tree-node--disabled .cds--tree-node__icon,
28711
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
28712
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
29889
+ .cds--tree-node--disabled .cds--tree-node__icon {
28713
29890
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28714
29891
  }
28715
29892
 
28716
- .cds--tree-node--disabled,
28717
- .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
28718
- cursor: not-allowed;
29893
+ @media (any-hover: hover) {
29894
+ .cds--tree-node--disabled .cds--tree-node__label:hover,
29895
+ .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
29896
+ background-color: var(--cds-field-01, #f4f4f4);
29897
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29898
+ }
29899
+ .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
29900
+ .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
29901
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29902
+ }
29903
+ .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
29904
+ cursor: not-allowed;
29905
+ }
28719
29906
  }
28720
-
28721
29907
  li a.cds--tree-node {
28722
29908
  text-decoration: none;
28723
29909
  }
@@ -28748,24 +29934,26 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
28748
29934
  min-block-size: 2rem;
28749
29935
  padding-inline-end: 1rem;
28750
29936
  }
28751
- .cds--tree-node__label:hover {
28752
- background-color: var(--cds-layer-hover-01, #e8e8e8);
28753
- color: var(--cds-text-primary, #161616);
29937
+ @media (any-hover: hover) {
29938
+ .cds--tree-node__label:hover {
29939
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
29940
+ color: var(--cds-text-primary, #161616);
29941
+ }
28754
29942
  }
28755
29943
 
28756
29944
  .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
28757
29945
  padding-block: 0.4375rem 0.4375rem;
28758
29946
  }
28759
29947
 
28760
- .cds--tree-node__label:hover .cds--tree-node__label__details {
28761
- color: var(--cds-text-primary, #161616);
28762
- }
28763
-
28764
- .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
28765
- .cds--tree-node__label:hover .cds--tree-node__icon {
28766
- fill: var(--cds-icon-primary, #161616);
29948
+ @media (any-hover: hover) {
29949
+ .cds--tree-node__label:hover .cds--tree-node__label__details {
29950
+ color: var(--cds-text-primary, #161616);
29951
+ }
29952
+ .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
29953
+ .cds--tree-node__label:hover .cds--tree-node__icon {
29954
+ fill: var(--cds-icon-primary, #161616);
29955
+ }
28767
29956
  }
28768
-
28769
29957
  .cds--tree-leaf-node {
28770
29958
  display: flex;
28771
29959
  padding-inline-start: 2.5rem;
@@ -28798,8 +29986,10 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
28798
29986
  margin-inline: -0.25rem 0.25rem;
28799
29987
  padding-inline-start: 0.25rem;
28800
29988
  }
28801
- .cds--tree-parent-node__toggle:hover {
28802
- cursor: pointer;
29989
+ @media (any-hover: hover) {
29990
+ .cds--tree-parent-node__toggle:hover {
29991
+ cursor: pointer;
29992
+ }
28803
29993
  }
28804
29994
  .cds--tree-parent-node__toggle:focus {
28805
29995
  outline: none;
@@ -28830,8 +30020,10 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
28830
30020
  background-color: var(--cds-layer-selected-01, #e0e0e0);
28831
30021
  color: var(--cds-text-primary, #161616);
28832
30022
  }
28833
- .cds--tree-node--selected > .cds--tree-node__label:hover {
28834
- background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
30023
+ @media (any-hover: hover) {
30024
+ .cds--tree-node--selected > .cds--tree-node__label:hover {
30025
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
30026
+ }
28835
30027
  }
28836
30028
 
28837
30029
  .cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon,
@@ -29532,20 +30724,21 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29532
30724
  inline-size: auto;
29533
30725
  }
29534
30726
 
29535
- .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
29536
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
29537
- .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
29538
- .cds--side-nav a.cds--header__menu-item:hover,
29539
- .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
29540
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
29541
- color: var(--cds-text-primary, #161616);
29542
- }
29543
-
29544
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
29545
- .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
29546
- color: var(--cds-text-primary, #161616);
30727
+ @media (any-hover: hover) {
30728
+ .cds--side-nav__item:not(.cds--side-nav__item--active):hover,
30729
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
30730
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
30731
+ .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
30732
+ .cds--side-nav a.cds--header__menu-item:hover,
30733
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
30734
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30735
+ color: var(--cds-text-primary, #161616);
30736
+ }
30737
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
30738
+ .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
30739
+ color: var(--cds-text-primary, #161616);
30740
+ }
29547
30741
  }
29548
-
29549
30742
  .cds--side-nav__item--large {
29550
30743
  block-size: auto;
29551
30744
  }
@@ -29606,11 +30799,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29606
30799
  user-select: none;
29607
30800
  }
29608
30801
 
29609
- .cds--side-nav__submenu:hover {
29610
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
29611
- color: var(--cds-text-primary, #161616);
30802
+ @media (any-hover: hover) {
30803
+ .cds--side-nav__submenu:hover {
30804
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30805
+ color: var(--cds-text-primary, #161616);
30806
+ }
29612
30807
  }
29613
-
29614
30808
  .cds--side-nav__submenu:focus {
29615
30809
  outline: 2px solid var(--cds-focus, #0f62fe);
29616
30810
  outline-offset: -2px;
@@ -29648,11 +30842,16 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29648
30842
  block-size: 3rem;
29649
30843
  }
29650
30844
 
29651
- .cds--side-nav__item--active .cds--side-nav__submenu:hover {
29652
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
29653
- color: var(--cds-text-primary, #161616);
30845
+ @media (any-hover: hover) {
30846
+ .cds--side-nav__submenu:hover {
30847
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30848
+ color: var(--cds-text-primary, #161616);
30849
+ }
30850
+ .cds--side-nav__item--active .cds--side-nav__submenu:hover {
30851
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
30852
+ color: var(--cds-text-primary, #161616);
30853
+ }
29654
30854
  }
29655
-
29656
30855
  .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
29657
30856
  position: relative;
29658
30857
  background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
@@ -29896,12 +31095,14 @@ a.cds--side-nav__link--current::before {
29896
31095
  font-weight: 400;
29897
31096
  padding-inline-start: 4.25rem;
29898
31097
  }
29899
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
29900
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
29901
- color: var(--cds-text-primary, #161616);
29902
- }
29903
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
29904
- background-color: var(--cds-layer-selected-hover);
31098
+ @media (any-hover: hover) {
31099
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
31100
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31101
+ color: var(--cds-text-primary, #161616);
31102
+ }
31103
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
31104
+ background-color: var(--cds-layer-selected-hover);
31105
+ }
29905
31106
  }
29906
31107
 
29907
31108
  .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
@@ -29914,12 +31115,16 @@ a.cds--side-nav__link--current::before {
29914
31115
  block-size: inherit;
29915
31116
  }
29916
31117
 
29917
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
29918
31118
  .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
29919
31119
  .cds--side-nav .cds--header__menu-arrow {
29920
31120
  fill: var(--cds-icon-secondary, #525252);
29921
31121
  }
29922
31122
 
31123
+ @media (any-hover: hover) {
31124
+ .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow {
31125
+ fill: var(--cds-icon-secondary, #525252);
31126
+ }
31127
+ }
29923
31128
  .cds--switcher {
29924
31129
  box-sizing: border-box;
29925
31130
  padding: 0;
@@ -29971,10 +31176,12 @@ a.cds--side-nav__link--current::before {
29971
31176
  color: var(--cds-text-secondary, #525252);
29972
31177
  text-decoration: none;
29973
31178
  }
29974
- .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
29975
- background: var(--cds-layer-hover);
29976
- color: var(--cds-text-primary, #161616);
29977
- cursor: pointer;
31179
+ @media (any-hover: hover) {
31180
+ .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
31181
+ background: var(--cds-layer-hover);
31182
+ color: var(--cds-text-primary, #161616);
31183
+ cursor: pointer;
31184
+ }
29978
31185
  }
29979
31186
  .cds--switcher__item-link:focus {
29980
31187
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -30582,20 +31789,21 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30582
31789
  inline-size: auto;
30583
31790
  }
30584
31791
 
30585
- .cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
30586
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
30587
- .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
30588
- .cds--side-nav a.cds--header__menu-item:hover,
30589
- .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
30590
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30591
- color: var(--cds-text-primary, #161616);
30592
- }
30593
-
30594
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
30595
- .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
30596
- color: var(--cds-text-primary, #161616);
31792
+ @media (any-hover: hover) {
31793
+ .cds--side-nav__item:not(.cds--side-nav__item--active):hover,
31794
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__submenu:hover,
31795
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
31796
+ .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
31797
+ .cds--side-nav a.cds--header__menu-item:hover,
31798
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
31799
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31800
+ color: var(--cds-text-primary, #161616);
31801
+ }
31802
+ .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
31803
+ .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
31804
+ color: var(--cds-text-primary, #161616);
31805
+ }
30597
31806
  }
30598
-
30599
31807
  .cds--side-nav__item--large {
30600
31808
  block-size: auto;
30601
31809
  }
@@ -30656,11 +31864,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30656
31864
  user-select: none;
30657
31865
  }
30658
31866
 
30659
- .cds--side-nav__submenu:hover {
30660
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30661
- color: var(--cds-text-primary, #161616);
31867
+ @media (any-hover: hover) {
31868
+ .cds--side-nav__submenu:hover {
31869
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31870
+ color: var(--cds-text-primary, #161616);
31871
+ }
30662
31872
  }
30663
-
30664
31873
  .cds--side-nav__submenu:focus {
30665
31874
  outline: 2px solid var(--cds-focus, #0f62fe);
30666
31875
  outline-offset: -2px;
@@ -30698,11 +31907,16 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30698
31907
  block-size: 3rem;
30699
31908
  }
30700
31909
 
30701
- .cds--side-nav__item--active .cds--side-nav__submenu:hover {
30702
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
30703
- color: var(--cds-text-primary, #161616);
31910
+ @media (any-hover: hover) {
31911
+ .cds--side-nav__submenu:hover {
31912
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31913
+ color: var(--cds-text-primary, #161616);
31914
+ }
31915
+ .cds--side-nav__item--active .cds--side-nav__submenu:hover {
31916
+ background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
31917
+ color: var(--cds-text-primary, #161616);
31918
+ }
30704
31919
  }
30705
-
30706
31920
  .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
30707
31921
  position: relative;
30708
31922
  background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
@@ -30946,12 +32160,14 @@ a.cds--side-nav__link--current::before {
30946
32160
  font-weight: 400;
30947
32161
  padding-inline-start: 4.25rem;
30948
32162
  }
30949
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
30950
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30951
- color: var(--cds-text-primary, #161616);
30952
- }
30953
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
30954
- background-color: var(--cds-layer-selected-hover);
32163
+ @media (any-hover: hover) {
32164
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
32165
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
32166
+ color: var(--cds-text-primary, #161616);
32167
+ }
32168
+ .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
32169
+ background-color: var(--cds-layer-selected-hover);
32170
+ }
30955
32171
  }
30956
32172
 
30957
32173
  .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
@@ -30964,12 +32180,16 @@ a.cds--side-nav__link--current::before {
30964
32180
  block-size: inherit;
30965
32181
  }
30966
32182
 
30967
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
30968
32183
  .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
30969
32184
  .cds--side-nav .cds--header__menu-arrow {
30970
32185
  fill: var(--cds-icon-secondary, #525252);
30971
32186
  }
30972
32187
 
32188
+ @media (any-hover: hover) {
32189
+ .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow {
32190
+ fill: var(--cds-icon-secondary, #525252);
32191
+ }
32192
+ }
30973
32193
  .cds--switcher {
30974
32194
  box-sizing: border-box;
30975
32195
  padding: 0;
@@ -31021,10 +32241,12 @@ a.cds--side-nav__link--current::before {
31021
32241
  color: var(--cds-text-secondary, #525252);
31022
32242
  text-decoration: none;
31023
32243
  }
31024
- .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
31025
- background: var(--cds-layer-hover);
31026
- color: var(--cds-text-primary, #161616);
31027
- cursor: pointer;
32244
+ @media (any-hover: hover) {
32245
+ .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
32246
+ background: var(--cds-layer-hover);
32247
+ color: var(--cds-text-primary, #161616);
32248
+ cursor: pointer;
32249
+ }
31028
32250
  }
31029
32251
  .cds--switcher__item-link:focus {
31030
32252
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -31038,4 +32260,413 @@ a.cds--side-nav__link--current::before {
31038
32260
  .cds--switcher__item-link--selected {
31039
32261
  background: var(--cds-layer-selected);
31040
32262
  color: var(--cds-text-primary, #161616);
32263
+ }
32264
+
32265
+ .cds--edit-in-place {
32266
+ --cds--edit-in-place--size: 2rem;
32267
+ display: flex;
32268
+ align-items: center;
32269
+ background: transparent;
32270
+ cursor: pointer;
32271
+ }
32272
+
32273
+ .cds--edit-in-place--sm {
32274
+ --cds--edit-in-place--size: 2.5rem;
32275
+ }
32276
+
32277
+ .cds--edit-in-place--md {
32278
+ --cds--edit-in-place--size: 3rem;
32279
+ }
32280
+
32281
+ .cds--edit-in-place--lg {
32282
+ --cds--edit-in-place--size: 4rem;
32283
+ }
32284
+
32285
+ .cds--edit-in-place__toggletip-wrapper {
32286
+ display: block;
32287
+ inline-size: 100%;
32288
+ }
32289
+
32290
+ .cds--edit-in-place__toggletip-wrapper .cds--toggletip-button {
32291
+ display: block;
32292
+ inline-size: 100%;
32293
+ }
32294
+
32295
+ .cds--edit-in-place:hover {
32296
+ background: var(--cds-field-01, #f4f4f4);
32297
+ }
32298
+
32299
+ .cds--edit-in-place:hover .cds--edit-in-place__btn-edit,
32300
+ .cds--edit-in-place__btn-edit.cds--edit-in-place__btn-edit--always-visible {
32301
+ visibility: visible;
32302
+ }
32303
+
32304
+ .cds--edit-in-place__btn-edit {
32305
+ visibility: hidden;
32306
+ }
32307
+
32308
+ .cds--edit-in-place--invalid {
32309
+ border: 2px solid var(--cds-support-error, #da1e28);
32310
+ }
32311
+
32312
+ .cds--edit-in-place--focused {
32313
+ background: var(--cds-field-01, #f4f4f4);
32314
+ }
32315
+
32316
+ .cds--edit-in-place--focused:has(.cds--edit-in-place__text-input:focus) {
32317
+ outline: 2px solid var(--cds-focus, #0f62fe);
32318
+ }
32319
+
32320
+ .cds--edit-in-place--invalid.cds--edit-in-place--focused {
32321
+ border: none;
32322
+ }
32323
+
32324
+ .cds--edit-in-place__text-input {
32325
+ flex: 1 1;
32326
+ }
32327
+
32328
+ .cds--edit-in-place--inherit-type .cds--edit-in-place__text-input {
32329
+ /* match font of container */
32330
+ font-size: inherit;
32331
+ font-weight: inherit;
32332
+ letter-spacing: inherit;
32333
+ line-height: inherit;
32334
+ }
32335
+
32336
+ .cds--edit-in-place__text-input-label {
32337
+ display: none;
32338
+ }
32339
+
32340
+ .cds--edit-in-place__warning-icon {
32341
+ margin: auto 0.5rem;
32342
+ color: var(--cds-support-error, #da1e28);
32343
+ inline-size: 1rem;
32344
+ }
32345
+
32346
+ .cds--edit-in-place__warning-text {
32347
+ font-size: var(--cds-label-01-font-size, 0.75rem);
32348
+ font-weight: var(--cds-label-01-font-weight, 400);
32349
+ line-height: var(--cds-label-01-line-height, 1.33333);
32350
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
32351
+ color: var(--cds-support-error, #da1e28);
32352
+ margin-block-start: 0.5rem;
32353
+ }
32354
+
32355
+ .cds--edit-in-place__text-input.cds--text-input {
32356
+ border: none;
32357
+ background: transparent;
32358
+ cursor: pointer;
32359
+ outline: none;
32360
+ }
32361
+
32362
+ .cds--edit-in-place:not(.cds--edit-in-place--focused) .cds--edit-in-place__text-input.cds--text-input:focus,
32363
+ .cds--edit-in-place:not(.cds--edit-in-place--focused) .cds--edit-in-place__text-input.cds--text-input:active {
32364
+ outline: none;
32365
+ }
32366
+
32367
+ .cds--edit-in-place__toolbar {
32368
+ --toolbar-width: var(--cds--edit-in-place--size);
32369
+ --toolbar-width-focussed: calc(2 * var(--cds--edit-in-place--size));
32370
+ display: inline-flex;
32371
+ align-self: stretch;
32372
+ inline-size: var(--toolbar-width);
32373
+ }
32374
+ .cds--edit-in-place__toolbar .cds--btn.cds--btn--icon-only:not(cds-icon-button) {
32375
+ padding: 0;
32376
+ min-block-size: unset;
32377
+ }
32378
+
32379
+ .cds--edit-in-place__toolbar .cds--btn.cds--btn--icon-only:not(cds-icon-button) {
32380
+ block-size: var(--cds--edit-in-place--size);
32381
+ inline-size: var(--cds--edit-in-place--size);
32382
+ }
32383
+
32384
+ .cds--edit-in-place__toolbar cds-icon-button::part(button) {
32385
+ padding: 0.25rem;
32386
+ }
32387
+
32388
+ .cds--edit-in-place--invalid .cds--edit-in-place__toolbar {
32389
+ --toolbar-width: calc(var(--cds--edit-in-place--size) + 2rem);
32390
+ --toolbar-width-focussed: calc(
32391
+ 2 * var(--cds--edit-in-place--size) + 2rem
32392
+ );
32393
+ }
32394
+
32395
+ @keyframes edit-in-place-slide-in {
32396
+ 0% {
32397
+ overflow: hidden;
32398
+ inline-size: var(--toolbar-width);
32399
+ }
32400
+ 99% {
32401
+ overflow: hidden;
32402
+ inline-size: var(--toolbar-width-focussed);
32403
+ }
32404
+ 100% {
32405
+ overflow: visible;
32406
+ inline-size: var(--toolbar-width-focussed);
32407
+ }
32408
+ }
32409
+ .cds--edit-in-place--focused:not(.cds--edit-in-place--readonly) .cds--edit-in-place__toolbar {
32410
+ overflow: initial;
32411
+ animation: edit-in-place-slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
32412
+ inline-size: var(--toolbar-width-focussed);
32413
+ }
32414
+
32415
+ .cds--user-avatar {
32416
+ position: relative;
32417
+ display: flex;
32418
+ align-items: center;
32419
+ justify-content: center;
32420
+ border: 0.5px solid transparent;
32421
+ border-radius: 100%;
32422
+ block-size: 4rem;
32423
+ color: var(--cds-text-inverse, #ffffff);
32424
+ inline-size: 4rem;
32425
+ outline: none;
32426
+ outline-offset: 3px;
32427
+ }
32428
+
32429
+ .cds--user-avatar svg {
32430
+ color: var(--cds-icon-inverse, #ffffff);
32431
+ }
32432
+
32433
+ .cds--user-avatar__tooltip-trigger {
32434
+ display: flex;
32435
+ box-sizing: border-box;
32436
+ align-items: center;
32437
+ justify-content: center;
32438
+ padding: 0;
32439
+ border: 0;
32440
+ margin: 0;
32441
+ -webkit-appearance: none;
32442
+ -moz-appearance: none;
32443
+ appearance: none;
32444
+ background: none;
32445
+ block-size: 100%;
32446
+ cursor: pointer;
32447
+ inline-size: 100%;
32448
+ outline: none;
32449
+ }
32450
+
32451
+ .cds--user-avatar__tooltip:focus-within .cds--user-avatar {
32452
+ outline: 2px solid var(--cds-focus, #0f62fe);
32453
+ outline-offset: 1px;
32454
+ }
32455
+
32456
+ .cds--user-avatar__photo {
32457
+ border-radius: 100%;
32458
+ -o-object-fit: contain;
32459
+ object-fit: contain;
32460
+ }
32461
+
32462
+ .cds--user-avatar--xl {
32463
+ block-size: 4rem;
32464
+ inline-size: 4rem;
32465
+ }
32466
+
32467
+ .cds--user-avatar--lg {
32468
+ block-size: 3rem;
32469
+ inline-size: 3rem;
32470
+ }
32471
+
32472
+ .cds--user-avatar--md {
32473
+ block-size: 2rem;
32474
+ inline-size: 2rem;
32475
+ }
32476
+
32477
+ .cds--user-avatar--sm {
32478
+ block-size: 1.5rem;
32479
+ inline-size: 1.5rem;
32480
+ }
32481
+
32482
+ .cds--user-avatar--xl {
32483
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
32484
+ font-weight: var(--cds-heading-04-font-weight, 400);
32485
+ line-height: var(--cds-heading-04-line-height, 1.28572);
32486
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
32487
+ }
32488
+
32489
+ .cds--user-avatar--lg {
32490
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
32491
+ font-weight: var(--cds-heading-03-font-weight, 400);
32492
+ line-height: var(--cds-heading-03-line-height, 1.4);
32493
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
32494
+ }
32495
+
32496
+ .cds--user-avatar--md {
32497
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
32498
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
32499
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
32500
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
32501
+ }
32502
+
32503
+ .cds--user-avatar--sm {
32504
+ font-size: var(--cds-label-01-font-size, 0.75rem);
32505
+ font-weight: var(--cds-label-01-font-weight, 400);
32506
+ line-height: var(--cds-label-01-line-height, 1.33333);
32507
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
32508
+ }
32509
+
32510
+ .cds--user-avatar__photo--xl {
32511
+ border-radius: 100%;
32512
+ block-size: 4rem;
32513
+ inline-size: 4rem;
32514
+ -o-object-fit: fill;
32515
+ object-fit: fill;
32516
+ }
32517
+
32518
+ .cds--user-avatar__photo--lg {
32519
+ border-radius: 100%;
32520
+ block-size: 3rem;
32521
+ inline-size: 3rem;
32522
+ -o-object-fit: fill;
32523
+ object-fit: fill;
32524
+ }
32525
+
32526
+ .cds--user-avatar__photo--md {
32527
+ border-radius: 100%;
32528
+ block-size: 2rem;
32529
+ inline-size: 2rem;
32530
+ -o-object-fit: fill;
32531
+ object-fit: fill;
32532
+ }
32533
+
32534
+ .cds--user-avatar__photo--sm {
32535
+ border-radius: 100%;
32536
+ block-size: 1.5rem;
32537
+ inline-size: 1.5rem;
32538
+ -o-object-fit: fill;
32539
+ object-fit: fill;
32540
+ }
32541
+
32542
+ :root .cds--user-avatar--order-1-cyan,
32543
+ .cds--g10 .cds--user-avatar--order-1-cyan,
32544
+ .cds--white .cds--user-avatar--order-1-cyan {
32545
+ background-color: #0072c3;
32546
+ }
32547
+
32548
+ :root .cds--user-avatar--order-2-gray,
32549
+ .cds--g10 .cds--user-avatar--order-2-gray,
32550
+ .cds--white .cds--user-avatar--order-2-gray {
32551
+ background-color: #6f6f6f;
32552
+ }
32553
+
32554
+ :root .cds--user-avatar--order-3-green,
32555
+ .cds--g10 .cds--user-avatar--order-3-green,
32556
+ .cds--white .cds--user-avatar--order-3-green {
32557
+ background-color: #198038;
32558
+ }
32559
+
32560
+ :root .cds--user-avatar--order-4-magenta,
32561
+ .cds--g10 .cds--user-avatar--order-4-magenta,
32562
+ .cds--white .cds--user-avatar--order-4-magenta {
32563
+ background-color: #d02670;
32564
+ }
32565
+
32566
+ :root .cds--user-avatar--order-5-purple,
32567
+ .cds--g10 .cds--user-avatar--order-5-purple,
32568
+ .cds--white .cds--user-avatar--order-5-purple {
32569
+ background-color: #8a3ffc;
32570
+ }
32571
+
32572
+ :root .cds--user-avatar--order-6-teal,
32573
+ .cds--g10 .cds--user-avatar--order-6-teal,
32574
+ .cds--white .cds--user-avatar--order-6-teal {
32575
+ background-color: #007d79;
32576
+ }
32577
+
32578
+ :root .cds--user-avatar--order-7-cyan,
32579
+ .cds--g10 .cds--user-avatar--order-7-cyan,
32580
+ .cds--white .cds--user-avatar--order-7-cyan {
32581
+ background-color: #003a6d;
32582
+ }
32583
+
32584
+ :root .cds--user-avatar--order-8-gray,
32585
+ .cds--g10 .cds--user-avatar--order-8-gray,
32586
+ .cds--white .cds--user-avatar--order-8-gray {
32587
+ background-color: #393939;
32588
+ }
32589
+
32590
+ :root .cds--user-avatar--order-9-green,
32591
+ .cds--g10 .cds--user-avatar--order-9-green,
32592
+ .cds--white .cds--user-avatar--order-9-green {
32593
+ background-color: #044317;
32594
+ }
32595
+
32596
+ :root .cds--user-avatar--order-10-magenta,
32597
+ .cds--g10 .cds--user-avatar--order-10-magenta,
32598
+ .cds--white .cds--user-avatar--order-10-magenta {
32599
+ background-color: #740937;
32600
+ }
32601
+
32602
+ :root .cds--user-avatar--order-11-purple,
32603
+ .cds--g10 .cds--user-avatar--order-11-purple,
32604
+ .cds--white .cds--user-avatar--order-11-purple {
32605
+ background-color: #491d8b;
32606
+ }
32607
+
32608
+ :root .cds--user-avatar--order-12-teal,
32609
+ .cds--g10 .cds--user-avatar--order-12-teal,
32610
+ .cds--white .cds--user-avatar--order-12-teal {
32611
+ background-color: #004144;
32612
+ }
32613
+
32614
+ .cds--g90 .cds--user-avatar--order-1-cyan,
32615
+ .cds--g100 .cds--user-avatar--order-1-cyan {
32616
+ background-color: #1192e8;
32617
+ }
32618
+
32619
+ .cds--g90 .cds--user-avatar--order-2-gray,
32620
+ .cds--g100 .cds--user-avatar--order-2-gray {
32621
+ background-color: #8d8d8d;
32622
+ }
32623
+
32624
+ .cds--g90 .cds--user-avatar--order-3-green,
32625
+ .cds--g100 .cds--user-avatar--order-3-green {
32626
+ background-color: #24a148;
32627
+ }
32628
+
32629
+ .cds--g90 .cds--user-avatar--order-4-magenta,
32630
+ .cds--g100 .cds--user-avatar--order-4-magenta {
32631
+ background-color: #ee5396;
32632
+ }
32633
+
32634
+ .cds--g90 .cds--user-avatar--order-5-purple,
32635
+ .cds--g100 .cds--user-avatar--order-5-purple {
32636
+ background-color: #a56eff;
32637
+ }
32638
+
32639
+ .cds--g90 .cds--user-avatar--order-6-teal,
32640
+ .cds--g100 .cds--user-avatar--order-6-teal {
32641
+ background-color: #009d9a;
32642
+ }
32643
+
32644
+ .cds--g90 .cds--user-avatar--order-7-cyan,
32645
+ .cds--g100 .cds--user-avatar--order-7-cyan {
32646
+ background-color: #82cfff;
32647
+ }
32648
+
32649
+ .cds--g90 .cds--user-avatar--order-8-gray,
32650
+ .cds--g100 .cds--user-avatar--order-8-gray {
32651
+ background-color: #c6c6c6;
32652
+ }
32653
+
32654
+ .cds--g90 .cds--user-avatar--order-9-green,
32655
+ .cds--g100 .cds--user-avatar--order-9-green {
32656
+ background-color: #6fdc8c;
32657
+ }
32658
+
32659
+ .cds--g90 .cds--user-avatar--order-10-magenta,
32660
+ .cds--g100 .cds--user-avatar--order-10-magenta {
32661
+ background-color: #ffafd2;
32662
+ }
32663
+
32664
+ .cds--g90 .cds--user-avatar--order-11-purple,
32665
+ .cds--g100 .cds--user-avatar--order-11-purple {
32666
+ background-color: #d4bbff;
32667
+ }
32668
+
32669
+ .cds--g90 .cds--user-avatar--order-12-teal,
32670
+ .cds--g100 .cds--user-avatar--order-12-teal {
32671
+ background-color: #3ddbd9;
31041
32672
  }