@carbon/charts 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.
@@ -26509,3558 +26509,193 @@ svg.cds--cc--color-legend g.legend-title text {
26509
26509
  stroke: var(--cds-focus, #0f62fe);
26510
26510
  }
26511
26511
 
26512
- .cds--layout--size-xs {
26513
- --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
26514
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26512
+ .cds--cc--grid-brush g.grid-brush rect.selection {
26513
+ fill: none;
26514
+ fill-opacity: 0;
26515
+ stroke: none;
26515
26516
  }
26516
26517
 
26517
- .cds--layout-constraint--size__default-xs {
26518
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
26518
+ .cds--cc--grid-brush rect.frontSelection {
26519
+ fill: var(--cds-layer-accent-01, #e0e0e0);
26520
+ fill-opacity: 0.3;
26521
+ stroke: var(--cds-button-tertiary, #0f62fe);
26519
26522
  }
26520
26523
 
26521
- .cds--layout-constraint--size__min-xs {
26522
- --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
26524
+ .cds--cc--highlight rect.highlight-bar {
26525
+ pointer-events: none;
26526
+ fill: #ee5396;
26527
+ stroke: #ee5396;
26523
26528
  }
26524
26529
 
26525
- .cds--layout-constraint--size__max-xs {
26526
- --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
26530
+ .cds--cc--layout-row {
26531
+ display: flex;
26532
+ flex-direction: row;
26527
26533
  }
26528
26534
 
26529
- .cds--layout--size-sm {
26530
- --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
26531
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26535
+ .cds--cc--layout-column {
26536
+ display: flex;
26537
+ flex-direction: column;
26532
26538
  }
26533
26539
 
26534
- .cds--layout-constraint--size__default-sm {
26535
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
26540
+ .cds--cc--layout-row-reverse {
26541
+ display: flex;
26542
+ flex-direction: row-reverse;
26536
26543
  }
26537
26544
 
26538
- .cds--layout-constraint--size__min-sm {
26539
- --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
26545
+ .cds--cc--layout-column-reverse {
26546
+ display: flex;
26547
+ flex-direction: column-reverse;
26540
26548
  }
26541
26549
 
26542
- .cds--layout-constraint--size__max-sm {
26543
- --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
26550
+ .cds--cc--layout-alignitems-center {
26551
+ align-items: center;
26544
26552
  }
26545
26553
 
26546
- .cds--layout--size-md {
26547
- --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
26548
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26554
+ .cds--cc--chart-wrapper .layout-child {
26555
+ overflow: visible;
26549
26556
  }
26550
26557
 
26551
- .cds--layout-constraint--size__default-md {
26552
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
26558
+ .cds--cc--chart-wrapper svg.layout-svg-wrapper {
26559
+ height: inherit;
26560
+ width: inherit;
26561
+ overflow: visible;
26553
26562
  }
26554
26563
 
26555
- .cds--layout-constraint--size__min-md {
26556
- --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
26564
+ div.cds--cc--legend {
26565
+ font-family: var(--cds-charts-font-family-condensed);
26566
+ display: flex;
26567
+ user-select: none;
26568
+ -webkit-flex-wrap: wrap;
26569
+ flex-wrap: wrap;
26557
26570
  }
26558
26571
 
26559
- .cds--layout-constraint--size__max-md {
26560
- --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
26572
+ div.cds--cc--legend[data-name=legend-items] {
26573
+ width: 100%;
26574
+ margin: -5px;
26561
26575
  }
26562
26576
 
26563
- .cds--layout--size-lg {
26564
- --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
26565
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26577
+ div.cds--cc--legend div.legend-item {
26578
+ display: flex;
26579
+ align-items: center;
26580
+ margin: 5px;
26566
26581
  }
26567
26582
 
26568
- .cds--layout-constraint--size__default-lg {
26569
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
26583
+ div.cds--cc--legend div.legend-item div.checkbox {
26584
+ width: 13px;
26585
+ height: 13px;
26586
+ margin-right: 4px;
26587
+ border-radius: 2px;
26588
+ border: solid 1px var(--cds-background, #ffffff);
26589
+ box-shadow: 0 0 0 2px transparent;
26570
26590
  }
26571
26591
 
26572
- .cds--layout-constraint--size__min-lg {
26573
- --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
26592
+ @media (forced-colors: active) {
26593
+ div.cds--cc--legend div.legend-item div.checkbox {
26594
+ forced-color-adjust: none;
26595
+ }
26596
+ }
26597
+ div.cds--cc--legend div.legend-item div.checkbox:not(.active) {
26598
+ border-color: var(--cds-text-secondary, #525252);
26599
+ background: var(--cds-background, #ffffff);
26574
26600
  }
26575
26601
 
26576
- .cds--layout-constraint--size__max-lg {
26577
- --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
26602
+ div.cds--cc--legend div.legend-item div.checkbox svg {
26603
+ display: none;
26604
+ vertical-align: text-top;
26605
+ fill: var(--cds-background, #ffffff);
26606
+ stroke: var(--cds-background, #ffffff);
26578
26607
  }
26579
26608
 
26580
- .cds--layout--size-xl {
26581
- --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
26582
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26609
+ div.cds--cc--legend div.legend-item.additional svg.icon {
26610
+ margin-right: 4px;
26583
26611
  }
26584
26612
 
26585
- .cds--layout-constraint--size__default-xl {
26586
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
26613
+ div.cds--cc--legend div.legend-item p {
26614
+ font-size: 12px;
26615
+ fill: var(--cds-text-secondary, #525252);
26616
+ line-height: 1rem;
26587
26617
  }
26588
26618
 
26589
- .cds--layout-constraint--size__min-xl {
26590
- --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
26619
+ div.cds--cc--legend.center-aligned {
26620
+ justify-content: center;
26591
26621
  }
26592
26622
 
26593
- .cds--layout-constraint--size__max-xl {
26594
- --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
26623
+ div.cds--cc--legend.right-aligned {
26624
+ justify-content: flex-end;
26595
26625
  }
26596
26626
 
26597
- .cds--layout--size-2xl {
26598
- --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
26599
- --cds-layout-size-height: var(--cds-layout-size-height-context);
26627
+ div.cds--cc--legend.has-deactivated-items div.legend-item div.checkbox svg {
26628
+ display: block;
26600
26629
  }
26601
26630
 
26602
- .cds--layout-constraint--size__default-2xl {
26603
- --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
26631
+ div.cds--cc--legend.vertical {
26632
+ margin: -5px;
26633
+ flex-direction: column;
26604
26634
  }
26605
26635
 
26606
- .cds--layout-constraint--size__min-2xl {
26607
- --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
26636
+ div.cds--cc--legend.vertical div.legend-item {
26637
+ margin-right: 0;
26638
+ margin-bottom: 10px;
26608
26639
  }
26609
26640
 
26610
- .cds--layout-constraint--size__max-2xl {
26611
- --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
26641
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover {
26642
+ cursor: pointer;
26612
26643
  }
26613
26644
 
26614
- .cds--layout--density-condensed {
26615
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
26616
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
26645
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox {
26646
+ border: solid 1px var(--cds-background, #ffffff);
26647
+ box-shadow: 0 0 0 2px #0f62fe;
26617
26648
  }
26618
26649
 
26619
- .cds--layout-constraint--density__default-condensed {
26620
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
26650
+ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox:not(.active) {
26651
+ border-color: var(--cds-text-secondary, #525252);
26621
26652
  }
26622
26653
 
26623
- .cds--layout-constraint--density__min-condensed {
26624
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
26654
+ .cds--cc--meter-title {
26655
+ overflow: visible;
26625
26656
  }
26626
26657
 
26627
- .cds--layout-constraint--density__max-condensed {
26628
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
26658
+ .cds--cc--meter-title text.meter-title,
26659
+ .cds--cc--meter-title text.proportional-meter-title,
26660
+ .cds--cc--meter-title text.proportional-meter-total,
26661
+ .cds--cc--meter-title text.percent-value {
26662
+ fill: var(--cds-text-primary, #161616);
26629
26663
  }
26630
26664
 
26631
- .cds--layout--density-normal {
26632
- --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
26633
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
26665
+ .cds--cc--meter-title g.status-indicator.status--danger circle.status {
26666
+ fill: var(--cds-support-error, #da1e28);
26634
26667
  }
26635
26668
 
26636
- .cds--layout-constraint--density__default-normal {
26637
- --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
26669
+ .cds--cc--meter-title g.status-indicator.status--warning circle.status {
26670
+ fill: var(--cds-support-warning, #f1c21b);
26638
26671
  }
26639
26672
 
26640
- .cds--layout-constraint--density__min-normal {
26641
- --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
26673
+ .cds--cc--meter-title g.status-indicator.status--warning path.innerFill {
26674
+ fill: #000000;
26642
26675
  }
26643
26676
 
26644
- .cds--layout-constraint--density__max-normal {
26645
- --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
26677
+ .cds--cc--meter-title g.status-indicator.status--success circle.status {
26678
+ fill: var(--cds-support-success, #24a148);
26646
26679
  }
26647
26680
 
26648
- :root {
26649
- --cds-layout-size-height-xs: 1.5rem;
26650
- --cds-layout-size-height-sm: 2rem;
26651
- --cds-layout-size-height-md: 2.5rem;
26652
- --cds-layout-size-height-lg: 3rem;
26653
- --cds-layout-size-height-xl: 4rem;
26654
- --cds-layout-size-height-2xl: 5rem;
26655
- --cds-layout-size-height-min: 0px;
26656
- --cds-layout-size-height-max: 999999999px;
26657
- --cds-layout-density-padding-inline-condensed: 0.5rem;
26658
- --cds-layout-density-padding-inline-normal: 1rem;
26659
- --cds-layout-density-padding-inline-min: 0px;
26660
- --cds-layout-density-padding-inline-max: 999999999px;
26681
+ .cds--cc--meter-title g.status-indicator path.innerFill {
26682
+ fill: var(--cds-layer-01-absolute, #ffffff);
26661
26683
  }
26662
26684
 
26663
- :root {
26664
- --cds-layer: var(--cds-layer-01, #f4f4f4);
26665
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
26666
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
26667
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
26668
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
26669
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
26670
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
26671
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
26672
- --cds-field: var(--cds-field-01, #f4f4f4);
26673
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
26674
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
26675
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
26676
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
26677
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
26685
+ .cds--cc--ruler line.ruler-line,
26686
+ .cds--cc--ruler-binned line.ruler-line {
26687
+ stroke: var(--cds-layer-inverse-absolute, #000000);
26688
+ stroke-width: 1px;
26689
+ stroke-dasharray: 2;
26690
+ pointer-events: none;
26678
26691
  }
26679
26692
 
26680
- .cds--layer-one {
26681
- --cds-layer: var(--cds-layer-01, #f4f4f4);
26682
- --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
26683
- --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
26684
- --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
26685
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
26686
- --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
26687
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
26688
- --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
26689
- --cds-field: var(--cds-field-01, #f4f4f4);
26690
- --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
26691
- --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
26692
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
26693
- --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
26694
- --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
26693
+ .cds--cc--skeleton rect.chart-skeleton-backdrop {
26694
+ fill: var(--cds-grid-bg, #ffffff);
26695
26695
  }
26696
26696
 
26697
- .cds--layer-two {
26698
- --cds-layer: var(--cds-layer-02, #ffffff);
26699
- --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
26700
- --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
26701
- --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
26702
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
26703
- --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
26704
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
26705
- --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
26706
- --cds-field: var(--cds-field-02, #ffffff);
26707
- --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
26708
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
26709
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
26710
- --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
26711
- --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
26712
- }
26713
-
26714
- .cds--layer-three {
26715
- --cds-layer: var(--cds-layer-03, #f4f4f4);
26716
- --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
26717
- --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
26718
- --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
26719
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
26720
- --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
26721
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
26722
- --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
26723
- --cds-field: var(--cds-field-03, #f4f4f4);
26724
- --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
26725
- --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
26726
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
26727
- --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
26728
- --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
26729
- }
26730
-
26731
- @keyframes hide-feedback {
26732
- 0% {
26733
- opacity: 1;
26734
- visibility: inherit;
26735
- }
26736
- 100% {
26737
- opacity: 0;
26738
- visibility: hidden;
26739
- }
26740
- }
26741
- @keyframes show-feedback {
26742
- 0% {
26743
- opacity: 0;
26744
- visibility: hidden;
26745
- }
26746
- 100% {
26747
- opacity: 1;
26748
- visibility: inherit;
26749
- }
26750
- }
26751
- @keyframes skeleton {
26752
- 0% {
26753
- opacity: 0.3;
26754
- transform: scaleX(0);
26755
- transform-origin: left;
26756
- }
26757
- 20% {
26758
- opacity: 1;
26759
- transform: scaleX(1);
26760
- transform-origin: left;
26761
- }
26762
- 28% {
26763
- transform: scaleX(1);
26764
- transform-origin: right;
26765
- }
26766
- 51% {
26767
- transform: scaleX(0);
26768
- transform-origin: right;
26769
- }
26770
- 58% {
26771
- transform: scaleX(0);
26772
- transform-origin: right;
26773
- }
26774
- 82% {
26775
- transform: scaleX(1);
26776
- transform-origin: right;
26777
- }
26778
- 83% {
26779
- transform: scaleX(1);
26780
- transform-origin: left;
26781
- }
26782
- 96% {
26783
- transform: scaleX(0);
26784
- transform-origin: left;
26785
- }
26786
- 100% {
26787
- opacity: 0.3;
26788
- transform: scaleX(0);
26789
- transform-origin: left;
26790
- }
26791
- }
26792
- .cds--assistive-text,
26793
- .cds--visually-hidden {
26794
- position: absolute;
26795
- overflow: hidden;
26796
- padding: 0;
26797
- border: 0;
26798
- margin: -1px;
26799
- block-size: 1px;
26800
- clip: rect(0, 0, 0, 0);
26801
- inline-size: 1px;
26802
- visibility: inherit;
26803
- white-space: nowrap;
26804
- }
26805
-
26806
- .cds--popover-container {
26807
- position: relative;
26808
- display: inline-block;
26809
- }
26810
-
26811
- .cds--popover--high-contrast .cds--popover {
26812
- --cds-popover-background-color: var(--cds-background-inverse, #393939);
26813
- --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
26814
- }
26815
-
26816
- .cds--popover--drop-shadow .cds--popover {
26817
- --cds-popover-drop-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
26818
- }
26819
-
26820
- .cds--popover--caret {
26821
- --cds-popover-offset: 0.625rem;
26822
- }
26823
-
26824
- .cds--popover {
26825
- position: absolute;
26826
- z-index: 6000;
26827
- filter: var(--cds-popover-drop-shadow, none);
26828
- inset: 0;
26829
- pointer-events: none;
26830
- }
26831
-
26832
- .cds--popover-content {
26833
- box-sizing: border-box;
26834
- padding: 0;
26835
- border: 0;
26836
- margin: 0;
26837
- font-family: inherit;
26838
- font-size: 100%;
26839
- vertical-align: baseline;
26840
- position: absolute;
26841
- z-index: 6000;
26842
- display: none;
26843
- background-color: var(--cds-popover-background-color, var(--cds-layer));
26844
- border-radius: var(--cds-popover-border-radius, 2px);
26845
- color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
26846
- inline-size: max-content;
26847
- max-inline-size: 23rem;
26848
- pointer-events: auto;
26849
- }
26850
-
26851
- .cds--popover-content *,
26852
- .cds--popover-content *::before,
26853
- .cds--popover-content *::after {
26854
- box-sizing: inherit;
26855
- }
26856
-
26857
- .cds--popover--open > .cds--popover > .cds--popover-content {
26858
- display: block;
26859
- }
26860
-
26861
- .cds--popover-content::before {
26862
- position: absolute;
26863
- display: none;
26864
- content: "";
26865
- }
26866
-
26867
- .cds--popover--open > .cds--popover > .cds--popover-content::before {
26868
- display: block;
26869
- }
26870
-
26871
- .cds--popover-caret {
26872
- position: absolute;
26873
- z-index: 6000;
26874
- display: none;
26875
- background-color: var(--cds-popover-background-color, var(--cds-layer));
26876
- will-change: transform;
26877
- }
26878
-
26879
- .cds--popover--open > .cds--popover > .cds--popover-caret {
26880
- display: block;
26881
- }
26882
-
26883
- .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
26884
- display: none;
26885
- }
26886
-
26887
- .cds--popover--bottom > .cds--popover > .cds--popover-content {
26888
- inset-block-end: 0;
26889
- inset-inline-start: 50%;
26890
- transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
26891
- }
26892
-
26893
- [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-content {
26894
- transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
26895
- }
26896
-
26897
- .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
26898
- inset-block-end: 0;
26899
- inset-inline-start: 0;
26900
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
26901
- }
26902
-
26903
- [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
26904
- inset-inline-end: 0;
26905
- inset-inline-start: initial;
26906
- }
26907
-
26908
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
26909
- inset-block-end: 0;
26910
- inset-inline-end: 0;
26911
- transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
26912
- }
26913
-
26914
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
26915
- inset-inline-start: 0;
26916
- }
26917
-
26918
- .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
26919
- .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
26920
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
26921
- block-size: var(--cds-popover-offset, 0rem);
26922
- inset-block-start: 0;
26923
- inset-inline-end: 0;
26924
- inset-inline-start: 0;
26925
- transform: translateY(-100%);
26926
- }
26927
-
26928
- .cds--popover--bottom > .cds--popover > .cds--popover-caret,
26929
- .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
26930
- .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
26931
- block-size: var(--cds-popover-caret-height, 0.375rem);
26932
- clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
26933
- inline-size: var(--cds-popover-caret-width, 0.75rem);
26934
- inset-block-end: 0;
26935
- inset-inline-start: 50%;
26936
- transform: translate(-50%, var(--cds-popover-offset, 0rem));
26937
- }
26938
-
26939
- [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
26940
- [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
26941
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
26942
- transform: translate(50%, var(--cds-popover-offset, 0rem));
26943
- }
26944
-
26945
- .cds--popover--top > .cds--popover > .cds--popover-content {
26946
- inset-block-start: 0;
26947
- inset-inline-start: 50%;
26948
- transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
26949
- }
26950
-
26951
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-content {
26952
- transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
26953
- }
26954
-
26955
- .cds--popover--top-left > .cds--popover > .cds--popover-content {
26956
- inset-block-start: 0;
26957
- inset-inline-start: 0;
26958
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
26959
- }
26960
-
26961
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-content {
26962
- inset-inline-end: 0;
26963
- inset-inline-start: initial;
26964
- }
26965
-
26966
- .cds--popover--top-right > .cds--popover > .cds--popover-content {
26967
- inset-block-start: 0;
26968
- inset-inline-end: 0;
26969
- transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
26970
- }
26971
-
26972
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-content {
26973
- inset-inline-start: 0;
26974
- }
26975
-
26976
- .cds--popover--top > .cds--popover > .cds--popover-content::before,
26977
- .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
26978
- .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
26979
- block-size: var(--cds-popover-offset, 0rem);
26980
- inset-block-end: 0;
26981
- inset-inline-end: 0;
26982
- inset-inline-start: 0;
26983
- transform: translateY(100%);
26984
- }
26985
-
26986
- .cds--popover--top > .cds--popover > .cds--popover-caret,
26987
- .cds--popover--top-left > .cds--popover > .cds--popover-caret,
26988
- .cds--popover--top-right > .cds--popover > .cds--popover-caret {
26989
- block-size: var(--cds-popover-caret-height, 0.375rem);
26990
- clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
26991
- inline-size: var(--cds-popover-caret-width, 0.75rem);
26992
- inset-block-start: 0;
26993
- inset-inline-start: 50%;
26994
- transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
26995
- }
26996
-
26997
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-caret,
26998
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-caret,
26999
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-caret {
27000
- transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
27001
- }
27002
-
27003
- .cds--popover--right > .cds--popover > .cds--popover-content {
27004
- inset-block-start: 50%;
27005
- inset-inline-start: 100%;
27006
- transform: translate(var(--cds-popover-offset, 0rem), -50%);
27007
- }
27008
-
27009
- .cds--popover--right-top > .cds--popover > .cds--popover-content {
27010
- inset-block-start: 50%;
27011
- inset-inline-start: 100%;
27012
- transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
27013
- }
27014
-
27015
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
27016
- inset-block-end: 50%;
27017
- inset-inline-start: 100%;
27018
- transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
27019
- }
27020
-
27021
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-content,
27022
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-content,
27023
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-content {
27024
- inset-inline-end: 100%;
27025
- inset-inline-start: initial;
27026
- }
27027
-
27028
- .cds--popover--right > .cds--popover > .cds--popover-content::before,
27029
- .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
27030
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
27031
- inline-size: var(--cds-popover-offset, 0rem);
27032
- inset-block-end: 0;
27033
- inset-block-start: 0;
27034
- inset-inline-start: 0;
27035
- transform: translateX(-100%);
27036
- }
27037
-
27038
- .cds--popover--right > .cds--popover > .cds--popover-caret,
27039
- .cds--popover--right-top > .cds--popover > .cds--popover-caret,
27040
- .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
27041
- block-size: var(--cds-popover-caret-width, 0.75rem);
27042
- clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
27043
- inline-size: var(--cds-popover-caret-height, 0.375rem);
27044
- inset-block-start: 50%;
27045
- inset-inline-start: 100%;
27046
- transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
27047
- }
27048
-
27049
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-caret,
27050
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-caret,
27051
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
27052
- inset-inline-end: 100%;
27053
- inset-inline-start: initial;
27054
- }
27055
-
27056
- .cds--popover--left > .cds--popover > .cds--popover-content {
27057
- inset-block-start: 50%;
27058
- inset-inline-end: 100%;
27059
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
27060
- }
27061
-
27062
- .cds--popover--left-top > .cds--popover > .cds--popover-content {
27063
- inset-block-start: -50%;
27064
- inset-inline-end: 100%;
27065
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
27066
- }
27067
-
27068
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
27069
- inset-block-end: -50%;
27070
- inset-inline-end: 100%;
27071
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
27072
- }
27073
-
27074
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
27075
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-content,
27076
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-content {
27077
- inset-inline-end: initial;
27078
- inset-inline-start: 100%;
27079
- }
27080
-
27081
- .cds--popover--left > .cds--popover > .cds--popover-content::before,
27082
- .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
27083
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
27084
- inline-size: var(--cds-popover-offset, 0rem);
27085
- inset-block-end: 0;
27086
- inset-block-start: 0;
27087
- inset-inline-end: 0;
27088
- transform: translateX(100%);
27089
- }
27090
-
27091
- .cds--popover--left > .cds--popover > .cds--popover-caret,
27092
- .cds--popover--left-top > .cds--popover > .cds--popover-caret,
27093
- .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
27094
- block-size: var(--cds-popover-caret-width, 0.75rem);
27095
- clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
27096
- inline-size: var(--cds-popover-caret-height, 0.375rem);
27097
- inset-block-start: 50%;
27098
- inset-inline-end: 100%;
27099
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
27100
- }
27101
-
27102
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-caret,
27103
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-caret,
27104
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
27105
- inset-inline-end: initial;
27106
- inset-inline-start: 100%;
27107
- }
27108
-
27109
- .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
27110
- border-radius: 0;
27111
- }
27112
-
27113
- .cds--popover--tab-tip .cds--popover {
27114
- will-change: filter;
27115
- }
27116
-
27117
- .cds--popover--tab-tip__button {
27118
- box-sizing: border-box;
27119
- padding: 0;
27120
- border: 0;
27121
- margin: 0;
27122
- font-family: inherit;
27123
- font-size: 100%;
27124
- vertical-align: baseline;
27125
- display: inline-block;
27126
- padding: 0;
27127
- border: 0;
27128
- appearance: none;
27129
- background: none;
27130
- cursor: pointer;
27131
- text-align: start;
27132
- inline-size: 100%;
27133
- position: relative;
27134
- display: inline-flex;
27135
- align-items: center;
27136
- justify-content: center;
27137
- block-size: 2rem;
27138
- inline-size: 2rem;
27139
- }
27140
-
27141
- .cds--popover--tab-tip__button *,
27142
- .cds--popover--tab-tip__button *::before,
27143
- .cds--popover--tab-tip__button *::after {
27144
- box-sizing: inherit;
27145
- }
27146
-
27147
- .cds--popover--tab-tip__button::-moz-focus-inner {
27148
- border: 0;
27149
- }
27150
-
27151
- .cds--popover--tab-tip__button:focus {
27152
- outline: 2px solid var(--cds-focus, #0f62fe);
27153
- outline-offset: -2px;
27154
- }
27155
-
27156
- @media screen and (prefers-contrast) {
27157
- .cds--popover--tab-tip__button:focus {
27158
- outline-style: dotted;
27159
- }
27160
- }
27161
- .cds--popover--tab-tip__button:hover {
27162
- background-color: var(--cds-layer-hover);
27163
- }
27164
-
27165
- .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button {
27166
- background: var(--cds-layer);
27167
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
27168
- }
27169
-
27170
- .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after {
27171
- position: absolute;
27172
- z-index: 6001;
27173
- background: var(--cds-layer);
27174
- block-size: 2px;
27175
- content: "";
27176
- inline-size: 100%;
27177
- inset-block-end: 0;
27178
- }
27179
-
27180
- .cds--popover--tab-tip__button svg {
27181
- fill: var(--cds-icon-primary, #161616);
27182
- }
27183
-
27184
- .cds--tooltip {
27185
- --cds-popover-offset: 12px;
27186
- }
27187
-
27188
- .cds--tooltip-content {
27189
- font-size: var(--cds-body-01-font-size, 0.875rem);
27190
- font-weight: var(--cds-body-01-font-weight, 400);
27191
- line-height: var(--cds-body-01-line-height, 1.42857);
27192
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
27193
- padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
27194
- color: var(--cds-text-inverse, #ffffff);
27195
- max-inline-size: 18rem;
27196
- }
27197
-
27198
- .cds--icon-tooltip {
27199
- --cds-tooltip-padding-block: 0.125rem;
27200
- --cds-popover-caret-width: 0.5rem;
27201
- --cds-popover-caret-height: 0.25rem;
27202
- --cds-popover-offset: 0.5rem;
27203
- }
27204
-
27205
- .cds--icon-tooltip .cds--tooltip-content {
27206
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
27207
- font-weight: var(--cds-body-compact-01-font-weight, 400);
27208
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
27209
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
27210
- }
27211
-
27212
- .cds--definition-term {
27213
- box-sizing: border-box;
27214
- padding: 0;
27215
- border: 0;
27216
- margin: 0;
27217
- font-family: inherit;
27218
- font-size: 100%;
27219
- vertical-align: baseline;
27220
- display: inline-block;
27221
- padding: 0;
27222
- border: 0;
27223
- appearance: none;
27224
- background: none;
27225
- cursor: pointer;
27226
- text-align: start;
27227
- inline-size: 100%;
27228
- border-block-end: 1px dotted var(--cds-border-strong);
27229
- border-radius: 0;
27230
- color: var(--cds-text-primary, #161616);
27231
- }
27232
-
27233
- .cds--definition-term *,
27234
- .cds--definition-term *::before,
27235
- .cds--definition-term *::after {
27236
- box-sizing: inherit;
27237
- }
27238
-
27239
- .cds--definition-term::-moz-focus-inner {
27240
- border: 0;
27241
- }
27242
-
27243
- .cds--definition-term:focus {
27244
- outline: 1px solid var(--cds-focus, #0f62fe);
27245
- border-block-end-color: var(--cds-border-interactive, #0f62fe);
27246
- }
27247
-
27248
- @media screen and (prefers-contrast) {
27249
- .cds--definition-term:focus {
27250
- outline-style: dotted;
27251
- }
27252
- }
27253
- .cds--definition-term:hover {
27254
- border-block-end-color: var(--cds-border-interactive, #0f62fe);
27255
- }
27256
-
27257
- .cds--definition-tooltip {
27258
- font-size: var(--cds-body-01-font-size, 0.875rem);
27259
- font-weight: var(--cds-body-01-font-weight, 400);
27260
- line-height: var(--cds-body-01-line-height, 1.42857);
27261
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
27262
- padding: 0.5rem 1rem;
27263
- max-inline-size: 11rem;
27264
- }
27265
-
27266
- .cds--btn {
27267
- --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));
27268
- --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));
27269
- --temp-1lh: (
27270
- var(--cds-body-compact-01-line-height, 1.28572) * 1em
27271
- );
27272
- --temp-expressive-1lh: (
27273
- var(--cds-body-compact-02-line-height, 1.375) * 1em
27274
- );
27275
- --temp-padding-block-max: calc(
27276
- (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
27277
- 0.0625rem
27278
- );
27279
- box-sizing: border-box;
27280
- padding: 0;
27281
- border: 0;
27282
- margin: 0;
27283
- font-family: inherit;
27284
- font-size: 100%;
27285
- vertical-align: baseline;
27286
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
27287
- font-weight: var(--cds-body-compact-01-font-weight, 400);
27288
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
27289
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
27290
- position: relative;
27291
- display: inline-flex;
27292
- flex-shrink: 0;
27293
- justify-content: space-between;
27294
- margin: 0;
27295
- border-radius: 0;
27296
- cursor: pointer;
27297
- inline-size: max-content;
27298
- max-inline-size: 20rem;
27299
- min-block-size: var(--cds-layout-size-height-local);
27300
- outline: none;
27301
- padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
27302
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
27303
- padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
27304
- text-align: start;
27305
- text-decoration: none;
27306
- 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);
27307
- vertical-align: top;
27308
- }
27309
-
27310
- .cds--btn *,
27311
- .cds--btn *::before,
27312
- .cds--btn *::after {
27313
- box-sizing: inherit;
27314
- }
27315
-
27316
- .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 {
27317
- border-color: var(--cds-button-disabled, #c6c6c6);
27318
- background: var(--cds-button-disabled, #c6c6c6);
27319
- box-shadow: none;
27320
- color: var(--cds-text-on-color-disabled, #8d8d8d);
27321
- cursor: not-allowed;
27322
- }
27323
-
27324
- .cds--btn .cds--btn__icon {
27325
- position: absolute;
27326
- flex-shrink: 0;
27327
- block-size: 1rem;
27328
- inline-size: 1rem;
27329
- inset-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
27330
- inset-inline-end: var(--cds-layout-density-padding-inline-local);
27331
- margin-block-start: 0.0625rem;
27332
- }
27333
-
27334
- .cds--btn::-moz-focus-inner {
27335
- padding: 0;
27336
- border: 0;
27337
- }
27338
-
27339
- .cds--btn--primary {
27340
- border-width: 1px;
27341
- border-style: solid;
27342
- border-color: transparent;
27343
- background-color: var(--cds-button-primary, #0f62fe);
27344
- color: var(--cds-text-on-color, #ffffff);
27345
- }
27346
-
27347
- .cds--btn--primary:hover {
27348
- background-color: var(--cds-button-primary-hover, #0050e6);
27349
- }
27350
-
27351
- .cds--btn--primary:focus {
27352
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27353
- 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);
27354
- }
27355
-
27356
- .cds--btn--primary:active {
27357
- background-color: var(--cds-button-primary-active, #002d9c);
27358
- }
27359
-
27360
- .cds--btn--primary .cds--btn__icon,
27361
- .cds--btn--primary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27362
- fill: currentColor;
27363
- }
27364
-
27365
- .cds--btn--primary:hover {
27366
- color: var(--cds-text-on-color, #ffffff);
27367
- }
27368
-
27369
- .cds--btn--secondary {
27370
- border-width: 1px;
27371
- border-style: solid;
27372
- border-color: transparent;
27373
- background-color: var(--cds-button-secondary, #393939);
27374
- color: var(--cds-text-on-color, #ffffff);
27375
- }
27376
-
27377
- .cds--btn--secondary:hover {
27378
- background-color: var(--cds-button-secondary-hover, #474747);
27379
- }
27380
-
27381
- .cds--btn--secondary:focus {
27382
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27383
- 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);
27384
- }
27385
-
27386
- .cds--btn--secondary:active {
27387
- background-color: var(--cds-button-secondary-active, #6f6f6f);
27388
- }
27389
-
27390
- .cds--btn--secondary .cds--btn__icon,
27391
- .cds--btn--secondary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27392
- fill: currentColor;
27393
- }
27394
-
27395
- .cds--btn--secondary:hover, .cds--btn--secondary:focus {
27396
- color: var(--cds-text-on-color, #ffffff);
27397
- }
27398
-
27399
- .cds--btn--tertiary {
27400
- border-width: 1px;
27401
- border-style: solid;
27402
- border-color: var(--cds-button-tertiary, #0f62fe);
27403
- background-color: transparent;
27404
- color: var(--cds-button-tertiary, #0f62fe);
27405
- }
27406
-
27407
- .cds--btn--tertiary:hover {
27408
- background-color: var(--cds-button-tertiary-hover, #0050e6);
27409
- }
27410
-
27411
- .cds--btn--tertiary:focus {
27412
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27413
- 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);
27414
- }
27415
-
27416
- .cds--btn--tertiary:active {
27417
- background-color: var(--cds-button-tertiary-active, #002d9c);
27418
- }
27419
-
27420
- .cds--btn--tertiary .cds--btn__icon,
27421
- .cds--btn--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27422
- fill: currentColor;
27423
- }
27424
-
27425
- .cds--btn--tertiary:hover {
27426
- color: var(--cds-text-inverse, #ffffff);
27427
- }
27428
-
27429
- .cds--btn--tertiary:focus {
27430
- background-color: var(--cds-button-tertiary, #0f62fe);
27431
- color: var(--cds-text-inverse, #ffffff);
27432
- }
27433
-
27434
- .cds--btn--tertiary:active {
27435
- border-color: transparent;
27436
- background-color: var(--cds-button-tertiary-active, #002d9c);
27437
- color: var(--cds-text-inverse, #ffffff);
27438
- }
27439
-
27440
- .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 {
27441
- background: transparent;
27442
- color: var(--cds-text-on-color-disabled, #8d8d8d);
27443
- outline: none;
27444
- }
27445
-
27446
- .cds--btn--ghost {
27447
- border-width: 1px;
27448
- border-style: solid;
27449
- border-color: transparent;
27450
- background-color: transparent;
27451
- color: var(--cds-link-primary, #0f62fe);
27452
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
27453
- }
27454
-
27455
- .cds--btn--ghost:hover {
27456
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
27457
- }
27458
-
27459
- .cds--btn--ghost:focus {
27460
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27461
- 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);
27462
- }
27463
-
27464
- .cds--btn--ghost:active {
27465
- background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
27466
- }
27467
-
27468
- .cds--btn--ghost .cds--btn__icon,
27469
- .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27470
- fill: currentColor;
27471
- }
27472
-
27473
- .cds--btn--ghost .cds--btn__icon {
27474
- position: static;
27475
- margin-inline-start: 0.5rem;
27476
- }
27477
-
27478
- .cds--btn--ghost:hover, .cds--btn--ghost:active {
27479
- color: var(--cds-link-primary-hover, #0043ce);
27480
- }
27481
-
27482
- .cds--btn--ghost:active {
27483
- background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
27484
- }
27485
-
27486
- .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 {
27487
- border-color: transparent;
27488
- background: transparent;
27489
- color: var(--cds-text-on-color-disabled, #8d8d8d);
27490
- outline: none;
27491
- }
27492
-
27493
- .cds--btn--ghost:not([disabled]) svg {
27494
- fill: var(--cds-icon-primary, #161616);
27495
- }
27496
-
27497
- .cds--btn--icon-only {
27498
- justify-content: center;
27499
- padding: 0;
27500
- block-size: var(--cds-layout-size-height-local);
27501
- inline-size: var(--cds-layout-size-height-local);
27502
- padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
27503
- }
27504
-
27505
- .cds--btn--icon-only > :first-child {
27506
- margin-block-start: 0.0625rem;
27507
- min-inline-size: 1rem;
27508
- }
27509
-
27510
- .cds--btn--icon-only .cds--btn__icon {
27511
- position: static;
27512
- }
27513
-
27514
- .cds--btn--icon-only.cds--btn--ghost .cds--btn__icon, .cds--btn--icon-only.cds--btn--danger--ghost .cds--btn__icon {
27515
- margin: 0;
27516
- }
27517
-
27518
- .cds--btn--icon-only.cds--btn--selected {
27519
- background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
27520
- }
27521
-
27522
- .cds--btn path[data-icon-path=inner-path] {
27523
- fill: none;
27524
- }
27525
-
27526
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
27527
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
27528
- fill: var(--cds-icon-primary, #161616);
27529
- }
27530
-
27531
- .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
27532
- .cds--btn--ghost.cds--btn--icon-only[disabled] .cds--btn__icon,
27533
- .cds--btn.cds--btn--icon-only.cds--btn--ghost[disabled]:hover .cds--btn__icon {
27534
- fill: var(--cds-icon-on-color-disabled, #8d8d8d);
27535
- }
27536
-
27537
- .cds--btn--ghost.cds--btn--icon-only[disabled] {
27538
- cursor: not-allowed;
27539
- }
27540
-
27541
- .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
27542
- cursor: not-allowed;
27543
- }
27544
-
27545
- .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
27546
- pointer-events: none;
27547
- }
27548
-
27549
- .cds--btn--danger {
27550
- border-width: 1px;
27551
- border-style: solid;
27552
- border-color: transparent;
27553
- background-color: var(--cds-button-danger-primary, #da1e28);
27554
- color: var(--cds-text-on-color, #ffffff);
27555
- }
27556
-
27557
- .cds--btn--danger:hover {
27558
- background-color: var(--cds-button-danger-hover, #b81921);
27559
- }
27560
-
27561
- .cds--btn--danger:focus {
27562
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27563
- 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);
27564
- }
27565
-
27566
- .cds--btn--danger:active {
27567
- background-color: var(--cds-button-danger-active, #750e13);
27568
- }
27569
-
27570
- .cds--btn--danger .cds--btn__icon,
27571
- .cds--btn--danger .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27572
- fill: currentColor;
27573
- }
27574
-
27575
- .cds--btn--danger:hover {
27576
- color: var(--cds-text-on-color, #ffffff);
27577
- }
27578
-
27579
- .cds--btn--danger--tertiary {
27580
- border-width: 1px;
27581
- border-style: solid;
27582
- border-color: var(--cds-button-danger-secondary, #da1e28);
27583
- background-color: transparent;
27584
- color: var(--cds-button-danger-secondary, #da1e28);
27585
- }
27586
-
27587
- .cds--btn--danger--tertiary:hover {
27588
- background-color: var(--cds-button-danger-hover, #b81921);
27589
- }
27590
-
27591
- .cds--btn--danger--tertiary:focus {
27592
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27593
- 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);
27594
- }
27595
-
27596
- .cds--btn--danger--tertiary:active {
27597
- background-color: var(--cds-button-danger-active, #750e13);
27598
- }
27599
-
27600
- .cds--btn--danger--tertiary .cds--btn__icon,
27601
- .cds--btn--danger--tertiary .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27602
- fill: currentColor;
27603
- }
27604
-
27605
- .cds--btn--danger--tertiary:hover {
27606
- border-color: var(--cds-button-danger-hover, #b81921);
27607
- color: var(--cds-text-on-color, #ffffff);
27608
- }
27609
-
27610
- .cds--btn--danger--tertiary:focus {
27611
- background-color: var(--cds-button-danger-primary, #da1e28);
27612
- color: var(--cds-text-on-color, #ffffff);
27613
- }
27614
-
27615
- .cds--btn--danger--tertiary:active {
27616
- border-color: var(--cds-button-danger-active, #750e13);
27617
- background-color: var(--cds-button-danger-active, #750e13);
27618
- color: var(--cds-text-on-color, #ffffff);
27619
- }
27620
-
27621
- .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 {
27622
- background: transparent;
27623
- color: var(--cds-text-on-color-disabled, #8d8d8d);
27624
- outline: none;
27625
- }
27626
-
27627
- .cds--btn--danger--ghost {
27628
- border-width: 1px;
27629
- border-style: solid;
27630
- border-color: transparent;
27631
- background-color: transparent;
27632
- color: var(--cds-button-danger-secondary, #da1e28);
27633
- padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
27634
- }
27635
-
27636
- .cds--btn--danger--ghost:hover {
27637
- background-color: var(--cds-button-danger-hover, #b81921);
27638
- }
27639
-
27640
- .cds--btn--danger--ghost:focus {
27641
- border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27642
- 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);
27643
- }
27644
-
27645
- .cds--btn--danger--ghost:active {
27646
- background-color: var(--cds-button-danger-active, #750e13);
27647
- }
27648
-
27649
- .cds--btn--danger--ghost .cds--btn__icon,
27650
- .cds--btn--danger--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
27651
- fill: currentColor;
27652
- }
27653
-
27654
- .cds--btn--danger--ghost .cds--btn__icon {
27655
- position: static;
27656
- margin-inline-start: 0.5rem;
27657
- }
27658
-
27659
- .cds--btn--danger--ghost:hover, .cds--btn--danger--ghost:active {
27660
- color: var(--cds-text-on-color, #ffffff);
27661
- }
27662
-
27663
- .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 {
27664
- border-color: transparent;
27665
- background: transparent;
27666
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
27667
- outline: none;
27668
- }
27669
-
27670
- .cds--btn--expressive {
27671
- font-size: var(--cds-body-compact-02-font-size, 1rem);
27672
- font-weight: var(--cds-body-compact-02-font-weight, 400);
27673
- line-height: var(--cds-body-compact-02-line-height, 1.375);
27674
- letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
27675
- padding-block: min((var(--cds-layout-size-height-local) - var(--temp-expressive-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
27676
- }
27677
-
27678
- .cds--btn--icon-only.cds--btn--expressive {
27679
- padding: 12px 13px;
27680
- }
27681
-
27682
- .cds--btn.cds--btn--expressive .cds--btn__icon {
27683
- block-size: 1.25rem;
27684
- inline-size: 1.25rem;
27685
- }
27686
-
27687
- .cds--btn-set .cds--btn.cds--btn--expressive {
27688
- max-inline-size: 20rem;
27689
- }
27690
-
27691
- .cds--btn.cds--skeleton {
27692
- position: relative;
27693
- padding: 0;
27694
- border: none;
27695
- background: var(--cds-skeleton-background, #e8e8e8);
27696
- box-shadow: none;
27697
- pointer-events: none;
27698
- inline-size: 9.375rem;
27699
- }
27700
-
27701
- .cds--btn.cds--skeleton:hover, .cds--btn.cds--skeleton:focus, .cds--btn.cds--skeleton:active {
27702
- border: none;
27703
- cursor: default;
27704
- outline: none;
27705
- }
27706
-
27707
- .cds--btn.cds--skeleton::before {
27708
- position: absolute;
27709
- animation: 3000ms ease-in-out skeleton infinite;
27710
- background: var(--cds-skeleton-element, #c6c6c6);
27711
- block-size: 100%;
27712
- content: "";
27713
- inline-size: 100%;
27714
- will-change: transform-origin, transform, opacity;
27715
- }
27716
-
27717
- @media (prefers-reduced-motion: reduce) {
27718
- .cds--btn.cds--skeleton::before {
27719
- animation: none;
27720
- }
27721
- }
27722
- .cds--btn-set {
27723
- display: flex;
27724
- }
27725
-
27726
- .cds--btn-set--stacked {
27727
- flex-direction: column;
27728
- }
27729
-
27730
- .cds--btn-set .cds--btn {
27731
- inline-size: 100%;
27732
- max-inline-size: 12.25rem;
27733
- }
27734
-
27735
- .cds--btn-set .cds--btn:not(:focus) {
27736
- box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
27737
- }
27738
-
27739
- .cds--btn-set .cds--btn:first-of-type:not(:focus) {
27740
- box-shadow: inherit;
27741
- }
27742
-
27743
- .cds--btn-set .cds--btn:focus + .cds--btn {
27744
- box-shadow: inherit;
27745
- }
27746
-
27747
- .cds--btn-set--stacked .cds--btn:not(:focus) {
27748
- box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
27749
- }
27750
-
27751
- .cds--btn-set--stacked .cds--btn:first-of-type:not(:focus) {
27752
- box-shadow: inherit;
27753
- }
27754
-
27755
- .cds--btn-set .cds--btn.cds--btn--disabled {
27756
- box-shadow: -0.0625rem 0 0 0 var(--cds-icon-on-color-disabled, #8d8d8d);
27757
- }
27758
-
27759
- .cds--btn-set .cds--btn.cds--btn--disabled:first-of-type {
27760
- box-shadow: none;
27761
- }
27762
-
27763
- .cds--btn-set--stacked .cds--btn.cds--btn--disabled {
27764
- box-shadow: 0 -0.0625rem 0 0 var(--cds-layer-selected-disabled, #8d8d8d);
27765
- }
27766
-
27767
- .cds--btn-set--stacked .cds--btn.cds--btn--disabled:first-of-type {
27768
- box-shadow: none;
27769
- }
27770
-
27771
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27772
- .cds--btn:focus {
27773
- color: Highlight;
27774
- outline: 1px solid Highlight;
27775
- }
27776
- }
27777
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
27778
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon path:not([data-icon-path]):not([fill=none]),
27779
- .cds--btn--ghost.cds--btn--icon-only .cds--btn__icon {
27780
- fill: ButtonText;
27781
- }
27782
- }
27783
- [dir=rtl] .cds--btn-set .cds--btn:not(:focus) {
27784
- box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
27785
- }
27786
-
27787
- .cds--cc--grid-brush g.grid-brush rect.selection {
27788
- fill: none;
27789
- fill-opacity: 0;
27790
- stroke: none;
27791
- }
27792
-
27793
- .cds--cc--grid-brush rect.frontSelection {
27794
- fill: var(--cds-layer-accent-01, #e0e0e0);
27795
- fill-opacity: 0.3;
27796
- stroke: var(--cds-button-tertiary, #0f62fe);
27797
- }
27798
-
27799
- .cds--cc--highlight rect.highlight-bar {
27800
- pointer-events: none;
27801
- fill: #ee5396;
27802
- stroke: #ee5396;
27803
- }
27804
-
27805
- .cds--cc--layout-row {
27806
- display: flex;
27807
- flex-direction: row;
27808
- }
27809
-
27810
- .cds--cc--layout-column {
27811
- display: flex;
27812
- flex-direction: column;
27813
- }
27814
-
27815
- .cds--cc--layout-row-reverse {
27816
- display: flex;
27817
- flex-direction: row-reverse;
27818
- }
27819
-
27820
- .cds--cc--layout-column-reverse {
27821
- display: flex;
27822
- flex-direction: column-reverse;
27823
- }
27824
-
27825
- .cds--cc--layout-alignitems-center {
27826
- align-items: center;
27827
- }
27828
-
27829
- .cds--cc--chart-wrapper .layout-child {
27830
- overflow: visible;
27831
- }
27832
-
27833
- .cds--cc--chart-wrapper svg.layout-svg-wrapper {
27834
- height: inherit;
27835
- width: inherit;
27836
- overflow: visible;
27837
- }
27838
-
27839
- div.cds--cc--legend {
27840
- font-family: var(--cds-charts-font-family-condensed);
27841
- display: flex;
27842
- user-select: none;
27843
- -webkit-flex-wrap: wrap;
27844
- flex-wrap: wrap;
27845
- }
27846
-
27847
- div.cds--cc--legend[data-name=legend-items] {
27848
- width: 100%;
27849
- margin: -5px;
27850
- }
27851
-
27852
- div.cds--cc--legend div.legend-item {
27853
- display: flex;
27854
- align-items: center;
27855
- margin: 5px;
27856
- }
27857
-
27858
- div.cds--cc--legend div.legend-item div.checkbox {
27859
- width: 13px;
27860
- height: 13px;
27861
- margin-right: 4px;
27862
- border-radius: 2px;
27863
- border: solid 1px var(--cds-background, #ffffff);
27864
- box-shadow: 0 0 0 2px transparent;
27865
- }
27866
-
27867
- @media (forced-colors: active) {
27868
- div.cds--cc--legend div.legend-item div.checkbox {
27869
- forced-color-adjust: none;
27870
- }
27871
- }
27872
- div.cds--cc--legend div.legend-item div.checkbox:not(.active) {
27873
- border-color: var(--cds-text-secondary, #525252);
27874
- background: var(--cds-background, #ffffff);
27875
- }
27876
-
27877
- div.cds--cc--legend div.legend-item div.checkbox svg {
27878
- display: none;
27879
- vertical-align: text-top;
27880
- fill: var(--cds-background, #ffffff);
27881
- stroke: var(--cds-background, #ffffff);
27882
- }
27883
-
27884
- div.cds--cc--legend div.legend-item.additional svg.icon {
27885
- margin-right: 4px;
27886
- }
27887
-
27888
- div.cds--cc--legend div.legend-item p {
27889
- font-size: 12px;
27890
- fill: var(--cds-text-secondary, #525252);
27891
- line-height: 1rem;
27892
- }
27893
-
27894
- div.cds--cc--legend.center-aligned {
27895
- justify-content: center;
27896
- }
27897
-
27898
- div.cds--cc--legend.right-aligned {
27899
- justify-content: flex-end;
27900
- }
27901
-
27902
- div.cds--cc--legend.has-deactivated-items div.legend-item div.checkbox svg {
27903
- display: block;
27904
- }
27905
-
27906
- div.cds--cc--legend.vertical {
27907
- margin: -5px;
27908
- flex-direction: column;
27909
- }
27910
-
27911
- div.cds--cc--legend.vertical div.legend-item {
27912
- margin-right: 0;
27913
- margin-bottom: 10px;
27914
- }
27915
-
27916
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover {
27917
- cursor: pointer;
27918
- }
27919
-
27920
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox {
27921
- border: solid 1px var(--cds-background, #ffffff);
27922
- box-shadow: 0 0 0 2px #0f62fe;
27923
- }
27924
-
27925
- div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox:not(.active) {
27926
- border-color: var(--cds-text-secondary, #525252);
27927
- }
27928
-
27929
- .cds--cc--meter-title {
27930
- overflow: visible;
27931
- }
27932
-
27933
- .cds--cc--meter-title text.meter-title,
27934
- .cds--cc--meter-title text.proportional-meter-title,
27935
- .cds--cc--meter-title text.proportional-meter-total,
27936
- .cds--cc--meter-title text.percent-value {
27937
- fill: var(--cds-text-primary, #161616);
27938
- }
27939
-
27940
- .cds--cc--meter-title g.status-indicator.status--danger circle.status {
27941
- fill: var(--cds-support-error, #da1e28);
27942
- }
27943
-
27944
- .cds--cc--meter-title g.status-indicator.status--warning circle.status {
27945
- fill: var(--cds-support-warning, #f1c21b);
27946
- }
27947
-
27948
- .cds--cc--meter-title g.status-indicator.status--warning path.innerFill {
27949
- fill: #000000;
27950
- }
27951
-
27952
- .cds--cc--meter-title g.status-indicator.status--success circle.status {
27953
- fill: var(--cds-support-success, #24a148);
27954
- }
27955
-
27956
- .cds--cc--meter-title g.status-indicator path.innerFill {
27957
- fill: var(--cds-layer-01-absolute, #ffffff);
27958
- }
27959
-
27960
- .cds--modal {
27961
- position: fixed;
27962
- z-index: 9000;
27963
- display: flex;
27964
- align-items: center;
27965
- justify-content: center;
27966
- background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
27967
- block-size: 100vh;
27968
- content: "";
27969
- inline-size: 100vw;
27970
- inset-block-start: 0;
27971
- inset-inline-start: 0;
27972
- opacity: 0;
27973
- transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
27974
- visibility: hidden;
27975
- }
27976
-
27977
- .cds--modal.is-visible {
27978
- opacity: 1;
27979
- transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
27980
- visibility: inherit;
27981
- }
27982
-
27983
- @media screen and (prefers-reduced-motion: reduce) {
27984
- .cds--modal.is-visible {
27985
- transition: none;
27986
- }
27987
- }
27988
- .cds--modal .cds--pagination,
27989
- .cds--modal .cds--pagination__control-buttons,
27990
- .cds--modal .cds--text-input,
27991
- .cds--modal .cds--text-area,
27992
- .cds--modal .cds--search-input,
27993
- .cds--modal .cds--select-input,
27994
- .cds--modal .cds--dropdown,
27995
- .cds--modal .cds--dropdown-list,
27996
- .cds--modal .cds--number input[type=number],
27997
- .cds--modal .cds--date-picker__input,
27998
- .cds--modal .cds--multi-select,
27999
- .cds--modal .cds--number__control-btn::before,
28000
- .cds--modal .cds--number__control-btn::after,
28001
- .cds--modal .cds--list-box input[role=combobox] {
28002
- background-color: var(--cds-field-02, #ffffff);
28003
- }
28004
-
28005
- .cds--modal .cds--list-box__menu {
28006
- background-color: var(--cds-layer-02, #ffffff);
28007
- }
28008
-
28009
- .cds--modal .cds--number__rule-divider {
28010
- background-color: var(--cds-border-subtle-02, #e0e0e0);
28011
- }
28012
-
28013
- .cds--modal .cds--list-box__menu-item__option {
28014
- border-block-start-color: var(--cds-border-subtle-02, #e0e0e0);
28015
- }
28016
-
28017
- .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
28018
- border-block-start-color: var(--cds-layer-hover-02, #e8e8e8);
28019
- }
28020
-
28021
- .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
28022
- border-block-start-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28023
- }
28024
-
28025
- .cds--modal .cds--text-input--fluid .cds--text-input,
28026
- .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
28027
- .cds--modal .cds--text-area--fluid .cds--text-area,
28028
- .cds--modal .cds--search--fluid .cds--search-input,
28029
- .cds--modal .cds--select--fluid .cds--select-input,
28030
- .cds--modal .cds--text-area--fluid .cds--text-area__wrapper[data-invalid] .cds--text-area__divider + .cds--form-requirement,
28031
- .cds--modal .cds--list-box__wrapper--fluid .cds--list-box,
28032
- .cds--modal .cds--list-box__wrapper--fluid.cds--list-box__wrapper,
28033
- .cds--modal .cds--number-input--fluid input[type=number],
28034
- .cds--modal .cds--number-input--fluid .cds--number__control-btn::before,
28035
- .cds--modal .cds--number-input--fluid .cds--number__control-btn::after,
28036
- .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
28037
- background-color: var(--cds-field-01, #f4f4f4);
28038
- }
28039
-
28040
- .cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
28041
- background-color: var(--cds-layer-01, #f4f4f4);
28042
- }
28043
-
28044
- .cds--modal .cds--list-box__menu-item:hover {
28045
- background-color: var(--cds-layer-hover-02, #e8e8e8);
28046
- }
28047
-
28048
- .cds--modal .cds--list-box__menu-item--active {
28049
- background-color: var(--cds-layer-selected-02, #e0e0e0);
28050
- }
28051
-
28052
- .cds--modal .cds--list-box__menu-item--active:hover {
28053
- background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
28054
- }
28055
-
28056
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
28057
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
28058
- background-color: var(--cds-field-hover);
28059
- }
28060
-
28061
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::before,
28062
- .cds--modal .cds--number-input--fluid .cds--number__control-btn:focus::after {
28063
- border-inline-start: 2px solid var(--cds-focus, #0f62fe);
28064
- }
28065
-
28066
- .cds--modal.is-visible .cds--modal-container {
28067
- transform: translate3d(0, 0, 0);
28068
- transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
28069
- }
28070
-
28071
- .cds--modal-container {
28072
- position: fixed;
28073
- display: grid;
28074
- overflow: hidden;
28075
- background-color: var(--cds-layer);
28076
- block-size: 100%;
28077
- grid-template-columns: 100%;
28078
- grid-template-rows: auto 1fr auto;
28079
- inline-size: 100%;
28080
- inset-block-start: 0;
28081
- max-block-size: 100%;
28082
- outline: 3px solid transparent;
28083
- outline-offset: -3px;
28084
- transform: translate3d(0, -24px, 0);
28085
- transform-origin: top center;
28086
- transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
28087
- }
28088
-
28089
- @media (min-width: 42rem) {
28090
- .cds--modal-container {
28091
- position: static;
28092
- block-size: auto;
28093
- inline-size: 84%;
28094
- max-block-size: 90%;
28095
- }
28096
- }
28097
- @media (min-width: 66rem) {
28098
- .cds--modal-container {
28099
- inline-size: 60%;
28100
- max-block-size: 84%;
28101
- }
28102
- }
28103
- @media (min-width: 82rem) {
28104
- .cds--modal-container {
28105
- inline-size: 48%;
28106
- }
28107
- }
28108
- .cds--modal-container .cds--modal-container-body {
28109
- display: contents;
28110
- }
28111
-
28112
- .cds--modal-content {
28113
- font-size: var(--cds-body-01-font-size, 0.875rem);
28114
- font-weight: var(--cds-body-01-font-weight, 400);
28115
- line-height: var(--cds-body-01-line-height, 1.42857);
28116
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
28117
- position: relative;
28118
- color: var(--cds-text-primary, #161616);
28119
- font-weight: 400;
28120
- grid-column: 1/-1;
28121
- grid-row: 2/-2;
28122
- margin-block-end: 3rem;
28123
- overflow-y: auto;
28124
- padding-block-start: 0.5rem;
28125
- padding-inline-end: 1rem;
28126
- padding-inline-start: 1rem;
28127
- }
28128
-
28129
- .cds--modal-content:focus {
28130
- outline: 2px solid var(--cds-focus, #0f62fe);
28131
- outline-offset: -2px;
28132
- }
28133
-
28134
- @media screen and (prefers-contrast) {
28135
- .cds--modal-content:focus {
28136
- outline-style: dotted;
28137
- }
28138
- }
28139
- .cds--modal-content .cds--form--fluid {
28140
- margin-inline-end: -1rem;
28141
- margin-inline-start: -1rem;
28142
- }
28143
-
28144
- .cds--modal-content > p,
28145
- .cds--modal-content__regular-content {
28146
- font-size: var(--cds-body-01-font-size, 0.875rem);
28147
- font-weight: var(--cds-body-01-font-weight, 400);
28148
- line-height: var(--cds-body-01-line-height, 1.42857);
28149
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
28150
- padding-inline-end: calc(20% - 2rem);
28151
- }
28152
-
28153
- .cds--modal-content--with-form {
28154
- padding-inline-end: 1rem;
28155
- }
28156
-
28157
- .cds--modal-header {
28158
- grid-column: 1/-1;
28159
- grid-row: 1/1;
28160
- margin-block-end: 0.5rem;
28161
- padding-block-start: 1rem;
28162
- padding-inline-end: 3rem;
28163
- padding-inline-start: 1rem;
28164
- }
28165
-
28166
- .cds--modal-header__label {
28167
- box-sizing: border-box;
28168
- padding: 0;
28169
- border: 0;
28170
- margin: 0;
28171
- font-family: inherit;
28172
- font-size: 100%;
28173
- vertical-align: baseline;
28174
- font-size: var(--cds-label-01-font-size, 0.75rem);
28175
- font-weight: var(--cds-label-01-font-weight, 400);
28176
- line-height: var(--cds-label-01-line-height, 1.33333);
28177
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
28178
- color: var(--cds-text-secondary, #525252);
28179
- margin-block-end: 0.25rem;
28180
- }
28181
-
28182
- .cds--modal-header__label *,
28183
- .cds--modal-header__label *::before,
28184
- .cds--modal-header__label *::after {
28185
- box-sizing: inherit;
28186
- }
28187
-
28188
- .cds--modal-header__heading {
28189
- box-sizing: border-box;
28190
- padding: 0;
28191
- border: 0;
28192
- margin: 0;
28193
- font-family: inherit;
28194
- font-size: 100%;
28195
- vertical-align: baseline;
28196
- font-size: var(--cds-heading-03-font-size, 1.25rem);
28197
- font-weight: var(--cds-heading-03-font-weight, 400);
28198
- line-height: var(--cds-heading-03-line-height, 1.4);
28199
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
28200
- color: var(--cds-text-primary, #161616);
28201
- padding-inline-end: calc(20% - 3rem);
28202
- }
28203
-
28204
- .cds--modal-header__heading *,
28205
- .cds--modal-header__heading *::before,
28206
- .cds--modal-header__heading *::after {
28207
- box-sizing: inherit;
28208
- }
28209
-
28210
- .cds--modal-container--xs .cds--modal-content__regular-content {
28211
- padding-inline-end: 1rem;
28212
- }
28213
-
28214
- .cds--modal-container--xs .cds--modal-content > p {
28215
- padding-inline-end: 0;
28216
- }
28217
-
28218
- @media (min-width: 42rem) {
28219
- .cds--modal-container--xs {
28220
- inline-size: 48%;
28221
- }
28222
- }
28223
- @media (min-width: 66rem) {
28224
- .cds--modal-container--xs {
28225
- inline-size: 32%;
28226
- max-block-size: 48%;
28227
- }
28228
- }
28229
- @media (min-width: 82rem) {
28230
- .cds--modal-container--xs {
28231
- inline-size: 24%;
28232
- }
28233
- }
28234
- .cds--modal-container--sm .cds--modal-content__regular-content {
28235
- padding-inline-end: 1rem;
28236
- }
28237
-
28238
- .cds--modal-container--sm .cds--modal-content > p {
28239
- padding-inline-end: 0;
28240
- }
28241
-
28242
- @media (min-width: 42rem) {
28243
- .cds--modal-container--sm {
28244
- inline-size: 60%;
28245
- }
28246
- }
28247
- @media (min-width: 66rem) {
28248
- .cds--modal-container--sm {
28249
- inline-size: 42%;
28250
- max-block-size: 72%;
28251
- }
28252
- .cds--modal-container--sm .cds--modal-content > p,
28253
- .cds--modal-container--sm .cds--modal-content__regular-content {
28254
- padding-inline-end: 20%;
28255
- }
28256
- }
28257
- @media (min-width: 82rem) {
28258
- .cds--modal-container--sm {
28259
- inline-size: 36%;
28260
- }
28261
- }
28262
- @media (min-width: 42rem) {
28263
- .cds--modal-container--lg {
28264
- inline-size: 96%;
28265
- }
28266
- }
28267
- @media (min-width: 66rem) {
28268
- .cds--modal-container--lg {
28269
- inline-size: 84%;
28270
- max-block-size: 96%;
28271
- }
28272
- }
28273
- @media (min-width: 82rem) {
28274
- .cds--modal-container--lg {
28275
- inline-size: 72%;
28276
- }
28277
- }
28278
- .cds--modal-scroll-content > *:last-child {
28279
- padding-block-end: 2rem;
28280
- }
28281
-
28282
- .cds--modal-content--overflow-indicator {
28283
- position: absolute;
28284
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
28285
- block-size: 2rem;
28286
- content: "";
28287
- grid-column: 1/-1;
28288
- grid-row: 2/-2;
28289
- inline-size: 100%;
28290
- inset-block-end: 3rem;
28291
- inset-inline-start: 0;
28292
- pointer-events: none;
28293
- }
28294
-
28295
- @media not all and (min-resolution >= 0.001dpcm) {
28296
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
28297
- .cds--modal-content--overflow-indicator {
28298
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
28299
- }
28300
- }
28301
- }
28302
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
28303
- margin: 0 2px 2px;
28304
- inline-size: calc(100% - 4px);
28305
- }
28306
-
28307
- @media screen and (-ms-high-contrast: active) {
28308
- .cds--modal-scroll-content > *:last-child {
28309
- padding-block-end: 0;
28310
- }
28311
- .cds--modal-content--overflow-indicator {
28312
- display: none;
28313
- }
28314
- }
28315
- .cds--modal-footer {
28316
- display: flex;
28317
- justify-content: flex-end;
28318
- block-size: 4rem;
28319
- grid-column: 1/-1;
28320
- grid-row: -1/-1;
28321
- margin-block-start: auto;
28322
- }
28323
-
28324
- .cds--modal-footer .cds--btn {
28325
- flex: 0 1 50%;
28326
- align-items: baseline;
28327
- margin: 0;
28328
- block-size: 4rem;
28329
- max-inline-size: none;
28330
- padding-block-end: 2rem;
28331
- padding-block-start: 0.875rem;
28332
- }
28333
-
28334
- .cds--modal-footer--three-button .cds--btn {
28335
- flex: 0 1 25%;
28336
- align-items: flex-start;
28337
- }
28338
-
28339
- .cds--modal-close {
28340
- position: absolute;
28341
- z-index: 2;
28342
- overflow: hidden;
28343
- padding: 0.75rem;
28344
- border: 2px solid transparent;
28345
- background-color: transparent;
28346
- block-size: 3rem;
28347
- cursor: pointer;
28348
- inline-size: 3rem;
28349
- inset-block-start: 0;
28350
- inset-inline-end: 0;
28351
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
28352
- }
28353
-
28354
- .cds--modal-close:hover {
28355
- background-color: var(--cds-layer-hover);
28356
- }
28357
-
28358
- .cds--modal-close:focus {
28359
- border-color: var(--cds-focus, #0f62fe);
28360
- outline: none;
28361
- }
28362
-
28363
- .cds--modal-close::-moz-focus-inner {
28364
- border: 0;
28365
- }
28366
-
28367
- .cds--modal-close__icon {
28368
- block-size: 1.25rem;
28369
- fill: var(--cds-icon-primary, #161616);
28370
- inline-size: 1.25rem;
28371
- }
28372
-
28373
- .cds--body--with-modal-open {
28374
- overflow: hidden;
28375
- }
28376
-
28377
- .cds--body--with-modal-open .cds--modal .cds--tooltip,
28378
- .cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
28379
- z-index: 9000;
28380
- }
28381
-
28382
- .cds--modal-container--full-width .cds--modal-content {
28383
- padding: 0;
28384
- margin: 0;
28385
- }
28386
-
28387
- /* stylelint-disable */
28388
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28389
- .cds--modal-close__icon {
28390
- fill: ButtonText;
28391
- }
28392
- }
28393
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28394
- .cds--modal-close:focus {
28395
- color: Highlight;
28396
- outline: 1px solid Highlight;
28397
- }
28398
- }
28399
- /* stylelint-enable */
28400
- input:-webkit-autofill,
28401
- input:-webkit-autofill:hover,
28402
- input:-webkit-autofill:focus,
28403
- textarea:-webkit-autofill,
28404
- textarea:-webkit-autofill:hover,
28405
- textarea:-webkit-autofill:focus {
28406
- box-shadow: 0 0 0 1000px var(--cds-field) inset;
28407
- -webkit-text-fill-color: var(--cds-text-primary, #161616);
28408
- }
28409
-
28410
- .cds--fieldset {
28411
- box-sizing: border-box;
28412
- padding: 0;
28413
- border: 0;
28414
- margin: 0;
28415
- font-family: inherit;
28416
- font-size: 100%;
28417
- vertical-align: baseline;
28418
- }
28419
-
28420
- .cds--fieldset *,
28421
- .cds--fieldset *::before,
28422
- .cds--fieldset *::after {
28423
- box-sizing: inherit;
28424
- }
28425
-
28426
- .cds--form-item {
28427
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
28428
- font-weight: var(--cds-body-compact-01-font-weight, 400);
28429
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
28430
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
28431
- display: flex;
28432
- flex: 1 1 auto;
28433
- flex-direction: column;
28434
- align-items: flex-start;
28435
- }
28436
-
28437
- .cds--label {
28438
- font-size: var(--cds-label-01-font-size, 0.75rem);
28439
- font-weight: var(--cds-label-01-font-weight, 400);
28440
- line-height: var(--cds-label-01-line-height, 1.33333);
28441
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
28442
- display: inline-block;
28443
- color: var(--cds-text-secondary, #525252);
28444
- font-weight: 400;
28445
- line-height: 1rem;
28446
- margin-block-end: 0.5rem;
28447
- vertical-align: baseline;
28448
- }
28449
-
28450
- .cds--label html {
28451
- font-size: 100%;
28452
- }
28453
-
28454
- .cds--label body {
28455
- font-weight: 400;
28456
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
28457
- -moz-osx-font-smoothing: grayscale;
28458
- -webkit-font-smoothing: antialiased;
28459
- text-rendering: optimizeLegibility;
28460
- }
28461
-
28462
- .cds--label code {
28463
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
28464
- }
28465
-
28466
- .cds--label strong {
28467
- font-weight: 600;
28468
- }
28469
-
28470
- .cds--label .cds--toggletip-label {
28471
- font-size: var(--cds-label-01-font-size, 0.75rem);
28472
- font-weight: var(--cds-label-01-font-weight, 400);
28473
- line-height: var(--cds-label-01-line-height, 1.33333);
28474
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
28475
- }
28476
-
28477
- .cds--label--no-margin {
28478
- margin-block-end: 0;
28479
- }
28480
-
28481
- .cds--label + .cds--tooltip {
28482
- position: relative;
28483
- inset-block-start: 0.2rem;
28484
- inset-inline-start: 0.5rem;
28485
- }
28486
-
28487
- .cds--label + .cds--tooltip .cds--tooltip__trigger {
28488
- box-sizing: border-box;
28489
- padding: 0;
28490
- border: 0;
28491
- margin: 0;
28492
- font-family: inherit;
28493
- font-size: 100%;
28494
- vertical-align: baseline;
28495
- display: inline-block;
28496
- padding: 0;
28497
- border: 0;
28498
- appearance: none;
28499
- background: none;
28500
- cursor: pointer;
28501
- text-align: start;
28502
- inline-size: 100%;
28503
- display: flex;
28504
- align-items: center;
28505
- justify-content: center;
28506
- font-size: var(--cds-label-01-font-size, 0.75rem);
28507
- font-weight: var(--cds-label-01-font-weight, 400);
28508
- line-height: var(--cds-label-01-line-height, 1.33333);
28509
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
28510
- }
28511
-
28512
- .cds--label + .cds--tooltip .cds--tooltip__trigger *,
28513
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
28514
- .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
28515
- box-sizing: inherit;
28516
- }
28517
-
28518
- .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
28519
- border: 0;
28520
- }
28521
-
28522
- .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
28523
- outline: 1px solid var(--cds-focus, #0f62fe);
28524
- }
28525
-
28526
- .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
28527
- fill: var(--cds-icon-secondary, #525252);
28528
- }
28529
-
28530
- .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
28531
- fill: var(--cds-icon-primary, #161616);
28532
- }
28533
-
28534
- .cds--label + .cds--toggletip {
28535
- inset-block-start: 0.2rem;
28536
- inset-inline-start: 0.5rem;
28537
- }
28538
-
28539
- .cds--label.cds--skeleton {
28540
- position: relative;
28541
- padding: 0;
28542
- border: none;
28543
- background: var(--cds-skeleton-background, #e8e8e8);
28544
- box-shadow: none;
28545
- pointer-events: none;
28546
- block-size: 0.875rem;
28547
- inline-size: 4.6875rem;
28548
- }
28549
-
28550
- .cds--label.cds--skeleton:hover, .cds--label.cds--skeleton:focus, .cds--label.cds--skeleton:active {
28551
- border: none;
28552
- cursor: default;
28553
- outline: none;
28554
- }
28555
-
28556
- .cds--label.cds--skeleton::before {
28557
- position: absolute;
28558
- animation: 3000ms ease-in-out skeleton infinite;
28559
- background: var(--cds-skeleton-element, #c6c6c6);
28560
- block-size: 100%;
28561
- content: "";
28562
- inline-size: 100%;
28563
- will-change: transform-origin, transform, opacity;
28564
- }
28565
-
28566
- @media (prefers-reduced-motion: reduce) {
28567
- .cds--label.cds--skeleton::before {
28568
- animation: none;
28569
- }
28570
- }
28571
- input[type=number] {
28572
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
28573
- }
28574
-
28575
- input[data-invalid]:not(:focus),
28576
- .cds--number[data-invalid] input[type=number]:not(:focus),
28577
- .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
28578
- .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
28579
- .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
28580
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
28581
- .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
28582
- outline: 2px solid var(--cds-support-error, #da1e28);
28583
- outline-offset: -2px;
28584
- }
28585
-
28586
- @media screen and (prefers-contrast) {
28587
- input[data-invalid]:not(:focus),
28588
- .cds--number[data-invalid] input[type=number]:not(:focus),
28589
- .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
28590
- .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
28591
- .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
28592
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
28593
- .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
28594
- outline-style: dotted;
28595
- }
28596
- }
28597
- input[data-invalid] ~ .cds--form-requirement,
28598
- .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
28599
- .cds--number__input-wrapper--warning ~ .cds--form-requirement,
28600
- .cds--date-picker-input__wrapper ~ .cds--form-requirement,
28601
- .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
28602
- .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
28603
- .cds--time-picker--invalid ~ .cds--form-requirement,
28604
- .cds--time-picker--warning ~ .cds--form-requirement,
28605
- .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
28606
- .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
28607
- .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
28608
- .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
28609
- .cds--text-area__wrapper--warn ~ .cds--form-requirement,
28610
- .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
28611
- .cds--select--warning .cds--select-input__wrapper ~ .cds--form-requirement,
28612
- .cds--time-picker[data-invalid] ~ .cds--form-requirement,
28613
- .cds--list-box[data-invalid] ~ .cds--form-requirement,
28614
- .cds--list-box--warning ~ .cds--form-requirement {
28615
- display: block;
28616
- overflow: visible;
28617
- font-weight: 400;
28618
- max-block-size: 12.5rem;
28619
- }
28620
-
28621
- input[data-invalid] ~ .cds--form-requirement,
28622
- .cds--number[data-invalid] .cds--number__input-wrapper ~ .cds--form-requirement,
28623
- .cds--date-picker-input__wrapper ~ .cds--form-requirement,
28624
- .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
28625
- .cds--time-picker--invalid ~ .cds--form-requirement,
28626
- .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
28627
- .cds--text-area__wrapper[data-invalid] ~ .cds--form-requirement,
28628
- .cds--select-input__wrapper[data-invalid] ~ .cds--form-requirement,
28629
- .cds--time-picker[data-invalid] ~ .cds--form-requirement,
28630
- .cds--list-box[data-invalid] ~ .cds--form-requirement {
28631
- color: var(--cds-text-error, #da1e28);
28632
- }
28633
-
28634
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid],
28635
- .cds--form--fluid .cds--text-input__field-wrapper--warning {
28636
- display: block;
28637
- }
28638
-
28639
- .cds--form--fluid input[data-invalid] {
28640
- outline: none;
28641
- }
28642
-
28643
- .cds--form--fluid .cds--form-requirement {
28644
- padding: 0.5rem 2.5rem 0.5rem 1rem;
28645
- margin: 0;
28646
- }
28647
-
28648
- input:not(output, [data-invalid]):-moz-ui-invalid {
28649
- box-shadow: none;
28650
- }
28651
-
28652
- .cds--form-requirement {
28653
- font-size: var(--cds-label-01-font-size, 0.75rem);
28654
- font-weight: var(--cds-label-01-font-weight, 400);
28655
- line-height: var(--cds-label-01-line-height, 1.33333);
28656
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
28657
- display: none;
28658
- overflow: hidden;
28659
- margin: 0.25rem 0 0;
28660
- max-block-size: 0;
28661
- }
28662
-
28663
- .cds--form-requirement html {
28664
- font-size: 100%;
28665
- }
28666
-
28667
- .cds--form-requirement body {
28668
- font-weight: 400;
28669
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
28670
- -moz-osx-font-smoothing: grayscale;
28671
- -webkit-font-smoothing: antialiased;
28672
- text-rendering: optimizeLegibility;
28673
- }
28674
-
28675
- .cds--form-requirement code {
28676
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
28677
- }
28678
-
28679
- .cds--form-requirement strong {
28680
- font-weight: 600;
28681
- }
28682
-
28683
- .cds--select--inline .cds--form__helper-text {
28684
- margin-block-start: 0;
28685
- }
28686
-
28687
- .cds--form__helper-text {
28688
- font-size: var(--cds-helper-text-01-font-size, 0.75rem);
28689
- line-height: var(--cds-helper-text-01-line-height, 1.33333);
28690
- letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
28691
- z-index: 0;
28692
- color: var(--cds-text-secondary, #525252);
28693
- inline-size: 100%;
28694
- margin-block-start: 0.25rem;
28695
- opacity: 1;
28696
- }
28697
-
28698
- .cds--label--disabled,
28699
- .cds--form__helper-text--disabled {
28700
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
28701
- }
28702
-
28703
- fieldset[disabled] .cds--label,
28704
- fieldset[disabled] .cds--form__helper-text {
28705
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
28706
- }
28707
-
28708
- .cds--checkbox-group {
28709
- box-sizing: border-box;
28710
- padding: 0;
28711
- border: 0;
28712
- margin: 0;
28713
- font-family: inherit;
28714
- font-size: 100%;
28715
- vertical-align: baseline;
28716
- }
28717
-
28718
- .cds--checkbox-group *,
28719
- .cds--checkbox-group *::before,
28720
- .cds--checkbox-group *::after {
28721
- box-sizing: inherit;
28722
- }
28723
-
28724
- .cds--form-item.cds--checkbox-wrapper {
28725
- position: relative;
28726
- margin-block-end: 0.25rem;
28727
- }
28728
-
28729
- .cds--form-item.cds--checkbox-wrapper:first-of-type {
28730
- margin-block-start: 0.1875rem;
28731
- }
28732
-
28733
- .cds--label + .cds--form-item.cds--checkbox-wrapper {
28734
- margin-block-start: -0.125rem;
28735
- }
28736
-
28737
- .cds--form-item.cds--checkbox-wrapper:last-of-type {
28738
- margin-block-end: 0.1875rem;
28739
- }
28740
-
28741
- .cds--checkbox {
28742
- position: absolute;
28743
- overflow: hidden;
28744
- padding: 0;
28745
- border: 0;
28746
- margin: -1px;
28747
- block-size: 1px;
28748
- clip: rect(0, 0, 0, 0);
28749
- inline-size: 1px;
28750
- visibility: inherit;
28751
- white-space: nowrap;
28752
- inset-block-start: 1.25rem;
28753
- inset-inline-start: 0.7rem;
28754
- }
28755
-
28756
- .cds--checkbox-label {
28757
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
28758
- font-weight: var(--cds-body-compact-01-font-weight, 400);
28759
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
28760
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
28761
- position: relative;
28762
- display: flex;
28763
- cursor: pointer;
28764
- min-block-size: 1.5rem;
28765
- padding-block-start: 0.1875rem;
28766
- padding-inline-start: 1.25rem;
28767
- user-select: none;
28768
- }
28769
-
28770
- .cds--checkbox-label html {
28771
- font-size: 100%;
28772
- }
28773
-
28774
- .cds--checkbox-label body {
28775
- font-weight: 400;
28776
- font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
28777
- -moz-osx-font-smoothing: grayscale;
28778
- -webkit-font-smoothing: antialiased;
28779
- text-rendering: optimizeLegibility;
28780
- }
28781
-
28782
- .cds--checkbox-label code {
28783
- font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
28784
- }
28785
-
28786
- .cds--checkbox-label strong {
28787
- font-weight: 600;
28788
- }
28789
-
28790
- .cds--checkbox-label-text {
28791
- padding-inline-start: 0.375rem;
28792
- }
28793
-
28794
- .cds--checkbox-label::before,
28795
- .cds--checkbox-label::after {
28796
- box-sizing: border-box;
28797
- }
28798
-
28799
- .cds--checkbox-label::before {
28800
- position: absolute;
28801
- border: 1px solid var(--cds-icon-primary, #161616);
28802
- margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
28803
- background-color: transparent;
28804
- block-size: 1rem;
28805
- border-radius: 2px;
28806
- content: "";
28807
- inline-size: 1rem;
28808
- inset-block-start: 0.125rem;
28809
- inset-inline-start: 0;
28810
- }
28811
-
28812
- .cds--checkbox-label::after {
28813
- position: absolute;
28814
- background: none;
28815
- block-size: 0.3125rem;
28816
- border-block-end: 1.5px solid var(--cds-icon-inverse, #ffffff);
28817
- border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
28818
- content: "";
28819
- inline-size: 0.5625rem;
28820
- inset-block-start: 0.46875rem;
28821
- inset-inline-start: 0.4375rem;
28822
- margin-block-start: -0.1875rem;
28823
- transform: scale(0) rotate(-45deg);
28824
- transform-origin: bottom right;
28825
- }
28826
-
28827
- .cds--checkbox:checked + .cds--checkbox-label::before,
28828
- .cds--checkbox:indeterminate + .cds--checkbox-label::before,
28829
- .cds--checkbox-label[data-contained-checkbox-state=true]::before {
28830
- border: none;
28831
- border-width: 1px;
28832
- background-color: var(--cds-icon-primary, #161616);
28833
- }
28834
-
28835
- .cds--checkbox:checked + .cds--checkbox-label::after,
28836
- .cds--checkbox-label[data-contained-checkbox-state=true]::after {
28837
- transform: scale(1) rotate(-45deg);
28838
- }
28839
-
28840
- .cds--checkbox:indeterminate + .cds--checkbox-label::after {
28841
- border-block-end: 2px solid var(--cds-icon-inverse, #ffffff);
28842
- border-inline-start: 0 solid var(--cds-icon-inverse, #ffffff);
28843
- inline-size: 0.5rem;
28844
- inset-block-start: 0.6875rem;
28845
- transform: scale(1) rotate(0deg);
28846
- }
28847
-
28848
- .cds--checkbox:focus + .cds--checkbox-label::before,
28849
- .cds--checkbox-label__focus::before,
28850
- .cds--checkbox:checked:focus + .cds--checkbox-label::before,
28851
- .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
28852
- .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
28853
- outline: 2px solid var(--cds-focus, #0f62fe);
28854
- outline-offset: 1px;
28855
- }
28856
-
28857
- .cds--checkbox:disabled + .cds--checkbox-label,
28858
- .cds--checkbox-label[data-contained-checkbox-disabled=true] {
28859
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
28860
- cursor: not-allowed;
28861
- }
28862
-
28863
- .cds--checkbox:disabled + .cds--checkbox-label::before,
28864
- .cds--checkbox-label[data-contained-checkbox-disabled=true]::before {
28865
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28866
- }
28867
-
28868
- .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
28869
- .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
28870
- .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
28871
- background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28872
- }
28873
-
28874
- .cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
28875
- .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
28876
- .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
28877
- border: 1px solid var(--cds-support-error, #da1e28);
28878
- }
28879
-
28880
- .cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
28881
- .cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
28882
- .cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
28883
- display: none;
28884
- }
28885
-
28886
- .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
28887
- .cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
28888
- border: 1px solid var(--cds-icon-primary, #161616);
28889
- }
28890
-
28891
- .cds--checkbox-group__validation-msg,
28892
- .cds--checkbox__validation-msg {
28893
- display: none;
28894
- align-items: flex-start;
28895
- margin-block-start: 0.25rem;
28896
- }
28897
-
28898
- .cds--checkbox__invalid-icon {
28899
- margin: 0.0625rem 0.0625rem 0 0.1875rem;
28900
- fill: var(--cds-support-error, #da1e28);
28901
- min-inline-size: 1rem;
28902
- }
28903
-
28904
- .cds--checkbox__invalid-icon--warning {
28905
- fill: var(--cds-support-warning, #f1c21b);
28906
- }
28907
-
28908
- .cds--checkbox__invalid-icon--warning path:first-of-type {
28909
- fill: #000000;
28910
- }
28911
-
28912
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
28913
- .cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
28914
- .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
28915
- .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
28916
- display: flex;
28917
- }
28918
-
28919
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
28920
- .cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
28921
- .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
28922
- .cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
28923
- display: block;
28924
- overflow: visible;
28925
- margin-block-start: 0;
28926
- margin-inline-start: 0.5rem;
28927
- max-block-size: 100%;
28928
- }
28929
-
28930
- .cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
28931
- .cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
28932
- color: var(--cds-text-error, #da1e28);
28933
- }
28934
-
28935
- .cds--checkbox-group--readonly .cds--checkbox-label,
28936
- .cds--checkbox-wrapper--readonly .cds--checkbox-label {
28937
- cursor: default;
28938
- }
28939
-
28940
- .cds--checkbox-group--readonly .cds--checkbox-label-text,
28941
- .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
28942
- cursor: text;
28943
- user-select: text;
28944
- }
28945
-
28946
- .cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
28947
- .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
28948
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28949
- }
28950
-
28951
- .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
28952
- .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
28953
- border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28954
- background: transparent;
28955
- }
28956
-
28957
- .cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
28958
- .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
28959
- border-color: var(--cds-text-primary, #161616);
28960
- }
28961
-
28962
- .cds--checkbox-skeleton .cds--checkbox-label {
28963
- cursor: default;
28964
- }
28965
-
28966
- .cds--checkbox-label-text.cds--skeleton {
28967
- position: relative;
28968
- padding: 0;
28969
- border: none;
28970
- background: var(--cds-skeleton-background, #e8e8e8);
28971
- box-shadow: none;
28972
- pointer-events: none;
28973
- block-size: 1rem;
28974
- inline-size: 6.25rem;
28975
- margin-block: 0.0625rem 0;
28976
- margin-inline: 0.375rem 0;
28977
- }
28978
-
28979
- .cds--checkbox-label-text.cds--skeleton:hover, .cds--checkbox-label-text.cds--skeleton:focus, .cds--checkbox-label-text.cds--skeleton:active {
28980
- border: none;
28981
- cursor: default;
28982
- outline: none;
28983
- }
28984
-
28985
- .cds--checkbox-label-text.cds--skeleton::before {
28986
- position: absolute;
28987
- animation: 3000ms ease-in-out skeleton infinite;
28988
- background: var(--cds-skeleton-element, #c6c6c6);
28989
- block-size: 100%;
28990
- content: "";
28991
- inline-size: 100%;
28992
- will-change: transform-origin, transform, opacity;
28993
- }
28994
-
28995
- @media (prefers-reduced-motion: reduce) {
28996
- .cds--checkbox-label-text.cds--skeleton::before {
28997
- animation: none;
28998
- }
28999
- }
29000
- .cds--checkbox--inline {
29001
- position: relative;
29002
- }
29003
-
29004
- [dir=rtl] .cds--checkbox-label::after {
29005
- margin-block-start: 0;
29006
- margin-inline-start: -0.0625rem;
29007
- transform-origin: center;
29008
- }
29009
-
29010
- [dir=rtl] .cds--checkbox:checked + .cds--checkbox-label::after,
29011
- [dir=rtl] .cds--checkbox-label[data-contained-checkbox-state=true]::after {
29012
- transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
29013
- }
29014
-
29015
- .cds--radio-button-group {
29016
- box-sizing: border-box;
29017
- padding: 0;
29018
- border: 0;
29019
- margin: 0;
29020
- font-family: inherit;
29021
- font-size: 100%;
29022
- vertical-align: baseline;
29023
- position: relative;
29024
- display: flex;
29025
- align-items: center;
29026
- }
29027
-
29028
- .cds--radio-button-group *,
29029
- .cds--radio-button-group *::before,
29030
- .cds--radio-button-group *::after {
29031
- box-sizing: inherit;
29032
- }
29033
-
29034
- .cds--label + .cds--form-item .cds--radio-button-group {
29035
- margin-block-start: 0;
29036
- }
29037
-
29038
- .cds--radio-button-group--vertical {
29039
- flex-direction: column;
29040
- align-items: flex-start;
29041
- }
29042
-
29043
- .cds--radio-button-group--vertical.cds--radio-button-group--label-left {
29044
- align-items: flex-end;
29045
- }
29046
-
29047
- .cds--radio-button-group--vertical .cds--radio-button__label {
29048
- line-height: 1.25;
29049
- margin-inline-end: 0;
29050
- }
29051
-
29052
- .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
29053
- margin-block-end: 0.5rem;
29054
- }
29055
-
29056
- .cds--radio-button {
29057
- position: absolute;
29058
- overflow: hidden;
29059
- padding: 0;
29060
- border: 0;
29061
- margin: -1px;
29062
- block-size: 1px;
29063
- clip: rect(0, 0, 0, 0);
29064
- inline-size: 1px;
29065
- visibility: inherit;
29066
- white-space: nowrap;
29067
- visibility: inherit;
29068
- }
29069
-
29070
- .cds--radio-button__label {
29071
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
29072
- font-weight: var(--cds-body-compact-01-font-weight, 400);
29073
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
29074
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
29075
- display: flex;
29076
- align-items: center;
29077
- cursor: pointer;
29078
- margin-inline-end: 1rem;
29079
- }
29080
-
29081
- .cds--radio-button__appearance {
29082
- box-sizing: border-box;
29083
- padding: 0;
29084
- border: 0;
29085
- margin: 0;
29086
- font-family: inherit;
29087
- font-size: 100%;
29088
- vertical-align: baseline;
29089
- flex-shrink: 0;
29090
- border: 1px solid var(--cds-icon-primary, #161616);
29091
- background-color: transparent;
29092
- block-size: 1.125rem;
29093
- border-radius: 50%;
29094
- inline-size: 1.125rem;
29095
- margin-block: 0.0625rem 0.125rem;
29096
- margin-inline: 0.125rem 0.5rem;
29097
- }
29098
-
29099
- .cds--radio-button__appearance *,
29100
- .cds--radio-button__appearance *::before,
29101
- .cds--radio-button__appearance *::after {
29102
- box-sizing: inherit;
29103
- }
29104
-
29105
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance {
29106
- display: flex;
29107
- align-items: center;
29108
- justify-content: center;
29109
- border-color: var(--cds-icon-primary, #161616);
29110
- }
29111
-
29112
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
29113
- position: relative;
29114
- display: inline-block;
29115
- background-color: var(--cds-icon-primary, #161616);
29116
- block-size: 100%;
29117
- border-radius: 50%;
29118
- content: "";
29119
- inline-size: 100%;
29120
- transform: scale(0.5);
29121
- }
29122
-
29123
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
29124
- .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
29125
- fill: ButtonText;
29126
- background-color: ButtonText;
29127
- }
29128
- }
29129
- .cds--radio-button:disabled + .cds--radio-button__label {
29130
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29131
- cursor: not-allowed;
29132
- }
29133
-
29134
- .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance,
29135
- .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance {
29136
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29137
- }
29138
-
29139
- .cds--radio-button:disabled + .cds--radio-button__label .cds--radio-button__appearance::before,
29140
- .cds--radio-button:disabled:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
29141
- background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29142
- }
29143
-
29144
- .cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
29145
- border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
29146
- }
29147
-
29148
- .cds--radio-button-group--readonly .cds--radio-button__label {
29149
- cursor: default;
29150
- }
29151
-
29152
- .cds--radio-button-group--readonly .cds--radio-button__label-text {
29153
- cursor: text;
29154
- user-select: text;
29155
- }
29156
-
29157
- .cds--radio-button-group--invalid .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
29158
- border-color: var(--cds-support-error, #da1e28);
29159
- }
29160
-
29161
- .cds--radio-button__validation-msg {
29162
- display: none;
29163
- align-items: flex-end;
29164
- margin-block-start: 0.375rem;
29165
- }
29166
-
29167
- .cds--radio-button__invalid-icon {
29168
- fill: var(--cds-support-error, #da1e28);
29169
- margin-inline: 0.1875rem 0.0625rem;
29170
- }
29171
-
29172
- .cds--radio-button__invalid-icon--warning {
29173
- fill: var(--cds-support-warning, #f1c21b);
29174
- }
29175
-
29176
- .cds--radio-button__invalid-icon--warning path:first-of-type {
29177
- fill: #000000;
29178
- }
29179
-
29180
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg,
29181
- .cds--radio-button-group--warning + .cds--radio-button__validation-msg {
29182
- display: flex;
29183
- }
29184
-
29185
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement,
29186
- .cds--radio-button-group--warning + .cds--radio-button__validation-msg .cds--form-requirement {
29187
- display: block;
29188
- overflow: visible;
29189
- margin-block-start: 0;
29190
- margin-inline-start: 0.5rem;
29191
- max-block-size: 100%;
29192
- }
29193
-
29194
- .cds--radio-button-group--invalid + .cds--radio-button__validation-msg .cds--form-requirement {
29195
- color: var(--cds-text-error, #da1e28);
29196
- }
29197
-
29198
- .cds--radio-button-group ~ .cds--form__helper-text {
29199
- margin-block-start: 0.375rem;
29200
- }
29201
-
29202
- .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
29203
- outline: 2px solid var(--cds-focus, #0f62fe);
29204
- outline-offset: 1.5px;
29205
- }
29206
-
29207
- .cds--radio-button__label.cds--skeleton {
29208
- position: relative;
29209
- padding: 0;
29210
- border: none;
29211
- background: var(--cds-skeleton-background, #e8e8e8);
29212
- box-shadow: none;
29213
- pointer-events: none;
29214
- block-size: 1.125rem;
29215
- inline-size: 6.25rem;
29216
- }
29217
-
29218
- .cds--radio-button__label.cds--skeleton:hover, .cds--radio-button__label.cds--skeleton:focus, .cds--radio-button__label.cds--skeleton:active {
29219
- border: none;
29220
- cursor: default;
29221
- outline: none;
29222
- }
29223
-
29224
- .cds--radio-button__label.cds--skeleton::before {
29225
- position: absolute;
29226
- animation: 3000ms ease-in-out skeleton infinite;
29227
- background: var(--cds-skeleton-element, #c6c6c6);
29228
- block-size: 100%;
29229
- content: "";
29230
- inline-size: 100%;
29231
- will-change: transform-origin, transform, opacity;
29232
- }
29233
-
29234
- @media (prefers-reduced-motion: reduce) {
29235
- .cds--radio-button__label.cds--skeleton::before {
29236
- animation: none;
29237
- }
29238
- }
29239
- .cds--radio-button__label.cds--skeleton .cds--radio-button__appearance {
29240
- display: none;
29241
- }
29242
-
29243
- .cds--radio-button-wrapper .cds--radio-button__label {
29244
- display: flex;
29245
- align-items: flex-start;
29246
- justify-content: center;
29247
- margin: 0;
29248
- }
29249
-
29250
- .cds--radio-button-wrapper:not(:last-of-type) {
29251
- margin-inline-end: 1rem;
29252
- }
29253
-
29254
- .cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
29255
- margin-block-end: 0.5rem;
29256
- margin-inline-end: 0;
29257
- }
29258
-
29259
- .cds--radio-button-group--label-right .cds--radio-button__label,
29260
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label {
29261
- flex-direction: row;
29262
- }
29263
-
29264
- .cds--radio-button-group--label-left .cds--radio-button__label,
29265
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__label {
29266
- flex-direction: row-reverse;
29267
- }
29268
-
29269
- .cds--radio-button-group--label-left .cds--radio-button__appearance,
29270
- .cds--radio-button-wrapper.cds--radio-button-wrapper--label-left .cds--radio-button__appearance {
29271
- margin-inline-end: 0;
29272
- margin-inline-start: 0.5rem;
29273
- }
29274
-
29275
- .cds--data-table-container {
29276
- position: relative;
29277
- padding-block-start: 0.125rem;
29278
- }
29279
-
29280
- .cds--data-table-content {
29281
- display: block;
29282
- overflow-x: auto;
29283
- }
29284
-
29285
- .cds--data-table-content:focus {
29286
- outline: 2px solid var(--cds-focus, #0f62fe);
29287
- outline-offset: -2px;
29288
- }
29289
-
29290
- @media screen and (prefers-contrast) {
29291
- .cds--data-table-content:focus {
29292
- outline-style: dotted;
29293
- }
29294
- }
29295
- .cds--data-table-header {
29296
- background: var(--cds-layer);
29297
- padding-block-end: 1.5rem;
29298
- padding-block-start: 1rem;
29299
- padding-inline: 1rem;
29300
- }
29301
-
29302
- .cds--data-table-header__title {
29303
- font-size: var(--cds-heading-03-font-size, 1.25rem);
29304
- font-weight: var(--cds-heading-03-font-weight, 400);
29305
- line-height: var(--cds-heading-03-line-height, 1.4);
29306
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
29307
- color: var(--cds-text-primary, #161616);
29308
- }
29309
-
29310
- .cds--data-table-header__description {
29311
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
29312
- font-weight: var(--cds-body-compact-01-font-weight, 400);
29313
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
29314
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
29315
- color: var(--cds-text-secondary, #525252);
29316
- }
29317
-
29318
- @media (min-width: 42rem) {
29319
- .cds--data-table-header__description {
29320
- max-inline-size: 50ch;
29321
- }
29322
- }
29323
- @media (min-width: 66rem) {
29324
- .cds--data-table-header__description {
29325
- max-inline-size: 80ch;
29326
- }
29327
- }
29328
- .cds--data-table {
29329
- border-collapse: collapse;
29330
- border-spacing: 0;
29331
- inline-size: 100%;
29332
- }
29333
-
29334
- .cds--data-table thead {
29335
- font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
29336
- font-weight: var(--cds-heading-compact-01-font-weight, 600);
29337
- line-height: var(--cds-heading-compact-01-line-height, 1.28572);
29338
- letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
29339
- background-color: var(--cds-layer-accent);
29340
- }
29341
-
29342
- .cds--data-table tbody {
29343
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
29344
- font-weight: var(--cds-body-compact-01-font-weight, 400);
29345
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
29346
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
29347
- background-color: var(--cds-layer);
29348
- inline-size: 100%;
29349
- }
29350
-
29351
- .cds--data-table tr {
29352
- border: none;
29353
- block-size: 3rem;
29354
- inline-size: 100%;
29355
- }
29356
-
29357
- .cds--data-table tbody tr,
29358
- .cds--data-table tbody tr td,
29359
- .cds--data-table tbody tr th {
29360
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
29361
- }
29362
-
29363
- .cds--data-table tbody tr:hover {
29364
- background: var(--cds-layer-hover);
29365
- }
29366
-
29367
- .cds--data-table tbody tr:hover td,
29368
- .cds--data-table tbody tr:hover th {
29369
- background: var(--cds-layer-hover);
29370
- border-block-end: 1px solid var(--cds-layer-hover);
29371
- border-block-start: 1px solid var(--cds-layer-hover);
29372
- color: var(--cds-text-primary, #161616);
29373
- }
29374
-
29375
- .cds--data-table tr:hover .cds--link {
29376
- color: var(--cds-link-secondary, #0043ce);
29377
- }
29378
-
29379
- .cds--data-table tr:hover .cds--link--disabled {
29380
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
29381
- }
29382
-
29383
- .cds--data-table th,
29384
- .cds--data-table td {
29385
- text-align: start;
29386
- vertical-align: middle;
29387
- }
29388
-
29389
- .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
29390
- padding-block-end: 1rem;
29391
- padding-block-start: 1rem;
29392
- }
29393
-
29394
- .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 {
29395
- padding-block-start: 0.5rem;
29396
- }
29397
-
29398
- .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) {
29399
- padding-block-start: 0.8125rem;
29400
- }
29401
-
29402
- .cds--data-table.cds--data-table--top-aligned-body td {
29403
- vertical-align: top;
29404
- }
29405
-
29406
- .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
29407
- padding-block-end: 1rem;
29408
- padding-block-start: 1rem;
29409
- }
29410
-
29411
- .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 {
29412
- padding-block-start: 0.5rem;
29413
- }
29414
-
29415
- .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 {
29416
- padding-block-start: 0.8125rem;
29417
- }
29418
-
29419
- .cds--data-table.cds--data-table--top-aligned-header th {
29420
- vertical-align: top;
29421
- }
29422
-
29423
- .cds--data-table th[align=right],
29424
- .cds--data-table td[align=right] {
29425
- text-align: end;
29426
- }
29427
-
29428
- .cds--data-table th[align=center],
29429
- .cds--data-table td[align=center] {
29430
- text-align: center;
29431
- }
29432
-
29433
- .cds--data-table th {
29434
- background-color: var(--cds-layer-accent);
29435
- color: var(--cds-text-primary, #161616);
29436
- padding-inline-end: 1rem;
29437
- padding-inline-start: 1rem;
29438
- }
29439
-
29440
- .cds--data-table th:last-of-type {
29441
- position: static;
29442
- inline-size: auto;
29443
- }
29444
-
29445
- .cds--data-table .cds--table-header-label {
29446
- text-align: start;
29447
- }
29448
-
29449
- .cds--data-table td,
29450
- .cds--data-table tbody th {
29451
- background: var(--cds-layer);
29452
- border-block-end: 1px solid var(--cds-border-subtle);
29453
- border-block-start: 1px solid var(--cds-layer);
29454
- color: var(--cds-text-secondary, #525252);
29455
- padding-inline-end: 1rem;
29456
- padding-inline-start: 1rem;
29457
- }
29458
-
29459
- .cds--data-table td + td:first-of-type,
29460
- .cds--data-table tbody th + td:first-of-type {
29461
- padding-inline-start: 0.75rem;
29462
- }
29463
-
29464
- @supports (-moz-appearance: none) {
29465
- .cds--data-table td {
29466
- background-clip: padding-box;
29467
- }
29468
- }
29469
- .cds--data-table .cds--list-box input[role=combobox],
29470
- .cds--data-table .cds--list-box input[type=text],
29471
- .cds--data-table .cds--dropdown,
29472
- .cds--data-table .cds--list-box,
29473
- .cds--data-table .cds--number input[type=number],
29474
- .cds--data-table .cds--number__control-btn::before,
29475
- .cds--data-table .cds--number__control-btn::after,
29476
- .cds--data-table .cds--text-input,
29477
- .cds--data-table .cds--select-input {
29478
- background-color: var(--cds-field-02, #ffffff);
29479
- }
29480
-
29481
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
29482
- outline: 2px solid var(--cds-focus, #0f62fe);
29483
- outline-offset: -2px;
29484
- }
29485
-
29486
- @media screen and (prefers-contrast) {
29487
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=false]:focus {
29488
- outline-style: dotted;
29489
- }
29490
- }
29491
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu[aria-expanded=true]:focus {
29492
- outline: none;
29493
- }
29494
-
29495
- @media screen and (hover: hover), (-ms-high-contrast: active), (-ms-high-contrast: none) {
29496
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
29497
- opacity: 0;
29498
- }
29499
- }
29500
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__icon {
29501
- opacity: 1;
29502
- }
29503
-
29504
- .cds--data-table.cds--data-table--visible-overflow-menu td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon,
29505
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu:hover .cds--overflow-menu__icon,
29506
- .cds--data-table td.cds--table-column-menu .cds--overflow-menu:focus .cds--overflow-menu__icon,
29507
- .cds--data-table tr:hover td.cds--table-column-menu .cds--overflow-menu .cds--overflow-menu__icon {
29508
- opacity: 1;
29509
- }
29510
-
29511
- .cds--table-row--menu-option .cds--overflow-menu-options__btn .cds--overflow-menu-options__option-content svg {
29512
- position: relative;
29513
- inset-block-start: 0.1875rem;
29514
- margin-inline-end: 0.5rem;
29515
- }
29516
-
29517
- .cds--data-table .cds--overflow-menu:hover,
29518
- .cds--data-table .cds--overflow-menu__trigger:hover {
29519
- background-color: var(--cds-layer-selected-hover);
29520
- }
29521
-
29522
- .cds--data-table--selected .cds--overflow-menu:hover,
29523
- .cds--data-table--selected .cds--overflow-menu__trigger:hover {
29524
- background-color: var(--cds-layer-hover);
29525
- }
29526
-
29527
- .cds--data-table--selected .cds--link:not(.cds--link--disabled) {
29528
- color: var(--cds-link-secondary, #0043ce);
29529
- }
29530
-
29531
- .cds--data-table--xs td.cds--table-column-menu,
29532
- .cds--data-table--sm td.cds--table-column-menu {
29533
- block-size: 1.5rem;
29534
- padding-block-end: 0;
29535
- padding-block-start: 0;
29536
- }
29537
-
29538
- .cds--data-table--sm td.cds--table-column-menu {
29539
- block-size: 2rem;
29540
- }
29541
-
29542
- .cds--data-table--md td.cds--table-column-menu {
29543
- block-size: 2.5rem;
29544
- }
29545
-
29546
- .cds--data-table--xl .cds--table-column-menu {
29547
- padding-block-start: 0.5rem;
29548
- }
29549
-
29550
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
29551
- border-block-end: 1px solid var(--cds-layer);
29552
- }
29553
-
29554
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
29555
- background-color: var(--cds-layer-accent);
29556
- border-block-end: 1px solid var(--cds-layer-accent);
29557
- border-block-start: 1px solid var(--cds-layer-accent);
29558
- }
29559
-
29560
- .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
29561
- background-color: var(--cds-layer-hover);
29562
- border-block-end: 1px solid var(--cds-layer-hover);
29563
- border-block-start: 1px solid var(--cds-layer-hover);
29564
- }
29565
-
29566
- .cds--table-column-checkbox .cds--checkbox-label {
29567
- padding-inline-start: 0;
29568
- }
29569
-
29570
- .cds--data-table th.cds--table-column-checkbox {
29571
- position: static;
29572
- background: var(--cds-layer-accent);
29573
- inline-size: 2rem;
29574
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
29575
- }
29576
-
29577
- .cds--data-table thead th.cds--table-column-checkbox,
29578
- .cds--data-table tbody td.cds--table-column-checkbox,
29579
- .cds--data-table thead th.cds--table-expand,
29580
- .cds--data-table tbody td.cds--table-expand {
29581
- min-inline-size: 0;
29582
- }
29583
-
29584
- .cds--data-table thead th.cds--table-column-checkbox,
29585
- .cds--data-table tbody td.cds--table-column-checkbox {
29586
- min-inline-size: 2.5rem;
29587
- padding-inline-end: 0.25rem;
29588
- padding-inline-start: 1rem;
29589
- }
29590
-
29591
- .cds--data-table thead th.cds--table-expand,
29592
- .cds--data-table tbody td.cds--table-expand {
29593
- block-size: 2rem;
29594
- inline-size: 2rem;
29595
- }
29596
-
29597
- .cds--data-table--xs thead th.cds--table-expand,
29598
- .cds--data-table--xs tbody td.cds--table-expand {
29599
- padding: 0 0 0 0.5rem;
29600
- block-size: 1.5rem;
29601
- inline-size: 1.5rem;
29602
- }
29603
-
29604
- .cds--data-table--sm thead th.cds--table-expand,
29605
- .cds--data-table--sm tbody td.cds--table-expand {
29606
- padding: 0;
29607
- block-size: 2rem;
29608
- inline-size: 2rem;
29609
- padding-inline-start: 0.5rem;
29610
- }
29611
-
29612
- .cds--data-table--md thead th.cds--table-expand,
29613
- .cds--data-table--md tbody td.cds--table-expand {
29614
- padding: 0.25rem 0 0.25rem 0.5rem;
29615
- block-size: 2.5rem;
29616
- inline-size: 2.5rem;
29617
- }
29618
-
29619
- .cds--data-table--xl thead th.cds--table-expand,
29620
- .cds--data-table--xl tbody td.cds--table-expand {
29621
- block-size: 4rem;
29622
- padding-block-end: 1.375rem;
29623
- padding-block-start: 0.625rem;
29624
- }
29625
-
29626
- .cds--data-table--xl .cds--table-column-checkbox {
29627
- padding-block-start: 0.8125rem;
29628
- }
29629
-
29630
- .cds--data-table--xl .cds--table-column-radio {
29631
- padding-block-start: 1rem;
29632
- }
29633
-
29634
- .cds--table-column-radio {
29635
- inline-size: 48px;
29636
- }
29637
-
29638
- .cds--table-column-radio .cds--radio-button__appearance {
29639
- margin-inline-end: -0.125rem;
29640
- }
29641
-
29642
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
29643
- tr.cds--data-table--selected td {
29644
- background-color: var(--cds-layer-selected);
29645
- border-block-end: 1px solid var(--cds-layer-active);
29646
- border-block-start: 1px solid var(--cds-layer-selected);
29647
- color: var(--cds-text-primary, #161616);
29648
- }
29649
-
29650
- .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
29651
- tr.cds--data-table--selected:first-of-type td {
29652
- border-block-start: 1px solid var(--cds-border-subtle-selected);
29653
- }
29654
-
29655
- .cds--data-table--zebra tbody tr:last-of-type:nth-child(odd).cds--data-table--selected td,
29656
- .cds--data-table--zebra tbody tr:last-of-type:nth-child(even).cds--data-table--selected td,
29657
- tr.cds--data-table--selected:last-of-type td {
29658
- border-block-end: 1px solid var(--cds-layer-selected);
29659
- border-block-start: 1px solid var(--cds-layer-selected);
29660
- }
29661
-
29662
- .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected td {
29663
- border-block-end: 1px solid var(--cds-layer-active);
29664
- }
29665
-
29666
- .cds--data-table--zebra tbody tr:nth-child(even).cds--data-table--selected:hover td {
29667
- border-block-end: 1px solid var(--cds-layer-selected-hover);
29668
- }
29669
-
29670
- .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
29671
- .cds--data-table tbody .cds--data-table--selected:hover td {
29672
- background: var(--cds-layer-selected-hover);
29673
- border-block-end: 1px solid var(--cds-layer-selected-hover);
29674
- border-block-start: 1px solid var(--cds-layer-selected-hover);
29675
- color: var(--cds-text-primary, #161616);
29676
- }
29677
-
29678
- .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
29679
- opacity: 1;
29680
- }
29681
-
29682
- .cds--data-table--xs thead tr,
29683
- .cds--data-table--xs tbody tr,
29684
- .cds--data-table--xs tbody tr th {
29685
- block-size: 1.5rem;
29686
- }
29687
-
29688
- .cds--data-table--xs .cds--table-header-label {
29689
- padding-block-end: 0.125rem;
29690
- padding-block-start: 0.125rem;
29691
- }
29692
-
29693
- .cds--data-table--xs td,
29694
- .cds--data-table--xs tbody tr th {
29695
- padding-block-end: 0.125rem;
29696
- padding-block-start: 0.125rem;
29697
- }
29698
-
29699
- .cds--data-table--xs .cds--overflow-menu {
29700
- block-size: calc(100% + 1px);
29701
- inline-size: 2rem;
29702
- }
29703
-
29704
- .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
29705
- .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
29706
- padding-block-end: 0;
29707
- padding-block-start: 0;
29708
- }
29709
-
29710
- .cds--data-table.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox-label {
29711
- block-size: 1.4375rem;
29712
- min-block-size: 1.4375rem;
29713
- }
29714
-
29715
- .cds--data-table--sm thead tr,
29716
- .cds--data-table--sm tbody tr,
29717
- .cds--data-table--sm tbody tr th {
29718
- block-size: 2rem;
29719
- }
29720
-
29721
- .cds--data-table--sm .cds--table-header-label {
29722
- padding-block-end: 0.4375rem;
29723
- padding-block-start: 0.4375rem;
29724
- }
29725
-
29726
- .cds--data-table--sm td,
29727
- .cds--data-table--sm tbody tr th,
29728
- .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
29729
- padding-block-end: 0.375rem;
29730
- padding-block-start: 0.4375rem;
29731
- }
29732
-
29733
- .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
29734
- .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
29735
- padding-block-end: 0.1875rem;
29736
- padding-block-start: 0.1875rem;
29737
- }
29738
-
29739
- .cds--data-table--sm .cds--overflow-menu {
29740
- block-size: calc(100% + 1px);
29741
- }
29742
-
29743
- .cds--data-table--md thead tr,
29744
- .cds--data-table--md tbody tr,
29745
- .cds--data-table--md tbody tr th {
29746
- block-size: 2.5rem;
29747
- }
29748
-
29749
- .cds--data-table--md .cds--table-header-label,
29750
- .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
29751
- padding-block-end: 0.4375rem;
29752
- padding-block-start: 0.4375rem;
29753
- }
29754
-
29755
- .cds--data-table--md td,
29756
- .cds--data-table--md tbody tr th {
29757
- padding-block-end: 0.375rem;
29758
- padding-block-start: 0.4375rem;
29759
- }
29760
-
29761
- .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
29762
- .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
29763
- padding-block-end: 0.1875rem;
29764
- padding-block-start: 0.1875rem;
29765
- }
29766
-
29767
- .cds--data-table--md .cds--table-column-menu {
29768
- padding-block-end: 0.1875rem;
29769
- padding-block-start: 0.1875rem;
29770
- }
29771
-
29772
- .cds--data-table--xl thead tr,
29773
- .cds--data-table--xl tbody tr,
29774
- .cds--data-table--xl tbody tr th {
29775
- block-size: 4rem;
29776
- }
29777
-
29778
- .cds--data-table--xl .cds--table-header-label {
29779
- padding-block-end: 1rem;
29780
- padding-block-start: 1rem;
29781
- }
29782
-
29783
- .cds--data-table--xl td,
29784
- .cds--data-table--xl tbody tr th {
29785
- padding-block-end: 1rem;
29786
- padding-block-start: 1rem;
29787
- }
29788
-
29789
- .cds--data-table--xl th,
29790
- .cds--data-table--xl td {
29791
- vertical-align: top;
29792
- }
29793
-
29794
- .cds--data-table--xl .cds--data-table--cell-secondary-text {
29795
- font-size: var(--cds-label-01-font-size, 0.75rem);
29796
- font-weight: var(--cds-label-01-font-weight, 400);
29797
- line-height: var(--cds-label-01-line-height, 1.33333);
29798
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
29799
- }
29800
-
29801
- .cds--data-table--static {
29802
- inline-size: auto;
29803
- }
29804
-
29805
- .cds--data-table-container--static {
29806
- inline-size: fit-content;
29807
- }
29808
-
29809
- .cds--data-table_inner-container {
29810
- background-color: var(--cds-layer-accent);
29811
- transform: translateZ(0);
29812
- }
29813
-
29814
- .cds--data-table--sticky-header {
29815
- display: block;
29816
- overflow-y: scroll;
29817
- /* 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 */
29818
- }
29819
-
29820
- .cds--data-table--sticky-header thead,
29821
- .cds--data-table--sticky-header tbody,
29822
- .cds--data-table--sticky-header tr,
29823
- .cds--data-table--sticky-header th,
29824
- .cds--data-table--sticky-header td {
29825
- display: flex;
29826
- }
29827
-
29828
- .cds--data-table--sticky-header thead {
29829
- position: sticky;
29830
- z-index: 1;
29831
- overflow: scroll;
29832
- inline-size: 100%;
29833
- inset-block-start: 0;
29834
- -ms-overflow-style: none;
29835
- will-change: transform;
29836
- }
29837
-
29838
- .cds--data-table--sticky-header thead tr th {
29839
- border-block-end: 1px solid var(--cds-layer-active);
29840
- }
29841
-
29842
- .cds--data-table--sticky-header tbody {
29843
- flex-direction: column;
29844
- -ms-overflow-style: none;
29845
- overflow-x: scroll;
29846
- will-change: transform;
29847
- }
29848
-
29849
- .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row {
29850
- block-size: auto;
29851
- min-block-size: 3rem;
29852
- }
29853
-
29854
- .cds--data-table--sticky-header tr.cds--expandable-row:not(.cds--parent-row) {
29855
- block-size: auto;
29856
- }
29857
-
29858
- .cds--data-table--sticky-header .cds--table-expand {
29859
- max-inline-size: 3rem;
29860
- }
29861
-
29862
- .cds--data-table--sticky-header thead .cds--table-expand {
29863
- align-items: center;
29864
- }
29865
-
29866
- .cds--data-table--sticky-header .cds--parent-row {
29867
- min-block-size: 3rem;
29868
- }
29869
-
29870
- .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) {
29871
- padding-block-start: 0.875rem;
29872
- }
29873
-
29874
- .cds--data-table--sticky-header tr.cds--parent-row.cds--expandable-row:hover + tr[data-child-row] td {
29875
- border-block-start: 1px solid var(--cds-layer-hover);
29876
- }
29877
-
29878
- .cds--data-table--sticky-header tr.cds--expandable-row:last-of-type {
29879
- overflow: hidden;
29880
- }
29881
-
29882
- .cds--data-table--sticky-header tr.cds--data-table--selected:first-of-type td {
29883
- border-block-start: none;
29884
- }
29885
-
29886
- .cds--data-table--sticky-header thead th.cds--table-column-checkbox,
29887
- .cds--data-table--sticky-header tbody tr td.cds--table-column-checkbox {
29888
- align-items: center;
29889
- inline-size: 2.25rem;
29890
- min-inline-size: 2.25rem;
29891
- }
29892
-
29893
- .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 {
29894
- align-items: flex-start;
29895
- }
29896
-
29897
- .cds--data-table--sticky-header th.cds--table-column-checkbox ~ th:last-of-type:empty {
29898
- max-inline-size: 4rem;
29899
- }
29900
-
29901
- .cds--data-table--sticky-header th:empty:not(.cds--table-expand) {
29902
- max-inline-size: 2.25rem;
29903
- }
29904
-
29905
- .cds--data-table--sticky-header td.cds--table-column-menu {
29906
- align-items: center;
29907
- block-size: auto;
29908
- padding-block-start: 0;
29909
- }
29910
-
29911
- .cds--data-table--sticky-header thead::-webkit-scrollbar,
29912
- .cds--data-table--sticky-header tbody::-webkit-scrollbar {
29913
- display: none;
29914
- }
29915
-
29916
- @-moz-document url-prefix() {
29917
- .cds--data-table--sticky-header thead,
29918
- .cds--data-table--sticky-header tbody {
29919
- scrollbar-width: none;
29920
- }
29921
- }
29922
- .cds--data-table--sticky-header tbody tr:last-of-type {
29923
- border-block-end: 0;
29924
- }
29925
-
29926
- .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),
29927
- .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) {
29928
- inline-size: 100%;
29929
- min-inline-size: 0;
29930
- }
29931
-
29932
- .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) {
29933
- block-size: auto;
29934
- }
29935
-
29936
- .cds--data-table--sticky-header.cds--data-table--xs tr:not(.cds--expandable-row) {
29937
- min-block-size: 1.5rem;
29938
- }
29939
-
29940
- .cds--data-table--sticky-header.cds--data-table--sm tr:not(.cds--expandable-row) {
29941
- min-block-size: 2rem;
29942
- }
29943
-
29944
- .cds--data-table--sticky-header.cds--data-table--xl tr:not(.cds--expandable-row) {
29945
- min-block-size: 4rem;
29946
- }
29947
-
29948
- .cds--data-table--sticky-header.cds--data-table--xs tr td.cds--table-expand {
29949
- padding-block-start: 0.25rem;
29950
- }
29951
-
29952
- .cds--data-table--sticky-header.cds--data-table--sm tr td.cds--table-expand {
29953
- padding-block-start: 0.5rem;
29954
- }
29955
-
29956
- .cds--data-table--sticky-header .cds--table-header-label {
29957
- display: block;
29958
- overflow-x: hidden;
29959
- text-overflow: ellipsis;
29960
- white-space: nowrap;
29961
- max-inline-size: calc(100% - 10px);
29962
- overflow-y: hidden;
29963
- padding-block-end: 1rem;
29964
- padding-block-start: 0.9375rem;
29965
- }
29966
-
29967
- .cds--data-table--sticky-header.cds--data-table--xs th .cds--table-header-label {
29968
- padding-block-end: 0;
29969
- padding-block-start: 0.1875rem;
29970
- }
29971
-
29972
- .cds--data-table--sticky-header.cds--data-table--sm th .cds--table-header-label {
29973
- padding-block-end: 0;
29974
- padding-block-start: 0.5rem;
29975
- }
29976
-
29977
- .cds--data-table--sticky-header.cds--data-table--xl th .cds--table-header-label {
29978
- padding-block-start: 1rem;
29979
- }
29980
-
29981
- .cds--data-table--sticky-header.cds--data-table--xl th.cds--table-expand {
29982
- display: flex;
29983
- align-items: flex-start;
29984
- }
29985
-
29986
- .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 {
29987
- align-items: flex-start;
29988
- }
29989
-
29990
- .cds--data-table--max-width {
29991
- max-inline-size: 100%;
29992
- }
29993
-
29994
- .cds--data-table--sticky-header {
29995
- max-block-size: 18.75rem;
29996
- }
29997
-
29998
- .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
29999
- margin: 0;
30000
- }
30001
-
30002
- .cds--data-table--xs .cds--form-item.cds--checkbox-wrapper:last-of-type,
30003
- .cds--data-table--sm .cds--form-item.cds--checkbox-wrapper:last-of-type {
30004
- margin: -0.1875rem 0;
30005
- }
30006
-
30007
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
30008
- .cds--data-table-content {
30009
- outline: 1px solid transparent;
30010
- }
30011
- }
30012
- .cds--chart-holder .cds--modal.is-visible {
30013
- z-index: 99999;
30014
- }
30015
-
30016
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__label {
30017
- margin-top: 0;
30018
- margin-bottom: 0;
30019
- }
30020
-
30021
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__heading {
30022
- margin-top: 0.5rem;
30023
- margin-bottom: 1rem;
30024
- }
30025
-
30026
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {
30027
- padding: 0;
30028
- margin-bottom: 0;
30029
- color-scheme: var(--cds-color-scheme, light);
30030
- }
30031
-
30032
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content table {
30033
- position: relative;
30034
- border-collapse: collapse;
30035
- }
30036
-
30037
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content table th {
30038
- position: sticky;
30039
- top: 0;
30040
- }
30041
-
30042
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer {
30043
- background-color: transparent;
30044
- }
30045
-
30046
- .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--cc-modal-footer-spacer {
30047
- width: 50%;
30048
- }
30049
-
30050
- .cds--cc--ruler line.ruler-line,
30051
- .cds--cc--ruler-binned line.ruler-line {
30052
- stroke: var(--cds-layer-inverse-absolute, #000000);
30053
- stroke-width: 1px;
30054
- stroke-dasharray: 2;
30055
- pointer-events: none;
30056
- }
30057
-
30058
- .cds--cc--skeleton rect.chart-skeleton-backdrop {
30059
- fill: var(--cds-grid-bg, #ffffff);
30060
- }
30061
-
30062
- .cds--cc--skeleton .shimmer-effect-lines {
30063
- stroke-width: 1px;
26697
+ .cds--cc--skeleton .shimmer-effect-lines {
26698
+ stroke-width: 1px;
30064
26699
  }
30065
26700
 
30066
26701
  .cds--cc--skeleton .shimmer-effect-sparkline {
@@ -30133,181 +26768,58 @@ tr.cds--data-table--selected:last-of-type td {
30133
26768
  height: 20px;
30134
26769
  transform: translate(0, -10px);
30135
26770
  cursor: pointer;
30136
- fill: transparent;
30137
- }
30138
-
30139
- .cds--cc--threshold rect.threshold-hoverable-area.rotate {
30140
- transform: rotate(90deg) translate(0, -10px);
30141
- }
30142
-
30143
- .cds--cc--threshold--label {
30144
- background-color: #fa4d56;
30145
- pointer-events: none;
30146
- transition: opacity 0.1s;
30147
- transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
30148
- display: inline;
30149
- box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
30150
- position: absolute;
30151
- word-wrap: break-word;
30152
- z-index: 1059;
30153
- font-family: var(--cds-charts-font-family-condensed);
30154
- color: var(--cds-text-primary, #161616);
30155
- line-height: 16px;
30156
- font-size: 12px;
30157
- padding: 4px;
30158
- min-width: 20px;
30159
- }
30160
-
30161
- .cds--cc--threshold--label.hidden {
30162
- opacity: 0;
30163
- transition: opacity 0.1s;
30164
- transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
30165
- }
30166
-
30167
- .cds--cc--title p.title {
30168
- color: var(--cds-text-primary, #161616);
30169
- font-size: 16px;
30170
- font-family: var(--cds-charts-font-family);
30171
- font-weight: 600;
30172
- white-space: nowrap;
30173
- overflow: hidden;
30174
- text-overflow: ellipsis;
30175
- padding-right: 15px;
30176
- }
30177
-
30178
- .layout-child.title {
30179
- height: unset !important;
30180
- overflow: hidden;
30181
- }
30182
-
30183
- .cds--overflow-menu,
30184
- .cds--overflow-menu__trigger {
30185
- box-sizing: border-box;
30186
- padding: 0;
30187
- border: 0;
30188
- margin: 0;
30189
- font-family: inherit;
30190
- font-size: 100%;
30191
- vertical-align: baseline;
30192
- display: inline-block;
30193
- padding: 0;
30194
- border: 0;
30195
- appearance: none;
30196
- background: none;
30197
- cursor: pointer;
30198
- text-align: start;
30199
- inline-size: 100%;
30200
- box-sizing: border-box;
30201
- padding: 0;
30202
- border: 0;
30203
- margin: 0;
30204
- font-family: inherit;
30205
- font-size: 100%;
30206
- vertical-align: baseline;
30207
- outline: 2px solid transparent;
30208
- outline-offset: -2px;
30209
- position: relative;
30210
- display: flex;
30211
- align-items: center;
30212
- justify-content: center;
30213
- block-size: 2.5rem;
30214
- cursor: pointer;
30215
- inline-size: 2.5rem;
30216
- min-block-size: 2.5rem;
30217
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
30218
- }
30219
-
30220
- .cds--overflow-menu *,
30221
- .cds--overflow-menu *::before,
30222
- .cds--overflow-menu *::after,
30223
- .cds--overflow-menu__trigger *,
30224
- .cds--overflow-menu__trigger *::before,
30225
- .cds--overflow-menu__trigger *::after {
30226
- box-sizing: inherit;
30227
- }
30228
-
30229
- .cds--overflow-menu::-moz-focus-inner,
30230
- .cds--overflow-menu__trigger::-moz-focus-inner {
30231
- border: 0;
30232
- }
30233
-
30234
- .cds--overflow-menu *,
30235
- .cds--overflow-menu *::before,
30236
- .cds--overflow-menu *::after,
30237
- .cds--overflow-menu__trigger *,
30238
- .cds--overflow-menu__trigger *::before,
30239
- .cds--overflow-menu__trigger *::after {
30240
- box-sizing: inherit;
30241
- }
30242
-
30243
- .cds--overflow-menu:focus,
30244
- .cds--overflow-menu__trigger:focus {
30245
- outline: 2px solid var(--cds-focus, #0f62fe);
30246
- outline-offset: -2px;
30247
- }
30248
-
30249
- @media screen and (prefers-contrast) {
30250
- .cds--overflow-menu:focus,
30251
- .cds--overflow-menu__trigger:focus {
30252
- outline-style: dotted;
30253
- }
30254
- }
30255
- .cds--overflow-menu:hover,
30256
- .cds--overflow-menu__trigger:hover {
30257
- background-color: var(--cds-layer-hover);
30258
- }
30259
-
30260
- .cds--overflow-menu > :first-child {
30261
- margin-block-start: 0;
30262
- }
30263
-
30264
- .cds--overflow-menu--sm {
30265
- block-size: 2rem;
30266
- inline-size: 2rem;
30267
- }
30268
-
30269
- .cds--overflow-menu--lg {
30270
- block-size: 3rem;
30271
- inline-size: 3rem;
26771
+ fill: transparent;
30272
26772
  }
30273
26773
 
30274
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
30275
- outline: 2px solid var(--cds-focus, #0f62fe);
30276
- outline-offset: -2px;
26774
+ .cds--cc--threshold rect.threshold-hoverable-area.rotate {
26775
+ transform: rotate(90deg) translate(0, -10px);
30277
26776
  }
30278
26777
 
30279
- @media screen and (prefers-contrast) {
30280
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
30281
- outline-style: dotted;
30282
- }
30283
- }
30284
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
30285
- outline: none;
26778
+ .cds--cc--threshold--label {
26779
+ background-color: #fa4d56;
26780
+ pointer-events: none;
26781
+ transition: opacity 0.1s;
26782
+ transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
26783
+ display: inline;
26784
+ box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
26785
+ position: absolute;
26786
+ word-wrap: break-word;
26787
+ z-index: 1059;
26788
+ font-family: var(--cds-charts-font-family-condensed);
26789
+ color: var(--cds-text-primary, #161616);
26790
+ line-height: 16px;
26791
+ font-size: 12px;
26792
+ padding: 4px;
26793
+ min-width: 20px;
30286
26794
  }
30287
26795
 
30288
- .cds--overflow-menu.cds--overflow-menu--open,
30289
- .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
30290
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
30291
- background-color: var(--cds-layer);
30292
- transition: none;
26796
+ .cds--cc--threshold--label.hidden {
26797
+ opacity: 0;
26798
+ transition: opacity 0.1s;
26799
+ transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
30293
26800
  }
30294
26801
 
30295
- .cds--overflow-menu--light.cds--overflow-menu--open,
30296
- .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
30297
- background-color: var(--cds-layer);
26802
+ .cds--cc--title p.title {
26803
+ color: var(--cds-text-primary, #161616);
26804
+ font-size: 16px;
26805
+ font-family: var(--cds-charts-font-family);
26806
+ font-weight: 600;
26807
+ white-space: nowrap;
26808
+ overflow: hidden;
26809
+ text-overflow: ellipsis;
26810
+ padding-right: 15px;
30298
26811
  }
30299
26812
 
30300
- .cds--overflow-menu__icon {
30301
- block-size: 1rem;
30302
- fill: var(--cds-icon-primary, #161616);
30303
- inline-size: 1rem;
26813
+ .cds--chart-holder .layout-child.title {
26814
+ height: unset !important;
26815
+ overflow: hidden;
30304
26816
  }
30305
26817
 
30306
- .cds--overflow-menu__wrapper {
30307
- line-height: 0;
26818
+ .cds--chart-holder .cds--cc--toolbar {
26819
+ display: flex;
30308
26820
  }
30309
26821
 
30310
- .cds--overflow-menu-options {
26822
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options {
30311
26823
  box-sizing: border-box;
30312
26824
  padding: 0;
30313
26825
  border: 0;
@@ -30319,323 +26831,455 @@ tr.cds--data-table--selected:last-of-type td {
30319
26831
  position: absolute;
30320
26832
  z-index: 6000;
30321
26833
  display: none;
26834
+ background-color: var(--cds-layer);
26835
+ width: 10rem;
30322
26836
  flex-direction: column;
30323
26837
  align-items: flex-start;
30324
- background-color: var(--cds-layer);
30325
- inline-size: 10rem;
30326
- inset-block-start: 32px;
26838
+ top: 32px;
30327
26839
  inset-inline-start: 0;
30328
26840
  list-style: none;
30329
26841
  }
30330
26842
 
30331
- .cds--overflow-menu-options *,
30332
- .cds--overflow-menu-options *::before,
30333
- .cds--overflow-menu-options *::after {
26843
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options *,
26844
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options ::before,
26845
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options ::after {
30334
26846
  box-sizing: inherit;
30335
26847
  }
30336
26848
 
30337
- .cds--overflow-menu-options::after {
30338
- position: absolute;
30339
- display: block;
30340
- background-color: var(--cds-layer);
30341
- content: "";
30342
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
30343
- }
30344
-
30345
- @media screen and (prefers-reduced-motion: reduce) {
30346
- .cds--overflow-menu-options::after {
30347
- transition: none;
30348
- }
30349
- }
30350
- .cds--overflow-menu.cds--overflow-menu--open:hover {
30351
- background-color: var(--cds-layer);
30352
- }
30353
-
30354
- .cds--overflow-menu-options--light {
30355
- background-color: var(--cds-layer);
30356
- }
30357
-
30358
- .cds--overflow-menu-options--light::after {
30359
- background-color: var(--cds-layer);
30360
- }
30361
-
30362
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
30363
- background-color: var(--cds-layer);
30364
- }
30365
-
30366
- .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
30367
- block-size: 0.1875rem;
30368
- inline-size: 2.5rem;
30369
- inset-block-start: -0.1875rem;
30370
- inset-inline-start: 0;
30371
- }
30372
-
30373
- .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
30374
- block-size: 0.5rem;
30375
- inline-size: 2.5rem;
30376
- inset-block-end: -0.5rem;
30377
- inset-inline-start: 0;
30378
- }
30379
-
30380
- .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
30381
- block-size: 2.5rem;
30382
- inline-size: 0.375rem;
30383
- inset-block-start: 0;
30384
- inset-inline-end: -0.375rem;
30385
- }
30386
-
30387
- .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
26849
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option {
26850
+ box-sizing: border-box;
26851
+ border: 0;
26852
+ margin: 0;
26853
+ font-family: inherit;
26854
+ font-size: 100%;
26855
+ vertical-align: baseline;
26856
+ display: flex;
26857
+ align-items: center;
26858
+ padding: 0;
26859
+ background-color: transparent;
30388
26860
  block-size: 2.5rem;
30389
- inline-size: 0.375rem;
30390
- inset-block-start: 0;
30391
- inset-inline-start: -0.375rem;
30392
- }
30393
-
30394
- .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 {
30395
- inline-size: 2rem;
26861
+ inline-size: 100%;
26862
+ transition: background-color 0.11s cubic-bezier(0, 0, 0.38, 0.9);
30396
26863
  }
30397
26864
 
30398
- .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 {
30399
- block-size: 2rem;
26865
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option:hover {
26866
+ background-color: var(--cds-layer-hover);
30400
26867
  }
30401
26868
 
30402
- .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 {
30403
- inline-size: 3rem;
26869
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option .cds--overflow-menu-options__btn {
26870
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
26871
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
26872
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
26873
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
26874
+ outline: 2px solid transparent;
26875
+ outline-offset: -2px;
26876
+ display: inline-flex;
26877
+ align-items: center;
26878
+ padding: 0 1rem;
26879
+ border: none;
26880
+ background-color: transparent;
26881
+ block-size: 100%;
26882
+ color: var(--cds-text-secondary, #525252);
26883
+ cursor: pointer;
26884
+ font-family: inherit;
26885
+ font-weight: 400;
26886
+ inline-size: 100%;
26887
+ max-inline-size: 11.25rem;
26888
+ text-align: start;
26889
+ 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);
30404
26890
  }
30405
26891
 
30406
- .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 {
30407
- block-size: 3rem;
26892
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option .cds--overflow-menu-options__btn:focus {
26893
+ outline: 2px solid var(--cds-focus, #0f62fe);
26894
+ outline-offset: -2px;
30408
26895
  }
30409
26896
 
30410
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
30411
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
30412
- inset-inline-end: 0;
30413
- inset-inline-start: auto;
26897
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option *,
26898
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option ::before,
26899
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option ::after {
26900
+ box-sizing: inherit;
30414
26901
  }
30415
26902
 
30416
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
30417
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
30418
- inset-block-end: 0;
30419
- inset-block-start: auto;
26903
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip {
26904
+ right: 0;
26905
+ left: unset;
30420
26906
  }
30421
26907
 
30422
- .cds--overflow-menu-options--open {
30423
- display: flex;
26908
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip.is-open {
26909
+ display: table;
30424
26910
  }
30425
26911
 
30426
- .cds--overflow-menu-options__content {
30427
- inline-size: 100%;
26912
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip ul {
26913
+ margin: 0;
26914
+ padding: 0;
26915
+ list-style: none;
30428
26916
  }
30429
26917
 
30430
- .cds--overflow-menu-options__option {
30431
- box-sizing: border-box;
30432
- padding: 0;
26918
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger {
26919
+ width: 2rem;
26920
+ height: 2rem;
26921
+ appearance: none;
26922
+ background: none;
26923
+ block-size: 2.5rem;
30433
26924
  border: 0;
30434
- margin: 0;
26925
+ box-sizing: border-box;
26926
+ cursor: pointer;
26927
+ display: flex;
30435
26928
  font-family: inherit;
30436
26929
  font-size: 100%;
30437
- vertical-align: baseline;
30438
- display: flex;
26930
+ inline-size: 2.5rem;
30439
26931
  align-items: center;
26932
+ justify-content: center;
26933
+ margin: 0;
26934
+ min-height: 2.5rem;
26935
+ outline: 2px solid transparent;
26936
+ outline-offset: -2px;
30440
26937
  padding: 0;
30441
- background-color: transparent;
30442
- block-size: 2.5rem;
30443
- inline-size: 100%;
30444
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
26938
+ position: relative;
26939
+ text-align: start;
26940
+ transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
26941
+ vertical-align: baseline;
30445
26942
  }
30446
26943
 
30447
- .cds--overflow-menu-options__option *,
30448
- .cds--overflow-menu-options__option *::before,
30449
- .cds--overflow-menu-options__option *::after {
30450
- box-sizing: inherit;
26944
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu:hover, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger:hover {
26945
+ background-color: var(--cds-layer-hover);
30451
26946
  }
30452
26947
 
30453
- .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
30454
- block-size: 2rem;
26948
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu:focus, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger:focus {
26949
+ outline: 2px solid var(--cds-focus, #0f62fe);
26950
+ outline-offset: -2px;
30455
26951
  }
30456
26952
 
30457
- .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
30458
- block-size: 3rem;
26953
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu *,
26954
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu ::before,
26955
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu ::after, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger *,
26956
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger ::before,
26957
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger ::after {
26958
+ box-sizing: inherit;
30459
26959
  }
30460
26960
 
30461
- .cds--overflow-menu--divider {
30462
- border-block-start: 1px solid var(--cds-border-subtle);
26961
+ .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu > :first-child, .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu__trigger > :first-child {
26962
+ margin-block-start: 0;
30463
26963
  }
30464
26964
 
30465
- .cds--overflow-menu--light .cds--overflow-menu--divider {
30466
- border-block-start: 1px solid var(--cds-border-subtle);
26965
+ .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 {
26966
+ block-size: 1rem;
26967
+ fill: var(--cds-icon-primary, #161616);
26968
+ inline-size: 1rem;
30467
26969
  }
30468
26970
 
30469
- a.cds--overflow-menu-options__btn::before {
30470
- display: inline-block;
30471
- block-size: 100%;
26971
+ .cds--chart-holder {
26972
+ --cds-layout-size-height-min: 0px;
26973
+ --cds-layout-size-height-lg: 3rem;
26974
+ --cds-layout-size-height-max: 999999999px;
26975
+ --cds-layout-density-padding-inline-min: 0px;
26976
+ --cds-layout-density-padding-inline-max: 999999999px;
26977
+ --cds-layout-size-height-lg: 3rem;
26978
+ }
26979
+
26980
+ .cds--chart-holder .cds--modal {
26981
+ position: fixed;
26982
+ z-index: 9000;
26983
+ display: flex;
26984
+ align-items: center;
26985
+ justify-content: center;
26986
+ background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
26987
+ block-size: 100vh;
30472
26988
  content: "";
30473
- vertical-align: middle;
26989
+ inline-size: 100vw;
26990
+ inset-block-start: 0;
26991
+ inset-inline-start: 0;
26992
+ opacity: 0;
26993
+ transition: opacity 0.24s cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 0.24s;
26994
+ visibility: hidden;
30474
26995
  }
30475
26996
 
30476
- .cds--overflow-menu-options__btn {
30477
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
30478
- font-weight: var(--cds-body-compact-01-font-weight, 400);
30479
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
30480
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
30481
- outline: 2px solid transparent;
30482
- outline-offset: -2px;
30483
- display: inline-flex;
30484
- align-items: center;
30485
- padding: 0 1rem;
30486
- border: none;
30487
- background-color: transparent;
30488
- block-size: 100%;
30489
- color: var(--cds-text-secondary, #525252);
30490
- cursor: pointer;
30491
- font-family: inherit;
30492
- font-weight: 400;
30493
- inline-size: 100%;
30494
- max-inline-size: 11.25rem;
30495
- text-align: start;
30496
- 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);
26997
+ .cds--chart-holder .cds--modal.is-visible {
26998
+ z-index: 99999;
26999
+ opacity: 1;
27000
+ transition: opacity 0.24s cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
27001
+ visibility: inherit;
30497
27002
  }
30498
27003
 
30499
- .cds--overflow-menu-options__btn:hover {
30500
- color: var(--cds-text-primary, #161616);
27004
+ .cds--chart-holder .cds--modal.is-visible .cds--modal-container {
27005
+ transform: translateZ(0);
27006
+ transition: transform 0.24s cubic-bezier(0, 0, 0.3, 1);
30501
27007
  }
30502
27008
 
30503
- .cds--overflow-menu-options__btn:focus {
30504
- outline: 2px solid var(--cds-focus, #0f62fe);
30505
- outline-offset: -2px;
27009
+ .cds--chart-holder .cds--modal .cds--modal-container {
27010
+ position: fixed;
27011
+ top: 0;
27012
+ display: grid;
27013
+ overflow: hidden;
27014
+ width: 100%;
27015
+ height: 100%;
27016
+ max-height: 100%;
27017
+ background-color: var(--cds-layer);
27018
+ grid-template-columns: 100%;
27019
+ grid-template-rows: auto 1fr auto;
27020
+ outline: 3px solid transparent;
27021
+ outline-offset: -3px;
27022
+ transform: translate3d(0, -24px, 0);
27023
+ transform-origin: top center;
27024
+ transition: transform 0.24s cubic-bezier(0.4, 0.14, 1, 1);
30506
27025
  }
30507
27026
 
30508
- @media screen and (prefers-contrast) {
30509
- .cds--overflow-menu-options__btn:focus {
30510
- outline-style: dotted;
27027
+ @media (min-width: 42rem) {
27028
+ .cds--chart-holder .cds--modal .cds--modal-container {
27029
+ position: static;
27030
+ width: 84%;
27031
+ height: auto;
27032
+ max-height: 90%;
30511
27033
  }
30512
27034
  }
30513
- .cds--overflow-menu-options__btn::-moz-focus-inner {
30514
- border: none;
27035
+ @media (min-width: 66rem) {
27036
+ .cds--chart-holder .cds--modal .cds--modal-container {
27037
+ width: 60%;
27038
+ max-height: 84%;
27039
+ }
27040
+ }
27041
+ @media (min-width: 82rem) {
27042
+ .cds--chart-holder .cds--modal .cds--modal-container {
27043
+ width: 48%;
27044
+ }
27045
+ }
27046
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header {
27047
+ padding-top: 1rem;
27048
+ padding-right: 3rem;
27049
+ padding-left: 1rem;
27050
+ margin-bottom: 0.5rem;
27051
+ grid-column: 1/-1;
27052
+ grid-row: 1/1;
30515
27053
  }
30516
27054
 
30517
- .cds--overflow-menu-options__btn svg {
30518
- fill: var(--cds-icon-secondary, #525252);
27055
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__label {
27056
+ margin-top: 0;
27057
+ margin-bottom: 0;
27058
+ box-sizing: border-box;
27059
+ padding: 0;
27060
+ border: 0;
27061
+ margin: 0;
27062
+ font-family: inherit;
27063
+ vertical-align: baseline;
27064
+ font-size: var(--cds-label-01-font-size, 0.75rem);
27065
+ font-weight: var(--cds-label-01-font-weight, 400);
27066
+ line-height: var(--cds-label-01-line-height, 1.33333);
27067
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
27068
+ color: var(--cds-text-secondary, #525252);
27069
+ --docs-content-width: 75%;
27070
+ width: var(--docs-content-width);
30519
27071
  }
30520
27072
 
30521
- .cds--overflow-menu-options__btn:hover svg {
30522
- fill: var(--cds-icon-primary, #161616);
27073
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header__heading {
27074
+ margin-top: 0.5rem !important;
27075
+ margin-bottom: 1rem !important;
27076
+ box-sizing: border-box;
27077
+ padding: 0;
27078
+ border: 0;
27079
+ margin: 0;
27080
+ font-family: inherit;
27081
+ vertical-align: baseline;
27082
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
27083
+ font-weight: var(--cds-heading-03-font-weight, 400);
27084
+ line-height: var(--cds-heading-03-line-height, 1.4);
27085
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
27086
+ padding-right: calc(20% - 3rem);
27087
+ color: var(--cds-text-primary, #161616);
27088
+ --docs-content-width: 75%;
27089
+ width: var(--docs-content-width);
30523
27090
  }
30524
27091
 
30525
- .cds--overflow-menu-options__option-content {
27092
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close {
27093
+ position: absolute;
27094
+ z-index: 2;
27095
+ top: 0;
27096
+ right: 0;
30526
27097
  overflow: hidden;
30527
- text-overflow: ellipsis;
30528
- white-space: nowrap;
27098
+ width: 3rem;
27099
+ height: 3rem;
27100
+ padding: 0.75rem;
27101
+ border: 2px solid transparent;
27102
+ background-color: transparent;
27103
+ cursor: pointer;
27104
+ transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
27105
+ margin: 0;
27106
+ border-radius: 0;
27107
+ font-family: inherit;
30529
27108
  }
30530
27109
 
30531
- .cds--overflow-menu-options__option:hover {
27110
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close:hover {
30532
27111
  background-color: var(--cds-layer-hover);
30533
27112
  }
30534
27113
 
30535
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
30536
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
30537
- background-color: var(--cds-button-danger-primary, #da1e28);
30538
- color: var(--cds-text-on-color, #ffffff);
27114
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close:focus {
27115
+ border-color: var(--cds-focus, #0f62fe);
27116
+ outline: none;
30539
27117
  }
30540
27118
 
30541
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
30542
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
30543
- fill: currentColor;
27119
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-header .cds--modal-close__icon {
27120
+ width: 1.25rem;
27121
+ height: 1.25rem;
27122
+ fill: var(--cds-icon-primary, #161616);
30544
27123
  }
30545
27124
 
30546
- .cds--overflow-menu-options__option--disabled:hover {
30547
- background-color: var(--cds-layer);
30548
- cursor: not-allowed;
27125
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {
27126
+ padding: 0 !important;
27127
+ margin-bottom: 0;
27128
+ color-scheme: var(--cds-color-scheme, light);
27129
+ font-size: var(--cds-body-01-font-size, 0.875rem);
27130
+ line-height: var(--cds-body-01-line-height, 1.42857);
27131
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
27132
+ position: relative;
27133
+ color: var(--cds-text-primary, #161616);
27134
+ font-weight: 400;
27135
+ grid-column: 1/-1;
27136
+ grid-row: 2/-2;
27137
+ overflow-y: auto;
30549
27138
  }
30550
27139
 
30551
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
30552
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
30553
- cursor: not-allowed;
27140
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table {
27141
+ position: relative;
27142
+ border-collapse: collapse;
27143
+ width: 100%;
27144
+ border-spacing: 0;
30554
27145
  }
30555
27146
 
30556
- .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 {
30557
- outline: 2px solid transparent;
30558
- outline-offset: -2px;
30559
- background-color: var(--cds-layer);
27147
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead {
27148
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
27149
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
27150
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
27151
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
27152
+ background-color: var(--cds-layer-accent);
30560
27153
  }
30561
27154
 
30562
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg {
30563
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
27155
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr {
27156
+ width: 100%;
27157
+ height: 3rem;
27158
+ border: none;
30564
27159
  }
30565
27160
 
30566
- .cds--overflow-menu--flip {
30567
- inset-inline-start: -140px;
27161
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr th {
27162
+ position: sticky;
27163
+ top: 0;
27164
+ padding-right: 1rem;
27165
+ padding-left: 1rem;
27166
+ background-color: var(--cds-layer-accent);
27167
+ color: var(--cds-text-primary, #161616);
27168
+ text-align: start;
27169
+ vertical-align: middle;
30568
27170
  }
30569
27171
 
30570
- .cds--overflow-menu--flip::before {
30571
- inset-inline-start: 145px;
27172
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table thead tr th .cds--table-header-label {
27173
+ text-align: left;
30572
27174
  }
30573
27175
 
30574
- /* stylelint-disable */
30575
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
30576
- .cds--overflow-menu:focus,
30577
- .cds--overflow-menu-options__btn:focus {
30578
- color: Highlight;
30579
- outline: 1px solid Highlight;
30580
- }
30581
- }
30582
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
30583
- .cds--overflow-menu svg {
30584
- fill: ButtonText;
30585
- }
30586
- }
30587
- /*stylelint-enable */
30588
- .cds--chart-holder .cds--overflow-menu,
30589
- .cds--chart-holder .cds--overflow-menu__trigger {
30590
- width: 2rem;
30591
- height: 2rem;
27176
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody {
27177
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
27178
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
27179
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
27180
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
27181
+ background-color: var(--cds-layer);
27182
+ width: 100%;
30592
27183
  }
30593
27184
 
30594
- .cds--chart-holder .cds--cc--toolbar {
30595
- display: flex;
27185
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr {
27186
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
27187
+ width: 100;
27188
+ height: 3rem;
27189
+ border: none;
30596
27190
  }
30597
27191
 
30598
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled,
30599
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button {
30600
- cursor: not-allowed;
27192
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr:hover {
27193
+ background: var(--cds-layer-hover) !important;
30601
27194
  }
30602
27195
 
30603
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled:hover,
30604
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button:hover {
30605
- background-color: transparent;
27196
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content .cds--data-table tbody tr td {
27197
+ transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
27198
+ padding-right: 1rem;
27199
+ padding-left: 1rem;
27200
+ border-top: 1px solid var(--cds-layer);
27201
+ border-bottom: 1px solid var(--cds-border-subtle);
27202
+ color: var(--cds-text-secondary, #525252);
27203
+ text-align: left;
27204
+ vertical-align: middle;
30606
27205
  }
30607
27206
 
30608
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled button:focus {
30609
- outline: none;
27207
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer {
27208
+ background-color: transparent;
27209
+ display: flex;
27210
+ height: 4rem;
27211
+ justify-content: flex-end;
27212
+ margin-top: auto;
27213
+ grid-column: 1/-1;
27214
+ grid-row: -1/-1;
30610
27215
  }
30611
27216
 
30612
- .cds--chart-holder .cds--cc--toolbar div.toolbar-control.disabled svg {
30613
- fill: var(--cds-icon-on-color-disabled, #8d8d8d);
27217
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--cc-modal-footer-spacer {
27218
+ width: 50%;
30614
27219
  }
30615
27220
 
30616
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip {
30617
- right: 0;
30618
- left: unset;
27221
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn {
27222
+ max-width: none;
27223
+ height: 4rem;
27224
+ flex: 0 1 50%;
27225
+ align-items: baseline;
27226
+ padding-top: 0.875rem;
27227
+ padding-bottom: 2rem;
27228
+ margin: 0;
27229
+ --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));
27230
+ --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));
27231
+ --temp-1lh: ( var(--cds-body-compact-01-line-height, 1.28572) * 1em );
27232
+ --temp-expressive-1lh: ( var(--cds-body-compact-02-line-height, 1.375) * 1em );
27233
+ --temp-padding-block-max: calc( (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 - .0625rem );
27234
+ box-sizing: border-box;
27235
+ padding: 0;
27236
+ border: 0;
27237
+ font-family: inherit;
27238
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
27239
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
27240
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
27241
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
27242
+ position: relative;
27243
+ display: inline-flex;
27244
+ width: max-content;
27245
+ max-width: 20rem;
27246
+ min-height: var(--cds-layout-size-height-local);
27247
+ justify-content: space-between;
27248
+ border-radius: 0;
27249
+ cursor: pointer;
27250
+ outline: none;
27251
+ padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
27252
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
27253
+ padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
27254
+ text-align: left;
27255
+ text-decoration: none;
27256
+ 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);
27257
+ vertical-align: top;
30619
27258
  }
30620
27259
 
30621
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip.is-open {
30622
- display: table;
27260
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary {
27261
+ border-width: 1px;
27262
+ border-style: solid;
27263
+ border-color: transparent;
27264
+ background-color: var(--cds-button-primary, #0f62fe);
27265
+ color: var(--cds-text-on-color, #ffffff);
30623
27266
  }
30624
27267
 
30625
- .cds--chart-holder .cds--cc--toolbar .cds--overflow-menu--flip ul {
30626
- margin: 0;
30627
- padding: 0;
27268
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary:hover {
27269
+ color: var(--cds-text-on-color, #ffffff);
27270
+ background-color: var(--cds-button-primary-hover, #0050e6);
30628
27271
  }
30629
27272
 
30630
- .cds--chart-holder .cds--cc--toolbar .cds--loading__background {
30631
- fill: transparent;
27273
+ .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-footer .cds--btn-primary:focus {
27274
+ border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
27275
+ 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);
30632
27276
  }
30633
27277
 
30634
- .cds--chart-holder .cds--cc--toolbar .cds--loading__stroke {
30635
- stroke-dashoffset: 99;
30636
- fill: transparent;
27278
+ @supports (-moz-appearance: none) {
27279
+ .cds--data-table td {
27280
+ background-clip: padding-box;
27281
+ }
30637
27282
  }
30638
-
30639
27283
  .cds--cc--tooltip {
30640
27284
  background-color: var(--cds-layer-02, #ffffff);
30641
27285
  pointer-events: none;