@i-cell/ids-styles 0.0.46 → 0.0.48

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