@i-cell/ids-styles 0.0.47 → 0.0.49

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.
@@ -5468,8 +5468,8 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5468
5468
  max-height: 80vh;
5469
5469
  }
5470
5470
  .ids-dialog .ids-dialog-container .ids-dialog-header {
5471
- display: flex;
5472
- align-items: stretch;
5471
+ display: grid;
5472
+ grid-template-columns: 1fr auto;
5473
5473
  }
5474
5474
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
5475
5475
  font-style: normal;
@@ -5481,15 +5481,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5481
5481
  font-style: normal;
5482
5482
  }
5483
5483
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
5484
- display: flex;
5485
- flex-direction: column;
5486
- flex: 1 0 0;
5487
- align-items: flex-start;
5488
- }
5489
- .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button {
5490
- position: absolute;
5491
- top: 12px;
5492
- right: 12px;
5484
+ display: grid;
5493
5485
  }
5494
5486
  .ids-dialog .ids-dialog-container .ids-dialog-content {
5495
5487
  display: flex;
@@ -11618,6 +11610,697 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11618
11610
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
11619
11611
  }
11620
11612
 
11613
+ .ids-side-nav {
11614
+ box-sizing: border-box;
11615
+ border-width: 0;
11616
+ border-style: none;
11617
+ border-color: transparent;
11618
+ line-height: 1.5;
11619
+ background-color: var(--ids-comp-sidenav-color-bg-surface-default);
11620
+ display: flex;
11621
+ flex-direction: column;
11622
+ }
11623
+ .ids-side-nav::before, .ids-side-nav::after, .ids-side-nav *, .ids-side-nav ::before, .ids-side-nav ::after {
11624
+ box-sizing: border-box;
11625
+ border-width: 0;
11626
+ border-style: none;
11627
+ border-color: transparent;
11628
+ }
11629
+ .ids-side-nav .ids-side-nav-section {
11630
+ display: flex;
11631
+ flex-direction: column;
11632
+ border-style: solid;
11633
+ background-color: var(--ids-comp-sidenav-section-color-bg-surface-default);
11634
+ border-color: var(--ids-comp-sidenav-section-color-border-surface-default);
11635
+ }
11636
+ .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable {
11637
+ display: flex;
11638
+ flex-direction: column;
11639
+ }
11640
+ .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu {
11641
+ display: flex;
11642
+ flex-direction: column;
11643
+ }
11644
+ .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-summary > button[idsIconButton] {
11645
+ margin-left: auto;
11646
+ }
11647
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single,
11648
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary {
11649
+ display: inline-flex;
11650
+ align-items: center;
11651
+ width: 100%;
11652
+ outline-offset: 2px;
11653
+ border-style: solid;
11654
+ }
11655
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single a:link, .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single a:visited,
11656
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary a:link,
11657
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary a:visited {
11658
+ text-decoration: none;
11659
+ }
11660
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single a:active,
11661
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary a:active {
11662
+ outline-style: none;
11663
+ }
11664
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single:not([disabled]),
11665
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary:not([disabled]) {
11666
+ cursor: pointer;
11667
+ }
11668
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single:is([disabled]),
11669
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([disabled]) {
11670
+ cursor: not-allowed;
11671
+ outline-style: none;
11672
+ }
11673
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before,
11674
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
11675
+ content: "";
11676
+ position: relative;
11677
+ top: 0;
11678
+ }
11679
+ .ids-side-nav .ids-side-nav-title {
11680
+ display: inline-flex;
11681
+ align-items: center;
11682
+ }
11683
+ .ids-side-nav.ids-side-nav-compact {
11684
+ gap: var(--ids-comp-sidenav-size-gap-compact);
11685
+ padding: var(--ids-comp-sidenav-size-padding-y-compact) var(--ids-comp-sidenav-size-padding-x-compact);
11686
+ }
11687
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-section {
11688
+ gap: var(--ids-comp-sidenav-section-size-gap-compact);
11689
+ border-radius: var(--ids-comp-sidenav-section-size-border-radius-compact);
11690
+ border-width: var(--ids-comp-sidenav-section-size-border-width-compact);
11691
+ padding: var(--ids-comp-sidenav-section-size-padding-y-compact) var(--ids-comp-sidenav-section-size-padding-x-compact);
11692
+ }
11693
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-section:has(.ids-side-nav-item > * > .ids-side-nav-item-label) {
11694
+ min-width: var(--ids-comp-sidenav-section-size-min-width-compact);
11695
+ }
11696
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-title {
11697
+ gap: var(--ids-comp-sidenav-section-title-size-gap-compact);
11698
+ padding: var(--ids-comp-sidenav-section-title-size-padding-y-compact) var(--ids-comp-sidenav-section-title-size-padding-x-compact);
11699
+ }
11700
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-title-label {
11701
+ font-family: var(--ids-comp-sidenav-section-title-typography-font-family-compact);
11702
+ font-size: var(--ids-comp-sidenav-section-title-typography-font-size-compact);
11703
+ font-weight: var(--ids-comp-sidenav-section-title-typography-font-weight-compact);
11704
+ letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact);
11705
+ line-height: var(--ids-comp-sidenav-section-title-typography-line-height-compact);
11706
+ }
11707
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single {
11708
+ border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-compact);
11709
+ border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-compact);
11710
+ gap: var(--ids-comp-sidenav-navitem-single-size-gap-compact);
11711
+ height: var(--ids-comp-sidenav-navitem-single-size-height-compact);
11712
+ padding: var(--ids-comp-sidenav-navitem-single-size-padding-y-compact) var(--ids-comp-sidenav-navitem-single-size-padding-x-compact);
11713
+ }
11714
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
11715
+ outline-width: var(--ids-comp-sidenav-navitem-single-focused-outline-size-outline-compact);
11716
+ }
11717
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
11718
+ height: var(--ids-comp-sidenav-navitem-single-size-icon-compact);
11719
+ width: var(--ids-comp-sidenav-navitem-single-size-icon-compact);
11720
+ font-size: var(--ids-comp-sidenav-navitem-single-icon-typography-font-size-compact);
11721
+ font-weight: var(--ids-comp-sidenav-navitem-single-icon-typography-font-weight-compact);
11722
+ line-height: var(--ids-comp-sidenav-navitem-single-icon-typography-line-height-compact);
11723
+ }
11724
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single .ids-side-nav-item-label {
11725
+ font-family: var(--ids-comp-sidenav-navitem-single-label-typography-font-family-compact);
11726
+ font-size: var(--ids-comp-sidenav-navitem-single-label-typography-font-size-compact);
11727
+ font-weight: var(--ids-comp-sidenav-navitem-single-label-typography-font-weight-compact);
11728
+ letter-spacing: var(--ids-comp-sidenav-navitem-single-label-typography-letter-spacing-compact);
11729
+ line-height: var(--ids-comp-sidenav-navitem-single-label-typography-line-height-compact);
11730
+ }
11731
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
11732
+ height: var(--ids-comp-sidenav-navitem-single-active-indicator-size-height-compact);
11733
+ width: var(--ids-comp-sidenav-navitem-single-active-indicator-size-width-compact);
11734
+ border-radius: var(--ids-comp-sidenav-navitem-single-active-indicator-size-border-radius-compact);
11735
+ left: calc(var(--ids-comp-sidenav-navitem-single-size-padding-x-compact) * -1);
11736
+ margin-right: calc(var(--ids-comp-sidenav-navitem-single-size-gap-compact) * -1);
11737
+ }
11738
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary {
11739
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-radius-compact);
11740
+ border-width: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-width-compact);
11741
+ gap: var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact);
11742
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-height-compact);
11743
+ padding: var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-compact);
11744
+ }
11745
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
11746
+ outline-width: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-compact);
11747
+ }
11748
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
11749
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-compact);
11750
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-compact);
11751
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-size-compact);
11752
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-weight-compact);
11753
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-line-height-compact);
11754
+ }
11755
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary .ids-side-nav-item-label {
11756
+ font-family: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-family-compact);
11757
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-size-compact);
11758
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-weight-compact);
11759
+ letter-spacing: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-letter-spacing-compact);
11760
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-line-height-compact);
11761
+ }
11762
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
11763
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-height-compact);
11764
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-width-compact);
11765
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-border-radius-compact);
11766
+ left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-compact) * -1);
11767
+ margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact) * -1);
11768
+ }
11769
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
11770
+ gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact);
11771
+ padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact);
11772
+ }
11773
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable {
11774
+ gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-compact);
11775
+ padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact);
11776
+ }
11777
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11778
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact));
11779
+ }
11780
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-title + .ids-side-nav-item {
11781
+ margin-top: var(--ids-comp-sidenav-section-size-gap-compact);
11782
+ }
11783
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item + .ids-side-nav-item {
11784
+ margin-top: var(--ids-comp-sidenav-section-list-size-gap-compact);
11785
+ }
11786
+ .ids-side-nav.ids-side-nav-comfortable {
11787
+ gap: var(--ids-comp-sidenav-size-gap-comfortable);
11788
+ padding: var(--ids-comp-sidenav-size-padding-y-comfortable) var(--ids-comp-sidenav-size-padding-x-comfortable);
11789
+ }
11790
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-section {
11791
+ gap: var(--ids-comp-sidenav-section-size-gap-comfortable);
11792
+ border-radius: var(--ids-comp-sidenav-section-size-border-radius-comfortable);
11793
+ border-width: var(--ids-comp-sidenav-section-size-border-width-comfortable);
11794
+ padding: var(--ids-comp-sidenav-section-size-padding-y-comfortable) var(--ids-comp-sidenav-section-size-padding-x-comfortable);
11795
+ }
11796
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-section:has(.ids-side-nav-item > * > .ids-side-nav-item-label) {
11797
+ min-width: var(--ids-comp-sidenav-section-size-min-width-comfortable);
11798
+ }
11799
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title {
11800
+ gap: var(--ids-comp-sidenav-section-title-size-gap-comfortable);
11801
+ padding: var(--ids-comp-sidenav-section-title-size-padding-y-comfortable) var(--ids-comp-sidenav-section-title-size-padding-x-comfortable);
11802
+ }
11803
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title-label {
11804
+ font-family: var(--ids-comp-sidenav-section-title-typography-font-family-comfortable);
11805
+ font-size: var(--ids-comp-sidenav-section-title-typography-font-size-comfortable);
11806
+ font-weight: var(--ids-comp-sidenav-section-title-typography-font-weight-comfortable);
11807
+ letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable);
11808
+ line-height: var(--ids-comp-sidenav-section-title-typography-line-height-comfortable);
11809
+ }
11810
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single {
11811
+ border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable);
11812
+ border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable);
11813
+ gap: var(--ids-comp-sidenav-navitem-single-size-gap-comfortable);
11814
+ height: var(--ids-comp-sidenav-navitem-single-size-height-comfortable);
11815
+ padding: var(--ids-comp-sidenav-navitem-single-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-single-size-padding-x-comfortable);
11816
+ }
11817
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
11818
+ outline-width: var(--ids-comp-sidenav-navitem-single-focused-outline-size-outline-comfortable);
11819
+ }
11820
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
11821
+ height: var(--ids-comp-sidenav-navitem-single-size-icon-comfortable);
11822
+ width: var(--ids-comp-sidenav-navitem-single-size-icon-comfortable);
11823
+ font-size: var(--ids-comp-sidenav-navitem-single-icon-typography-font-size-comfortable);
11824
+ font-weight: var(--ids-comp-sidenav-navitem-single-icon-typography-font-weight-comfortable);
11825
+ line-height: var(--ids-comp-sidenav-navitem-single-icon-typography-line-height-comfortable);
11826
+ }
11827
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single .ids-side-nav-item-label {
11828
+ font-family: var(--ids-comp-sidenav-navitem-single-label-typography-font-family-comfortable);
11829
+ font-size: var(--ids-comp-sidenav-navitem-single-label-typography-font-size-comfortable);
11830
+ font-weight: var(--ids-comp-sidenav-navitem-single-label-typography-font-weight-comfortable);
11831
+ letter-spacing: var(--ids-comp-sidenav-navitem-single-label-typography-letter-spacing-comfortable);
11832
+ line-height: var(--ids-comp-sidenav-navitem-single-label-typography-line-height-comfortable);
11833
+ }
11834
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
11835
+ height: var(--ids-comp-sidenav-navitem-single-active-indicator-size-height-comfortable);
11836
+ width: var(--ids-comp-sidenav-navitem-single-active-indicator-size-width-comfortable);
11837
+ border-radius: var(--ids-comp-sidenav-navitem-single-active-indicator-size-border-radius-comfortable);
11838
+ left: calc(var(--ids-comp-sidenav-navitem-single-size-padding-x-comfortable) * -1);
11839
+ margin-right: calc(var(--ids-comp-sidenav-navitem-single-size-gap-comfortable) * -1);
11840
+ }
11841
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary {
11842
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-radius-comfortable);
11843
+ border-width: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-width-comfortable);
11844
+ gap: var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable);
11845
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-height-comfortable);
11846
+ padding: var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-comfortable);
11847
+ }
11848
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
11849
+ outline-width: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-comfortable);
11850
+ }
11851
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
11852
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-comfortable);
11853
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-comfortable);
11854
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-size-comfortable);
11855
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-weight-comfortable);
11856
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-line-height-comfortable);
11857
+ }
11858
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary .ids-side-nav-item-label {
11859
+ font-family: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-family-comfortable);
11860
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-size-comfortable);
11861
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-weight-comfortable);
11862
+ letter-spacing: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-letter-spacing-comfortable);
11863
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-line-height-comfortable);
11864
+ }
11865
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
11866
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-height-comfortable);
11867
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-width-comfortable);
11868
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-border-radius-comfortable);
11869
+ left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-comfortable) * -1);
11870
+ margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable) * -1);
11871
+ }
11872
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
11873
+ gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable);
11874
+ padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable);
11875
+ }
11876
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable {
11877
+ gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable);
11878
+ padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable);
11879
+ }
11880
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11881
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable));
11882
+ }
11883
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title + .ids-side-nav-item {
11884
+ margin-top: var(--ids-comp-sidenav-section-size-gap-comfortable);
11885
+ }
11886
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item + .ids-side-nav-item {
11887
+ margin-top: var(--ids-comp-sidenav-section-list-size-gap-comfortable);
11888
+ }
11889
+ .ids-side-nav.ids-side-nav-spacious {
11890
+ gap: var(--ids-comp-sidenav-size-gap-spacious);
11891
+ padding: var(--ids-comp-sidenav-size-padding-y-spacious) var(--ids-comp-sidenav-size-padding-x-spacious);
11892
+ }
11893
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-section {
11894
+ gap: var(--ids-comp-sidenav-section-size-gap-spacious);
11895
+ border-radius: var(--ids-comp-sidenav-section-size-border-radius-spacious);
11896
+ border-width: var(--ids-comp-sidenav-section-size-border-width-spacious);
11897
+ padding: var(--ids-comp-sidenav-section-size-padding-y-spacious) var(--ids-comp-sidenav-section-size-padding-x-spacious);
11898
+ }
11899
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-section:has(.ids-side-nav-item > * > .ids-side-nav-item-label) {
11900
+ min-width: var(--ids-comp-sidenav-section-size-min-width-spacious);
11901
+ }
11902
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-title {
11903
+ gap: var(--ids-comp-sidenav-section-title-size-gap-spacious);
11904
+ padding: var(--ids-comp-sidenav-section-title-size-padding-y-spacious) var(--ids-comp-sidenav-section-title-size-padding-x-spacious);
11905
+ }
11906
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-title-label {
11907
+ font-family: var(--ids-comp-sidenav-section-title-typography-font-family-spacious);
11908
+ font-size: var(--ids-comp-sidenav-section-title-typography-font-size-spacious);
11909
+ font-weight: var(--ids-comp-sidenav-section-title-typography-font-weight-spacious);
11910
+ letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious);
11911
+ line-height: var(--ids-comp-sidenav-section-title-typography-line-height-spacious);
11912
+ }
11913
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single {
11914
+ border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious);
11915
+ border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-spacious);
11916
+ gap: var(--ids-comp-sidenav-navitem-single-size-gap-spacious);
11917
+ height: var(--ids-comp-sidenav-navitem-single-size-height-spacious);
11918
+ padding: var(--ids-comp-sidenav-navitem-single-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-single-size-padding-x-spacious);
11919
+ }
11920
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
11921
+ outline-width: var(--ids-comp-sidenav-navitem-single-focused-outline-size-outline-spacious);
11922
+ }
11923
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
11924
+ height: var(--ids-comp-sidenav-navitem-single-size-icon-spacious);
11925
+ width: var(--ids-comp-sidenav-navitem-single-size-icon-spacious);
11926
+ font-size: var(--ids-comp-sidenav-navitem-single-icon-typography-font-size-spacious);
11927
+ font-weight: var(--ids-comp-sidenav-navitem-single-icon-typography-font-weight-spacious);
11928
+ line-height: var(--ids-comp-sidenav-navitem-single-icon-typography-line-height-spacious);
11929
+ }
11930
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single .ids-side-nav-item-label {
11931
+ font-family: var(--ids-comp-sidenav-navitem-single-label-typography-font-family-spacious);
11932
+ font-size: var(--ids-comp-sidenav-navitem-single-label-typography-font-size-spacious);
11933
+ font-weight: var(--ids-comp-sidenav-navitem-single-label-typography-font-weight-spacious);
11934
+ letter-spacing: var(--ids-comp-sidenav-navitem-single-label-typography-letter-spacing-spacious);
11935
+ line-height: var(--ids-comp-sidenav-navitem-single-label-typography-line-height-spacious);
11936
+ }
11937
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
11938
+ height: var(--ids-comp-sidenav-navitem-single-active-indicator-size-height-spacious);
11939
+ width: var(--ids-comp-sidenav-navitem-single-active-indicator-size-width-spacious);
11940
+ border-radius: var(--ids-comp-sidenav-navitem-single-active-indicator-size-border-radius-spacious);
11941
+ left: calc(var(--ids-comp-sidenav-navitem-single-size-padding-x-spacious) * -1);
11942
+ margin-right: calc(var(--ids-comp-sidenav-navitem-single-size-gap-spacious) * -1);
11943
+ }
11944
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary {
11945
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-radius-spacious);
11946
+ border-width: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-width-spacious);
11947
+ gap: var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious);
11948
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-height-spacious);
11949
+ padding: var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-spacious);
11950
+ }
11951
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
11952
+ outline-width: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-spacious);
11953
+ }
11954
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
11955
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-spacious);
11956
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-spacious);
11957
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-size-spacious);
11958
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-weight-spacious);
11959
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-line-height-spacious);
11960
+ }
11961
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary .ids-side-nav-item-label {
11962
+ font-family: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-family-spacious);
11963
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-size-spacious);
11964
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-weight-spacious);
11965
+ letter-spacing: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-letter-spacing-spacious);
11966
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-line-height-spacious);
11967
+ }
11968
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
11969
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-height-spacious);
11970
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-width-spacious);
11971
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-border-radius-spacious);
11972
+ left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-spacious) * -1);
11973
+ margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious) * -1);
11974
+ }
11975
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
11976
+ gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious);
11977
+ padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious);
11978
+ }
11979
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable {
11980
+ gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious);
11981
+ padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious);
11982
+ }
11983
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11984
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious));
11985
+ }
11986
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-title + .ids-side-nav-item {
11987
+ margin-top: var(--ids-comp-sidenav-section-size-gap-spacious);
11988
+ }
11989
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item + .ids-side-nav-item {
11990
+ margin-top: var(--ids-comp-sidenav-section-list-size-gap-spacious);
11991
+ }
11992
+ .ids-side-nav.ids-side-nav-dense {
11993
+ gap: var(--ids-comp-sidenav-size-gap-dense);
11994
+ padding: var(--ids-comp-sidenav-size-padding-y-dense) var(--ids-comp-sidenav-size-padding-x-dense);
11995
+ }
11996
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-section {
11997
+ gap: var(--ids-comp-sidenav-section-size-gap-dense);
11998
+ border-radius: var(--ids-comp-sidenav-section-size-border-radius-dense);
11999
+ border-width: var(--ids-comp-sidenav-section-size-border-width-dense);
12000
+ padding: var(--ids-comp-sidenav-section-size-padding-y-dense) var(--ids-comp-sidenav-section-size-padding-x-dense);
12001
+ }
12002
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-section:has(.ids-side-nav-item > * > .ids-side-nav-item-label) {
12003
+ min-width: var(--ids-comp-sidenav-section-size-min-width-dense);
12004
+ }
12005
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-title {
12006
+ gap: var(--ids-comp-sidenav-section-title-size-gap-dense);
12007
+ padding: var(--ids-comp-sidenav-section-title-size-padding-y-dense) var(--ids-comp-sidenav-section-title-size-padding-x-dense);
12008
+ }
12009
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-title-label {
12010
+ font-family: var(--ids-comp-sidenav-section-title-typography-font-family-dense);
12011
+ font-size: var(--ids-comp-sidenav-section-title-typography-font-size-dense);
12012
+ font-weight: var(--ids-comp-sidenav-section-title-typography-font-weight-dense);
12013
+ letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense);
12014
+ line-height: var(--ids-comp-sidenav-section-title-typography-line-height-dense);
12015
+ }
12016
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single {
12017
+ border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-dense);
12018
+ border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-dense);
12019
+ gap: var(--ids-comp-sidenav-navitem-single-size-gap-dense);
12020
+ height: var(--ids-comp-sidenav-navitem-single-size-height-dense);
12021
+ padding: var(--ids-comp-sidenav-navitem-single-size-padding-y-dense) var(--ids-comp-sidenav-navitem-single-size-padding-x-dense);
12022
+ }
12023
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
12024
+ outline-width: var(--ids-comp-sidenav-navitem-single-focused-outline-size-outline-dense);
12025
+ }
12026
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
12027
+ height: var(--ids-comp-sidenav-navitem-single-size-icon-dense);
12028
+ width: var(--ids-comp-sidenav-navitem-single-size-icon-dense);
12029
+ font-size: var(--ids-comp-sidenav-navitem-single-icon-typography-font-size-dense);
12030
+ font-weight: var(--ids-comp-sidenav-navitem-single-icon-typography-font-weight-dense);
12031
+ line-height: var(--ids-comp-sidenav-navitem-single-icon-typography-line-height-dense);
12032
+ }
12033
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single .ids-side-nav-item-label {
12034
+ font-family: var(--ids-comp-sidenav-navitem-single-label-typography-font-family-dense);
12035
+ font-size: var(--ids-comp-sidenav-navitem-single-label-typography-font-size-dense);
12036
+ font-weight: var(--ids-comp-sidenav-navitem-single-label-typography-font-weight-dense);
12037
+ letter-spacing: var(--ids-comp-sidenav-navitem-single-label-typography-letter-spacing-dense);
12038
+ line-height: var(--ids-comp-sidenav-navitem-single-label-typography-line-height-dense);
12039
+ }
12040
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
12041
+ height: var(--ids-comp-sidenav-navitem-single-active-indicator-size-height-dense);
12042
+ width: var(--ids-comp-sidenav-navitem-single-active-indicator-size-width-dense);
12043
+ border-radius: var(--ids-comp-sidenav-navitem-single-active-indicator-size-border-radius-dense);
12044
+ left: calc(var(--ids-comp-sidenav-navitem-single-size-padding-x-dense) * -1);
12045
+ margin-right: calc(var(--ids-comp-sidenav-navitem-single-size-gap-dense) * -1);
12046
+ }
12047
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary {
12048
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-radius-dense);
12049
+ border-width: var(--ids-comp-sidenav-navitem-expandable-summary-size-border-width-dense);
12050
+ gap: var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense);
12051
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-height-dense);
12052
+ padding: var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-dense);
12053
+ }
12054
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
12055
+ outline-width: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-dense);
12056
+ }
12057
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
12058
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-dense);
12059
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-size-icon-dense);
12060
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-size-dense);
12061
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-font-weight-dense);
12062
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-icon-typography-line-height-dense);
12063
+ }
12064
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary .ids-side-nav-item-label {
12065
+ font-family: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-family-dense);
12066
+ font-size: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-size-dense);
12067
+ font-weight: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-font-weight-dense);
12068
+ letter-spacing: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-letter-spacing-dense);
12069
+ line-height: var(--ids-comp-sidenav-navitem-expandable-summary-label-typography-line-height-dense);
12070
+ }
12071
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
12072
+ height: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-height-dense);
12073
+ width: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-width-dense);
12074
+ border-radius: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-size-border-radius-dense);
12075
+ left: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-padding-x-dense) * -1);
12076
+ margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense) * -1);
12077
+ }
12078
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
12079
+ gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense);
12080
+ padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense);
12081
+ }
12082
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable {
12083
+ gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-dense);
12084
+ padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense);
12085
+ }
12086
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
12087
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense));
12088
+ }
12089
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-title + .ids-side-nav-item {
12090
+ margin-top: var(--ids-comp-sidenav-section-size-gap-dense);
12091
+ }
12092
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item + .ids-side-nav-item {
12093
+ margin-top: var(--ids-comp-sidenav-section-list-size-gap-dense);
12094
+ }
12095
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single {
12096
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-default);
12097
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-default);
12098
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-default);
12099
+ }
12100
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
12101
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-default);
12102
+ }
12103
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:hover {
12104
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-hovered);
12105
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-hovered);
12106
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-hovered);
12107
+ }
12108
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:hover > .ids-icon {
12109
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-hovered);
12110
+ }
12111
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
12112
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-focused);
12113
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-focused);
12114
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-focused);
12115
+ outline-color: var(--ids-comp-sidenav-navitem-single-focused-outline-color-dark-focused);
12116
+ }
12117
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:focus > .ids-icon, .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:focus-visible > .ids-icon {
12118
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-focused);
12119
+ }
12120
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:active {
12121
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-pressed);
12122
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-pressed);
12123
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-pressed);
12124
+ }
12125
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:active > .ids-icon {
12126
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-pressed);
12127
+ }
12128
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:is([disabled]) {
12129
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-disabled);
12130
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-disabled);
12131
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-disabled);
12132
+ }
12133
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:is([disabled]) > .ids-icon {
12134
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-disabled);
12135
+ }
12136
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:is([is-active]) {
12137
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-surface-active);
12138
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-surface-active);
12139
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-surface-active);
12140
+ }
12141
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:is([is-active]) > .ids-icon {
12142
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-surface-active);
12143
+ }
12144
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
12145
+ background-color: var(--ids-comp-sidenav-navitem-single-active-indicator-color-bg-surface-default);
12146
+ }
12147
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary {
12148
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-default);
12149
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-default);
12150
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-default);
12151
+ }
12152
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
12153
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-default);
12154
+ }
12155
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:hover {
12156
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-hovered);
12157
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-hovered);
12158
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-hovered);
12159
+ }
12160
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:hover > .ids-icon {
12161
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-hovered);
12162
+ }
12163
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
12164
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-focused);
12165
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-focused);
12166
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-focused);
12167
+ outline-color: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-color-dark-focused);
12168
+ }
12169
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus > .ids-icon, .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible > .ids-icon {
12170
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-focused);
12171
+ }
12172
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:active {
12173
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-pressed);
12174
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-pressed);
12175
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-pressed);
12176
+ }
12177
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:active > .ids-icon {
12178
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-pressed);
12179
+ }
12180
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([disabled]) {
12181
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-disabled);
12182
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-disabled);
12183
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-disabled);
12184
+ }
12185
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([disabled]) > .ids-icon {
12186
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-disabled);
12187
+ }
12188
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active]) {
12189
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-surface-active);
12190
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-surface-active);
12191
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-surface-active);
12192
+ }
12193
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active]) > .ids-icon {
12194
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-surface-active);
12195
+ }
12196
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-surface .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
12197
+ background-color: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-color-bg-surface-default);
12198
+ }
12199
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single {
12200
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-default);
12201
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-default);
12202
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-default);
12203
+ }
12204
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single > .ids-icon {
12205
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-default);
12206
+ }
12207
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:hover {
12208
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-hovered);
12209
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-hovered);
12210
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-hovered);
12211
+ }
12212
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:hover > .ids-icon {
12213
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-hovered);
12214
+ }
12215
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:focus-visible {
12216
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-focused);
12217
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-focused);
12218
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-focused);
12219
+ outline-color: var(--ids-comp-sidenav-navitem-single-focused-outline-color-light-focused);
12220
+ }
12221
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:focus > .ids-icon, .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:focus-visible > .ids-icon {
12222
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-focused);
12223
+ }
12224
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:active {
12225
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-pressed);
12226
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-pressed);
12227
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-pressed);
12228
+ }
12229
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:active > .ids-icon {
12230
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-pressed);
12231
+ }
12232
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:is([disabled]) {
12233
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-disabled);
12234
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-disabled);
12235
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-disabled);
12236
+ }
12237
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:is([disabled]) > .ids-icon {
12238
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-disabled);
12239
+ }
12240
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:is([is-active]) {
12241
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-label-light-active);
12242
+ background: var(--ids-comp-sidenav-navitem-single-standard-color-bg-light-active);
12243
+ border-color: var(--ids-comp-sidenav-navitem-single-standard-color-border-light-active);
12244
+ }
12245
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:is([is-active]) > .ids-icon {
12246
+ color: var(--ids-comp-sidenav-navitem-single-standard-color-fg-icon-light-active);
12247
+ }
12248
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-single:is([is-active-indicator]):before {
12249
+ background-color: var(--ids-comp-sidenav-navitem-single-active-indicator-color-bg-light-default);
12250
+ }
12251
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary {
12252
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-default);
12253
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-default);
12254
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-default);
12255
+ }
12256
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary > .ids-icon {
12257
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-default);
12258
+ }
12259
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:hover {
12260
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-hovered);
12261
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-hovered);
12262
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-hovered);
12263
+ }
12264
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:hover > .ids-icon {
12265
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-hovered);
12266
+ }
12267
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus, .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
12268
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-focused);
12269
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-focused);
12270
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-focused);
12271
+ outline-color: var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-color-light-focused);
12272
+ }
12273
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus > .ids-icon, .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible > .ids-icon {
12274
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-focused);
12275
+ }
12276
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:active {
12277
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-pressed);
12278
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-pressed);
12279
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-pressed);
12280
+ }
12281
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:active > .ids-icon {
12282
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-pressed);
12283
+ }
12284
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([disabled]) {
12285
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-disabled);
12286
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-disabled);
12287
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-disabled);
12288
+ }
12289
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([disabled]) > .ids-icon {
12290
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-disabled);
12291
+ }
12292
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active]) {
12293
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-label-light-active);
12294
+ background: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-bg-light-active);
12295
+ border-color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-border-light-active);
12296
+ }
12297
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active]) > .ids-icon {
12298
+ color: var(--ids-comp-sidenav-navitem-expandable-summary-standard-color-fg-icon-light-active);
12299
+ }
12300
+ .ids-side-nav.ids-side-nav-standard.ids-side-nav-light .ids-side-nav-item .ids-side-nav-item-expandable-summary:is([is-active-indicator]):before {
12301
+ background-color: var(--ids-comp-sidenav-navitem-expandable-summary-active-indicator-color-bg-light-default);
12302
+ }
12303
+
11621
12304
  .ids-side-sheet {
11622
12305
  box-sizing: border-box;
11623
12306
  border-width: 0;
@@ -12055,6 +12738,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12055
12738
  .ids-snackbar-group .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container > .ids-snackbar__message {
12056
12739
  flex: 1 0 0;
12057
12740
  font-style: normal;
12741
+ display: flex;
12742
+ align-items: center;
12058
12743
  }
12059
12744
  .ids-snackbar-group .ids-snackbar > .ids-snackbar__content-wrapper > .ids-snackbar__message-action-container > .ids-snackbar__action {
12060
12745
  display: flex;