@carbon/styles 1.114.0-rc.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.
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 {
@@ -7421,9 +7420,11 @@ li.cds--accordion__item--disabled:last-of-type {
7421
7420
  outline-style: dotted;
7422
7421
  }
7423
7422
  }
7424
- .cds--overflow-menu:hover,
7425
- .cds--overflow-menu__trigger:hover {
7426
- 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
+ }
7427
7428
  }
7428
7429
 
7429
7430
  .cds--overflow-menu > :first-child {
@@ -7506,10 +7507,11 @@ li.cds--accordion__item--disabled:last-of-type {
7506
7507
  }
7507
7508
  }
7508
7509
 
7509
- .cds--overflow-menu.cds--overflow-menu--open:hover {
7510
- 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
+ }
7511
7514
  }
7512
-
7513
7515
  .cds--overflow-menu-options--light {
7514
7516
  background-color: var(--cds-layer-hover);
7515
7517
  }
@@ -7517,10 +7519,11 @@ li.cds--accordion__item--disabled:last-of-type {
7517
7519
  background-color: var(--cds-layer);
7518
7520
  }
7519
7521
 
7520
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
7521
- 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
+ }
7522
7526
  }
7523
-
7524
7527
  .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
7525
7528
  block-size: 0.1875rem;
7526
7529
  inline-size: var(--cds-layout-size-height-local);
@@ -10624,8 +10627,10 @@ fieldset[disabled] .cds--form__helper-text {
10624
10627
  .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
10625
10628
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10626
10629
  }
10627
- .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
10628
- 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
+ }
10629
10634
  }
10630
10635
 
10631
10636
  .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg {
@@ -10635,13 +10640,14 @@ fieldset[disabled] .cds--form__helper-text {
10635
10640
  cursor: default;
10636
10641
  }
10637
10642
 
10638
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
10639
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
10640
- }
10641
- .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
10642
- 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
+ }
10643
10650
  }
