@carbon/charts-angular 1.13.2 → 1.13.4

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/styles.css CHANGED
@@ -3979,3905 +3979,692 @@ svg.cds--cc--color-legend g.legend-title text {
3979
3979
  stroke: var(--cds-focus, #0f62fe);
3980
3980
  }
3981
3981
 
3982
- .cds--layout--size-xs {
3983
- --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
3984
- --cds-layout-size-height: var(--cds-layout-size-height-context);
3982
+ .cds--cc--grid-brush g.grid-brush rect.selection {
3983
+ fill: none;
3984
+ fill-opacity: 0;
3985
+ stroke: none;
3985
3986
  }
3986
3987
 
3987
- .cds--layout-constraint--size__default-xs {
3988
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
3988
+ .cds--cc--grid-brush rect.frontSelection {
3989
+ fill: var(--cds-layer-accent-01, #e0e0e0);
3990
+ fill-opacity: 0.3;
3991
+ stroke: var(--cds-button-tertiary, #0f62fe);
3989
3992
  }
3990
3993
 
3991
- .cds--layout-constraint--size__min-xs {
3992
- --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
3994
+ .cds--cc--highlight rect.highlight-bar {
3995
+ pointer-events: none;
3996
+ fill: #ee5396;
3997
+ stroke: #ee5396;
3993
3998
  }
3994
3999
 
3995
- .cds--layout-constraint--size__max-xs {
3996
- --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
4000
+ .cds--cc--layout-row {
4001
+ display: flex;
4002
+ flex-direction: row;
3997
4003
  }
3998
-
3999
- .cds--layout--size-sm {
4000
- --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
4001
- --cds-layout-size-height: var(--cds-layout-size-height-context);
4004
+ .cds--cc--layout-column {
4005
+ display: flex;
4006
+ flex-direction: column;
4002
4007
  }
4003
-
4004
- .cds--layout-constraint--size__default-sm {
4005
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
4008
+ .cds--cc--layout-row-reverse {
4009
+ display: flex;
4010
+ flex-direction: row-reverse;
4006
4011
  }
4007
-
4008
- .cds--layout-constraint--size__min-sm {
4009
- --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
4012
+ .cds--cc--layout-column-reverse {
4013
+ display: flex;
4014
+ flex-direction: column-reverse;
4010
4015
  }
4011
-
4012
- .cds--layout-constraint--size__max-sm {
4013
- --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
4016
+ .cds--cc--layout-alignitems-center {
4017
+ align-items: center;
4014
4018
  }
4015
4019
 
4016
- .cds--layout--size-md {
4017
- --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
4018
- --cds-layout-size-height: var(--cds-layout-size-height-context);
4020
+ .cds--cc--chart-wrapper .layout-child {
4021
+ overflow: visible;
4019
4022
  }
4020
4023
 
4021
- .cds--layout-constraint--size__default-md {
4022
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
4024
+ .cds--cc--chart-wrapper svg.layout-svg-wrapper {
4025
+ height: inherit;
4026
+ width: inherit;
4027
+ overflow: visible;
4023
4028
  }
4024
4029
 
4025
- .cds--layout-constraint--size__min-md {
4026
- --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
4030
+ div.cds--cc--legend {
4031
+ font-family: var(--cds-charts-font-family-condensed);
4032
+ display: flex;
4033
+ user-select: none;
4034
+ -webkit-flex-wrap: wrap;
4035
+ flex-wrap: wrap;
4027
4036
  }
4028
-
4029
- .cds--layout-constraint--size__max-md {
4030
- --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
4037
+ div.cds--cc--legend[data-name=legend-items] {
4038
+ width: 100%;
4039
+ margin: -5px;
4031
4040
  }
4032
-
4033
- .cds--layout--size-lg {
4034
- --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
4035
- --cds-layout-size-height: var(--cds-layout-size-height-context);
4041
+ div.cds--cc--legend div.legend-item {
4042
+ display: flex;
4043
+ align-items: center;
4044
+ margin: 5px;
4036
4045
  }
4037
-
4038
- .cds--layout-constraint--size__default-lg {
4039
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
4046
+ div.cds--cc--legend div.legend-item div.checkbox {
4047
+ width: 13px;
4048
+ height: 13px;
4049
+ margin-right: 4px;
4050
+ border-radius: 2px;
4051
+ border: solid 1px var(--cds-background, #ffffff);
4052
+ box-shadow: 0 0 0 2px transparent;
4040
4053
  }
4041
-
4042
- .cds--layout-constraint--size__min-lg {
4043
- --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
4054
+ @media (forced-colors: active) {
4055
+ div.cds--cc--legend div.legend-item div.checkbox {
4056
+ forced-color-adjust: none;
4057
+ }
4044
4058
  }
4045
-
4046
- .cds--layout-constraint--size__max-lg {
4047
- --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
4059
+ div.cds--cc--legend div.legend-item div.checkbox:not(.active) {
4060
+ border-color: var(--cds-text-secondary, #525252);
4061
+ background: var(--cds-background, #ffffff);
4048
4062
  }
4049
-
4050
- .cds--layout--size-xl {
4051
- --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
4052
- --cds-layout-size-height: var(--cds-layout-size-height-context);
4063
+ div.cds--cc--legend div.legend-item div.checkbox svg {
4064
+ display: none;
4065
+ vertical-align: text-top;
4066
+ fill: var(--cds-background, #ffffff);
4067
+ stroke: var(--cds-background, #ffffff);
4053
4068
  }
4054
-
4055
- .cds--layout-constraint--size__default-xl {
4056
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
4069
+ div.cds--cc--legend div.legend-item.additional svg.icon {
4070
+ margin-right: 4px;
4057
4071
  }
4058
-
4059
- .cds--layout-constraint--size__min-xl {
4060
- --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
4072
+ div.cds--cc--legend div.legend-item p {
4073
+ font-size: 12px;
4074
+ fill: var(--cds-text-secondary, #525252);
4075
+ line-height: 1rem;
4061
4076
  }
4062
-
4063
- .cds--layout-constraint--size__max-xl {
4064
- --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
4077
+ div.cds--cc--legend.center-aligned {
4078
+ justify-content: center;
4065
4079
  }
4066
-
4067
- .cds--layout--size-2xl {
4068
- --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
4069
- --cds-layout-size-height: var(--cds-layout-size-height-context);
4080
+ div.cds--cc--legend.right-aligned {
4081
+ justify-content: flex-end;
4070
4082
  }
4071
-
4072
- .cds--layout-constraint--size__default-2xl {
4073
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
4083
+ div.cds--cc--legend.has-deactivated-items div.legend-item div.checkbox svg {
4084
+ display: block;
4074
4085
  }
4075
-
4076
- .cds--layout-constraint--size__min-2xl {
4077
- --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
4086
+ div.cds--cc--legend.vertical {
4087
+ margin: -5px;
4088
+ flex-direction: column;
4078
4089
  }
4079
-
4080
- .cds--layout-constraint--size__max-2xl {
4081
- --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
4090
+ div.cds--cc--legend.vertical div.legend-item {
4091
+ margin-right: 0;
4092
+ margin-bottom: 10px;
4082
4093
  }
4083
-
4084
- .cds--layout--density-condensed {
4085
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
4086
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
4094
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover {
4095
+ cursor: pointer;
4087
4096
  }
4088
-
4089
- .cds--layout-constraint--density__default-condensed {
4090
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
4097
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox {
4098
+ border: solid 1px var(--cds-background, #ffffff);
4099
+ box-shadow: 0 0 0 2px #0f62fe;
4091
4100
  }
4092
-
4093
- .cds--layout-constraint--density__min-condensed {
4094
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
4101
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox:not(.active) {
4102
+ border-color: var(--cds-text-secondary, #525252);
4095
4103
  }
4096
4104
 
4097
- .cds--layout-constraint--density__max-condensed {
4098
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
4105
+ .cds--cc--meter-title {
4106
+ overflow: visible;
4099
4107
  }
4100
-
4101
- .cds--layout--density-normal {
4102
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
4103
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
4108
+ .cds--cc--meter-title text.meter-title,
4109
+ .cds--cc--meter-title text.proportional-meter-title,
4110
+ .cds--cc--meter-title text.proportional-meter-total,
4111
+ .cds--cc--meter-title text.percent-value {
4112
+ fill: var(--cds-text-primary, #161616);
4104
4113
  }
4105
-
4106
- .cds--layout-constraint--density__default-normal {
4107
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
4114
+ .cds--cc--meter-title g.status-indicator.status--danger circle.status {
4115
+ fill: var(--cds-support-error, #da1e28);
4108
4116
  }
4109
-
4110
- .cds--layout-constraint--density__min-normal {
4111
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
4117
+ .cds--cc--meter-title g.status-indicator.status--warning circle.status {
4118
+ fill: var(--cds-support-warning, #f1c21b);
4112
4119
  }
4113
-
4114
- .cds--layout-constraint--density__max-normal {
4115
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
4120
+ .cds--cc--meter-title g.status-indicator.status--warning path.innerFill {
4121
+ fill: #000000;
4116
4122
  }
4117
-
4118
- :root {
4119
- --cds-layout-size-height-xs: 1.5rem;
4120
- --cds-layout-size-height-sm: 2rem;
4121
- --cds-layout-size-height-md: 2.5rem;
4122
- --cds-layout-size-height-lg: 3rem;
4123
- --cds-layout-size-height-xl: 4rem;
4124
- --cds-layout-size-height-2xl: 5rem;
4125
- --cds-layout-size-height-min: 0px;
4126
- --cds-layout-size-height-max: 999999999px;
4127
- --cds-layout-density-padding-inline-condensed: 0.5rem;
4128
- --cds-layout-density-padding-inline-normal: 1rem;
4129
- --cds-layout-density-padding-inline-min: 0px;
4130
- --cds-layout-density-padding-inline-max: 999999999px;
4123
+ .cds--cc--meter-title g.status-indicator.status--success circle.status {
4124
+ fill: var(--cds-support-success, #24a148);
4131
4125
  }
4132
-
4133
- :root {
4134
- --cds-layer: var(--cds-layer-01, #f4f4f4);
4135
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
4136
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
4137
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
4138
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
4139
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
4140
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
4141
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
4142
- --cds-field: var(--cds-field-01, #f4f4f4);
4143
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
4144
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
4145
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
4146
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
4147
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
4126
+ .cds--cc--meter-title g.status-indicator path.innerFill {
4127
+ fill: var(--cds-layer-01-absolute, #ffffff);
4148
4128
  }
4149
4129
 
4150
- .cds--layer-one {
4151
- --cds-layer: var(--cds-layer-01, #f4f4f4);
4152
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
4153
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
4154
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
4155
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
4156
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
4157
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
4158
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
4159
- --cds-field: var(--cds-field-01, #f4f4f4);
4160
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
4161
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
4162
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
4163
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
4164
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
4130
+ .cds--cc--ruler line.ruler-line,
4131
+ .cds--cc--ruler-binned line.ruler-line {
4132
+ stroke: var(--cds-layer-inverse-absolute, #000000);
4133
+ stroke-width: 1px;
4134
+ stroke-dasharray: 2;
4135
+ pointer-events: none;
4165
4136
  }
4166
4137
 
4167
- .cds--layer-two {
4168
- --cds-layer: var(--cds-layer-02, #ffffff);
4169
- --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
4170
- --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
4171
- --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
4172
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
4173
- --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
4174
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
4175
- --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
4176
- --cds-field: var(--cds-field-02, #ffffff);
4177
- --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
4178
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
4179
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
4180
- --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
4181
- --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
4138
+ .cds--cc--skeleton rect.chart-skeleton-backdrop {
4139
+ fill: var(--cds-grid-bg, #ffffff);
4182
4140
  }
4183
-
4184
- .cds--layer-three {
4185
- --cds-layer: var(--cds-layer-03, #f4f4f4);
4186
- --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
4187
- --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
4188
- --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
4189
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
4190
- --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
4191
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
4192
- --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
4193
- --cds-field: var(--cds-field-03, #f4f4f4);
4194
- --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
4195
- --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
4196
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
4197
- --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
4198
- --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
4141
+ .cds--cc--skeleton .shimmer-effect-lines {
4142
+ stroke-width: 1px;
4199
4143
  }
4200
-
4201
- @keyframes hide-feedback {
4202
- 0% {
4203
- opacity: 1;
4204
- visibility: inherit;
4205
- }
4206
- 100% {
4207
- opacity: 0;
4208
- visibility: hidden;
4209
- }
4144
+ .cds--cc--skeleton .shimmer-effect-sparkline {
4145
+ stroke-width: 0px;
4210
4146
  }
4211
- @keyframes show-feedback {
4212
- 0% {
4213
- opacity: 0;
4214
- visibility: hidden;
4215
- }
4216
- 100% {
4217
- opacity: 1;
4218
- visibility: inherit;
4219
- }
4147
+ .cds--cc--skeleton .empty-state-lines {
4148
+ stroke-width: 1px;
4149
+ stroke: var(--cds-layer-accent-01, #e0e0e0);
4220
4150
  }
4221
- @keyframes skeleton {
4222
- 0% {
4223
- opacity: 0.3;
4224
- transform: scaleX(0);
4225
- transform-origin: left;
4226
- }
4227
- 20% {
4228
- opacity: 1;
4229
- transform: scaleX(1);
4230
- transform-origin: left;
4231
- }
4232
- 28% {
4233
- transform: scaleX(1);
4234
- transform-origin: right;
4235
- }
4236
- 51% {
4237
- transform: scaleX(0);
4238
- transform-origin: right;
4239
- }
4240
- 58% {
4241
- transform: scaleX(0);
4242
- transform-origin: right;
4243
- }
4244
- 82% {
4245
- transform: scaleX(1);
4246
- transform-origin: right;
4247
- }
4248
- 83% {
4249
- transform: scaleX(1);
4250
- transform-origin: left;
4251
- }
4252
- 96% {
4253
- transform: scaleX(0);
4254
- transform-origin: left;
4255
- }
4256
- 100% {
4257
- opacity: 0.3;
4258
- transform: scaleX(0);
4259
- transform-origin: left;
4260
- }
4151
+ .cds--cc--skeleton .shimmer-lines .stop-bg-shimmer {
4152
+ stop-color: var(--cds-layer-accent-01, #e0e0e0);
4261
4153
  }
4262
- .cds--assistive-text,
4263
- .cds--visually-hidden {
4264
- position: absolute;
4265
- overflow: hidden;
4266
- padding: 0;
4267
- border: 0;
4268
- margin: -1px;
4269
- block-size: 1px;
4270
- clip: rect(0, 0, 0, 0);
4271
- inline-size: 1px;
4272
- visibility: inherit;
4273
- white-space: nowrap;
4154
+ .cds--cc--skeleton .shimmer-lines .stop-shimmer {
4155
+ stop-color: #ffffff;
4274
4156
  }
4275
-
4276
- .cds--popover-container {
4277
- position: relative;
4278
- display: inline-block;
4157
+ .cds--cc--skeleton .empty-state-areas {
4158
+ fill: rgba(127, 127, 127, 0.1);
4279
4159
  }
4280
-
4281
- .cds--popover--high-contrast .cds--popover {
4282
- --cds-popover-background-color: var(--cds-background-inverse, #393939);
4283
- --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
4160
+ .cds--cc--skeleton .shimmer-areas .stop-bg-shimmer {
4161
+ stop-color: rgba(127, 127, 127, 0.1);
4284
4162
  }
4285
-
4286
- .cds--popover--drop-shadow .cds--popover {
4287
- --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
4163
+ .cds--cc--skeleton .shimmer-areas .stop-shimmer {
4164
+ stop-color: rgba(255, 255, 255, 0.15);
4288
4165
  }
4289
4166
 
4290
- .cds--popover--caret {
4291
- --cds-popover-offset: 0.625rem;
4167
+ .cds--cc--skeleton-lines rect.chart-skeleton-backdrop {
4168
+ fill: var(--cds-grid-bg, #ffffff);
4292
4169
  }
4293
-
4294
- .cds--popover {
4295
- position: absolute;
4296
- z-index: 6000;
4297
- filter: var(--cds-popover-drop-shadow, none);
4298
- inset: 0;
4299
- pointer-events: none;
4170
+ .cds--cc--skeleton-lines .shimmer-effect-lines {
4171
+ stroke-width: 1px;
4300
4172
  }
4301
-
4302
- .cds--popover-content {
4303
- box-sizing: border-box;
4304
- padding: 0;
4305
- border: 0;
4306
- margin: 0;
4307
- font-family: inherit;
4308
- font-size: 100%;
4309
- vertical-align: baseline;
4310
- position: absolute;
4311
- z-index: 6000;
4312
- display: none;
4313
- background-color: var(--cds-popover-background-color, var(--cds-layer));
4314
- border-radius: var(--cds-popover-border-radius, 2px);
4315
- color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
4316
- inline-size: max-content;
4317
- max-inline-size: 23rem;
4318
- pointer-events: auto;
4319
- }
4320
- .cds--popover-content *,
4321
- .cds--popover-content *::before,
4322
- .cds--popover-content *::after {
4323
- box-sizing: inherit;
4173
+ .cds--cc--skeleton-lines .shimmer-effect-sparkline {
4174
+ stroke-width: 0px;
4324
4175
  }
4325
-
4326
- .cds--popover--open > .cds--popover > .cds--popover-content {
4327
- display: block;
4176
+ .cds--cc--skeleton-lines .empty-state-lines {
4177
+ stroke-width: 1px;
4178
+ stroke: var(--cds-layer-accent-01, #e0e0e0);
4328
4179
  }
4329
-
4330
- .cds--popover-content::before {
4331
- position: absolute;
4332
- display: none;
4333
- content: "";
4180
+ .cds--cc--skeleton-lines .shimmer-lines .stop-bg-shimmer {
4181
+ stop-color: var(--cds-layer-accent-01, #e0e0e0);
4334
4182
  }
4335
-
4336
- .cds--popover--open > .cds--popover > .cds--popover-content::before {
4337
- display: block;
4183
+ .cds--cc--skeleton-lines .shimmer-lines .stop-shimmer {
4184
+ stop-color: #ffffff;
4338
4185
  }
4339
4186
 
4340
- .cds--popover-caret {
4341
- position: absolute;
4342
- z-index: 6000;
4343
- display: none;
4344
- background-color: var(--cds-popover-background-color, var(--cds-layer));
4345
- will-change: transform;
4187
+ .cds--cc--threshold line.threshold-line {
4188
+ stroke: #fa4d56;
4189
+ stroke-width: 1;
4190
+ stroke-dasharray: 4;
4191
+ cursor: pointer;
4192
+ pointer-events: none;
4346
4193
  }
4347
-
4348
- .cds--popover--open > .cds--popover > .cds--popover-caret {
4349
- display: block;
4194
+ .cds--cc--threshold line.threshold-line.active {
4195
+ stroke-width: 2;
4350
4196
  }
4351
-
4352
- .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
4353
- display: none;
4197
+ .cds--cc--threshold rect.threshold-hoverable-area {
4198
+ height: 20px;
4199
+ transform: translate(0, -10px);
4200
+ cursor: pointer;
4201
+ fill: transparent;
4354
4202
  }
4355
-
4356
- .cds--popover--bottom > .cds--popover > .cds--popover-content {
4357
- inset-block-end: 0;
4358
- inset-inline-start: 50%;
4359
- transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
4203
+ .cds--cc--threshold rect.threshold-hoverable-area.rotate {
4204
+ transform: rotate(90deg) translate(0, -10px);
4360
4205
  }
4361
4206
 
4362
- [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-content {
4363
- transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
4207
+ .cds--cc--threshold--label {
4208
+ background-color: #fa4d56;
4209
+ pointer-events: none;
4210
+ transition: opacity 0.1s;
4211
+ transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
4212
+ display: inline;
4213
+ box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
4214
+ position: absolute;
4215
+ word-wrap: break-word;
4216
+ z-index: 1059;
4217
+ font-family: var(--cds-charts-font-family-condensed);
4218
+ color: var(--cds-text-primary, #161616);
4219
+ line-height: 16px;
4220
+ font-size: 12px;
4221
+ padding: 4px;
4222
+ min-width: 20px;
4364
4223
  }
4365
-
4366
- .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4367
- inset-block-end: 0;
4368
- inset-inline-start: 0;
4369
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
4224
+ .cds--cc--threshold--label.hidden {
4225
+ opacity: 0;
4226
+ transition: opacity 0.1s;
4227
+ transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
4370
4228
  }
4371
4229
 
4372
- [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4373
- inset-inline-end: 0;
4374
- inset-inline-start: initial;
4230
+ .cds--cc--title p.title {
4231
+ color: var(--cds-text-primary, #161616);
4232
+ font-size: 16px;
4233
+ font-family: var(--cds-charts-font-family);
4234
+ font-weight: 600;
4235
+ white-space: nowrap;
4236
+ overflow: hidden;
4237
+ text-overflow: ellipsis;
4238
+ padding-right: 15px;
4375
4239
  }
4376
4240
 
4377
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4378
- inset-block-end: 0;
4379
- inset-inline-end: 0;
4380
- transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
4241
+ .cds--chart-holder .layout-child.title {
4242
+ height: unset !important;
4243
+ overflow: hidden;
4381
4244
  }
4382
4245
 
4383
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4384
- inset-inline-start: 0;
4246
+ .cds--chart-holder .cds--cc--toolbar {
4247
+ display: flex;
4385
4248
  }
4386
-
4387
- .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
4388
- .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
4389
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
4390
- block-size: var(--cds-popover-offset, 0rem);
4391
- inset-block-start: 0;
4392
- inset-inline-end: 0;
4249
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options {
4250
+ box-sizing: border-box;
4251
+ padding: 0;
4252
+ border: 0;
4253
+ margin: 0;
4254
+ font-family: inherit;
4255
+ font-size: 100%;
4256
+ vertical-align: baseline;
4257
+ box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
4258
+ position: absolute;
4259
+ z-index: 6000;
4260
+ display: none;
4261
+ background-color: var(--cds-layer);
4262
+ width: 10rem;
4263
+ flex-direction: column;
4264
+ align-items: flex-start;
4265
+ top: 32px;
4393
4266
  inset-inline-start: 0;
4394
- transform: translateY(-100%);
4267
+ list-style: none;
4395
4268
  }
4396
-
4397
- .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4398
- .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4399
- .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4400
- block-size: var(--cds-popover-caret-height, 0.375rem);
4401
- clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
4402
- inline-size: var(--cds-popover-caret-width, 0.75rem);
4403
- inset-block-end: 0;
4404
- inset-inline-start: 50%;
4405
- transform: translate(-50%, var(--cds-popover-offset, 0rem));
4269
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options *,
4270
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options ::before,
4271
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options ::after {
4272
+ box-sizing: inherit;
4406
4273
  }
4407
-
4408
- [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4409
- [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4410
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4411
- transform: translate(50%, var(--cds-popover-offset, 0rem));
4274
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option {
4275
+ box-sizing: border-box;
4276
+ border: 0;
4277
+ margin: 0;
4278
+ font-family: inherit;
4279
+ font-size: 100%;
4280
+ vertical-align: baseline;
4281
+ display: flex;
4282
+ align-items: center;
4283
+ padding: 0;
4284
+ background-color: transparent;
4285
+ block-size: 2.5rem;
4286
+ inline-size: 100%;
4287
+ transition: background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9);
4412
4288
  }
4413
-
4414
- .cds--popover--top > .cds--popover > .cds--popover-content {
4415
- inset-block-start: 0;
4416
- inset-inline-start: 50%;
4417
- transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4289
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option:hover {
4290
+ background-color: var(--cds-layer-hover);
4418
4291
  }
4419
-
4420
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-content {
4421
- transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4292
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option .cds--overflow-menu-options__btn {
4293
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4294
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
4295
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
4296
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4297
+ outline: 2px solid transparent;
4298
+ outline-offset: -2px;
4299
+ display: inline-flex;
4300
+ align-items: center;
4301
+ padding: 0 1rem;
4302
+ border: none;
4303
+ background-color: transparent;
4304
+ block-size: 100%;
4305
+ color: var(--cds-text-secondary, #525252);
4306
+ cursor: pointer;
4307
+ font-family: inherit;
4308
+ font-weight: 400;
4309
+ inline-size: 100%;
4310
+ max-inline-size: 11.25rem;
4311
+ text-align: start;
4312
+ transition: outline 0.11s cubic-bezier(0, 0, 0.38, 0.9), background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9), color 0.11s cubic-bezier(0, 0, 0.38, 0.9);
4422
4313
  }
4423
-
4424
- .cds--popover--top-left > .cds--popover > .cds--popover-content {
4425
- inset-block-start: 0;
4426
- inset-inline-start: 0;
4427
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
4314
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option .cds--overflow-menu-options__btn:focus {
4315
+ outline: 2px solid var(--cds-focus, #0f62fe);
4316
+ outline-offset: -2px;
4428
4317
  }
4429
-
4430
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-content {
4431
- inset-inline-end: 0;
4432
- inset-inline-start: initial;
4318
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option *,
4319
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option ::before,
4320
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option ::after {
4321
+ box-sizing: inherit;
4433
4322
  }
4434
-
4435
- .cds--popover--top-right > .cds--popover > .cds--popover-content {
4436
- inset-block-start: 0;
4437
- inset-inline-end: 0;
4438
- transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
4323
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip {
4324
+ right: 0;
4325
+ left: unset;
4439
4326
  }
4440
-
4441
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-content {
4442
- inset-inline-start: 0;
4327
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip.is-open {
4328
+ display: table;
4443
4329
  }
4444
-
4445
- .cds--popover--top > .cds--popover > .cds--popover-content::before,
4446
- .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
4447
- .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
4448
- block-size: var(--cds-popover-offset, 0rem);
4449
- inset-block-end: 0;
4450
- inset-inline-end: 0;
4451
- inset-inline-start: 0;
4452
- transform: translateY(100%);
4330
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip ul {
4331
+ margin: 0;
4332
+ padding: 0;
4333
+ list-style: none;
4453
4334
  }
4454
-
4455
- .cds--popover--top > .cds--popover > .cds--popover-caret,
4456
- .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4457
- .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4458
- block-size: var(--cds-popover-caret-height, 0.375rem);
4459
- clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
4460
- inline-size: var(--cds-popover-caret-width, 0.75rem);
4461
- inset-block-start: 0;
4462
- inset-inline-start: 50%;
4463
- transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4335
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger {
4336
+ width: 2rem;
4337
+ height: 2rem;
4338
+ appearance: none;
4339
+ background: none;
4340
+ block-size: 2.5rem;
4341
+ border: 0;
4342
+ box-sizing: border-box;
4343
+ cursor: pointer;
4344
+ display: flex;
4345
+ font-family: inherit;
4346
+ font-size: 100%;
4347
+ inline-size: 2.5rem;
4348
+ align-items: center;
4349
+ justify-content: center;
4350
+ margin: 0;
4351
+ min-height: 2.5rem;
4352
+ outline: 2px solid transparent;
4353
+ outline-offset: -2px;
4354
+ padding: 0;
4355
+ position: relative;
4356
+ text-align: start;
4357
+ transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
4358
+ vertical-align: baseline;
4464
4359
  }
4465
-
4466
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-caret,
4467
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4468
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4469
- transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4360
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu:hover, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger:hover {
4361
+ background-color: var(--cds-layer-hover);
4470
4362
  }
4471
-
4472
- .cds--popover--right > .cds--popover > .cds--popover-content {
4473
- inset-block-start: 50%;
4474
- inset-inline-start: 100%;
4475
- transform: translate(var(--cds-popover-offset, 0rem), -50%);
4363
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu:focus, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger:focus {
4364
+ outline: 2px solid var(--cds-focus, #0f62fe);
4365
+ outline-offset: -2px;
4476
4366
  }
4477
-
4478
- .cds--popover--right-top > .cds--popover > .cds--popover-content {
4479
- inset-block-start: 50%;
4480
- inset-inline-start: 100%;
4481
- transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
4367
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu *,
4368
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu ::before,
4369
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu ::after, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger *,
4370
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger ::before,
4371
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger ::after {
4372
+ box-sizing: inherit;
4482
4373
  }
4483
-
4484
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
4485
- inset-block-end: 50%;
4486
- inset-inline-start: 100%;
4487
- transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
4374
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu > :first-child, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger > :first-child {
4375
+ margin-block-start: 0;
4488
4376
  }
4489
-
4490
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-content,
4491
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-content,
4492
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-content {
4493
- inset-inline-end: 100%;
4494
- inset-inline-start: initial;
4377
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu .cds--overflow-menu__icon, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger .cds--overflow-menu__icon {
4378
+ block-size: 1rem;
4379
+ fill: var(--cds-icon-primary, #161616);
4380
+ inline-size: 1rem;
4495
4381
  }
4496
4382
 
4497
- .cds--popover--right > .cds--popover > .cds--popover-content::before,
4498
- .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
4499
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
4500
- inline-size: var(--cds-popover-offset, 0rem);
4501
- inset-block-end: 0;
4383
+ .cds--chart-holder {
4384
+ --cds-layout-size-height-min: 0px;
4385
+ --cds-layout-size-height-lg: 3rem;
4386
+ --cds-layout-size-height-max: 999999999px;
4387
+ --cds-layout-density-padding-inline-min: 0px;
4388
+ --cds-layout-density-padding-inline-max: 999999999px;
4389
+ --cds-layout-size-height-lg: 3rem;
4390
+ }
4391
+ .cds--chart-holder .cds--modal {
4392
+ position: fixed;
4393
+ z-index: 9000;
4394
+ display: flex;
4395
+ align-items: center;
4396
+ justify-content: center;
4397
+ background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
4398
+ block-size: 100vh;
4399
+ content: "";
4400
+ inline-size: 100vw;
4502
4401
  inset-block-start: 0;
4503
4402
  inset-inline-start: 0;
4504
- transform: translateX(-100%);
4505
- }
4506
-
4507
- .cds--popover--right > .cds--popover > .cds--popover-caret,
4508
- .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4509
- .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4510
- block-size: var(--cds-popover-caret-width, 0.75rem);
4511
- clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
4512
- inline-size: var(--cds-popover-caret-height, 0.375rem);
4513
- inset-block-start: 50%;
4514
- inset-inline-start: 100%;
4515
- transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
4516
- }
4517
-
4518
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-caret,
4519
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4520
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4521
- inset-inline-end: 100%;
4522
- inset-inline-start: initial;
4523
- }
4524
-
4525
- .cds--popover--left > .cds--popover > .cds--popover-content {
4526
- inset-block-start: 50%;
4527
- inset-inline-end: 100%;
4528
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
4529
- }
4530
-
4531
- .cds--popover--left-top > .cds--popover > .cds--popover-content {
4532
- inset-block-start: -50%;
4533
- inset-inline-end: 100%;
4534
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
4403
+ opacity: 0;
4404
+ transition: opacity 0.24s cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 0.24s;
4405
+ visibility: hidden;
4535
4406
  }
4536
-
4537
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
4538
- inset-block-end: -50%;
4539
- inset-inline-end: 100%;
4540
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
4407
+ .cds--chart-holder .cds--modal.is-visible {
4408
+ z-index: 99999;
4409
+ opacity: 1;
4410
+ transition: opacity 0.24s cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
4411
+ visibility: inherit;
4541
4412
  }
4542
-
4543
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
4544
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-content,
4545
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-content {
4546
- inset-inline-end: initial;
4547
- inset-inline-start: 100%;
4413
+ .cds--chart-holder .cds--modal.is-visible .cds--modal-container {
4414
+ transform: translateZ(0);
4415
+ transition: transform 0.24s cubic-bezier(0, 0, 0.3, 1);
4548
4416
  }
4549
-
4550
- .cds--popover--left > .cds--popover > .cds--popover-content::before,
4551
- .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
4552
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
4553
- inline-size: var(--cds-popover-offset, 0rem);
4554
- inset-block-end: 0;
4555
- inset-block-start: 0;
4556
- inset-inline-end: 0;
4557
- transform: translateX(100%);
4417
+ .cds--chart-holder .cds--modal .cds--modal-container {
4418
+ position: fixed;
4419
+ top: 0;
4420
+ display: grid;
4421
+ overflow: hidden;
4422
+ width: 100%;
4423
+ height: 100%;
4424
+ max-height: 100%;
4425
+ background-color: var(--cds-layer);
4426
+ grid-template-columns: 100%;
4427
+ grid-template-rows: auto 1fr auto;
4428
+ outline: 3px solid transparent;
4429
+ outline-offset: -3px;
4430
+ transform: translate3d(0, -24px, 0);
4431
+ transform-origin: top center;
4432
+ transition: transform 0.24s cubic-bezier(0.4, 0.14, 1, 1);
4558
4433
  }
4559
-
4560
- .cds--popover--left > .cds--popover > .cds--popover-caret,
4561
- .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4562
- .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4563
- block-size: var(--cds-popover-caret-width, 0.75rem);
4564
- clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
4565
- inline-size: var(--cds-popover-caret-height, 0.375rem);
4566
- inset-block-start: 50%;
4567
- inset-inline-end: 100%;
4568
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
4434
+ @media (min-width: 42rem) {
4435
+ .cds--chart-holder .cds--modal .cds--modal-container {
4436
+ position: static;
4437
+ width: 84%;
4438
+ height: auto;
4439
+ max-height: 90%;
4440
+ }
4569
4441
  }
4570
-
4571
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-caret,
4572
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4573
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4574
- inset-inline-end: initial;
4575
- inset-inline-start: 100%;
4442
+ @media (min-width: 66rem) {
4443
+ .cds--chart-holder .cds--modal .cds--modal-container {
4444
+ width: 60%;
4445
+ max-height: 84%;
4446
+ }
4576
4447
  }
4577
-
4578
- .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
4579
- border-radius: 0;
4448
+ @media (min-width: 82rem) {
4449
+ .cds--chart-holder .cds--modal .cds--modal-container {
4450
+ width: 48%;
4451
+ }
4580
4452
  }
4581
-
4582
- .cds--popover--tab-tip .cds--popover {
4583
- will-change: filter;
4453
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header {
4454
+ padding-top: 1rem;
4455
+ padding-right: 3rem;
4456
+ padding-left: 1rem;
4457
+ margin-bottom: 0.5rem;
4458
+ grid-column: 1/-1;
4459
+ grid-row: 1/1;
4584
4460
  }
4585
-
4586
- .cds--popover--tab-tip__button {
4461
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__label {
4462
+ margin-top: 0;
4463
+ margin-bottom: 0;
4587
4464
  box-sizing: border-box;
4588
4465
  padding: 0;
4589
4466
  border: 0;
4590
4467
  margin: 0;
4591
4468
  font-family: inherit;
4592
- font-size: 100%;
4593
4469
  vertical-align: baseline;
4594
- display: inline-block;
4470
+ font-size: var(--cds-label-01-font-size, 0.75rem);
4471
+ font-weight: var(--cds-label-01-font-weight, 400);
4472
+ line-height: var(--cds-label-01-line-height, 1.33333);
4473
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
4474
+ color: var(--cds-text-secondary, #525252);
4475
+ --docs-content-width: 75%;
4476
+ width: var(--docs-content-width);
4477
+ }
4478
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__heading {
4479
+ margin-top: 0.5rem !important;
4480
+ margin-bottom: 1rem !important;
4481
+ box-sizing: border-box;
4595
4482
  padding: 0;
4596
4483
  border: 0;
4597
- appearance: none;
4598
- background: none;
4599
- cursor: pointer;
4600
- text-align: start;
4601
- inline-size: 100%;
4602
- position: relative;
4603
- display: inline-flex;
4604
- align-items: center;
4605
- justify-content: center;
4606
- block-size: 2rem;
4607
- inline-size: 2rem;
4608
- }
4609
- .cds--popover--tab-tip__button *,
4610
- .cds--popover--tab-tip__button *::before,
4611
- .cds--popover--tab-tip__button *::after {
4612
- box-sizing: inherit;
4613
- }
4614
- .cds--popover--tab-tip__button::-moz-focus-inner {
4615
- border: 0;
4616
- }
4617
- .cds--popover--tab-tip__button:focus {
4618
- outline: 2px solid var(--cds-focus, #0f62fe);
4619
- outline-offset: -2px;
4484
+ margin: 0;
4485
+ font-family: inherit;
4486
+ vertical-align: baseline;
4487
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
4488
+ font-weight: var(--cds-heading-03-font-weight, 400);
4489
+ line-height: var(--cds-heading-03-line-height, 1.4);
4490
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
4491
+ padding-right: calc(20% - 3rem);
4492
+ color: var(--cds-text-primary, #161616);
4493
+ --docs-content-width: 75%;
4494
+ width: var(--docs-content-width);
4620
4495
  }
4621
- @media screen and (prefers-contrast) {
4622
- .cds--popover--tab-tip__button:focus {
4623
- outline-style: dotted;
4624
- }
4496
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close {
4497
+ position: absolute;
4498
+ z-index: 2;
4499
+ top: 0;
4500
+ right: 0;
4501
+ overflow: hidden;
4502
+ width: 3rem;
4503
+ height: 3rem;
4504
+ padding: 0.75rem;
4505
+ border: 2px solid transparent;
4506
+ background-color: transparent;
4507
+ cursor: pointer;
4508
+ transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
4509
+ margin: 0;
4510
+ border-radius: 0;
4511
+ font-family: inherit;
4625
4512
  }
4626
- .cds--popover--tab-tip__button:hover {
4513
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close:hover {
4627
4514
  background-color: var(--cds-layer-hover);
4628
4515
  }
4629
-
4630
- .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
4631
- background: var(--cds-layer);
4632
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
4633
- }
4634
-
4635
- .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
4636
- position: absolute;
4637
- z-index: 6001;
4638
- background: var(--cds-layer);
4639
- block-size: 2px;
4640
- content: "";
4641
- inline-size: 100%;
4642
- inset-block-end: 0;
4516
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close:focus {
4517
+ border-color: var(--cds-focus, #0f62fe);
4518
+ outline: none;
4643
4519
  }
4644
-
4645
- .cds--popover--tab-tip__button svg {
4520
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close__icon {
4521
+ width: 1.25rem;
4522
+ height: 1.25rem;
4646
4523
  fill: var(--cds-icon-primary, #161616);
4647
4524
  }
4648
-
4649
- .cds--tooltip {
4650
- --cds-popover-offset: 12px;
4651
- }
4652
-
4653
- .cds--tooltip-content {
4525
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {
4526
+ padding: 0 !important;
4527
+ margin-bottom: 0;
4528
+ color-scheme: var(--cds-color-scheme, light);
4654
4529
  font-size: var(--cds-body-01-font-size, 0.875rem);
4655
- font-weight: var(--cds-body-01-font-weight, 400);
4656
4530
  line-height: var(--cds-body-01-line-height, 1.42857);
4657
4531
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
4658
- padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
4659
- color: var(--cds-text-inverse, #ffffff);
4660
- max-inline-size: 18rem;
4532
+ position: relative;
4533
+ color: var(--cds-text-primary, #161616);
4534
+ font-weight: 400;
4535
+ grid-column: 1/-1;
4536
+ grid-row: 2/-2;
4537
+ overflow-y: auto;
4661
4538
  }
4662
-
4663
- .cds--icon-tooltip {
4664
- --cds-tooltip-padding-block: 0.125rem;
4665
- --cds-popover-caret-width: 0.5rem;
4666
- --cds-popover-caret-height: 0.25rem;
4667
- --cds-popover-offset: 0.5rem;
4539
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table {
4540
+ position: relative;
4541
+ border-collapse: collapse;
4542
+ width: 100%;
4543
+ border-spacing: 0;
4668
4544
  }
4669
-
4670
- .cds--icon-tooltip .cds--tooltip-content {
4545
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead {
4546
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
4547
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
4548
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
4549
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
4550
+ background-color: var(--cds-layer-accent);
4551
+ }
4552
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr {
4553
+ width: 100%;
4554
+ height: 3rem;
4555
+ border: none;
4556
+ }
4557
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr th {
4558
+ position: sticky;
4559
+ top: 0;
4560
+ padding-right: 1rem;
4561
+ padding-left: 1rem;
4562
+ background-color: var(--cds-layer-accent);
4563
+ color: var(--cds-text-primary, #161616);
4564
+ text-align: start;
4565
+ vertical-align: middle;
4566
+ }
4567
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr th .cds--table-header-label {
4568
+ text-align: left;
4569
+ }
4570
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody {
4671
4571
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4672
4572
  font-weight: var(--cds-body-compact-01-font-weight, 400);
4673
4573
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
4674
4574
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4575
+ background-color: var(--cds-layer);
4576
+ width: 100%;
4675
4577
  }
4676
-
4677
- .cds--definition-term {
4678
- box-sizing: border-box;
4679
- padding: 0;
4680
- border: 0;
4681
- margin: 0;
4682
- font-family: inherit;
4683
- font-size: 100%;
4684
- vertical-align: baseline;
4685
- display: inline-block;
4686
- padding: 0;
4687
- border: 0;
4688
- appearance: none;
4689
- background: none;
4690
- cursor: pointer;
4691
- text-align: start;
4692
- inline-size: 100%;
4693
- border-block-end: 1px dotted var(--cds-border-strong);
4694
- border-radius: 0;
4695
- color: var(--cds-text-primary, #161616);
4696
- }
4697
- .cds--definition-term *,
4698
- .cds--definition-term *::before,
4699
- .cds--definition-term *::after {
4700
- box-sizing: inherit;
4701
- }
4702
- .cds--definition-term::-moz-focus-inner {
4703
- border: 0;
4578
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr {
4579
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
4580
+ width: 100;
4581
+ height: 3rem;
4582
+ border: none;
4704
4583
  }
4705
-
4706
- .cds--definition-term:focus {
4707
- outline: 1px solid var(--cds-focus, #0f62fe);
4708
- border-block-end-color: var(--cds-border-interactive, #0f62fe);
4584
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr:hover {
4585
+ background: var(--cds-layer-hover) !important;
4709
4586
  }
4710
- @media screen and (prefers-contrast) {
4711
- .cds--definition-term:focus {
4712
- outline-style: dotted;
4713
- }
4587
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr td {
4588
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
4589
+ padding-right: 1rem;
4590
+ padding-left: 1rem;
4591
+ border-top: 1px solid var(--cds-layer);
4592
+ border-bottom: 1px solid var(--cds-border-subtle);
4593
+ color: var(--cds-text-secondary, #525252);
4594
+ text-align: left;
4595
+ vertical-align: middle;
4714
4596
  }
4715
-
4716
- .cds--definition-term:hover {
4717
- border-block-end-color: var(--cds-border-interactive, #0f62fe);
4597
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer {
4598
+ background-color: transparent;
4599
+ display: flex;
4600
+ height: 4rem;
4601
+ justify-content: flex-end;
4602
+ margin-top: auto;
4603
+ grid-column: 1/-1;
4604
+ grid-row: -1/-1;
4718
4605
  }
4719
-
4720
- .cds--definition-tooltip {
4721
- font-size: var(--cds-body-01-font-size, 0.875rem);
4722
- font-weight: var(--cds-body-01-font-weight, 400);
4723
- line-height: var(--cds-body-01-line-height, 1.42857);
4724
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
4725
- padding: 0.5rem 1rem;
4726
- max-inline-size: 11rem;
4606
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--cc-modal-footer-spacer {
4607
+ width: 50%;
4727
4608
  }
4728
-
4729
- .cds--btn {
4609
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn {
4610
+ max-width: none;
4611
+ height: 4rem;
4612
+ flex: 0 1 50%;
4613
+ align-items: baseline;
4614
+ padding-top: 0.875rem;
4615
+ padding-bottom: 2rem;
4616
+ margin: 0;
4730
4617
  --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
4731
4618
  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
4732
- --temp-1lh: (
4733
- var(--cds-body-compact-01-line-height, 1.28572) * 1em
4734
- );
4735
- --temp-expressive-1lh: (
4736
- var(--cds-body-compact-02-line-height, 1.375) * 1em
4737
- );
4738
- --temp-padding-block-max: calc(
4739
- (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
4740
- 0.0625rem
4741
- );
4619
+ --temp-1lh: ( var(--cds-body-compact-01-line-height, 1.28572) * 1em );
4620
+ --temp-expressive-1lh: ( var(--cds-body-compact-02-line-height, 1.375) * 1em );
4621
+ --temp-padding-block-max: calc( (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 - .0625rem );
4742
4622
  box-sizing: border-box;
4743
4623
  padding: 0;
4744
4624
  border: 0;
4745
- margin: 0;
4746
4625
  font-family: inherit;
4747
- font-size: 100%;
4748
- vertical-align: baseline;
4749
4626
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4750
4627
  font-weight: var(--cds-body-compact-01-font-weight, 400);
4751
4628
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
4752
4629
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4753
4630
  position: relative;
4754
4631
  display: inline-flex;
4755
- flex-shrink: 0;
4632
+ width: max-content;
4633
+ max-width: 20rem;
4634
+ min-height: var(--cds-layout-size-height-local);
4756
4635
  justify-content: space-between;
4757
- margin: 0;
4758
4636
  border-radius: 0;
4759
4637
  cursor: pointer;
4760
- inline-size: max-content;
4761
- max-inline-size: 20rem;
4762
- min-block-size: var(--cds-layout-size-height-local);
4763
4638
  outline: none;
4764
4639
  padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
4765
4640
  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
4766
4641
  padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
4767
- text-align: start;
4642
+ text-align: left;
4768
4643
  text-decoration: none;
4769
4644
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
4770
4645
  vertical-align: top;
4771
4646
  }
4772
- .cds--btn *,
4773
- .cds--btn *::before,
4774
- .cds--btn *::after {
4775
- box-sizing: inherit;
4776
- }
4777
- .cds--btn:disabled, .cds--btn:hover:disabled, .cds--btn:focus:disabled, .cds--btn.cds--btn--disabled, .cds--btn.cds--btn--disabled:hover, .cds--btn.cds--btn--disabled:focus {
4778
- border-color: var(--cds-button-disabled, #c6c6c6);
4779
- background: var(--cds-button-disabled, #c6c6c6);
4780
- box-shadow: none;
4781
- color: var(--cds-text-on-color-disabled, #8d8d8d);
4782
- cursor: not-allowed;
4783
- }
4784
- .cds--btn .cds--btn__icon {
4785
- position: absolute;
4786
- flex-shrink: 0;
4787
- block-size: 1rem;
4788
- inline-size: 1rem;
4789
- inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4790
- inset-inline-end: var(--cds-layout-density-padding-inline-local);
4791
- margin-block-start: 0.0625rem;
4792
- }
4793
-
4794
- .cds--btn::-moz-focus-inner {
4795
- padding: 0;
4796
- border: 0;
4797
- }
4798
-
4799
- .cds--btn--primary {
4647
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary {
4800
4648
  border-width: 1px;
4801
4649
  border-style: solid;
4802
4650
  border-color: transparent;
4803
4651
  background-color: var(--cds-button-primary, #0f62fe);
4804
4652
  color: var(--cds-text-on-color, #ffffff);
4805
4653
  }
4806
- .cds--btn--primary:hover {
4807
- background-color: var(--cds-button-primary-hover, #0050e6);
4808
- }
4809
- .cds--btn--primary:focus {
4810
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
4811
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4812
- }
4813
- .cds--btn--primary:active {
4814
- background-color: var(--cds-button-primary-active, #002d9c);
4815
- }
4816
- .cds--btn--primary .cds--btn__icon,
4817
- .cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
4818
- fill: currentColor;
4819
- }
4820
- .cds--btn--primary:hover {
4821
- color: var(--cds-text-on-color, #ffffff);
4822
- }
4823
-
4824
- .cds--btn--secondary {
4825
- border-width: 1px;
4826
- border-style: solid;
4827
- border-color: transparent;
4828
- background-color: var(--cds-button-secondary, #393939);
4829
- color: var(--cds-text-on-color, #ffffff);
4830
- }
4831
- .cds--btn--secondary:hover {
4832
- background-color: var(--cds-button-secondary-hover, #474747);
4833
- }
4834
- .cds--btn--secondary:focus {
4835
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
4836
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4837
- }
4838
- .cds--btn--secondary:active {
4839
- background-color: var(--cds-button-secondary-active, #6f6f6f);
4840
- }
4841
- .cds--btn--secondary .cds--btn__icon,
4842
- .cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
4843
- fill: currentColor;
4844
- }
4845
- .cds--btn--secondary:hover, .cds--btn--secondary:focus {
4654
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary:hover {
4846
4655
  color: var(--cds-text-on-color, #ffffff);
4656
+ background-color: var(--cds-button-primary-hover, #0050e6);
4847
4657
  }
4848
-
4849
- .cds--btn--tertiary {
4850
- border-width: 1px;
4851
- border-style: solid;
4852
- border-color: var(--cds-button-tertiary, #0f62fe);
4853
- background-color: transparent;
4854
- color: var(--cds-button-tertiary, #0f62fe);
4855
- }
4856
- .cds--btn--tertiary:hover {
4857
- background-color: var(--cds-button-tertiary-hover, #0050e6);
4858
- }
4859
- .cds--btn--tertiary:focus {
4860
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
4861
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4862
- }
4863
- .cds--btn--tertiary:active {
4864
- background-color: var(--cds-button-tertiary-active, #002d9c);
4865
- }
4866
- .cds--btn--tertiary .cds--btn__icon,
4867
- .cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
4868
- fill: currentColor;
4869
- }
4870
- .cds--btn--tertiary:hover {
4871
- color: var(--cds-text-inverse, #ffffff);
4872
- }
4873
- .cds--btn--tertiary:focus {
4874
- background-color: var(--cds-button-tertiary, #0f62fe);
4875
- color: var(--cds-text-inverse, #ffffff);
4876
- }
4877
- .cds--btn--tertiary:active {
4878
- border-color: transparent;
4879
- background-color: var(--cds-button-tertiary-active, #002d9c);
4880
- color: var(--cds-text-inverse, #ffffff);
4881
- }
4882
- .cds--btn--tertiary:disabled, .cds--btn--tertiary:hover:disabled, .cds--btn--tertiary:focus:disabled, .cds--btn--tertiary.cds--btn--disabled, .cds--btn--tertiary.cds--btn--disabled:hover, .cds--btn--tertiary.cds--btn--disabled:focus {
4883
- background: transparent;
4884
- color: var(--cds-text-on-color-disabled, #8d8d8d);
4885
- outline: none;
4886
- }
4887
-
4888
- .cds--btn--ghost {
4889
- border-width: 1px;
4890
- border-style: solid;
4891
- border-color: transparent;
4892
- background-color: transparent;
4893
- color: var(--cds-link-primary, #0f62fe);
4894
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
4895
- }
4896
- .cds--btn--ghost:hover {
4897
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
4898
- }
4899
- .cds--btn--ghost:focus {
4658
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary:focus {
4900
4659
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
4901
4660
  box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4902
4661
  }
4903
- .cds--btn--ghost:active {
4904
- background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
4905
- }
4906
- .cds--btn--ghost .cds--btn__icon,
4907
- .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
4908
- fill: currentColor;
4909
- }
4910
- .cds--btn--ghost .cds--btn__icon {
4911
- position: static;
4912
- margin-inline-start: 0.5rem;
4913
- }
4914
- .cds--btn--ghost:hover, .cds--btn--ghost:active {
4915
- color: var(--cds-link-primary-hover, #0043ce);
4916
- }
4917
- .cds--btn--ghost:active {
4918
- background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
4919
- }
4920
- .cds--btn--ghost:disabled, .cds--btn--ghost:hover:disabled, .cds--btn--ghost:focus:disabled, .cds--btn--ghost.cds--btn--disabled, .cds--btn--ghost.cds--btn--disabled:hover, .cds--btn--ghost.cds--btn--disabled:focus {
4921
- border-color: transparent;
4922
- background: transparent;
4923
- color: var(--cds-text-on-color-disabled, #8d8d8d);
4924
- outline: none;
4925
- }
4926
- .cds--btn--ghost:not([disabled]) svg {
4927
- fill: var(--cds-icon-primary, #161616);
4928
- }
4929
-
4930
- .cds--btn--icon-only {
4931
- justify-content: center;
4932
- padding: 0;
4933
- block-size: var(--cds-layout-size-height-local);
4934
- inline-size: var(--cds-layout-size-height-local);
4935
- padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
4936
- }
4937
- .cds--btn--icon-only > :first-child {
4938
- margin-block-start: 0.0625rem;
4939
- min-inline-size: 1rem;
4940
- }
4941
- .cds--btn--icon-only .cds--btn__icon {
4942
- position: static;
4943
- }
4944
- .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
4945
- margin: 0;
4946
- }
4947
-
4948
- .cds--btn--icon-only.cds--btn--selected {
4949
- background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
4950
- }
4951
-
4952
- .cds--btn path[data-icon-path=inner-path] {
4953
- fill: none;
4954
- }
4955
-
4956
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
4957
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
4958
- fill: var(--cds-icon-primary, #161616);
4959
- }
4960
-
4961
- .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
4962
- .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
4963
- .cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
4964
- fill: var(--cds-icon-on-color-disabled, #8d8d8d);
4965
- }
4966
-
4967
- .cds--btn--ghost.cds--btn--icon-only[disabled] {
4968
- cursor: not-allowed;
4969
- }
4970
-
4971
- .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
4972
- cursor: not-allowed;
4973
- }
4974
-
4975
- .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
4976
- pointer-events: none;
4977
- }
4978
4662
 
4979
- .cds--btn--danger {
4980
- border-width: 1px;
4981
- border-style: solid;
4982
- border-color: transparent;
4983
- background-color: var(--cds-button-danger-primary, #da1e28);
4984
- color: var(--cds-text-on-color, #ffffff);
4985
- }
4986
- .cds--btn--danger:hover {
4987
- background-color: var(--cds-button-danger-hover, #b81921);
4988
- }
4989
- .cds--btn--danger:focus {
4990
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
4991
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4992
- }
4993
- .cds--btn--danger:active {
4994
- background-color: var(--cds-button-danger-active, #750e13);
4995
- }
4996
- .cds--btn--danger .cds--btn__icon,
4997
- .cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
4998
- fill: currentColor;
4999
- }
5000
- .cds--btn--danger:hover {
5001
- color: var(--cds-text-on-color, #ffffff);
5002
- }
5003
- .cds--btn--danger--tertiary {
5004
- border-width: 1px;
5005
- border-style: solid;
5006
- border-color: var(--cds-button-danger-secondary, #da1e28);
5007
- background-color: transparent;
5008
- color: var(--cds-button-danger-secondary, #da1e28);
5009
- }
5010
- .cds--btn--danger--tertiary:hover {
5011
- background-color: var(--cds-button-danger-hover, #b81921);
5012
- }
5013
- .cds--btn--danger--tertiary:focus {
5014
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
5015
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
4663
+ @supports (-moz-appearance: none) {
4664
+ .cds--data-table td {
4665
+ background-clip: padding-box;
4666
+ }
5016
4667
  }
5017
- .cds--btn--danger--tertiary:active {
5018
- background-color: var(--cds-button-danger-active, #750e13);
5019
- }
5020
- .cds--btn--danger--tertiary .cds--btn__icon,
5021
- .cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
5022
- fill: currentColor;
5023
- }
5024
- .cds--btn--danger--tertiary:hover {
5025
- border-color: var(--cds-button-danger-hover, #b81921);
5026
- color: var(--cds-text-on-color, #ffffff);
5027
- }
5028
- .cds--btn--danger--tertiary:focus {
5029
- background-color: var(--cds-button-danger-primary, #da1e28);
5030
- color: var(--cds-text-on-color, #ffffff);
5031
- }
5032
- .cds--btn--danger--tertiary:active {
5033
- border-color: var(--cds-button-danger-active, #750e13);
5034
- background-color: var(--cds-button-danger-active, #750e13);
5035
- color: var(--cds-text-on-color, #ffffff);
5036
- }
5037
- .cds--btn--danger--tertiary:disabled, .cds--btn--danger--tertiary:hover:disabled, .cds--btn--danger--tertiary:focus:disabled, .cds--btn--danger--tertiary.cds--btn--disabled, .cds--btn--danger--tertiary.cds--btn--disabled:hover, .cds--btn--danger--tertiary.cds--btn--disabled:focus {
5038
- background: transparent;
5039
- color: var(--cds-text-on-color-disabled, #8d8d8d);
5040
- outline: none;
5041
- }
5042
- .cds--btn--danger--ghost {
5043
- border-width: 1px;
5044
- border-style: solid;
5045
- border-color: transparent;
5046
- background-color: transparent;
5047
- color: var(--cds-button-danger-secondary, #da1e28);
5048
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
5049
- }
5050
- .cds--btn--danger--ghost:hover {
5051
- background-color: var(--cds-button-danger-hover, #b81921);
5052
- }
5053
- .cds--btn--danger--ghost:focus {
5054
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
5055
- box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
5056
- }
5057
- .cds--btn--danger--ghost:active {
5058
- background-color: var(--cds-button-danger-active, #750e13);
5059
- }
5060
- .cds--btn--danger--ghost .cds--btn__icon,
5061
- .cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
5062
- fill: currentColor;
5063
- }
5064
- .cds--btn--danger--ghost .cds--btn__icon {
5065
- position: static;
5066
- margin-inline-start: 0.5rem;
5067
- }
5068
- .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
5069
- color: var(--cds-text-on-color, #ffffff);
5070
- }
5071
- .cds--btn--danger--ghost:disabled, .cds--btn--danger--ghost:hover:disabled, .cds--btn--danger--ghost:focus:disabled, .cds--btn--danger--ghost.cds--btn--disabled, .cds--btn--danger--ghost.cds--btn--disabled:hover, .cds--btn--danger--ghost.cds--btn--disabled:focus {
5072
- border-color: transparent;
5073
- background: transparent;
5074
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
5075
- outline: none;
5076
- }
5077
-
5078
- .cds--btn--expressive {
5079
- font-size: var(--cds-body-compact-02-font-size, 1rem);
5080
- font-weight: var(--cds-body-compact-02-font-weight, 400);
5081
- line-height: var(--cds-body-compact-02-line-height, 1.375);
5082
- letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
5083
- padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
5084
- }
5085
-
5086
- .cds--btn--icon-only.cds--btn--expressive {
5087
- padding: 12px 13px;
5088
- }
5089
-
5090
- .cds--btn.cds--btn--expressive .cds--btn__icon {
5091
- block-size: 1.25rem;
5092
- inline-size: 1.25rem;
5093
- }
5094
-
5095
- .cds--btn-set .cds--btn.cds--btn--expressive {
5096
- max-inline-size: 20rem;
5097
- }
5098
-
5099
- .cds--btn.cds--skeleton {
5100
- position: relative;
5101
- padding: 0;
5102
- border: none;
5103
- background: var(--cds-skeleton-background, #e8e8e8);
5104
- box-shadow: none;
5105
- pointer-events: none;
5106
- inline-size: 9.375rem;
5107
- }
5108
- .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
5109
- border: none;
5110
- cursor: default;
5111
- outline: none;
5112
- }
5113
- .cds--btn.cds--skeleton::before {
5114
- position: absolute;
5115
- animation: 3000ms ease-in-out skeleton infinite;
5116
- background: var(--cds-skeleton-element, #c6c6c6);
5117
- block-size: 100%;
5118
- content: "";
5119
- inline-size: 100%;
5120
- will-change: transform-origin, transform, opacity;
5121
- }
5122
- @media (prefers-reduced-motion: reduce) {
5123
- .cds--btn.cds--skeleton::before {
5124
- animation: none;
5125
- }
5126
- }
5127
-
5128
- .cds--btn-set {
5129
- display: flex;
5130
- }
5131
-
5132
- .cds--btn-set--stacked {
5133
- flex-direction: column;
5134
- }
5135
-
5136
- .cds--btn-set .cds--btn {
5137
- inline-size: 100%;
5138
- max-inline-size: 12.25rem;
5139
- }
5140
- .cds--btn-set .cds--btn:not(:focus) {
5141
- box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
5142
- }
5143
- .cds--btn-set .cds--btn:first-of-type:not(:focus) {
5144
- box-shadow: inherit;
5145
- }
5146
-
5147
- .cds--btn-set .cds--btn:focus + .cds--btn {
5148
- box-shadow: inherit;
5149
- }
5150
-
5151
- .cds--btn-set--stacked .cds--btn:not(:focus) {
5152
- box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
5153
- }
5154
-
5155
- .cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
5156
- box-shadow: inherit;
5157
- }
5158
-
5159
- .cds--btn-set .cds--btn.cds--btn--disabled {
5160
- box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
5161
- }
5162
- .cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
5163
- box-shadow: none;
5164
- }
5165
-
5166
- .cds--btn-set--stacked .cds--btn.cds--btn--disabled {
5167
- box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
5168
- }
5169
- .cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
5170
- box-shadow: none;
5171
- }
5172
-
5173
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5174
- .cds--btn:focus {
5175
- color: Highlight;
5176
- outline: 1px solid Highlight;
5177
- }
5178
- }
5179
-
5180
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5181
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
5182
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
5183
- fill: ButtonText;
5184
- }
5185
- }
5186
-
5187
- [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
5188
- box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
5189
- }
5190
-
5191
- .cds--cc--grid-brush g.grid-brush rect.selection {
5192
- fill: none;
5193
- fill-opacity: 0;
5194
- stroke: none;
5195
- }
5196
-
5197
- .cds--cc--grid-brush rect.frontSelection {
5198
- fill: var(--cds-layer-accent-01, #e0e0e0);
5199
- fill-opacity: 0.3;
5200
- stroke: var(--cds-button-tertiary, #0f62fe);
5201
- }
5202
-
5203
- .cds--cc--highlight rect.highlight-bar {
5204
- pointer-events: none;
5205
- fill: #ee5396;
5206
- stroke: #ee5396;
5207
- }
5208
-
5209
- .cds--cc--layout-row {
5210
- display: flex;
5211
- flex-direction: row;
5212
- }
5213
- .cds--cc--layout-column {
5214
- display: flex;
5215
- flex-direction: column;
5216
- }
5217
- .cds--cc--layout-row-reverse {
5218
- display: flex;
5219
- flex-direction: row-reverse;
5220
- }
5221
- .cds--cc--layout-column-reverse {
5222
- display: flex;
5223
- flex-direction: column-reverse;
5224
- }
5225
- .cds--cc--layout-alignitems-center {
5226
- align-items: center;
5227
- }
5228
-
5229
- .cds--cc--chart-wrapper .layout-child {
5230
- overflow: visible;
5231
- }
5232
-
5233
- .cds--cc--chart-wrapper svg.layout-svg-wrapper {
5234
- height: inherit;
5235
- width: inherit;
5236
- overflow: visible;
5237
- }
5238
-
5239
- div.cds--cc--legend {
5240
- font-family: var(--cds-charts-font-family-condensed);
5241
- display: flex;
5242
- user-select: none;
5243
- -webkit-flex-wrap: wrap;
5244
- flex-wrap: wrap;
5245
- }
5246
- div.cds--cc--legend[data-name=legend-items] {
5247
- width: 100%;
5248
- margin: -5px;
5249
- }
5250
- div.cds--cc--legend div.legend-item {
5251
- display: flex;
5252
- align-items: center;
5253
- margin: 5px;
5254
- }
5255
- div.cds--cc--legend div.legend-item div.checkbox {
5256
- width: 13px;
5257
- height: 13px;
5258
- margin-right: 4px;
5259
- border-radius: 2px;
5260
- border: solid 1px var(--cds-background, #ffffff);
5261
- box-shadow: 0 0 0 2px transparent;
5262
- }
5263
- @media (forced-colors: active) {
5264
- div.cds--cc--legend div.legend-item div.checkbox {
5265
- forced-color-adjust: none;
5266
- }
5267
- }
5268
- div.cds--cc--legend div.legend-item div.checkbox:not(.active) {
5269
- border-color: var(--cds-text-secondary, #525252);
5270
- background: var(--cds-background, #ffffff);
5271
- }
5272
- div.cds--cc--legend div.legend-item div.checkbox svg {
5273
- display: none;
5274
- vertical-align: text-top;
5275
- fill: var(--cds-background, #ffffff);
5276
- stroke: var(--cds-background, #ffffff);
5277
- }
5278
- div.cds--cc--legend div.legend-item.additional svg.icon {
5279
- margin-right: 4px;
5280
- }
5281
- div.cds--cc--legend div.legend-item p {
5282
- font-size: 12px;
5283
- fill: var(--cds-text-secondary, #525252);
5284
- line-height: 1rem;
5285
- }
5286
- div.cds--cc--legend.center-aligned {
5287
- justify-content: center;
5288
- }
5289
- div.cds--cc--legend.right-aligned {
5290
- justify-content: flex-end;
5291
- }
5292
- div.cds--cc--legend.has-deactivated-items div.legend-item div.checkbox svg {
5293
- display: block;
5294
- }
5295
- div.cds--cc--legend.vertical {
5296
- margin: -5px;
5297
- flex-direction: column;
5298
- }
5299
- div.cds--cc--legend.vertical div.legend-item {
5300
- margin-right: 0;
5301
- margin-bottom: 10px;
5302
- }
5303
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover {
5304
- cursor: pointer;
5305
- }
5306
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox {
5307
- border: solid 1px var(--cds-background, #ffffff);
5308
- box-shadow: 0 0 0 2px #0f62fe;
5309
- }
5310
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox:not(.active) {
5311
- border-color: var(--cds-text-secondary, #525252);
5312
- }
5313
-
5314
- .cds--cc--meter-title {
5315
- overflow: visible;
5316
- }
5317
- .cds--cc--meter-title text.meter-title,
5318
- .cds--cc--meter-title text.proportional-meter-title,
5319
- .cds--cc--meter-title text.proportional-meter-total,
5320
- .cds--cc--meter-title text.percent-value {
5321
- fill: var(--cds-text-primary, #161616);
5322
- }
5323
- .cds--cc--meter-title g.status-indicator.status--danger circle.status {
5324
- fill: var(--cds-support-error, #da1e28);
5325
- }
5326
- .cds--cc--meter-title g.status-indicator.status--warning circle.status {
5327
- fill: var(--cds-support-warning, #f1c21b);
5328
- }
5329
- .cds--cc--meter-title g.status-indicator.status--warning path.innerFill {
5330
- fill: #000000;
5331
- }
5332
- .cds--cc--meter-title g.status-indicator.status--success circle.status {
5333
- fill: var(--cds-support-success, #24a148);
5334
- }
5335
- .cds--cc--meter-title g.status-indicator path.innerFill {
5336
- fill: var(--cds-layer-01-absolute, #ffffff);
5337
- }
5338
-
5339
- .cds--modal {
5340
- position: fixed;
5341
- z-index: 9000;
5342
- display: flex;
5343
- align-items: center;
5344
- justify-content: center;
5345
- background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
5346
- block-size: 100vh;
5347
- content: "";
5348
- inline-size: 100vw;
5349
- inset-block-start: 0;
5350
- inset-inline-start: 0;
5351
- opacity: 0;
5352
- transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
5353
- visibility: hidden;
5354
- }
5355
- .cds--modal.is-visible {
5356
- opacity: 1;
5357
- transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
5358
- visibility: inherit;
5359
- }
5360
- @media screen and (prefers-reduced-motion: reduce) {
5361
- .cds--modal.is-visible {
5362
- transition: none;
5363
- }
5364
- }
5365
- .cds--modal .cds--pagination,
5366
- .cds--modal .cds--pagination__control-buttons,
5367
- .cds--modal .cds--text-input,
5368
- .cds--modal .cds--text-area,
5369
- .cds--modal .cds--search-input,
5370
- .cds--modal .cds--select-input,
5371
- .cds--modal .cds--dropdown,
5372
- .cds--modal .cds--dropdown-list,
5373
- .cds--modal .cds--number input[type=number],
5374
- .cds--modal .cds--date-picker__input,
5375
- .cds--modal .cds--multi-select,
5376
- .cds--modal .cds--number__control-btn::before,
5377
- .cds--modal .cds--number__control-btn::after,
5378
- .cds--modal .cds--list-box input[role=combobox] {
5379
- background-color: var(--cds-field-02, #ffffff);
5380
- }
5381
- .cds--modal .cds--list-box__menu {
5382
- background-color: var(--cds-layer-02, #ffffff);
5383
- }
5384
- .cds--modal .cds--number__rule-divider {
5385
- background-color: var(--cds-border-subtle-02, #e0e0e0);
5386
- }
5387
- .cds--modal .cds--list-box__menu-item__option {
5388
- border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
5389
- }
5390
- .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
5391
- border-block-start-color: var(--cds-layer-hover-02, #e8e8e8);
5392
- }
5393
- .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
5394
- border-block-start-color: var(--cds-layer-selected-hover-02, #d1d1d1);
5395
- }
5396
- .cds--modal .cds--text-input--fluid .cds--text-input,
5397
- .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
5398
- .cds--modal .cds--text-area--fluid .cds--text-area,
5399
- .cds--modal .cds--search--fluid .cds--search-input,
5400
- .cds--modal .cds--select--fluid .cds--select-input,
5401
- .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
5402
- .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
5403
- .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
5404
- .cds--modal .cds--number-input--fluid input[type=number],
5405
- .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
5406
- .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
5407
- .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
5408
- background-color: var(--cds-field-01, #f4f4f4);
5409
- }
5410
- .cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
5411
- background-color: var(--cds-layer-01, #f4f4f4);
5412
- }
5413
- .cds--modal .cds--list-box__menu-item:hover {
5414
- background-color: var(--cds-layer-hover-02, #e8e8e8);
5415
- }
5416
- .cds--modal .cds--list-box__menu-item--active {
5417
- background-color: var(--cds-layer-selected-02, #e0e0e0);
5418
- }
5419
- .cds--modal .cds--list-box__menu-item--active:hover {
5420
- background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
5421
- }
5422
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
5423
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
5424
- background-color: var(--cds-field-hover);
5425
- }
5426
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
5427
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
5428
- border-inline-start: 2px solid var(--cds-focus, #0f62fe);
5429
- }
5430
-
5431
- .cds--modal.is-visible .cds--modal-container {
5432
- transform: translate3d(0, 0, 0);
5433
- transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
5434
- }
5435
-
5436
- .cds--modal-container {
5437
- position: fixed;
5438
- display: grid;
5439
- overflow: hidden;
5440
- background-color: var(--cds-layer);
5441
- block-size: 100%;
5442
- grid-template-columns: 100%;
5443
- grid-template-rows: auto 1fr auto;
5444
- inline-size: 100%;
5445
- inset-block-start: 0;
5446
- max-block-size: 100%;
5447
- outline: 3px solid transparent;
5448
- outline-offset: -3px;
5449
- transform: translate3d(0, -24px, 0);
5450
- transform-origin: top center;
5451
- transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
5452
- }
5453
- @media (min-width: 42rem) {
5454
- .cds--modal-container {
5455
- position: static;
5456
- block-size: auto;
5457
- inline-size: 84%;
5458
- max-block-size: 90%;
5459
- }
5460
- }
5461
- @media (min-width: 66rem) {
5462
- .cds--modal-container {
5463
- inline-size: 60%;
5464
- max-block-size: 84%;
5465
- }
5466
- }
5467
- @media (min-width: 82rem) {
5468
- .cds--modal-container {
5469
- inline-size: 48%;
5470
- }
5471
- }
5472
- .cds--modal-container .cds--modal-container-body {
5473
- display: contents;
5474
- }
5475
-
5476
- .cds--modal-content {
5477
- font-size: var(--cds-body-01-font-size, 0.875rem);
5478
- font-weight: var(--cds-body-01-font-weight, 400);
5479
- line-height: var(--cds-body-01-line-height, 1.42857);
5480
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
5481
- position: relative;
5482
- color: var(--cds-text-primary, #161616);
5483
- font-weight: 400;
5484
- grid-column: 1/-1;
5485
- grid-row: 2/-2;
5486
- margin-block-end: 3rem;
5487
- overflow-y: auto;
5488
- padding-block-start: 0.5rem;
5489
- padding-inline-end: 1rem;
5490
- padding-inline-start: 1rem;
5491
- }
5492
- .cds--modal-content:focus {
5493
- outline: 2px solid var(--cds-focus, #0f62fe);
5494
- outline-offset: -2px;
5495
- }
5496
- @media screen and (prefers-contrast) {
5497
- .cds--modal-content:focus {
5498
- outline-style: dotted;
5499
- }
5500
- }
5501
-
5502
- .cds--modal-content .cds--form--fluid {
5503
- margin-inline-end: -1rem;
5504
- margin-inline-start: -1rem;
5505
- }
5506
-
5507
- .cds--modal-content > p,
5508
- .cds--modal-content__regular-content {
5509
- font-size: var(--cds-body-01-font-size, 0.875rem);
5510
- font-weight: var(--cds-body-01-font-weight, 400);
5511
- line-height: var(--cds-body-01-line-height, 1.42857);
5512
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
5513
- padding-inline-end: calc(20% - 2rem);
5514
- }
5515
-
5516
- .cds--modal-content--with-form {
5517
- padding-inline-end: 1rem;
5518
- }
5519
-
5520
- .cds--modal-header {
5521
- grid-column: 1/-1;
5522
- grid-row: 1/1;
5523
- margin-block-end: 0.5rem;
5524
- padding-block-start: 1rem;
5525
- padding-inline-end: 3rem;
5526
- padding-inline-start: 1rem;
5527
- }
5528
-
5529
- .cds--modal-header__label {
5530
- box-sizing: border-box;
5531
- padding: 0;
5532
- border: 0;
5533
- margin: 0;
5534
- font-family: inherit;
5535
- font-size: 100%;
5536
- vertical-align: baseline;
5537
- font-size: var(--cds-label-01-font-size, 0.75rem);
5538
- font-weight: var(--cds-label-01-font-weight, 400);
5539
- line-height: var(--cds-label-01-line-height, 1.33333);
5540
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5541
- color: var(--cds-text-secondary, #525252);
5542
- margin-block-end: 0.25rem;
5543
- }
5544
- .cds--modal-header__label *,
5545
- .cds--modal-header__label *::before,
5546
- .cds--modal-header__label *::after {
5547
- box-sizing: inherit;
5548
- }
5549
-
5550
- .cds--modal-header__heading {
5551
- box-sizing: border-box;
5552
- padding: 0;
5553
- border: 0;
5554
- margin: 0;
5555
- font-family: inherit;
5556
- font-size: 100%;
5557
- vertical-align: baseline;
5558
- font-size: var(--cds-heading-03-font-size, 1.25rem);
5559
- font-weight: var(--cds-heading-03-font-weight, 400);
5560
- line-height: var(--cds-heading-03-line-height, 1.4);
5561
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
5562
- color: var(--cds-text-primary, #161616);
5563
- padding-inline-end: calc(20% - 3rem);
5564
- }
5565
- .cds--modal-header__heading *,
5566
- .cds--modal-header__heading *::before,
5567
- .cds--modal-header__heading *::after {
5568
- box-sizing: inherit;
5569
- }
5570
-
5571
- .cds--modal-container--xs .cds--modal-content__regular-content {
5572
- padding-inline-end: 1rem;
5573
- }
5574
- .cds--modal-container--xs .cds--modal-content > p {
5575
- padding-inline-end: 0;
5576
- }
5577
- @media (min-width: 42rem) {
5578
- .cds--modal-container--xs {
5579
- inline-size: 48%;
5580
- }
5581
- }
5582
- @media (min-width: 66rem) {
5583
- .cds--modal-container--xs {
5584
- inline-size: 32%;
5585
- max-block-size: 48%;
5586
- }
5587
- }
5588
- @media (min-width: 82rem) {
5589
- .cds--modal-container--xs {
5590
- inline-size: 24%;
5591
- }
5592
- }
5593
-
5594
- .cds--modal-container--sm .cds--modal-content__regular-content {
5595
- padding-inline-end: 1rem;
5596
- }
5597
- .cds--modal-container--sm .cds--modal-content > p {
5598
- padding-inline-end: 0;
5599
- }
5600
- @media (min-width: 42rem) {
5601
- .cds--modal-container--sm {
5602
- inline-size: 60%;
5603
- }
5604
- }
5605
- @media (min-width: 66rem) {
5606
- .cds--modal-container--sm {
5607
- inline-size: 42%;
5608
- max-block-size: 72%;
5609
- }
5610
- .cds--modal-container--sm .cds--modal-content > p,
5611
- .cds--modal-container--sm .cds--modal-content__regular-content {
5612
- padding-inline-end: 20%;
5613
- }
5614
- }
5615
- @media (min-width: 82rem) {
5616
- .cds--modal-container--sm {
5617
- inline-size: 36%;
5618
- }
5619
- }
5620
-
5621
- @media (min-width: 42rem) {
5622
- .cds--modal-container--lg {
5623
- inline-size: 96%;
5624
- }
5625
- }
5626
- @media (min-width: 66rem) {
5627
- .cds--modal-container--lg {
5628
- inline-size: 84%;
5629
- max-block-size: 96%;
5630
- }
5631
- }
5632
- @media (min-width: 82rem) {
5633
- .cds--modal-container--lg {
5634
- inline-size: 72%;
5635
- }
5636
- }
5637
-
5638
- .cds--modal-scroll-content > *:last-child {
5639
- padding-block-end: 2rem;
5640
- }
5641
-
5642
- .cds--modal-content--overflow-indicator {
5643
- position: absolute;
5644
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
5645
- block-size: 2rem;
5646
- content: "";
5647
- grid-column: 1/-1;
5648
- grid-row: 2/-2;
5649
- inline-size: 100%;
5650
- inset-block-end: 3rem;
5651
- inset-inline-start: 0;
5652
- pointer-events: none;
5653
- }
5654
-
5655
- @media not all and (min-resolution >= 0.001dpcm) {
5656
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
5657
- .cds--modal-content--overflow-indicator {
5658
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
5659
- }
5660
- }
5661
- }
5662
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
5663
- margin: 0 2px 2px;
5664
- inline-size: calc(100% - 4px);
5665
- }
5666
-
5667
- @media screen and (-ms-high-contrast: active) {
5668
- .cds--modal-scroll-content > *:last-child {
5669
- padding-block-end: 0;
5670
- }
5671
- .cds--modal-content--overflow-indicator {
5672
- display: none;
5673
- }
5674
- }
5675
- .cds--modal-footer {
5676
- display: flex;
5677
- justify-content: flex-end;
5678
- block-size: 4rem;
5679
- grid-column: 1/-1;
5680
- grid-row: -1/-1;
5681
- margin-block-start: auto;
5682
- }
5683
-
5684
- .cds--modal-footer .cds--btn {
5685
- flex: 0 1 50%;
5686
- align-items: baseline;
5687
- margin: 0;
5688
- block-size: 4rem;
5689
- max-inline-size: none;
5690
- padding-block-end: 2rem;
5691
- padding-block-start: 0.875rem;
5692
- }
5693
-
5694
- .cds--modal-footer--three-button .cds--btn {
5695
- flex: 0 1 25%;
5696
- align-items: flex-start;
5697
- }
5698
-
5699
- .cds--modal-close {
5700
- position: absolute;
5701
- z-index: 2;
5702
- overflow: hidden;
5703
- padding: 0.75rem;
5704
- border: 2px solid transparent;
5705
- background-color: transparent;
5706
- block-size: 3rem;
5707
- cursor: pointer;
5708
- inline-size: 3rem;
5709
- inset-block-start: 0;
5710
- inset-inline-end: 0;
5711
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5712
- }
5713
- .cds--modal-close:hover {
5714
- background-color: var(--cds-layer-hover);
5715
- }
5716
- .cds--modal-close:focus {
5717
- border-color: var(--cds-focus, #0f62fe);
5718
- outline: none;
5719
- }
5720
-
5721
- .cds--modal-close::-moz-focus-inner {
5722
- border: 0;
5723
- }
5724
-
5725
- .cds--modal-close__icon {
5726
- block-size: 1.25rem;
5727
- fill: var(--cds-icon-primary, #161616);
5728
- inline-size: 1.25rem;
5729
- }
5730
-
5731
- .cds--body--with-modal-open {
5732
- overflow: hidden;
5733
- }
5734
-
5735
- .cds--body--with-modal-open .cds--modal .cds--tooltip,
5736
- .cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
5737
- z-index: 9000;
5738
- }
5739
-
5740
- .cds--modal-container--full-width .cds--modal-content {
5741
- padding: 0;
5742
- margin: 0;
5743
- }
5744
-
5745
- /* stylelint-disable */
5746
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5747
- .cds--modal-close__icon {
5748
- fill: ButtonText;
5749
- }
5750
- }
5751
-
5752
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5753
- .cds--modal-close:focus {
5754
- color: Highlight;
5755
- outline: 1px solid Highlight;
5756
- }
5757
- }
5758
-
5759
- /* stylelint-enable */
5760
- input:-webkit-autofill,
5761
- input:-webkit-autofill:hover,
5762
- input:-webkit-autofill:focus,
5763
- textarea:-webkit-autofill,
5764
- textarea:-webkit-autofill:hover,
5765
- textarea:-webkit-autofill:focus {
5766
- box-shadow: 0 0 0 1000px var(--cds-field) inset;
5767
- -webkit-text-fill-color: var(--cds-text-primary, #161616);
5768
- }
5769
-
5770
- .cds--fieldset {
5771
- box-sizing: border-box;
5772
- padding: 0;
5773
- border: 0;
5774
- margin: 0;
5775
- font-family: inherit;
5776
- font-size: 100%;
5777
- vertical-align: baseline;
5778
- }
5779
- .cds--fieldset *,
5780
- .cds--fieldset *::before,
5781
- .cds--fieldset *::after {
5782
- box-sizing: inherit;
5783
- }
5784
-
5785
- .cds--form-item {
5786
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5787
- font-weight: var(--cds-body-compact-01-font-weight, 400);
5788
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
5789
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
5790
- display: flex;
5791
- flex: 1 1 auto;
5792
- flex-direction: column;
5793
- align-items: flex-start;
5794
- }
5795
-
5796
- .cds--label {
5797
- font-size: var(--cds-label-01-font-size, 0.75rem);
5798
- font-weight: var(--cds-label-01-font-weight, 400);
5799
- line-height: var(--cds-label-01-line-height, 1.33333);
5800
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5801
- display: inline-block;
5802
- color: var(--cds-text-secondary, #525252);
5803
- font-weight: 400;
5804
- line-height: 1rem;
5805
- margin-block-end: 0.5rem;
5806
- vertical-align: baseline;
5807
- }
5808
- .cds--label html {
5809
- font-size: 100%;
5810
- }
5811
- .cds--label body {
5812
- font-weight: 400;
5813
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
5814
- -moz-osx-font-smoothing: grayscale;
5815
- -webkit-font-smoothing: antialiased;
5816
- text-rendering: optimizeLegibility;
5817
- }
5818
- .cds--label code {
5819
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
5820
- }
5821
- .cds--label strong {
5822
- font-weight: 600;
5823
- }
5824
-
5825
- .cds--label .cds--toggletip-label {
5826
- font-size: var(--cds-label-01-font-size, 0.75rem);
5827
- font-weight: var(--cds-label-01-font-weight, 400);
5828
- line-height: var(--cds-label-01-line-height, 1.33333);
5829
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5830
- }
5831
-
5832
- .cds--label--no-margin {
5833
- margin-block-end: 0;
5834
- }
5835
-
5836
- .cds--label + .cds--tooltip {
5837
- position: relative;
5838
- inset-block-start: 0.2rem;
5839
- inset-inline-start: 0.5rem;
5840
- }
5841
-
5842
- .cds--label + .cds--tooltip .cds--tooltip__trigger {
5843
- box-sizing: border-box;
5844
- padding: 0;
5845
- border: 0;
5846
- margin: 0;
5847
- font-family: inherit;
5848
- font-size: 100%;
5849
- vertical-align: baseline;
5850
- display: inline-block;
5851
- padding: 0;
5852
- border: 0;
5853
- appearance: none;
5854
- background: none;
5855
- cursor: pointer;
5856
- text-align: start;
5857
- inline-size: 100%;
5858
- display: flex;
5859
- align-items: center;
5860
- justify-content: center;
5861
- font-size: var(--cds-label-01-font-size, 0.75rem);
5862
- font-weight: var(--cds-label-01-font-weight, 400);
5863
- line-height: var(--cds-label-01-line-height, 1.33333);
5864
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
5865
- }
5866
- .cds--label + .cds--tooltip .cds--tooltip__trigger *,
5867
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
5868
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
5869
- box-sizing: inherit;
5870
- }
5871
- .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
5872
- border: 0;
5873
- }
5874
-
5875
- .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
5876
- outline: 1px solid var(--cds-focus, #0f62fe);
5877
- }
5878
-
5879
- .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
5880
- fill: var(--cds-icon-secondary, #525252);
5881
- }
5882
-
5883
- .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
5884
- fill: var(--cds-icon-primary, #161616);
5885
- }
5886
-
5887
- .cds--label + .cds--toggletip {
5888
- inset-block-start: 0.2rem;
5889
- inset-inline-start: 0.5rem;
5890
- }
5891
-
5892
- .cds--label.cds--skeleton {
5893
- position: relative;
5894
- padding: 0;
5895
- border: none;
5896
- background: var(--cds-skeleton-background, #e8e8e8);
5897
- box-shadow: none;
5898
- pointer-events: none;
5899
- block-size: 0.875rem;
5900
- inline-size: 4.6875rem;
5901
- }
5902
- .cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active {
5903
- border: none;
5904
- cursor: default;
5905
- outline: none;
5906
- }
5907
- .cds--label.cds--skeleton::before {
5908
- position: absolute;
5909
- animation: 3000ms ease-in-out skeleton infinite;
5910
- background: var(--cds-skeleton-element, #c6c6c6);
5911
- block-size: 100%;
5912
- content: "";
5913
- inline-size: 100%;
5914
- will-change: transform-origin, transform, opacity;
5915
- }
5916
- @media (prefers-reduced-motion: reduce) {
5917
- .cds--label.cds--skeleton::before {
5918
- animation: none;
5919
- }
5920
- }
5921
-
5922
- input[type=number] {
5923
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
5924
- }
5925
-
5926
- input[data-invalid]:not(:focus),
5927
- .cds--number[data-invalid] input[type=number]:not(:focus),
5928
- .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
5929
- .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
5930
- .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
5931
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
5932
- .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
5933
- outline: 2px solid var(--cds-support-error, #da1e28);
5934
- outline-offset: -2px;
5935
- }
5936
- @media screen and (prefers-contrast) {
5937
- input[data-invalid]:not(:focus),
5938
- .cds--number[data-invalid] input[type=number]:not(:focus),
5939
- .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
5940
- .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
5941
- .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
5942
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
5943
- .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
5944
- outline-style: dotted;
5945
- }
5946
- }
5947
-
5948
- input[data-invalid] ~ .cds--form-requirement,
5949
- .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
5950
- .cds--number__input-wrapper--warning ~ .cds--form-requirement,
5951
- .cds--date-picker-input__wrapper ~ .cds--form-requirement,
5952
- .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
5953
- .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
5954
- .cds--time-picker--invalid ~ .cds--form-requirement,
5955
- .cds--time-picker--warning ~ .cds--form-requirement,
5956
- .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
5957
- .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
5958
- .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
5959
- .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
5960
- .cds--text-area__wrapper--warn ~ .cds--form-requirement,
5961
- .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
5962
- .cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement,
5963
- .cds--time-picker[data-invalid] ~ .cds--form-requirement,
5964
- .cds--list-box[data-invalid] ~ .cds--form-requirement,
5965
- .cds--list-box--warning ~ .cds--form-requirement {
5966
- display: block;
5967
- overflow: visible;
5968
- font-weight: 400;
5969
- max-block-size: 12.5rem;
5970
- }
5971
-
5972
- input[data-invalid] ~ .cds--form-requirement,
5973
- .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
5974
- .cds--date-picker-input__wrapper ~ .cds--form-requirement,
5975
- .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
5976
- .cds--time-picker--invalid ~ .cds--form-requirement,
5977
- .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
5978
- .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
5979
- .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
5980
- .cds--time-picker[data-invalid] ~ .cds--form-requirement,
5981
- .cds--list-box[data-invalid] ~ .cds--form-requirement {
5982
- color: var(--cds-text-error, #da1e28);
5983
- }
5984
-
5985
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid],
5986
- .cds--form--fluid .cds--text-input__field-wrapper--warning {
5987
- display: block;
5988
- }
5989
-
5990
- .cds--form--fluid input[data-invalid] {
5991
- outline: none;
5992
- }
5993
-
5994
- .cds--form--fluid .cds--form-requirement {
5995
- padding: 0.5rem 2.5rem 0.5rem 1rem;
5996
- margin: 0;
5997
- }
5998
-
5999
- input:not(output, [data-invalid]):-moz-ui-invalid {
6000
- box-shadow: none;
6001
- }
6002
-
6003
- .cds--form-requirement {
6004
- font-size: var(--cds-label-01-font-size, 0.75rem);
6005
- font-weight: var(--cds-label-01-font-weight, 400);
6006
- line-height: var(--cds-label-01-line-height, 1.33333);
6007
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
6008
- display: none;
6009
- overflow: hidden;
6010
- margin: 0.25rem 0 0;
6011
- max-block-size: 0;
6012
- }
6013
- .cds--form-requirement html {
6014
- font-size: 100%;
6015
- }
6016
- .cds--form-requirement body {
6017
- font-weight: 400;
6018
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
6019
- -moz-osx-font-smoothing: grayscale;
6020
- -webkit-font-smoothing: antialiased;
6021
- text-rendering: optimizeLegibility;
6022
- }
6023
- .cds--form-requirement code {
6024
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
6025
- }
6026
- .cds--form-requirement strong {
6027
- font-weight: 600;
6028
- }
6029
-
6030
- .cds--select--inline .cds--form__helper-text {
6031
- margin-block-start: 0;
6032
- }
6033
-
6034
- .cds--form__helper-text {
6035
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
6036
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
6037
- letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
6038
- z-index: 0;
6039
- color: var(--cds-text-secondary, #525252);
6040
- inline-size: 100%;
6041
- margin-block-start: 0.25rem;
6042
- opacity: 1;
6043
- }
6044
-
6045
- .cds--label--disabled,
6046
- .cds--form__helper-text--disabled {
6047
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6048
- }
6049
-
6050
- fieldset[disabled] .cds--label,
6051
- fieldset[disabled] .cds--form__helper-text {
6052
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6053
- }
6054
-
6055
- .cds--checkbox-group {
6056
- box-sizing: border-box;
6057
- padding: 0;
6058
- border: 0;
6059
- margin: 0;
6060
- font-family: inherit;
6061
- font-size: 100%;
6062
- vertical-align: baseline;
6063
- }
6064
- .cds--checkbox-group *,
6065
- .cds--checkbox-group *::before,
6066
- .cds--checkbox-group *::after {
6067
- box-sizing: inherit;
6068
- }
6069
-
6070
- .cds--form-item.cds--checkbox-wrapper {
6071
- position: relative;
6072
- margin-block-end: 0.25rem;
6073
- }
6074
-
6075
- .cds--form-item.cds--checkbox-wrapper:first-of-type {
6076
- margin-block-start: 0.1875rem;
6077
- }
6078
-
6079
- .cds--label + .cds--form-item.cds--checkbox-wrapper {
6080
- margin-block-start: -0.125rem;
6081
- }
6082
-
6083
- .cds--form-item.cds--checkbox-wrapper:last-of-type {
6084
- margin-block-end: 0.1875rem;
6085
- }
6086
-
6087
- .cds--checkbox {
6088
- position: absolute;
6089
- overflow: hidden;
6090
- padding: 0;
6091
- border: 0;
6092
- margin: -1px;
6093
- block-size: 1px;
6094
- clip: rect(0, 0, 0, 0);
6095
- inline-size: 1px;
6096
- visibility: inherit;
6097
- white-space: nowrap;
6098
- inset-block-start: 1.25rem;
6099
- inset-inline-start: 0.7rem;
6100
- }
6101
-
6102
- .cds--checkbox-label {
6103
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6104
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6105
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6106
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6107
- position: relative;
6108
- display: flex;
6109
- cursor: pointer;
6110
- min-block-size: 1.5rem;
6111
- padding-block-start: 0.1875rem;
6112
- padding-inline-start: 1.25rem;
6113
- user-select: none;
6114
- }
6115
- .cds--checkbox-label html {
6116
- font-size: 100%;
6117
- }
6118
- .cds--checkbox-label body {
6119
- font-weight: 400;
6120
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
6121
- -moz-osx-font-smoothing: grayscale;
6122
- -webkit-font-smoothing: antialiased;
6123
- text-rendering: optimizeLegibility;
6124
- }
6125
- .cds--checkbox-label code {
6126
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
6127
- }
6128
- .cds--checkbox-label strong {
6129
- font-weight: 600;
6130
- }
6131
-
6132
- .cds--checkbox-label-text {
6133
- padding-inline-start: 0.375rem;
6134
- }
6135
-
6136
- .cds--checkbox-label::before,
6137
- .cds--checkbox-label::after {
6138
- box-sizing: border-box;
6139
- }
6140
-
6141
- .cds--checkbox-label::before {
6142
- position: absolute;
6143
- border: 1px solid var(--cds-icon-primary, #161616);
6144
- margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
6145
- background-color: transparent;
6146
- block-size: 1rem;
6147
- border-radius: 2px;
6148
- content: "";
6149
- inline-size: 1rem;
6150
- inset-block-start: 0.125rem;
6151
- inset-inline-start: 0;
6152
- }
6153
-
6154
- .cds--checkbox-label::after {
6155
- position: absolute;
6156
- background: none;
6157
- block-size: 0.3125rem;
6158
- border-block-end: 1.5px solid var(--cds-icon-inverse, #ffffff);
6159
- border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
6160
- content: "";
6161
- inline-size: 0.5625rem;
6162
- inset-block-start: 0.46875rem;
6163
- inset-inline-start: 0.4375rem;
6164
- margin-block-start: -0.1875rem;
6165
- transform: scale(0) rotate(-45deg);
6166
- transform-origin: bottom right;
6167
- }
6168
-
6169
- .cds--checkbox:checked + .cds--checkbox-label::before,
6170
- .cds--checkbox:indeterminate + .cds--checkbox-label::before,
6171
- .cds--checkbox-label[data-contained-checkbox-state=true]::before {
6172
- border: none;
6173
- border-width: 1px;
6174
- background-color: var(--cds-icon-primary, #161616);
6175
- }
6176
-
6177
- .cds--checkbox:checked + .cds--checkbox-label::after,
6178
- .cds--checkbox-label[data-contained-checkbox-state=true]::after {
6179
- transform: scale(1) rotate(-45deg);
6180
- }
6181
-
6182
- .cds--checkbox:indeterminate + .cds--checkbox-label::after {
6183
- border-block-end: 2px solid var(--cds-icon-inverse, #ffffff);
6184
- border-inline-start: 0 solid var(--cds-icon-inverse, #ffffff);
6185
- inline-size: 0.5rem;
6186
- inset-block-start: 0.6875rem;
6187
- transform: scale(1) rotate(0deg);
6188
- }
6189
-
6190
- .cds--checkbox:focus + .cds--checkbox-label::before,
6191
- .cds--checkbox-label__focus::before,
6192
- .cds--checkbox:checked:focus + .cds--checkbox-label::before,
6193
- .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
6194
- .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
6195
- outline: 2px solid var(--cds-focus, #0f62fe);
6196
- outline-offset: 1px;
6197
- }
6198
-
6199
- .cds--checkbox:disabled + .cds--checkbox-label,
6200
- .cds--checkbox-label[data-contained-checkbox-disabled=true] {
6201
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6202
- cursor: not-allowed;
6203
- }
6204
-
6205
- .cds--checkbox:disabled + .cds--checkbox-label::before,
6206
- .cds--checkbox-label[data-contained-checkbox-disabled=true]::before {
6207
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6208
- }
6209
-
6210
- .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
6211
- .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
6212
- .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
6213
- background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6214
- }
6215
-
6216
- .cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
6217
- .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
6218
- .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
6219
- border: 1px solid var(--cds-support-error, #da1e28);
6220
- }
6221
-
6222
- .cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
6223
- .cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
6224
- .cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
6225
- display: none;
6226
- }
6227
-
6228
- .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
6229
- .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
6230
- border: 1px solid var(--cds-icon-primary, #161616);
6231
- }
6232
-
6233
- .cds--checkbox-group__validation-msg,
6234
- .cds--checkbox__validation-msg {
6235
- display: none;
6236
- align-items: flex-start;
6237
- margin-block-start: 0.25rem;
6238
- }
6239
-
6240
- .cds--checkbox__invalid-icon {
6241
- margin: 0.0625rem 0.0625rem 0 0.1875rem;
6242
- fill: var(--cds-support-error, #da1e28);
6243
- min-inline-size: 1rem;
6244
- }
6245
-
6246
- .cds--checkbox__invalid-icon--warning {
6247
- fill: var(--cds-support-warning, #f1c21b);
6248
- }
6249
-
6250
- .cds--checkbox__invalid-icon--warning path:first-of-type {
6251
- fill: #000000;
6252
- }
6253
-
6254
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
6255
- .cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
6256
- .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
6257
- .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
6258
- display: flex;
6259
- }
6260
-
6261
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
6262
- .cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
6263
- .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
6264
- .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
6265
- display: block;
6266
- overflow: visible;
6267
- margin-block-start: 0;
6268
- margin-inline-start: 0.5rem;
6269
- max-block-size: 100%;
6270
- }
6271
-
6272
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
6273
- .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
6274
- color: var(--cds-text-error, #da1e28);
6275
- }
6276
-
6277
- .cds--checkbox-group--readonly .cds--checkbox-label,
6278
- .cds--checkbox-wrapper--readonly .cds--checkbox-label {
6279
- cursor: default;
6280
- }
6281
-
6282
- .cds--checkbox-group--readonly .cds--checkbox-label-text,
6283
- .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
6284
- cursor: text;
6285
- user-select: text;
6286
- }
6287
-
6288
- .cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
6289
- .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
6290
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6291
- }
6292
-
6293
- .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
6294
- .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
6295
- border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6296
- background: transparent;
6297
- }
6298
-
6299
- .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
6300
- .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
6301
- border-color: var(--cds-text-primary, #161616);
6302
- }
6303
-
6304
- .cds--checkbox-skeleton .cds--checkbox-label {
6305
- cursor: default;
6306
- }
6307
-
6308
- .cds--checkbox-label-text.cds--skeleton {
6309
- position: relative;
6310
- padding: 0;
6311
- border: none;
6312
- background: var(--cds-skeleton-background, #e8e8e8);
6313
- box-shadow: none;
6314
- pointer-events: none;
6315
- block-size: 1rem;
6316
- inline-size: 6.25rem;
6317
- margin-block: 0.0625rem 0;
6318
- margin-inline: 0.375rem 0;
6319
- }
6320
- .cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active {
6321
- border: none;
6322
- cursor: default;
6323
- outline: none;
6324
- }
6325
- .cds--checkbox-label-text.cds--skeleton::before {
6326
- position: absolute;
6327
- animation: 3000ms ease-in-out skeleton infinite;
6328
- background: var(--cds-skeleton-element, #c6c6c6);
6329
- block-size: 100%;
6330
- content: "";
6331
- inline-size: 100%;
6332
- will-change: transform-origin, transform, opacity;
6333
- }
6334
- @media (prefers-reduced-motion: reduce) {
6335
- .cds--checkbox-label-text.cds--skeleton::before {
6336
- animation: none;
6337
- }
6338
- }
6339
-
6340
- .cds--checkbox--inline {
6341
- position: relative;
6342
- }
6343
-
6344
- [dir=rtl] .cds--checkbox-label::after {
6345
- margin-block-start: 0;
6346
- margin-inline-start: -0.0625rem;
6347
- transform-origin: center;
6348
- }
6349
-
6350
- [dir=rtl] .cds--checkbox:checked + .cds--checkbox-label::after,
6351
- [dir=rtl] .cds--checkbox-label[data-contained-checkbox-state=true]::after {
6352
- transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
6353
- }
6354
-
6355
- .cds--radio-button-group {
6356
- box-sizing: border-box;
6357
- padding: 0;
6358
- border: 0;
6359
- margin: 0;
6360
- font-family: inherit;
6361
- font-size: 100%;
6362
- vertical-align: baseline;
6363
- position: relative;
6364
- display: flex;
6365
- align-items: center;
6366
- }
6367
- .cds--radio-button-group *,
6368
- .cds--radio-button-group *::before,
6369
- .cds--radio-button-group *::after {
6370
- box-sizing: inherit;
6371
- }
6372
-
6373
- .cds--label + .cds--form-item .cds--radio-button-group {
6374
- margin-block-start: 0;
6375
- }
6376
-
6377
- .cds--radio-button-group--vertical {
6378
- flex-direction: column;
6379
- align-items: flex-start;
6380
- }
6381
- .cds--radio-button-group--vertical.cds--radio-button-group--label-left {
6382
- align-items: flex-end;
6383
- }
6384
- .cds--radio-button-group--vertical .cds--radio-button__label {
6385
- line-height: 1.25;
6386
- margin-inline-end: 0;
6387
- }
6388
- .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
6389
- margin-block-end: 0.5rem;
6390
- }
6391
-
6392
- .cds--radio-button {
6393
- position: absolute;
6394
- overflow: hidden;
6395
- padding: 0;
6396
- border: 0;
6397
- margin: -1px;
6398
- block-size: 1px;
6399
- clip: rect(0, 0, 0, 0);
6400
- inline-size: 1px;
6401
- visibility: inherit;
6402
- white-space: nowrap;
6403
- visibility: inherit;
6404
- }
6405
-
6406
- .cds--radio-button__label {
6407
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6408
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6409
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6410
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6411
- display: flex;
6412
- align-items: center;
6413
- cursor: pointer;
6414
- margin-inline-end: 1rem;
6415
- }
6416
-
6417
- .cds--radio-button__appearance {
6418
- box-sizing: border-box;
6419
- padding: 0;
6420
- border: 0;
6421
- margin: 0;
6422
- font-family: inherit;
6423
- font-size: 100%;
6424
- vertical-align: baseline;
6425
- flex-shrink: 0;
6426
- border: 1px solid var(--cds-icon-primary, #161616);
6427
- background-color: transparent;
6428
- block-size: 1.125rem;
6429
- border-radius: 50%;
6430
- inline-size: 1.125rem;
6431
- margin-block: 0.0625rem 0.125rem;
6432
- margin-inline: 0.125rem 0.5rem;
6433
- }
6434
- .cds--radio-button__appearance *,
6435
- .cds--radio-button__appearance *::before,
6436
- .cds--radio-button__appearance *::after {
6437
- box-sizing: inherit;
6438
- }
6439
-
6440
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance {
6441
- display: flex;
6442
- align-items: center;
6443
- justify-content: center;
6444
- border-color: var(--cds-icon-primary, #161616);
6445
- }
6446
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
6447
- position: relative;
6448
- display: inline-block;
6449
- background-color: var(--cds-icon-primary, #161616);
6450
- block-size: 100%;
6451
- border-radius: 50%;
6452
- content: "";
6453
- inline-size: 100%;
6454
- transform: scale(0.5);
6455
- }
6456
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
6457
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
6458
- fill: ButtonText;
6459
- background-color: ButtonText;
6460
- }
6461
- }
6462
-
6463
- .cds--radio-button:disabled + .cds--radio-button__label {
6464
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6465
- cursor: not-allowed;
6466
- }
6467
-
6468
- .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance,
6469
- .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance {
6470
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6471
- }
6472
- .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance::before,
6473
- .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
6474
- background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6475
- }
6476
-
6477
- .cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
6478
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
6479
- }
6480
-
6481
- .cds--radio-button-group--readonly .cds--radio-button__label {
6482
- cursor: default;
6483
- }
6484
-
6485
- .cds--radio-button-group--readonly .cds--radio-button__label-text {
6486
- cursor: text;
6487
- user-select: text;
6488
- }
6489
-
6490
- .cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
6491
- border-color: var(--cds-support-error, #da1e28);
6492
- }
6493
-
6494
- .cds--radio-button__validation-msg {
6495
- display: none;
6496
- align-items: flex-end;
6497
- margin-block-start: 0.375rem;
6498
- }
6499
-
6500
- .cds--radio-button__invalid-icon {
6501
- fill: var(--cds-support-error, #da1e28);
6502
- margin-inline: 0.1875rem 0.0625rem;
6503
- }
6504
-
6505
- .cds--radio-button__invalid-icon--warning {
6506
- fill: var(--cds-support-warning, #f1c21b);
6507
- }
6508
-
6509
- .cds--radio-button__invalid-icon--warning path:first-of-type {
6510
- fill: #000000;
6511
- }
6512
-
6513
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg,
6514
- .cds--radio-button-group--warning + .cds--radio-button__validation-msg {
6515
- display: flex;
6516
- }
6517
-
6518
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement,
6519
- .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
6520
- display: block;
6521
- overflow: visible;
6522
- margin-block-start: 0;
6523
- margin-inline-start: 0.5rem;
6524
- max-block-size: 100%;
6525
- }
6526
-
6527
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
6528
- color: var(--cds-text-error, #da1e28);
6529
- }
6530
-
6531
- .cds--radio-button-group ~ .cds--form__helper-text {
6532
- margin-block-start: 0.375rem;
6533
- }
6534
-
6535
- .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
6536
- outline: 2px solid var(--cds-focus, #0f62fe);
6537
- outline-offset: 1.5px;
6538
- }
6539
-
6540
- .cds--radio-button__label.cds--skeleton {
6541
- position: relative;
6542
- padding: 0;
6543
- border: none;
6544
- background: var(--cds-skeleton-background, #e8e8e8);
6545
- box-shadow: none;
6546
- pointer-events: none;
6547
- block-size: 1.125rem;
6548
- inline-size: 6.25rem;
6549
- }
6550
- .cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active {
6551
- border: none;
6552
- cursor: default;
6553
- outline: none;
6554
- }
6555
- .cds--radio-button__label.cds--skeleton::before {
6556
- position: absolute;
6557
- animation: 3000ms ease-in-out skeleton infinite;
6558
- background: var(--cds-skeleton-element, #c6c6c6);
6559
- block-size: 100%;
6560
- content: "";
6561
- inline-size: 100%;
6562
- will-change: transform-origin, transform, opacity;
6563
- }
6564
- @media (prefers-reduced-motion: reduce) {
6565
- .cds--radio-button__label.cds--skeleton::before {
6566
- animation: none;
6567
- }
6568
- }
6569
-
6570
- .cds--radio-button__label.cds--skeleton .cds--radio-button__appearance {
6571
- display: none;
6572
- }
6573
-
6574
- .cds--radio-button-wrapper .cds--radio-button__label {
6575
- display: flex;
6576
- align-items: flex-start;
6577
- justify-content: center;
6578
- margin: 0;
6579
- }
6580
-
6581
- .cds--radio-button-wrapper:not(:last-of-type) {
6582
- margin-inline-end: 1rem;
6583
- }
6584
-
6585
- .cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
6586
- margin-block-end: 0.5rem;
6587
- margin-inline-end: 0;
6588
- }
6589
-
6590
- .cds--radio-button-group--label-right .cds--radio-button__label,
6591
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label {
6592
- flex-direction: row;
6593
- }
6594
-
6595
- .cds--radio-button-group--label-left .cds--radio-button__label,
6596
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label {
6597
- flex-direction: row-reverse;
6598
- }
6599
-
6600
- .cds--radio-button-group--label-left .cds--radio-button__appearance,
6601
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance {
6602
- margin-inline-end: 0;
6603
- margin-inline-start: 0.5rem;
6604
- }
6605
-
6606
- .cds--data-table-container {
6607
- position: relative;
6608
- padding-block-start: 0.125rem;
6609
- }
6610
-
6611
- .cds--data-table-content {
6612
- display: block;
6613
- overflow-x: auto;
6614
- }
6615
-
6616
- .cds--data-table-content:focus {
6617
- outline: 2px solid var(--cds-focus, #0f62fe);
6618
- outline-offset: -2px;
6619
- }
6620
- @media screen and (prefers-contrast) {
6621
- .cds--data-table-content:focus {
6622
- outline-style: dotted;
6623
- }
6624
- }
6625
-
6626
- .cds--data-table-header {
6627
- background: var(--cds-layer);
6628
- padding-block-end: 1.5rem;
6629
- padding-block-start: 1rem;
6630
- padding-inline: 1rem;
6631
- }
6632
-
6633
- .cds--data-table-header__title {
6634
- font-size: var(--cds-heading-03-font-size, 1.25rem);
6635
- font-weight: var(--cds-heading-03-font-weight, 400);
6636
- line-height: var(--cds-heading-03-line-height, 1.4);
6637
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
6638
- color: var(--cds-text-primary, #161616);
6639
- }
6640
-
6641
- .cds--data-table-header__description {
6642
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6643
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6644
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6645
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6646
- color: var(--cds-text-secondary, #525252);
6647
- }
6648
- @media (min-width: 42rem) {
6649
- .cds--data-table-header__description {
6650
- max-inline-size: 50ch;
6651
- }
6652
- }
6653
- @media (min-width: 66rem) {
6654
- .cds--data-table-header__description {
6655
- max-inline-size: 80ch;
6656
- }
6657
- }
6658
-
6659
- .cds--data-table {
6660
- border-collapse: collapse;
6661
- border-spacing: 0;
6662
- inline-size: 100%;
6663
- }
6664
-
6665
- .cds--data-table thead {
6666
- font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
6667
- font-weight: var(--cds-heading-compact-01-font-weight, 600);
6668
- line-height: var(--cds-heading-compact-01-line-height, 1.28572);
6669
- letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
6670
- background-color: var(--cds-layer-accent);
6671
- }
6672
-
6673
- .cds--data-table tbody {
6674
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
6675
- font-weight: var(--cds-body-compact-01-font-weight, 400);
6676
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
6677
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
6678
- background-color: var(--cds-layer);
6679
- inline-size: 100%;
6680
- }
6681
-
6682
- .cds--data-table tr {
6683
- border: none;
6684
- block-size: 3rem;
6685
- inline-size: 100%;
6686
- }
6687
-
6688
- .cds--data-table tbody tr,
6689
- .cds--data-table tbody tr td,
6690
- .cds--data-table tbody tr th {
6691
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
6692
- }
6693
-
6694
- .cds--data-table tbody tr:hover {
6695
- background: var(--cds-layer-hover);
6696
- }
6697
-
6698
- .cds--data-table tbody tr:hover td,
6699
- .cds--data-table tbody tr:hover th {
6700
- background: var(--cds-layer-hover);
6701
- border-block-end: 1px solid var(--cds-layer-hover);
6702
- border-block-start: 1px solid var(--cds-layer-hover);
6703
- color: var(--cds-text-primary, #161616);
6704
- }
6705
-
6706
- .cds--data-table tr:hover .cds--link {
6707
- color: var(--cds-link-secondary, #0043ce);
6708
- }
6709
-
6710
- .cds--data-table tr:hover .cds--link--disabled {
6711
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
6712
- }
6713
-
6714
- .cds--data-table th,
6715
- .cds--data-table td {
6716
- text-align: start;
6717
- vertical-align: middle;
6718
- }
6719
-
6720
- .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
6721
- padding-block-end: 1rem;
6722
- padding-block-start: 1rem;
6723
- }
6724
- .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
6725
- padding-block-start: 0.5rem;
6726
- }
6727
- .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
6728
- padding-block-start: 0.8125rem;
6729
- }
6730
- .cds--data-table.cds--data-table--top-aligned-body td {
6731
- vertical-align: top;
6732
- }
6733
-
6734
- .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
6735
- padding-block-end: 1rem;
6736
- padding-block-start: 1rem;
6737
- }
6738
- .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
6739
- padding-block-start: 0.5rem;
6740
- }
6741
- .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
6742
- padding-block-start: 0.8125rem;
6743
- }
6744
- .cds--data-table.cds--data-table--top-aligned-header th {
6745
- vertical-align: top;
6746
- }
6747
-
6748
- .cds--data-table th[align=right],
6749
- .cds--data-table td[align=right] {
6750
- text-align: end;
6751
- }
6752
-
6753
- .cds--data-table th[align=center],
6754
- .cds--data-table td[align=center] {
6755
- text-align: center;
6756
- }
6757
-
6758
- .cds--data-table th {
6759
- background-color: var(--cds-layer-accent);
6760
- color: var(--cds-text-primary, #161616);
6761
- padding-inline-end: 1rem;
6762
- padding-inline-start: 1rem;
6763
- }
6764
-
6765
- .cds--data-table th:last-of-type {
6766
- position: static;
6767
- inline-size: auto;
6768
- }
6769
-
6770
- .cds--data-table .cds--table-header-label {
6771
- text-align: start;
6772
- }
6773
-
6774
- .cds--data-table td,
6775
- .cds--data-table tbody th {
6776
- background: var(--cds-layer);
6777
- border-block-end: 1px solid var(--cds-border-subtle);
6778
- border-block-start: 1px solid var(--cds-layer);
6779
- color: var(--cds-text-secondary, #525252);
6780
- padding-inline-end: 1rem;
6781
- padding-inline-start: 1rem;
6782
- }
6783
- .cds--data-table td + td:first-of-type,
6784
- .cds--data-table tbody th + td:first-of-type {
6785
- padding-inline-start: 0.75rem;
6786
- }
6787
-
6788
- @supports (-moz-appearance: none) {
6789
- .cds--data-table td {
6790
- background-clip: padding-box;
6791
- }
6792
- }
6793
- .cds--data-table .cds--list-box input[role=combobox],
6794
- .cds--data-table .cds--list-box input[type=text],
6795
- .cds--data-table .cds--dropdown,
6796
- .cds--data-table .cds--list-box,
6797
- .cds--data-table .cds--number input[type=number],
6798
- .cds--data-table .cds--number__control-btn::before,
6799
- .cds--data-table .cds--number__control-btn::after,
6800
- .cds--data-table .cds--text-input,
6801
- .cds--data-table .cds--select-input {
6802
- background-color: var(--cds-field-02, #ffffff);
6803
- }
6804
-
6805
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
6806
- outline: 2px solid var(--cds-focus, #0f62fe);
6807
- outline-offset: -2px;
6808
- }
6809
- @media screen and (prefers-contrast) {
6810
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
6811
- outline-style: dotted;
6812
- }
6813
- }
6814
-
6815
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=true]:focus {
6816
- outline: none;
6817
- }
6818
-
6819
- @media screen and (hover: hover), (-ms-high-contrast: active), (-ms-high-contrast: none) {
6820
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
6821
- opacity: 0;
6822
- }
6823
- }
6824
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__icon {
6825
- opacity: 1;
6826
- }
6827
-
6828
- .cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon,
6829
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu:hover .cds--overflow-menu__icon,
6830
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon,
6831
- .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
6832
- opacity: 1;
6833
- }
6834
-
6835
- .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
6836
- position: relative;
6837
- inset-block-start: 0.1875rem;
6838
- margin-inline-end: 0.5rem;
6839
- }
6840
-
6841
- .cds--data-table .cds--overflow-menu:hover,
6842
- .cds--data-table .cds--overflow-menu__trigger:hover {
6843
- background-color: var(--cds-layer-selected-hover);
6844
- }
6845
-
6846
- .cds--data-table--selected .cds--overflow-menu:hover,
6847
- .cds--data-table--selected .cds--overflow-menu__trigger:hover {
6848
- background-color: var(--cds-layer-hover);
6849
- }
6850
-
6851
- .cds--data-table--selected .cds--link:not(.cds--link--disabled) {
6852
- color: var(--cds-link-secondary, #0043ce);
6853
- }
6854
-
6855
- .cds--data-table--xs td.cds--table-column-menu,
6856
- .cds--data-table--sm td.cds--table-column-menu {
6857
- block-size: 1.5rem;
6858
- padding-block-end: 0;
6859
- padding-block-start: 0;
6860
- }
6861
-
6862
- .cds--data-table--sm td.cds--table-column-menu {
6863
- block-size: 2rem;
6864
- }
6865
-
6866
- .cds--data-table--md td.cds--table-column-menu {
6867
- block-size: 2.5rem;
6868
- }
6869
-
6870
- .cds--data-table--xl .cds--table-column-menu {
6871
- padding-block-start: 0.5rem;
6872
- }
6873
-
6874
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
6875
- border-block-end: 1px solid var(--cds-layer);
6876
- }
6877
-
6878
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
6879
- background-color: var(--cds-layer-accent);
6880
- border-block-end: 1px solid var(--cds-layer-accent);
6881
- border-block-start: 1px solid var(--cds-layer-accent);
6882
- }
6883
-
6884
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
6885
- background-color: var(--cds-layer-hover);
6886
- border-block-end: 1px solid var(--cds-layer-hover);
6887
- border-block-start: 1px solid var(--cds-layer-hover);
6888
- }
6889
-
6890
- .cds--table-column-checkbox .cds--checkbox-label {
6891
- padding-inline-start: 0;
6892
- }
6893
-
6894
- .cds--data-table th.cds--table-column-checkbox {
6895
- position: static;
6896
- background: var(--cds-layer-accent);
6897
- inline-size: 2rem;
6898
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
6899
- }
6900
-
6901
- .cds--data-table thead th.cds--table-column-checkbox,
6902
- .cds--data-table tbody td.cds--table-column-checkbox,
6903
- .cds--data-table thead th.cds--table-expand,
6904
- .cds--data-table tbody td.cds--table-expand {
6905
- min-inline-size: 0;
6906
- }
6907
-
6908
- .cds--data-table thead th.cds--table-column-checkbox,
6909
- .cds--data-table tbody td.cds--table-column-checkbox {
6910
- min-inline-size: 2.5rem;
6911
- padding-inline-end: 0.25rem;
6912
- padding-inline-start: 1rem;
6913
- }
6914
-
6915
- .cds--data-table thead th.cds--table-expand,
6916
- .cds--data-table tbody td.cds--table-expand {
6917
- block-size: 2rem;
6918
- inline-size: 2rem;
6919
- }
6920
-
6921
- .cds--data-table--xs thead th.cds--table-expand,
6922
- .cds--data-table--xs tbody td.cds--table-expand {
6923
- padding: 0 0 0 0.5rem;
6924
- block-size: 1.5rem;
6925
- inline-size: 1.5rem;
6926
- }
6927
-
6928
- .cds--data-table--sm thead th.cds--table-expand,
6929
- .cds--data-table--sm tbody td.cds--table-expand {
6930
- padding: 0;
6931
- block-size: 2rem;
6932
- inline-size: 2rem;
6933
- padding-inline-start: 0.5rem;
6934
- }
6935
-
6936
- .cds--data-table--md thead th.cds--table-expand,
6937
- .cds--data-table--md tbody td.cds--table-expand {
6938
- padding: 0.25rem 0 0.25rem 0.5rem;
6939
- block-size: 2.5rem;
6940
- inline-size: 2.5rem;
6941
- }
6942
-
6943
- .cds--data-table--xl thead th.cds--table-expand,
6944
- .cds--data-table--xl tbody td.cds--table-expand {
6945
- block-size: 4rem;
6946
- padding-block-end: 1.375rem;
6947
- padding-block-start: 0.625rem;
6948
- }
6949
-
6950
- .cds--data-table--xl .cds--table-column-checkbox {
6951
- padding-block-start: 0.8125rem;
6952
- }
6953
-
6954
- .cds--data-table--xl .cds--table-column-radio {
6955
- padding-block-start: 1rem;
6956
- }
6957
-
6958
- .cds--table-column-radio {
6959
- inline-size: 48px;
6960
- }
6961
-
6962
- .cds--table-column-radio .cds--radio-button__appearance {
6963
- margin-inline-end: -0.125rem;
6964
- }
6965
-
6966
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
6967
- tr.cds--data-table--selected td {
6968
- background-color: var(--cds-layer-selected);
6969
- border-block-end: 1px solid var(--cds-layer-active);
6970
- border-block-start: 1px solid var(--cds-layer-selected);
6971
- color: var(--cds-text-primary, #161616);
6972
- }
6973
-
6974
- .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
6975
- tr.cds--data-table--selected:first-of-type td {
6976
- border-block-start: 1px solid var(--cds-border-subtle-selected);
6977
- }
6978
-
6979
- .cds--data-table--zebra tbody tr:last-of-type:nth-child(odd).cds--data-table--selected td,
6980
- .cds--data-table--zebra tbody tr:last-of-type:nth-child(even).cds--data-table--selected td,
6981
- tr.cds--data-table--selected:last-of-type td {
6982
- border-block-end: 1px solid var(--cds-layer-selected);
6983
- border-block-start: 1px solid var(--cds-layer-selected);
6984
- }
6985
-
6986
- .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected td {
6987
- border-block-end: 1px solid var(--cds-layer-active);
6988
- }
6989
-
6990
- .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
6991
- border-block-end: 1px solid var(--cds-layer-selected-hover);
6992
- }
6993
-
6994
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
6995
- .cds--data-table tbody .cds--data-table--selected:hover td {
6996
- background: var(--cds-layer-selected-hover);
6997
- border-block-end: 1px solid var(--cds-layer-selected-hover);
6998
- border-block-start: 1px solid var(--cds-layer-selected-hover);
6999
- color: var(--cds-text-primary, #161616);
7000
- }
7001
-
7002
- .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
7003
- opacity: 1;
7004
- }
7005
-
7006
- .cds--data-table--xs thead tr,
7007
- .cds--data-table--xs tbody tr,
7008
- .cds--data-table--xs tbody tr th {
7009
- block-size: 1.5rem;
7010
- }
7011
-
7012
- .cds--data-table--xs .cds--table-header-label {
7013
- padding-block-end: 0.125rem;
7014
- padding-block-start: 0.125rem;
7015
- }
7016
-
7017
- .cds--data-table--xs td,
7018
- .cds--data-table--xs tbody tr th {
7019
- padding-block-end: 0.125rem;
7020
- padding-block-start: 0.125rem;
7021
- }
7022
-
7023
- .cds--data-table--xs .cds--overflow-menu {
7024
- block-size: calc(100% + 1px);
7025
- inline-size: 2rem;
7026
- }
7027
-
7028
- .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7029
- .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7030
- padding-block-end: 0;
7031
- padding-block-start: 0;
7032
- }
7033
-
7034
- .cds--data-table.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox-label {
7035
- block-size: 1.4375rem;
7036
- min-block-size: 1.4375rem;
7037
- }
7038
-
7039
- .cds--data-table--sm thead tr,
7040
- .cds--data-table--sm tbody tr,
7041
- .cds--data-table--sm tbody tr th {
7042
- block-size: 2rem;
7043
- }
7044
-
7045
- .cds--data-table--sm .cds--table-header-label {
7046
- padding-block-end: 0.4375rem;
7047
- padding-block-start: 0.4375rem;
7048
- }
7049
-
7050
- .cds--data-table--sm td,
7051
- .cds--data-table--sm tbody tr th,
7052
- .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
7053
- padding-block-end: 0.375rem;
7054
- padding-block-start: 0.4375rem;
7055
- }
7056
-
7057
- .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7058
- .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7059
- padding-block-end: 0.1875rem;
7060
- padding-block-start: 0.1875rem;
7061
- }
7062
-
7063
- .cds--data-table--sm .cds--overflow-menu {
7064
- block-size: calc(100% + 1px);
7065
- }
7066
-
7067
- .cds--data-table--md thead tr,
7068
- .cds--data-table--md tbody tr,
7069
- .cds--data-table--md tbody tr th {
7070
- block-size: 2.5rem;
7071
- }
7072
-
7073
- .cds--data-table--md .cds--table-header-label,
7074
- .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
7075
- padding-block-end: 0.4375rem;
7076
- padding-block-start: 0.4375rem;
7077
- }
7078
-
7079
- .cds--data-table--md td,
7080
- .cds--data-table--md tbody tr th {
7081
- padding-block-end: 0.375rem;
7082
- padding-block-start: 0.4375rem;
7083
- }
7084
-
7085
- .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
7086
- .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
7087
- padding-block-end: 0.1875rem;
7088
- padding-block-start: 0.1875rem;
7089
- }
7090
-
7091
- .cds--data-table--md .cds--table-column-menu {
7092
- padding-block-end: 0.1875rem;
7093
- padding-block-start: 0.1875rem;
7094
- }
7095
-
7096
- .cds--data-table--xl thead tr,
7097
- .cds--data-table--xl tbody tr,
7098
- .cds--data-table--xl tbody tr th {
7099
- block-size: 4rem;
7100
- }
7101
-
7102
- .cds--data-table--xl .cds--table-header-label {
7103
- padding-block-end: 1rem;
7104
- padding-block-start: 1rem;
7105
- }
7106
-
7107
- .cds--data-table--xl td,
7108
- .cds--data-table--xl tbody tr th {
7109
- padding-block-end: 1rem;
7110
- padding-block-start: 1rem;
7111
- }
7112
-
7113
- .cds--data-table--xl th,
7114
- .cds--data-table--xl td {
7115
- vertical-align: top;
7116
- }
7117
-
7118
- .cds--data-table--xl .cds--data-table--cell-secondary-text {
7119
- font-size: var(--cds-label-01-font-size, 0.75rem);
7120
- font-weight: var(--cds-label-01-font-weight, 400);
7121
- line-height: var(--cds-label-01-line-height, 1.33333);
7122
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
7123
- }
7124
-
7125
- .cds--data-table--static {
7126
- inline-size: auto;
7127
- }
7128
-
7129
- .cds--data-table-container--static {
7130
- inline-size: fit-content;
7131
- }
7132
-
7133
- .cds--data-table_inner-container {
7134
- background-color: var(--cds-layer-accent);
7135
- transform: translateZ(0);
7136
- }
7137
-
7138
- .cds--data-table--sticky-header {
7139
- display: block;
7140
- overflow-y: scroll;
7141
- /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */
7142
- }
7143
- .cds--data-table--sticky-header thead,
7144
- .cds--data-table--sticky-header tbody,
7145
- .cds--data-table--sticky-header tr,
7146
- .cds--data-table--sticky-header th,
7147
- .cds--data-table--sticky-header td {
7148
- display: flex;
7149
- }
7150
- .cds--data-table--sticky-header thead {
7151
- position: sticky;
7152
- z-index: 1;
7153
- overflow: scroll;
7154
- inline-size: 100%;
7155
- inset-block-start: 0;
7156
- -ms-overflow-style: none;
7157
- will-change: transform;
7158
- }
7159
- .cds--data-table--sticky-header thead tr th {
7160
- border-block-end: 1px solid var(--cds-layer-active);
7161
- }
7162
- .cds--data-table--sticky-header tbody {
7163
- flex-direction: column;
7164
- -ms-overflow-style: none;
7165
- overflow-x: scroll;
7166
- will-change: transform;
7167
- }
7168
- .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
7169
- block-size: auto;
7170
- min-block-size: 3rem;
7171
- }
7172
- .cds--data-table--sticky-header tr.cds--expandable-row:not(.cds--parent-row) {
7173
- block-size: auto;
7174
- }
7175
- .cds--data-table--sticky-header .cds--table-expand {
7176
- max-inline-size: 3rem;
7177
- }
7178
- .cds--data-table--sticky-header thead .cds--table-expand {
7179
- align-items: center;
7180
- }
7181
- .cds--data-table--sticky-header .cds--parent-row {
7182
- min-block-size: 3rem;
7183
- }
7184
- .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) {
7185
- padding-block-start: 0.875rem;
7186
- }
7187
- .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
7188
- border-block-start: 1px solid var(--cds-layer-hover);
7189
- }
7190
- .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
7191
- overflow: hidden;
7192
- }
7193
- .cds--data-table--sticky-header tr.cds--data-table--selected:first-of-type td {
7194
- border-block-start: none;
7195
- }
7196
- .cds--data-table--sticky-header thead th.cds--table-column-checkbox,
7197
- .cds--data-table--sticky-header tbody tr td.cds--table-column-checkbox {
7198
- align-items: center;
7199
- inline-size: 2.25rem;
7200
- min-inline-size: 2.25rem;
7201
- }
7202
- .cds--data-table--sticky-header.cds--data-table--xl thead th.cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--xl td.cds--table-column-checkbox {
7203
- align-items: flex-start;
7204
- }
7205
- .cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty {
7206
- max-inline-size: 4rem;
7207
- }
7208
- .cds--data-table--sticky-header th:empty:not(.cds--table-expand) {
7209
- max-inline-size: 2.25rem;
7210
- }
7211
- .cds--data-table--sticky-header td.cds--table-column-menu {
7212
- align-items: center;
7213
- block-size: auto;
7214
- padding-block-start: 0;
7215
- }
7216
- .cds--data-table--sticky-header thead::-webkit-scrollbar,
7217
- .cds--data-table--sticky-header tbody::-webkit-scrollbar {
7218
- display: none;
7219
- }
7220
- @-moz-document url-prefix() {
7221
- .cds--data-table--sticky-header thead,
7222
- .cds--data-table--sticky-header tbody {
7223
- scrollbar-width: none;
7224
- }
7225
- }
7226
- .cds--data-table--sticky-header tbody tr:last-of-type {
7227
- border-block-end: 0;
7228
- }
7229
- .cds--data-table--sticky-header th:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon),
7230
- .cds--data-table--sticky-header td:not(.cds--table-column-checkbox):not(.cds--table-column-menu):not(.cds--table-expand):not(.cds--table-column-icon) {
7231
- inline-size: 100%;
7232
- min-inline-size: 0;
7233
- }
7234
- .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row), .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
7235
- block-size: auto;
7236
- }
7237
- .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row) {
7238
- min-block-size: 1.5rem;
7239
- }
7240
- .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row) {
7241
- min-block-size: 2rem;
7242
- }
7243
- .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
7244
- min-block-size: 4rem;
7245
- }
7246
- .cds--data-table--sticky-header.cds--data-table--xs tr td.cds--table-expand {
7247
- padding-block-start: 0.25rem;
7248
- }
7249
- .cds--data-table--sticky-header.cds--data-table--sm tr td.cds--table-expand {
7250
- padding-block-start: 0.5rem;
7251
- }
7252
- .cds--data-table--sticky-header .cds--table-header-label {
7253
- display: block;
7254
- overflow-x: hidden;
7255
- text-overflow: ellipsis;
7256
- white-space: nowrap;
7257
- max-inline-size: calc(100% - 10px);
7258
- overflow-y: hidden;
7259
- padding-block-end: 1rem;
7260
- padding-block-start: 0.9375rem;
7261
- }
7262
- .cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label {
7263
- padding-block-end: 0;
7264
- padding-block-start: 0.1875rem;
7265
- }
7266
- .cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label {
7267
- padding-block-end: 0;
7268
- padding-block-start: 0.5rem;
7269
- }
7270
- .cds--data-table--sticky-header.cds--data-table--xl th .cds--table-header-label {
7271
- padding-block-start: 1rem;
7272
- }
7273
- .cds--data-table--sticky-header.cds--data-table--xl th.cds--table-expand {
7274
- display: flex;
7275
- align-items: flex-start;
7276
- }
7277
- .cds--data-table--sticky-header.cds--data-table--xs tr.cds--parent-row .cds--table-column-checkbox, .cds--data-table--sticky-header.cds--data-table--sm tr.cds--parent-row .cds--table-column-checkbox {
7278
- align-items: flex-start;
7279
- }
7280
-
7281
- .cds--data-table--max-width {
7282
- max-inline-size: 100%;
7283
- }
7284
-
7285
- .cds--data-table--sticky-header {
7286
- max-block-size: 18.75rem;
7287
- }
7288
-
7289
- .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
7290
- margin: 0;
7291
- }
7292
-
7293
- .cds--data-table--xs .cds--form-item.cds--checkbox-wrapper:last-of-type,
7294
- .cds--data-table--sm .cds--form-item.cds--checkbox-wrapper:last-of-type {
7295
- margin: -0.1875rem 0;
7296
- }
7297
-
7298
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7299
- .cds--data-table-content {
7300
- outline: 1px solid transparent;
7301
- }
7302
- }
7303
-
7304
- .cds--chart-holder .cds--modal.is-visible {
7305
- z-index: 99999;
7306
- }
7307
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__label {
7308
- margin-top: 0;
7309
- margin-bottom: 0;
7310
- }
7311
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__heading {
7312
- margin-top: 0.5rem;
7313
- margin-bottom: 1rem;
7314
- }
7315
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {
7316
- padding: 0;
7317
- margin-bottom: 0;
7318
- color-scheme: var(--cds-color-scheme, light);
7319
- }
7320
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content table {
7321
- position: relative;
7322
- border-collapse: collapse;
7323
- }
7324
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content table th {
7325
- position: sticky;
7326
- top: 0;
7327
- }
7328
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer {
7329
- background-color: transparent;
7330
- }
7331
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--cc-modal-footer-spacer {
7332
- width: 50%;
7333
- }
7334
-
7335
- .cds--cc--ruler line.ruler-line,
7336
- .cds--cc--ruler-binned line.ruler-line {
7337
- stroke: var(--cds-layer-inverse-absolute, #000000);
7338
- stroke-width: 1px;
7339
- stroke-dasharray: 2;
7340
- pointer-events: none;
7341
- }
7342
-
7343
- .cds--cc--skeleton rect.chart-skeleton-backdrop {
7344
- fill: var(--cds-grid-bg, #ffffff);
7345
- }
7346
- .cds--cc--skeleton .shimmer-effect-lines {
7347
- stroke-width: 1px;
7348
- }
7349
- .cds--cc--skeleton .shimmer-effect-sparkline {
7350
- stroke-width: 0px;
7351
- }
7352
- .cds--cc--skeleton .empty-state-lines {
7353
- stroke-width: 1px;
7354
- stroke: var(--cds-layer-accent-01, #e0e0e0);
7355
- }
7356
- .cds--cc--skeleton .shimmer-lines .stop-bg-shimmer {
7357
- stop-color: var(--cds-layer-accent-01, #e0e0e0);
7358
- }
7359
- .cds--cc--skeleton .shimmer-lines .stop-shimmer {
7360
- stop-color: #ffffff;
7361
- }
7362
- .cds--cc--skeleton .empty-state-areas {
7363
- fill: rgba(127, 127, 127, 0.1);
7364
- }
7365
- .cds--cc--skeleton .shimmer-areas .stop-bg-shimmer {
7366
- stop-color: rgba(127, 127, 127, 0.1);
7367
- }
7368
- .cds--cc--skeleton .shimmer-areas .stop-shimmer {
7369
- stop-color: rgba(255, 255, 255, 0.15);
7370
- }
7371
-
7372
- .cds--cc--skeleton-lines rect.chart-skeleton-backdrop {
7373
- fill: var(--cds-grid-bg, #ffffff);
7374
- }
7375
- .cds--cc--skeleton-lines .shimmer-effect-lines {
7376
- stroke-width: 1px;
7377
- }
7378
- .cds--cc--skeleton-lines .shimmer-effect-sparkline {
7379
- stroke-width: 0px;
7380
- }
7381
- .cds--cc--skeleton-lines .empty-state-lines {
7382
- stroke-width: 1px;
7383
- stroke: var(--cds-layer-accent-01, #e0e0e0);
7384
- }
7385
- .cds--cc--skeleton-lines .shimmer-lines .stop-bg-shimmer {
7386
- stop-color: var(--cds-layer-accent-01, #e0e0e0);
7387
- }
7388
- .cds--cc--skeleton-lines .shimmer-lines .stop-shimmer {
7389
- stop-color: #ffffff;
7390
- }
7391
-
7392
- .cds--cc--threshold line.threshold-line {
7393
- stroke: #fa4d56;
7394
- stroke-width: 1;
7395
- stroke-dasharray: 4;
7396
- cursor: pointer;
7397
- pointer-events: none;
7398
- }
7399
- .cds--cc--threshold line.threshold-line.active {
7400
- stroke-width: 2;
7401
- }
7402
- .cds--cc--threshold rect.threshold-hoverable-area {
7403
- height: 20px;
7404
- transform: translate(0, -10px);
7405
- cursor: pointer;
7406
- fill: transparent;
7407
- }
7408
- .cds--cc--threshold rect.threshold-hoverable-area.rotate {
7409
- transform: rotate(90deg) translate(0, -10px);
7410
- }
7411
-
7412
- .cds--cc--threshold--label {
7413
- background-color: #fa4d56;
7414
- pointer-events: none;
7415
- transition: opacity 0.1s;
7416
- transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
7417
- display: inline;
7418
- box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
7419
- position: absolute;
7420
- word-wrap: break-word;
7421
- z-index: 1059;
7422
- font-family: var(--cds-charts-font-family-condensed);
7423
- color: var(--cds-text-primary, #161616);
7424
- line-height: 16px;
7425
- font-size: 12px;
7426
- padding: 4px;
7427
- min-width: 20px;
7428
- }
7429
- .cds--cc--threshold--label.hidden {
7430
- opacity: 0;
7431
- transition: opacity 0.1s;
7432
- transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
7433
- }
7434
-
7435
- .cds--cc--title p.title {
7436
- color: var(--cds-text-primary, #161616);
7437
- font-size: 16px;
7438
- font-family: var(--cds-charts-font-family);
7439
- font-weight: 600;
7440
- white-space: nowrap;
7441
- overflow: hidden;
7442
- text-overflow: ellipsis;
7443
- padding-right: 15px;
7444
- }
7445
-
7446
- .layout-child.title {
7447
- height: unset !important;
7448
- overflow: hidden;
7449
- }
7450
-
7451
- .cds--overflow-menu,
7452
- .cds--overflow-menu__trigger {
7453
- box-sizing: border-box;
7454
- padding: 0;
7455
- border: 0;
7456
- margin: 0;
7457
- font-family: inherit;
7458
- font-size: 100%;
7459
- vertical-align: baseline;
7460
- display: inline-block;
7461
- padding: 0;
7462
- border: 0;
7463
- appearance: none;
7464
- background: none;
7465
- cursor: pointer;
7466
- text-align: start;
7467
- inline-size: 100%;
7468
- box-sizing: border-box;
7469
- padding: 0;
7470
- border: 0;
7471
- margin: 0;
7472
- font-family: inherit;
7473
- font-size: 100%;
7474
- vertical-align: baseline;
7475
- outline: 2px solid transparent;
7476
- outline-offset: -2px;
7477
- position: relative;
7478
- display: flex;
7479
- align-items: center;
7480
- justify-content: center;
7481
- block-size: 2.5rem;
7482
- cursor: pointer;
7483
- inline-size: 2.5rem;
7484
- min-block-size: 2.5rem;
7485
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7486
- }
7487
- .cds--overflow-menu *,
7488
- .cds--overflow-menu *::before,
7489
- .cds--overflow-menu *::after,
7490
- .cds--overflow-menu__trigger *,
7491
- .cds--overflow-menu__trigger *::before,
7492
- .cds--overflow-menu__trigger *::after {
7493
- box-sizing: inherit;
7494
- }
7495
- .cds--overflow-menu::-moz-focus-inner,
7496
- .cds--overflow-menu__trigger::-moz-focus-inner {
7497
- border: 0;
7498
- }
7499
- .cds--overflow-menu *,
7500
- .cds--overflow-menu *::before,
7501
- .cds--overflow-menu *::after,
7502
- .cds--overflow-menu__trigger *,
7503
- .cds--overflow-menu__trigger *::before,
7504
- .cds--overflow-menu__trigger *::after {
7505
- box-sizing: inherit;
7506
- }
7507
- .cds--overflow-menu:focus,
7508
- .cds--overflow-menu__trigger:focus {
7509
- outline: 2px solid var(--cds-focus, #0f62fe);
7510
- outline-offset: -2px;
7511
- }
7512
- @media screen and (prefers-contrast) {
7513
- .cds--overflow-menu:focus,
7514
- .cds--overflow-menu__trigger:focus {
7515
- outline-style: dotted;
7516
- }
7517
- }
7518
- .cds--overflow-menu:hover,
7519
- .cds--overflow-menu__trigger:hover {
7520
- background-color: var(--cds-layer-hover);
7521
- }
7522
-
7523
- .cds--overflow-menu > :first-child {
7524
- margin-block-start: 0;
7525
- }
7526
-
7527
- .cds--overflow-menu--sm {
7528
- block-size: 2rem;
7529
- inline-size: 2rem;
7530
- }
7531
-
7532
- .cds--overflow-menu--lg {
7533
- block-size: 3rem;
7534
- inline-size: 3rem;
7535
- }
7536
-
7537
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
7538
- outline: 2px solid var(--cds-focus, #0f62fe);
7539
- outline-offset: -2px;
7540
- }
7541
- @media screen and (prefers-contrast) {
7542
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
7543
- outline-style: dotted;
7544
- }
7545
- }
7546
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
7547
- outline: none;
7548
- }
7549
-
7550
- .cds--overflow-menu.cds--overflow-menu--open,
7551
- .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
7552
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
7553
- background-color: var(--cds-layer);
7554
- transition: none;
7555
- }
7556
-
7557
- .cds--overflow-menu--light.cds--overflow-menu--open,
7558
- .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
7559
- background-color: var(--cds-layer);
7560
- }
7561
-
7562
- .cds--overflow-menu__icon {
7563
- block-size: 1rem;
7564
- fill: var(--cds-icon-primary, #161616);
7565
- inline-size: 1rem;
7566
- }
7567
-
7568
- .cds--overflow-menu__wrapper {
7569
- line-height: 0;
7570
- }
7571
-
7572
- .cds--overflow-menu-options {
7573
- box-sizing: border-box;
7574
- padding: 0;
7575
- border: 0;
7576
- margin: 0;
7577
- font-family: inherit;
7578
- font-size: 100%;
7579
- vertical-align: baseline;
7580
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
7581
- position: absolute;
7582
- z-index: 6000;
7583
- display: none;
7584
- flex-direction: column;
7585
- align-items: flex-start;
7586
- background-color: var(--cds-layer);
7587
- inline-size: 10rem;
7588
- inset-block-start: 32px;
7589
- inset-inline-start: 0;
7590
- list-style: none;
7591
- }
7592
- .cds--overflow-menu-options *,
7593
- .cds--overflow-menu-options *::before,
7594
- .cds--overflow-menu-options *::after {
7595
- box-sizing: inherit;
7596
- }
7597
- .cds--overflow-menu-options::after {
7598
- position: absolute;
7599
- display: block;
7600
- background-color: var(--cds-layer);
7601
- content: "";
7602
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7603
- }
7604
- @media screen and (prefers-reduced-motion: reduce) {
7605
- .cds--overflow-menu-options::after {
7606
- transition: none;
7607
- }
7608
- }
7609
-
7610
- .cds--overflow-menu.cds--overflow-menu--open:hover {
7611
- background-color: var(--cds-layer);
7612
- }
7613
-
7614
- .cds--overflow-menu-options--light {
7615
- background-color: var(--cds-layer);
7616
- }
7617
- .cds--overflow-menu-options--light::after {
7618
- background-color: var(--cds-layer);
7619
- }
7620
-
7621
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
7622
- background-color: var(--cds-layer);
7623
- }
7624
-
7625
- .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
7626
- block-size: 0.1875rem;
7627
- inline-size: 2.5rem;
7628
- inset-block-start: -0.1875rem;
7629
- inset-inline-start: 0;
7630
- }
7631
-
7632
- .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7633
- block-size: 0.5rem;
7634
- inline-size: 2.5rem;
7635
- inset-block-end: -0.5rem;
7636
- inset-inline-start: 0;
7637
- }
7638
-
7639
- .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
7640
- block-size: 2.5rem;
7641
- inline-size: 0.375rem;
7642
- inset-block-start: 0;
7643
- inset-inline-end: -0.375rem;
7644
- }
7645
-
7646
- .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7647
- block-size: 2.5rem;
7648
- inline-size: 0.375rem;
7649
- inset-block-start: 0;
7650
- inset-inline-start: -0.375rem;
7651
- }
7652
-
7653
- .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7654
- inline-size: 2rem;
7655
- }
7656
- .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7657
- block-size: 2rem;
7658
- }
7659
-
7660
- .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
7661
- inline-size: 3rem;
7662
- }
7663
- .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7664
- block-size: 3rem;
7665
- }
7666
-
7667
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
7668
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
7669
- inset-inline-end: 0;
7670
- inset-inline-start: auto;
7671
- }
7672
-
7673
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
7674
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
7675
- inset-block-end: 0;
7676
- inset-block-start: auto;
7677
- }
7678
-
7679
- .cds--overflow-menu-options--open {
7680
- display: flex;
7681
- }
7682
-
7683
- .cds--overflow-menu-options__content {
7684
- inline-size: 100%;
7685
- }
7686
-
7687
- .cds--overflow-menu-options__option {
7688
- box-sizing: border-box;
7689
- padding: 0;
7690
- border: 0;
7691
- margin: 0;
7692
- font-family: inherit;
7693
- font-size: 100%;
7694
- vertical-align: baseline;
7695
- display: flex;
7696
- align-items: center;
7697
- padding: 0;
7698
- background-color: transparent;
7699
- block-size: 2.5rem;
7700
- inline-size: 100%;
7701
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7702
- }
7703
- .cds--overflow-menu-options__option *,
7704
- .cds--overflow-menu-options__option *::before,
7705
- .cds--overflow-menu-options__option *::after {
7706
- box-sizing: inherit;
7707
- }
7708
-
7709
- .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
7710
- block-size: 2rem;
7711
- }
7712
-
7713
- .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
7714
- block-size: 3rem;
7715
- }
7716
-
7717
- .cds--overflow-menu--divider {
7718
- border-block-start: 1px solid var(--cds-border-subtle);
7719
- }
7720
-
7721
- .cds--overflow-menu--light .cds--overflow-menu--divider {
7722
- border-block-start: 1px solid var(--cds-border-subtle);
7723
- }
7724
-
7725
- a.cds--overflow-menu-options__btn::before {
7726
- display: inline-block;
7727
- block-size: 100%;
7728
- content: "";
7729
- vertical-align: middle;
7730
- }
7731
-
7732
- .cds--overflow-menu-options__btn {
7733
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
7734
- font-weight: var(--cds-body-compact-01-font-weight, 400);
7735
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
7736
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
7737
- outline: 2px solid transparent;
7738
- outline-offset: -2px;
7739
- display: inline-flex;
7740
- align-items: center;
7741
- padding: 0 1rem;
7742
- border: none;
7743
- background-color: transparent;
7744
- block-size: 100%;
7745
- color: var(--cds-text-secondary, #525252);
7746
- cursor: pointer;
7747
- font-family: inherit;
7748
- font-weight: 400;
7749
- inline-size: 100%;
7750
- max-inline-size: 11.25rem;
7751
- text-align: start;
7752
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
7753
- }
7754
- .cds--overflow-menu-options__btn:hover {
7755
- color: var(--cds-text-primary, #161616);
7756
- }
7757
- .cds--overflow-menu-options__btn:focus {
7758
- outline: 2px solid var(--cds-focus, #0f62fe);
7759
- outline-offset: -2px;
7760
- }
7761
- @media screen and (prefers-contrast) {
7762
- .cds--overflow-menu-options__btn:focus {
7763
- outline-style: dotted;
7764
- }
7765
- }
7766
- .cds--overflow-menu-options__btn::-moz-focus-inner {
7767
- border: none;
7768
- }
7769
-
7770
- .cds--overflow-menu-options__btn svg {
7771
- fill: var(--cds-icon-secondary, #525252);
7772
- }
7773
-
7774
- .cds--overflow-menu-options__btn:hover svg {
7775
- fill: var(--cds-icon-primary, #161616);
7776
- }
7777
-
7778
- .cds--overflow-menu-options__option-content {
7779
- overflow: hidden;
7780
- text-overflow: ellipsis;
7781
- white-space: nowrap;
7782
- }
7783
-
7784
- .cds--overflow-menu-options__option:hover {
7785
- background-color: var(--cds-layer-hover);
7786
- }
7787
-
7788
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
7789
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
7790
- background-color: var(--cds-button-danger-primary, #da1e28);
7791
- color: var(--cds-text-on-color, #ffffff);
7792
- }
7793
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
7794
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
7795
- fill: currentColor;
7796
- }
7797
-
7798
- .cds--overflow-menu-options__option--disabled:hover {
7799
- background-color: var(--cds-layer);
7800
- cursor: not-allowed;
7801
- }
7802
-
7803
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
7804
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7805
- cursor: not-allowed;
7806
- }
7807
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
7808
- outline: 2px solid transparent;
7809
- outline-offset: -2px;
7810
- background-color: var(--cds-layer);
7811
- }
7812
-
7813
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg {
7814
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7815
- }
7816
-
7817
- .cds--overflow-menu--flip {
7818
- inset-inline-start: -140px;
7819
- }
7820
- .cds--overflow-menu--flip::before {
7821
- inset-inline-start: 145px;
7822
- }
7823
-
7824
- /* stylelint-disable */
7825
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7826
- .cds--overflow-menu:focus,
7827
- .cds--overflow-menu-options__btn:focus {
7828
- color: Highlight;
7829
- outline: 1px solid Highlight;
7830
- }
7831
- }
7832
-
7833
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7834
- .cds--overflow-menu svg {
7835
- fill: ButtonText;
7836
- }
7837
- }
7838
-
7839
- /*stylelint-enable */
7840
- .cds--chart-holder .cds--overflow-menu,
7841
- .cds--chart-holder .cds--overflow-menu__trigger {
7842
- width: 2rem;
7843
- height: 2rem;
7844
- }
7845
- .cds--chart-holder .cds--cc--toolbar {
7846
- display: flex;
7847
- }
7848
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled,
7849
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button {
7850
- cursor: not-allowed;
7851
- }
7852
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled:hover,
7853
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button:hover {
7854
- background-color: transparent;
7855
- }
7856
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button:focus {
7857
- outline: none;
7858
- }
7859
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled svg {
7860
- fill: var(--cds-icon-on-color-disabled, #8d8d8d);
7861
- }
7862
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip {
7863
- right: 0;
7864
- left: unset;
7865
- }
7866
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip.is-open {
7867
- display: table;
7868
- }
7869
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip ul {
7870
- margin: 0;
7871
- padding: 0;
7872
- }
7873
- .cds--chart-holder .cds--cc--toolbar .cds--loading__background {
7874
- fill: transparent;
7875
- }
7876
- .cds--chart-holder .cds--cc--toolbar .cds--loading__stroke {
7877
- stroke-dashoffset: 99;
7878
- fill: transparent;
7879
- }
7880
-
7881
4668
  .cds--cc--tooltip {
7882
4669
  background-color: var(--cds-layer-02, #ffffff);
7883
4670
  pointer-events: none;
@@ -8706,21 +5493,21 @@ a.cds--overflow-menu-options__btn::before {
8706
5493
  --cds-fluid-display-04-font-weight: 300;
8707
5494
  --cds-fluid-display-04-line-height: 1.19;
8708
5495
  --cds-fluid-display-04-letter-spacing: 0;
8709
- --cds-button-separator: #e0e0e0;
8710
- --cds-button-primary: #0f62fe;
8711
- --cds-button-secondary: #393939;
8712
- --cds-button-tertiary: #0f62fe;
8713
- --cds-button-danger-primary: #da1e28;
8714
- --cds-button-danger-secondary: #da1e28;
8715
- --cds-button-danger-active: #750e13;
8716
- --cds-button-primary-active: #002d9c;
8717
- --cds-button-secondary-active: #6f6f6f;
8718
- --cds-button-tertiary-active: #002d9c;
8719
- --cds-button-danger-hover: #b81921;
8720
- --cds-button-primary-hover: #0050e6;
8721
- --cds-button-secondary-hover: #474747;
8722
- --cds-button-tertiary-hover: #0050e6;
8723
- --cds-button-disabled: #c6c6c6;
5496
+ --cds-color-scheme: light;
5497
+ --cds-alert-stroke: #b28600;
5498
+ --cds-layer-01-absolute: #ffffff;
5499
+ --cds-layer-inverse-absolute: #000000;
5500
+ --cds-null-state: none;
5501
+ --cds-grid-bg: #ffffff;
5502
+ --cds-meter-range-indicator: #a8a8a8;
5503
+ --cds-network-diagrams-background-hover: #f1f1f1;
5504
+ --cds-tooltip-line-border: #e0e0e0;
5505
+ --cds-zone-fill-01: #f4f4f4;
5506
+ --cds-zone-stroke-01: #8d8d8d;
5507
+ --cds-zone-fill-02: #e0e0e0;
5508
+ --cds-zone-stroke-02: #8d8d8d;
5509
+ --cds-zone-fill-03: #c6c6c6;
5510
+ --cds-zone-stroke-03: #8d8d8d;
8724
5511
  --cds-layer: var(--cds-layer-01, #f4f4f4);
8725
5512
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
8726
5513
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -9092,21 +5879,21 @@ a.cds--overflow-menu-options__btn::before {
9092
5879
  --cds-fluid-display-04-font-weight: 300;
9093
5880
  --cds-fluid-display-04-line-height: 1.19;
9094
5881
  --cds-fluid-display-04-letter-spacing: 0;
9095
- --cds-button-separator: #e0e0e0;
9096
- --cds-button-primary: #0f62fe;
9097
- --cds-button-secondary: #393939;
9098
- --cds-button-tertiary: #0f62fe;
9099
- --cds-button-danger-primary: #da1e28;
9100
- --cds-button-danger-secondary: #da1e28;
9101
- --cds-button-danger-active: #750e13;
9102
- --cds-button-primary-active: #002d9c;
9103
- --cds-button-secondary-active: #6f6f6f;
9104
- --cds-button-tertiary-active: #002d9c;
9105
- --cds-button-danger-hover: #b81921;
9106
- --cds-button-primary-hover: #0050e6;
9107
- --cds-button-secondary-hover: #474747;
9108
- --cds-button-tertiary-hover: #0050e6;
9109
- --cds-button-disabled: #c6c6c6;
5882
+ --cds-color-scheme: light;
5883
+ --cds-alert-stroke: #b28600;
5884
+ --cds-layer-01-absolute: #ffffff;
5885
+ --cds-layer-inverse-absolute: #000000;
5886
+ --cds-null-state: none;
5887
+ --cds-grid-bg: #ffffff;
5888
+ --cds-meter-range-indicator: #a8a8a8;
5889
+ --cds-network-diagrams-background-hover: #f1f1f1;
5890
+ --cds-tooltip-line-border: #e0e0e0;
5891
+ --cds-zone-fill-01: #f4f4f4;
5892
+ --cds-zone-stroke-01: #8d8d8d;
5893
+ --cds-zone-fill-02: #e0e0e0;
5894
+ --cds-zone-stroke-02: #8d8d8d;
5895
+ --cds-zone-fill-03: #c6c6c6;
5896
+ --cds-zone-stroke-03: #8d8d8d;
9110
5897
  --cds-layer: var(--cds-layer-01, #f4f4f4);
9111
5898
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9112
5899
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -9478,21 +6265,21 @@ a.cds--overflow-menu-options__btn::before {
9478
6265
  --cds-fluid-display-04-font-weight: 300;
9479
6266
  --cds-fluid-display-04-line-height: 1.19;
9480
6267
  --cds-fluid-display-04-letter-spacing: 0;
9481
- --cds-button-separator: #161616;
9482
- --cds-button-primary: #0f62fe;
9483
- --cds-button-secondary: #6f6f6f;
9484
- --cds-button-tertiary: #ffffff;
9485
- --cds-button-danger-primary: #da1e28;
9486
- --cds-button-danger-secondary: #ff8389;
9487
- --cds-button-danger-active: #750e13;
9488
- --cds-button-primary-active: #002d9c;
9489
- --cds-button-secondary-active: #393939;
9490
- --cds-button-tertiary-active: #c6c6c6;
9491
- --cds-button-danger-hover: #b81921;
9492
- --cds-button-primary-hover: #0050e6;
9493
- --cds-button-secondary-hover: #5e5e5e;
9494
- --cds-button-tertiary-hover: #f4f4f4;
9495
- --cds-button-disabled: rgba(141, 141, 141, 0.3);
6268
+ --cds-color-scheme: dark;
6269
+ --cds-alert-stroke: none;
6270
+ --cds-layer-01-absolute: #000000;
6271
+ --cds-layer-inverse-absolute: #ffffff;
6272
+ --cds-null-state: #161616;
6273
+ --cds-grid-bg: #161616;
6274
+ --cds-meter-range-indicator: #6f6f6f;
6275
+ --cds-network-diagrams-background-hover: #ededed;
6276
+ --cds-tooltip-line-border: #393939;
6277
+ --cds-zone-fill-01: #262626;
6278
+ --cds-zone-stroke-01: #6f6f6f;
6279
+ --cds-zone-fill-02: #393939;
6280
+ --cds-zone-stroke-02: #6f6f6f;
6281
+ --cds-zone-fill-03: #525252;
6282
+ --cds-zone-stroke-03: #6f6f6f;
9496
6283
  --cds-layer: var(--cds-layer-01, #f4f4f4);
9497
6284
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9498
6285
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
@@ -9864,21 +6651,21 @@ a.cds--overflow-menu-options__btn::before {
9864
6651
  --cds-fluid-display-04-font-weight: 300;
9865
6652
  --cds-fluid-display-04-line-height: 1.19;
9866
6653
  --cds-fluid-display-04-letter-spacing: 0;
9867
- --cds-button-separator: #161616;
9868
- --cds-button-primary: #0f62fe;
9869
- --cds-button-secondary: #6f6f6f;
9870
- --cds-button-tertiary: #ffffff;
9871
- --cds-button-danger-primary: #da1e28;
9872
- --cds-button-danger-secondary: #fa4d56;
9873
- --cds-button-danger-active: #750e13;
9874
- --cds-button-primary-active: #002d9c;
9875
- --cds-button-secondary-active: #393939;
9876
- --cds-button-tertiary-active: #c6c6c6;
9877
- --cds-button-danger-hover: #b81921;
9878
- --cds-button-primary-hover: #0050e6;
9879
- --cds-button-secondary-hover: #5e5e5e;
9880
- --cds-button-tertiary-hover: #f4f4f4;
9881
- --cds-button-disabled: rgba(141, 141, 141, 0.3);
6654
+ --cds-color-scheme: dark;
6655
+ --cds-alert-stroke: none;
6656
+ --cds-layer-01-absolute: #000000;
6657
+ --cds-layer-inverse-absolute: #ffffff;
6658
+ --cds-null-state: none;
6659
+ --cds-grid-bg: #161616;
6660
+ --cds-meter-range-indicator: #6f6f6f;
6661
+ --cds-network-diagrams-background-hover: #ededed;
6662
+ --cds-tooltip-line-border: #6f6f6f;
6663
+ --cds-zone-fill-01: #262626;
6664
+ --cds-zone-stroke-01: #6f6f6f;
6665
+ --cds-zone-fill-02: #393939;
6666
+ --cds-zone-stroke-02: #6f6f6f;
6667
+ --cds-zone-fill-03: #525252;
6668
+ --cds-zone-stroke-03: #6f6f6f;
9882
6669
  --cds-layer: var(--cds-layer-01, #f4f4f4);
9883
6670
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
9884
6671
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);