10644
-
10645
10651
  .cds--text-input__counter-alert {
10646
10652
  position: absolute;
10647
10653
  overflow: hidden;
@@ -10975,11 +10981,15 @@ fieldset[disabled] .cds--form__helper-text {
10975
10981
  .cds--tag.cds--tag--operational {
10976
10982
  border: 1px solid var(--cds-tag-background-gray, #e0e0e0);
10977
10983
  }
10978
- .cds--tag.cds--tag--operational:hover {
10979
- 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
+ }
10980
10988
  }
10981
- .cds--tag .cds--tag__close-icon:hover {
10982
- 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
+ }
10983
10993
  }
10984
10994
  .cds--tag .cds--definition-term .cds--tag__label {
10985
10995
  color: var(--cds-tag-color-gray, #161616);
@@ -11034,8 +11044,10 @@ fieldset[disabled] .cds--form__helper-text {
11034
11044
  padding-block: 0;
11035
11045
  padding-inline-end: 0;
11036
11046
  }
11037
- .cds--tag--filter:hover {
11038
- outline: none;
11047
+ @media (any-hover: hover) {
11048
+ .cds--tag--filter:hover {
11049
+ outline: none;
11050
+ }
11039
11051
  }
11040
11052
 
11041
11053
  .cds--tag--selectable {
@@ -11044,9 +11056,11 @@ fieldset[disabled] .cds--form__helper-text {
11044
11056
  color: var(--cds-text-primary, #161616);
11045
11057
  cursor: pointer;
11046
11058
  }
11047
- .cds--tag--selectable:hover {
11048
- background-color: var(--cds-layer-hover);
11049
- outline: none;
11059
+ @media (any-hover: hover) {
11060
+ .cds--tag--selectable:hover {
11061
+ background-color: var(--cds-layer-hover);
11062
+ outline: none;
11063
+ }
11050
11064
  }
11051
11065
  .cds--tag--selectable:focus {
11052
11066
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -11057,8 +11071,10 @@ fieldset[disabled] .cds--form__helper-text {
11057
11071
  background-color: var(--cds-layer-selected-inverse, #161616);
11058
11072
  color: var(--cds-text-inverse, #ffffff);
11059
11073
  }
11060
- .cds--tag--selectable-selected:hover {
11061
- 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
+ }
11062
11078
  }
11063
11079
 
11064
11080
  .cds--tag--operational {
@@ -11067,9 +11083,11 @@ fieldset[disabled] .cds--form__helper-text {
11067
11083
  color: var(--cds-tag-color-gray, #161616);
11068
11084
  cursor: pointer;
11069
11085
  }
11070
- .cds--tag--operational:hover {
11071
- background-color: var(--cds-tag-hover-gray, #d1d1d1);
11072
- 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
+ }
11073
11091
  }
11074
11092
  .cds--tag--operational:focus {
11075
11093
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -11083,11 +11101,15 @@ fieldset[disabled] .cds--form__helper-text {
11083
11101
  .cds--tag--red.cds--tag--operational {
11084
11102
  border: 1px solid var(--cds-tag-border-red, #ff8389);
11085
11103
  }
11086
- .cds--tag--red.cds--tag--operational:hover {
11087
- 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
+ }
11088
11108
  }
11089
- .cds--tag--red .cds--tag__close-icon:hover {
11090
- 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
+ }
11091
11113
  }
11092
11114
  .cds--tag--red .cds--definition-term .cds--tag__label {
11093
11115
  color: var(--cds-tag-color-red, #a2191f);
@@ -11100,11 +11122,15 @@ fieldset[disabled] .cds--form__helper-text {
11100
11122
  .cds--tag--magenta.cds--tag--operational {
11101
11123
  border: 1px solid var(--cds-tag-border-magenta, #ff7eb6);
11102
11124
  }
11103
- .cds--tag--magenta.cds--tag--operational:hover {
11104
- 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
+ }
11105
11129
  }
11106
- .cds--tag--magenta .cds--tag__close-icon:hover {
11107
- 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
+ }
11108
11134
  }
11109
11135
  .cds--tag--magenta .cds--definition-term .cds--tag__label {
11110
11136
  color: var(--cds-tag-color-magenta, #9f1853);
@@ -11117,11 +11143,15 @@ fieldset[disabled] .cds--form__helper-text {
11117
11143
  .cds--tag--purple.cds--tag--operational {
11118
11144
  border: 1px solid var(--cds-tag-border-purple, #be95ff);
11119
11145
  }
11120
- .cds--tag--purple.cds--tag--operational:hover {
11121
- 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
+ }
11122
11150
  }
11123
- .cds--tag--purple .cds--tag__close-icon:hover {
11124
- 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
+ }
11125
11155
  }
11126
11156
  .cds--tag--purple .cds--definition-term .cds--tag__label {
11127
11157
  color: var(--cds-tag-color-purple, #6929c4);
@@ -11134,11 +11164,15 @@ fieldset[disabled] .cds--form__helper-text {
11134
11164
  .cds--tag--blue.cds--tag--operational {
11135
11165
  border: 1px solid var(--cds-tag-border-blue, #78a9ff);
11136
11166
  }
11137
- .cds--tag--blue.cds--tag--operational:hover {
11138
- 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
+ }
11139
11171
  }
11140
- .cds--tag--blue .cds--tag__close-icon:hover {
11141
- 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
+ }
11142
11176
  }
11143
11177
  .cds--tag--blue .cds--definition-term .cds--tag__label {
11144
11178
  color: var(--cds-tag-color-blue, #0043ce);
@@ -11151,11 +11185,15 @@ fieldset[disabled] .cds--form__helper-text {
11151
11185
  .cds--tag--cyan.cds--tag--operational {
11152
11186
  border: 1px solid var(--cds-tag-border-cyan, #33b1ff);
11153
11187
  }
11154
- .cds--tag--cyan.cds--tag--operational:hover {
11155
- 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
+ }
11156
11192
  }
11157
- .cds--tag--cyan .cds--tag__close-icon:hover {
11158
- 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
+ }
11159
11197
  }
11160
11198
  .cds--tag--cyan .cds--definition-term .cds--tag__label {
11161
11199
  color: var(--cds-tag-color-cyan, #00539a);
@@ -11168,11 +11206,15 @@ fieldset[disabled] .cds--form__helper-text {
11168
11206
  .cds--tag--teal.cds--tag--operational {
11169
11207
  border: 1px solid var(--cds-tag-border-teal, #08bdba);
11170
11208
  }
11171
- .cds--tag--teal.cds--tag--operational:hover {
11172
- 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
+ }
11173
11213
  }
11174
- .cds--tag--teal .cds--tag__close-icon:hover {
11175
- 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
+ }
11176
11218
  }
11177
11219
  .cds--tag--teal .cds--definition-term .cds--tag__label {
11178
11220
  color: var(--cds-tag-color-teal, #005d5d);
@@ -11185,11 +11227,15 @@ fieldset[disabled] .cds--form__helper-text {
11185
11227
  .cds--tag--green.cds--tag--operational {
11186
11228
  border: 1px solid var(--cds-tag-border-green, #42be65);
11187
11229
  }
11188
- .cds--tag--green.cds--tag--operational:hover {
11189
- 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
+ }
11190
11234
  }
11191
- .cds--tag--green .cds--tag__close-icon:hover {
11192
- 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
+ }
11193
11239
  }
11194
11240
  .cds--tag--green .cds--definition-term .cds--tag__label {
11195
11241
  color: var(--cds-tag-color-green, #0e6027);
@@ -11202,11 +11248,15 @@ fieldset[disabled] .cds--form__helper-text {
11202
11248
  .cds--tag--gray.cds--tag--operational {
11203
11249
  border: 1px solid var(--cds-tag-border-gray, #a8a8a8);
11204
11250
  }
11205
- .cds--tag--gray.cds--tag--operational:hover {
11206
- 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
+ }
11207
11255
  }
11208
- .cds--tag--gray .cds--tag__close-icon:hover {
11209
- 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
+ }
11210
11260
  }
11211
11261
  .cds--tag--gray .cds--definition-term .cds--tag__label {
11212
11262
  color: var(--cds-tag-color-gray, #161616);
@@ -11219,11 +11269,15 @@ fieldset[disabled] .cds--form__helper-text {
11219
11269
  .cds--tag--cool-gray.cds--tag--operational {
11220
11270
  border: 1px solid var(--cds-tag-border-cool-gray, #a2a9b0);
11221
11271
  }
11222
- .cds--tag--cool-gray.cds--tag--operational:hover {
11223
- 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
+ }
11224
11276
  }
11225
- .cds--tag--cool-gray .cds--tag__close-icon:hover {
11226
- 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
+ }
11227
11281
  }
11228
11282
  .cds--tag--cool-gray .cds--definition-term .cds--tag__label {
11229
11283
  color: var(--cds-tag-color-cool-gray, #121619);
@@ -11236,11 +11290,15 @@ fieldset[disabled] .cds--form__helper-text {
11236
11290
  .cds--tag--warm-gray.cds--tag--operational {
11237
11291
  border: 1px solid var(--cds-tag-border-warm-gray, #ada8a8);
11238
11292
  }
11239
- .cds--tag--warm-gray.cds--tag--operational:hover {
11240
- 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
+ }
11241
11297
  }
11242
- .cds--tag--warm-gray .cds--tag__close-icon:hover {
11243
- 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
+ }
11244
11302
  }
11245
11303
  .cds--tag--warm-gray .cds--definition-term .cds--tag__label {
11246
11304
  color: var(--cds-tag-color-warm-gray, #171414);
@@ -11253,18 +11311,24 @@ fieldset[disabled] .cds--form__helper-text {
11253
11311
  .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational {
11254
11312
  border: 1px solid var(--cds-background-inverse, #393939);
11255
11313
  }
11256
- .cds--tag--high-contrast:not(.cds--tag--operational).cds--tag--operational:hover {
11257
- 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
+ }
11258
11318
  }
11259
- .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
11260
- 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
+ }
11261
11323
  }
11262
11324
  .cds--tag--high-contrast:not(.cds--tag--operational) .cds--definition-term .cds--tag__label {
11263
11325
  color: var(--cds-text-inverse, #ffffff);
11264
11326
  }
11265
11327
 
11266
- .cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
11267
- 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
+ }
11268
11332
  }
11269
11333
 
11270
11334
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) {
@@ -11274,11 +11338,15 @@ fieldset[disabled] .cds--form__helper-text {
11274
11338
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational {
11275
11339
  border: 1px solid var(--cds-background, #ffffff);
11276
11340
  }
11277
- .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]).cds--tag--operational:hover {
11278
- 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
+ }
11279
11345
  }
11280
- .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
11281
- background-color: var(--cds-layer-hover);
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
+ }
11282
11350
  }
11283
11351
  .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label {
11284
11352
  color: var(--cds-text-primary, #161616);
@@ -11299,15 +11367,19 @@ fieldset[disabled] .cds--form__helper-text {
11299
11367
  .cds--tag--interactive.cds--tag--disabled.cds--tag--operational {
11300
11368
  border: 1px solid var(--cds-layer);
11301
11369
  }
11302
- .cds--tag--disabled:not(.cds--tag--operational).cds--tag--operational:hover,
11303
- .cds--tag--filter.cds--tag--disabled.cds--tag--operational:hover,
11304
- .cds--tag--interactive.cds--tag--disabled.cds--tag--operational:hover {
11305
- 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
+ }
11306
11376
  }
11307
- .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__close-icon:hover,
11308
- .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,
11309
- .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
11310
- 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
+ }
11311
11383
  }
11312
11384
  .cds--tag--disabled:not(.cds--tag--operational) .cds--definition-term .cds--tag__label,
11313
11385
  .cds--tag--filter.cds--tag--disabled .cds--definition-term .cds--tag__label,
@@ -11320,10 +11392,12 @@ fieldset[disabled] .cds--form__helper-text {
11320
11392
  box-shadow: none;
11321
11393
  outline: none;
11322
11394
  }
11323
- .cds--tag--disabled:not(.cds--tag--operational):hover,
11324
- .cds--tag--filter.cds--tag--disabled:hover,
11325
- .cds--tag--interactive.cds--tag--disabled:hover {
11326
- 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
+ }
11327
11401
  }
11328
11402
  .cds--tag--disabled:not(.cds--tag--operational) .cds--tag__label,
11329
11403
  .cds--tag--filter.cds--tag--disabled .cds--tag__label,
@@ -11338,10 +11412,12 @@ fieldset[disabled] .cds--form__helper-text {
11338
11412
  background-color: var(--cds-layer);
11339
11413
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11340
11414
  }
11341
- .cds--tag--selectable.cds--tag--disabled:hover,
11342
- .cds--tag--operational.cds--tag--disabled:hover {
11343
- background-color: var(--cds-layer);
11344
- 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
+ }
11345
11421
  }
11346
11422
 
11347
11423
  .cds--tag--interactive {
@@ -11398,10 +11474,11 @@ fieldset[disabled] .cds--form__helper-text {
11398
11474
  box-shadow: inset 0 0 0 1px var(--cds-focus-inverse, #ffffff);
11399
11475
  }
11400
11476
 
11401
- .cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover {
11402
- 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
+ }
11403
11481
  }
11404
-
11405
11482
  .cds--tag--filter.cds--tag--disabled svg {
11406
11483
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11407
11484
  }
@@ -11458,11 +11535,15 @@ fieldset[disabled] .cds--form__helper-text {
11458
11535
  .cds--tag.cds--skeleton.cds--tag--operational {
11459
11536
  border: 1px solid var(--cds-skeleton-background, #e8e8e8);
11460
11537
  }
11461
- .cds--tag.cds--skeleton.cds--tag--operational:hover {
11462
- 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
+ }
11463
11542
  }
11464
- .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
11465
- 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
+ }
11466
11547
  }
11467
11548
  .cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
11468
11549
  color: var(--cds-text-primary, #161616);
@@ -11488,11 +11569,12 @@ fieldset[disabled] .cds--form__helper-text {
11488
11569
  background-color: currentColor;
11489
11570
  }
11490
11571
 
11491
- .cds--tag .cds--ai-label .cds--ai-label__button--inline:hover,
11492
- .cds--tag .cds--slug .cds--slug__button--inline:hover {
11493
- 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
+ }
11494
11577
  }
11495
-
11496
11578
  .cds--tag--filter .cds--tag__decorator > *,
11497
11579
  .cds--tag--filter .cds--ai-label,
11498
11580
  .cds--tag--filter .cds--slug {
@@ -12053,11 +12135,15 @@ fieldset[disabled] .cds--form__helper-text {
12053
12135
  .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational {
12054
12136
  border: 1px solid var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
12055
12137
  }
12056
- .cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--operational:hover {
12057
- 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
+ }
12058
12142
  }
12059
- .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
12060
- 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
+ }
12061
12147
  }
12062
12148
  .cds--list-box--disabled .cds--list-box__selection--multi .cds--definition-term .cds--tag__label {
12063
12149
  color: var(--cds-layer);
@@ -16774,9 +16860,11 @@ th .cds--table-sort__flex {
16774
16860
  transition: none;
16775
16861
  }
16776
16862
  }
16777
- .flatpickr-prev-month:hover,
16778
- .flatpickr-next-month:hover {
16779
- 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
+ }
16780
16868
  }
16781
16869
 
16782
16870
  .flatpickr-next-month.disabled svg,
@@ -16785,11 +16873,12 @@ th .cds--table-sort__flex {
16785
16873
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16786
16874
  }
16787
16875
 
16788
- .flatpickr-next-month.disabled:hover svg,
16789
- .flatpickr-prev-month.disabled:hover svg {
16790
- 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
+ }
16791
16881
  }
16792
-
16793
16882
  .flatpickr-current-month {
16794
16883
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
16795
16884
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -16805,16 +16894,20 @@ th .cds--table-sort__flex {
16805
16894
  .flatpickr-current-month .cur-month {
16806
16895
  margin-inline: 0.25rem 0.25rem;
16807
16896
  }
16808
- .flatpickr-current-month .cur-month:hover {
16809
- 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
+ }
16810
16901
  }
16811
16902
 
16812
16903
  .numInputWrapper {
16813
16904
  position: relative;
16814
16905
  inline-size: 3.75rem;
16815
16906
  }
16816
- .numInputWrapper:hover {
16817
- 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
+ }
16818
16911
  }
16819
16912
 
16820
16913
  .numInputWrapper .numInput {
@@ -16885,10 +16978,12 @@ th .cds--table-sort__flex {
16885
16978
  content: "";
16886
16979
  inset-block-start: 33%;
16887
16980
  }
16888
- .numInputWrapper .arrowUp:hover::after,
16889
- .numInputWrapper .arrowDown:hover::after {
16890
- border-block-end-color: var(--cds-button-primary, #0f62fe);
16891
- 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
+ }
16892
16987
  }
16893
16988
  .numInputWrapper .arrowUp:active::after,
16894
16989
  .numInputWrapper .arrowDown:active::after {
@@ -16904,16 +16999,16 @@ th .cds--table-sort__flex {
16904
16999
  border-block-start-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16905
17000
  }
16906
17001
 
16907
- .numInputWrapper:hover .arrowUp,
16908
- .numInputWrapper:hover .arrowDown {
16909
- opacity: 1;
16910
- }
16911
-
16912
- .numInputWrapper:hover .numInput[disabled] ~ .arrowUp,
16913
- .numInputWrapper:hover .numInput[disabled] ~ .arrowDown {
16914
- 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
+ }
16915
17011
  }
16916
-
16917
17012
  .flatpickr-weekdays {
16918
17013
  display: flex;
16919
17014
  align-items: center;
@@ -16975,8 +17070,10 @@ th .cds--table-sort__flex {
16975
17070
  inline-size: 2.5rem;
16976
17071
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
16977
17072
  }
16978
- .flatpickr-day:hover {
16979
- background: var(--cds-layer-hover);
17073
+ @media (any-hover: hover) {
17074
+ .flatpickr-day:hover {
17075
+ background: var(--cds-layer-hover);
17076
+ }
16980
17077
  }
16981
17078
  .flatpickr-day:focus {
16982
17079
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -17073,20 +17170,19 @@ th .cds--table-sort__flex {
17073
17170
  background: var(--cds-layer-01, #f4f4f4);
17074
17171
  }
17075
17172
 
17076
- .flatpickr-day.endRange:hover {
17077
- outline: 2px solid var(--cds-focus, #0f62fe);
17078
- 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
+ }
17079
17180
  }
17080
- @media screen and (prefers-contrast) {
17181
+ @media screen and (any-hover: hover) and (prefers-contrast) {
17081
17182
  .flatpickr-day.endRange:hover {
17082
17183
  outline-style: dotted;
17083
17184
  }
17084
17185
  }
17085
- .flatpickr-day.endRange:hover {
17086
- background: var(--cds-layer-01, #f4f4f4);
17087
- color: var(--cds-text-primary, #161616);
17088
- }
17089
-
17090
17186
  .flatpickr-day.endRange.inRange.selected {
17091
17187
  background: var(--cds-button-primary, #0f62fe);
17092
17188
  color: var(--cds-text-on-color, #ffffff);
@@ -17096,8 +17192,10 @@ th .cds--table-sort__flex {
17096
17192
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
17097
17193
  cursor: not-allowed;
17098
17194
  }
17099
- .flatpickr-day.flatpickr-disabled:hover {
17100
- background-color: transparent;
17195
+ @media (any-hover: hover) {
17196
+ .flatpickr-day.flatpickr-disabled:hover {
17197
+ background-color: transparent;
17198
+ }
17101
17199
  }
17102
17200
 
17103
17201
  .flatpickr-input[readonly] {
@@ -17220,8 +17318,10 @@ th .cds--table-sort__flex {
17220
17318
  .cds--date-picker__input:disabled::placeholder {
17221
17319
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
17222
17320
  }
17223
- .cds--date-picker__input:disabled:hover {
17224
- 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
+ }
17225
17325
  }
17226
17326
  .cds--date-picker__input::-moz-placeholder {
17227
17327
  color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
@@ -18669,6 +18769,9 @@ button.cds--dropdown-text:focus {
18669
18769
  inset-block-start: 0;
18670
18770
  inset-inline-start: 0;
18671
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;
18672
18775
  }
18673
18776
 
18674
18777
  .cds--loading-overlay--stop {
@@ -18777,10 +18880,17 @@ button.cds--dropdown-text:focus {
18777
18880
  outline-offset: -2px;
18778
18881
  transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
18779
18882
  }
18780
- .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 {
18781
18890
  outline: 2px solid var(--cds-focus, #0f62fe);
18891
+ text-decoration: underline;
18782
18892
  }
18783
- .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 {
18784
18894
  text-decoration: underline;
18785
18895
  }
18786
18896
  .cds--file-browse-btn:active {
@@ -18793,7 +18903,14 @@ button.cds--dropdown-text:focus {
18793
18903
  text-decoration: none;
18794
18904
  transition: none;
18795
18905
  }
18796
- .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 {
18797
18914
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
18798
18915
  outline: none;
18799
18916
  text-decoration: none;
@@ -25078,6 +25195,14 @@ optgroup.cds--select-optgroup:disabled,
25078
25195
  .cds--pagination__right {
25079
25196
  border-inline-start: 1px solid var(--cds-border-subtle);
25080
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
+ }
25081
25206
 
25082
25207
  .cds--pagination__left,
25083
25208
  .cds--pagination__right {
@@ -25119,6 +25244,9 @@ optgroup.cds--select-optgroup:disabled,
25119
25244
  .cds--pagination__left {
25120
25245
  padding: 0 1rem 0 0;
25121
25246
  }
25247
+ .cds--pagination__left.cds--pagination__left--no-sizer {
25248
+ padding: 0;
25249
+ }
25122
25250
  @container pagination (min-width: 42rem) {
25123
25251
  .cds--pagination__left {
25124
25252
  padding: 0 1rem;
@@ -25524,9 +25652,11 @@ span.cds--pagination__text.cds--pagination__items-count {
25524
25652
  -moz-user-select: none;
25525
25653
  user-select: none;
25526
25654
  }
25527
- .cds--pagination-nav__page:hover {
25528
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
25529
- 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
+ }
25530
25660
  }
25531
25661
  .cds--pagination-nav__page:focus {
25532
25662
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -27783,16 +27913,16 @@ span.cds--pagination__text.cds--pagination__items-count {
27783
27913
  border: none;
27784
27914
  }
27785
27915
 
27786
- .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
27787
- border-color: var(--cds-layer-hover);
27788
- background-color: var(--cds-layer-hover);
27789
- cursor: pointer;
27790
- }
27791
-
27792
- .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 {
27793
- border-color: var(--cds-layer-hover);
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
+ }
27794
27925
  }
27795
-
27796
27926
  .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
27797
27927
  border-color: var(--cds-layer-selected);
27798
27928
  background-color: var(--cds-layer-selected);
@@ -27810,7 +27940,11 @@ span.cds--pagination__text.cds--pagination__items-count {
27810
27940
  cursor: inherit;
27811
27941
  }
27812
27942
 
27813
- .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
+ }
27814
27948
  .cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
27815
27949
  color: var(--cds-text-primary, #161616);
27816
27950
  }
@@ -29695,8 +29829,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29695
29829
  .cds--tree-node:focus {
29696
29830
  outline: none;
29697
29831
  }
29698
- .cds--tree-node:hover {
29699
- cursor: pointer;
29832
+ @media (any-hover: hover) {
29833
+ .cds--tree-node:hover {
29834
+ cursor: pointer;
29835
+ }
29700
29836
  }
29701
29837
 
29702
29838
  .cds--tree-node--hidden {
@@ -29743,25 +29879,31 @@ span.cds--pagination__text.cds--pagination__items-count {
29743
29879
  outline: none;
29744
29880
  }
29745
29881
 
29746
- .cds--tree-node--disabled,
29747
- .cds--tree-node--disabled .cds--tree-node__label:hover,
29748
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
29882
+ .cds--tree-node--disabled {
29749
29883
  background-color: var(--cds-field-01, #f4f4f4);
29750
29884
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29885
+ cursor: not-allowed;
29751
29886
  }
29752
29887
 
29753
29888
  .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,
29754
- .cds--tree-node--disabled .cds--tree-node__icon,
29755
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
29756
- .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
29889
+ .cds--tree-node--disabled .cds--tree-node__icon {
29757
29890
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29758
29891
  }
29759
29892
 
29760
- .cds--tree-node--disabled,
29761
- .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
29762
- 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
+ }
29763
29906
  }
29764
-
29765
29907
  li a.cds--tree-node {
29766
29908
  text-decoration: none;
29767
29909
  }
@@ -29792,24 +29934,26 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
29792
29934
  min-block-size: 2rem;
29793
29935
  padding-inline-end: 1rem;
29794
29936
  }
29795
- .cds--tree-node__label:hover {
29796
- background-color: var(--cds-layer-hover-01, #e8e8e8);
29797
- 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
+ }
29798
29942
  }
29799
29943
 
29800
29944
  .cds--tree-node:not(.cds--tree-parent-node) .cds--tree-node__label {
29801
29945
  padding-block: 0.4375rem 0.4375rem;
29802
29946
  }
29803
29947
 
29804
- .cds--tree-node__label:hover .cds--tree-node__label__details {
29805
- color: var(--cds-text-primary, #161616);
29806
- }
29807
-
29808
- .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
29809
- .cds--tree-node__label:hover .cds--tree-node__icon {
29810
- 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
+ }
29811
29956
  }
29812
-
29813
29957
  .cds--tree-leaf-node {
29814
29958
  display: flex;
29815
29959
  padding-inline-start: 2.5rem;
@@ -29842,8 +29986,10 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
29842
29986
  margin-inline: -0.25rem 0.25rem;
29843
29987
  padding-inline-start: 0.25rem;
29844
29988
  }
29845
- .cds--tree-parent-node__toggle:hover {
29846
- cursor: pointer;
29989
+ @media (any-hover: hover) {
29990
+ .cds--tree-parent-node__toggle:hover {
29991
+ cursor: pointer;
29992
+ }
29847
29993
  }
29848
29994
  .cds--tree-parent-node__toggle:focus {
29849
29995
  outline: none;
@@ -29874,8 +30020,10 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
29874
30020
  background-color: var(--cds-layer-selected-01, #e0e0e0);
29875
30021
  color: var(--cds-text-primary, #161616);
29876
30022
  }
29877
- .cds--tree-node--selected > .cds--tree-node__label:hover {
29878
- 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
+ }
29879
30027
  }
29880
30028
 
29881
30029
  .cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon,
@@ -30576,20 +30724,21 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30576
30724
  inline-size: auto;
30577
30725
  }
30578
30726
 
30579
- .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,
30580
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
30581
- .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
30582
- .cds--side-nav a.cds--header__menu-item:hover,
30583
- .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
30584
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30585
- color: var(--cds-text-primary, #161616);
30586
- }
30587
-
30588
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
30589
- .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
30590
- 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
+ }
30591
30741
  }
30592
-
30593
30742
  .cds--side-nav__item--large {
30594
30743
  block-size: auto;
30595
30744
  }
@@ -30650,11 +30799,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30650
30799
  user-select: none;
30651
30800
  }
30652
30801
 
30653
- .cds--side-nav__submenu:hover {
30654
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30655
- 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
+ }
30656
30807
  }
30657
-
30658
30808
  .cds--side-nav__submenu:focus {
30659
30809
  outline: 2px solid var(--cds-focus, #0f62fe);
30660
30810
  outline-offset: -2px;
@@ -30692,11 +30842,16 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30692
30842
  block-size: 3rem;
30693
30843
  }
30694
30844
 
30695
- .cds--side-nav__item--active .cds--side-nav__submenu:hover {
30696
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
30697
- 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
+ }
30698
30854
  }
30699
-
30700
30855
  .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
30701
30856
  position: relative;
30702
30857
  background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
@@ -30940,12 +31095,14 @@ a.cds--side-nav__link--current::before {
30940
31095
  font-weight: 400;
30941
31096
  padding-inline-start: 4.25rem;
30942
31097
  }
30943
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
30944
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
30945
- color: var(--cds-text-primary, #161616);
30946
- }
30947
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
30948
- 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
+ }
30949
31106
  }
30950
31107
 
30951
31108
  .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
@@ -30958,12 +31115,16 @@ a.cds--side-nav__link--current::before {
30958
31115
  block-size: inherit;
30959
31116
  }
30960
31117
 
30961
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
30962
31118
  .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
30963
31119
  .cds--side-nav .cds--header__menu-arrow {
30964
31120
  fill: var(--cds-icon-secondary, #525252);
30965
31121
  }
30966
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
+ }
30967
31128
  .cds--switcher {
30968
31129
  box-sizing: border-box;
30969
31130
  padding: 0;
@@ -31015,10 +31176,12 @@ a.cds--side-nav__link--current::before {
31015
31176
  color: var(--cds-text-secondary, #525252);
31016
31177
  text-decoration: none;
31017
31178
  }
31018
- .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
31019
- background: var(--cds-layer-hover);
31020
- color: var(--cds-text-primary, #161616);
31021
- 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
+ }
31022
31185
  }
31023
31186
  .cds--switcher__item-link:focus {
31024
31187
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -31626,20 +31789,21 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
31626
31789
  inline-size: auto;
31627
31790
  }
31628
31791
 
31629
- .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,
31630
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover,
31631
- .cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,
31632
- .cds--side-nav a.cds--header__menu-item:hover,
31633
- .cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover {
31634
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31635
- color: var(--cds-text-primary, #161616);
31636
- }
31637
-
31638
- .cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span,
31639
- .cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item > .cds--side-nav__link:hover > span {
31640
- 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
+ }
31641
31806
  }
31642
-
31643
31807
  .cds--side-nav__item--large {
31644
31808
  block-size: auto;
31645
31809
  }
@@ -31700,11 +31864,12 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
31700
31864
  user-select: none;
31701
31865
  }
31702
31866
 
31703
- .cds--side-nav__submenu:hover {
31704
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31705
- 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
+ }
31706
31872
  }
31707
-
31708
31873
  .cds--side-nav__submenu:focus {
31709
31874
  outline: 2px solid var(--cds-focus, #0f62fe);
31710
31875
  outline-offset: -2px;
@@ -31742,11 +31907,16 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
31742
31907
  block-size: 3rem;
31743
31908
  }
31744
31909
 
31745
- .cds--side-nav__item--active .cds--side-nav__submenu:hover {
31746
- background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
31747
- 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
+ }
31748
31919
  }
31749
-
31750
31920
  .cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false] {
31751
31921
  position: relative;
31752
31922
  background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
@@ -31990,12 +32160,14 @@ a.cds--side-nav__link--current::before {
31990
32160
  font-weight: 400;
31991
32161
  padding-inline-start: 4.25rem;
31992
32162
  }
31993
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item:hover {
31994
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
31995
- color: var(--cds-text-primary, #161616);
31996
- }
31997
- .cds--side-nav .cds--header__menu-title[aria-expanded=true] + .cds--header__menu a.cds--header__menu-item--current:hover {
31998
- 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
+ }
31999
32171
  }
32000
32172
 
32001
32173
  .cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]::after,
@@ -32008,12 +32180,16 @@ a.cds--side-nav__link--current::before {
32008
32180
  block-size: inherit;
32009
32181
  }
32010
32182
 
32011
- .cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,
32012
32183
  .cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,
32013
32184
  .cds--side-nav .cds--header__menu-arrow {
32014
32185
  fill: var(--cds-icon-secondary, #525252);
32015
32186
  }
32016
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
+ }
32017
32193
  .cds--switcher {
32018
32194
  box-sizing: border-box;
32019
32195
  padding: 0;
@@ -32065,10 +32241,12 @@ a.cds--side-nav__link--current::before {
32065
32241
  color: var(--cds-text-secondary, #525252);
32066
32242
  text-decoration: none;
32067
32243
  }
32068
- .cds--switcher__item-link:hover:not(.cds--switcher__item-link--selected) {
32069
- background: var(--cds-layer-hover);
32070
- color: var(--cds-text-primary, #161616);
32071
- 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
+ }
32072
32250
  }
32073
32251
  .cds--switcher__item-link:focus {
32074
32252
  outline: 2px solid var(--cds-focus, #0f62fe);