@i-cell/ids-styles 0.0.43 → 0.0.45

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.
@@ -11614,6 +11614,376 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11614
11614
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
11615
11615
  }
11616
11616
 
11617
+ .ids-side-sheet {
11618
+ box-sizing: border-box;
11619
+ border-width: 0;
11620
+ border-style: none;
11621
+ border-color: transparent;
11622
+ line-height: 1.5;
11623
+ }
11624
+ .ids-side-sheet::before, .ids-side-sheet::after, .ids-side-sheet *, .ids-side-sheet ::before, .ids-side-sheet ::after {
11625
+ box-sizing: border-box;
11626
+ border-width: 0;
11627
+ border-style: none;
11628
+ border-color: transparent;
11629
+ }
11630
+ .ids-side-sheet .ids-side-sheet__backdrop {
11631
+ position: fixed;
11632
+ top: 0;
11633
+ left: 0;
11634
+ width: 100vw;
11635
+ height: 100vh;
11636
+ z-index: 999;
11637
+ }
11638
+ .ids-side-sheet .ids-side-sheet__container, .ids-side-sheet .ids-side-sheet__container--inline {
11639
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
11640
+ }
11641
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__content, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__content {
11642
+ background: var(--ids-comp-sidesheet-content-color-bg-default);
11643
+ }
11644
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__content--scrollable, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__content--scrollable {
11645
+ max-height: 100%;
11646
+ overflow-y: auto;
11647
+ overflow-x: hidden;
11648
+ }
11649
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable), .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable) {
11650
+ overflow: hidden;
11651
+ }
11652
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title {
11653
+ color: var(--ids-comp-sidesheet-header-title-color-fg-default);
11654
+ }
11655
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__footer, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__footer {
11656
+ background: var(--ids-comp-sidesheet-footer-color-bg-default);
11657
+ width: 100%;
11658
+ }
11659
+ .ids-side-sheet.ids-side-sheet-default .ids-side-sheet__backdrop {
11660
+ background: var(--ids-comp-sidesheet-backdrop-background-default);
11661
+ }
11662
+ .ids-side-sheet.ids-side-sheet-transparent .ids-side-sheet__backdrop {
11663
+ background: var(--ids-comp-sidesheet-backdrop-background-transparent);
11664
+ }
11665
+ .ids-side-sheet.ids-side-sheet-left-opacity-compact .ids-side-sheet__backdrop {
11666
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-left-size-opacity-compact);
11667
+ }
11668
+ .ids-side-sheet.ids-side-sheet-right-opacity-compact .ids-side-sheet__backdrop {
11669
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-right-size-opacity-compact);
11670
+ }
11671
+ .ids-side-sheet.ids-side-sheet-left-opacity-comfortable .ids-side-sheet__backdrop {
11672
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-left-size-opacity-comfortable);
11673
+ }
11674
+ .ids-side-sheet.ids-side-sheet-right-opacity-comfortable .ids-side-sheet__backdrop {
11675
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-right-size-opacity-comfortable);
11676
+ }
11677
+ .ids-side-sheet.ids-side-sheet-left-opacity-spacious .ids-side-sheet__backdrop {
11678
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-left-size-opacity-spacious);
11679
+ }
11680
+ .ids-side-sheet.ids-side-sheet-right-opacity-spacious .ids-side-sheet__backdrop {
11681
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-right-size-opacity-spacious);
11682
+ }
11683
+ .ids-side-sheet.ids-side-sheet-left-opacity-dense .ids-side-sheet__backdrop {
11684
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-left-size-opacity-dense);
11685
+ }
11686
+ .ids-side-sheet.ids-side-sheet-right-opacity-dense .ids-side-sheet__backdrop {
11687
+ opacity: var(--ids-comp-sidesheet-backdrop-orientation-right-size-opacity-dense);
11688
+ }
11689
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline {
11690
+ border-radius: var(--ids-comp-sidesheet-container-orientation-size-border-radius-compact);
11691
+ }
11692
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline {
11693
+ background-color: var(--ids-comp-sidesheet-container-color-bg-default);
11694
+ gap: var(--ids-comp-sidesheet-container-orientation-size-gap-compact);
11695
+ max-width: var(--ids-comp-sidesheet-container-orientation-size-max-width-compact);
11696
+ width: var(--ids-comp-sidesheet-container-orientation-size-width-compact);
11697
+ min-height: var(--ids-comp-sidesheet-container-orientation-size-min-height-compact);
11698
+ padding: var(--ids-comp-sidesheet-container-orientation-size-padding-x-compact) var(--ids-comp-sidesheet-container-orientation-size-padding-y-compact);
11699
+ }
11700
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__content--scrollable, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__content--scrollable {
11701
+ padding: var(--ids-comp-sidesheet-content-scrollable-size-padding-y-top-compact) var(--ids-comp-sidesheet-content-scrollable-size-padding-x-compact) var(--ids-comp-sidesheet-content-scrollable-size-padding-y-bottom-compact);
11702
+ }
11703
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable), .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable) {
11704
+ padding: var(--ids-comp-sidesheet-content-fixed-size-padding-y-top-compact) var(--ids-comp-sidesheet-content-fixed-size-padding-x-compact);
11705
+ }
11706
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__footer, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__footer {
11707
+ padding: var(--ids-comp-sidesheet-footer-padding-y-top-compact) var(--ids-comp-sidesheet-footer-padding-x-compact) var(--ids-comp-sidesheet-footer-padding-y-compact);
11708
+ border-top: var(--ids-comp-sidesheet-footer-border-width-compact) solid var(--ids-comp-sidesheet-footer-color-border-surface-default);
11709
+ gap: var(--ids-comp-sidesheet-footer-gap-compact);
11710
+ }
11711
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__header--default, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11712
+ background: var(--ids-comp-sidesheet-header-color-bg-default);
11713
+ padding: var(--ids-comp-sidesheet-header-size-padding-y-compact) var(--ids-comp-sidesheet-header-size-padding-x-compact);
11714
+ }
11715
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title, .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title {
11716
+ font-family: var(--ids-comp-sidesheet-header-title-typography-font-family-compact);
11717
+ font-size: var(--ids-comp-sidesheet-header-title-typography-font-size-compact);
11718
+ font-weight: var(--ids-comp-sidesheet-header-title-typography-font-weight-compact);
11719
+ letter-spacing: var(--ids-comp-sidesheet-header-title-typography-letter-spacing-compact);
11720
+ line-height: var(--ids-comp-sidesheet-header-title-typography-line-height-compact);
11721
+ }
11722
+ .ids-side-sheet.ids-side-sheet-compact .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11723
+ gap: var(--ids-comp-sidesheet-header-size-gap-compact);
11724
+ }
11725
+ .ids-side-sheet.ids-side-sheet-left-compact .ids-side-sheet__container {
11726
+ border-right: var(--ids-comp-sidesheet-container-orientation-left-size-border-width-compact) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11727
+ }
11728
+ .ids-side-sheet.ids-side-sheet-left-compact .ids-side-sheet__backdrop {
11729
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-left-compact);
11730
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-right-compact);
11731
+ }
11732
+ .ids-side-sheet.ids-side-sheet-left-compact .ids-side-sheet__container {
11733
+ border-radius: var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-compact) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-compact) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-compact) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-compact);
11734
+ }
11735
+ .ids-side-sheet.ids-side-sheet-right-compact .ids-side-sheet__container {
11736
+ border-left: var(--ids-comp-sidesheet-container-orientation-right-size-border-width-compact) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11737
+ }
11738
+ .ids-side-sheet.ids-side-sheet-right-compact .ids-side-sheet__backdrop {
11739
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-left-compact);
11740
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-right-compact);
11741
+ }
11742
+ .ids-side-sheet.ids-side-sheet-right-compact .ids-side-sheet__container {
11743
+ border-radius: var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-compact) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-compact) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-compact) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-compact);
11744
+ }
11745
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline {
11746
+ border-radius: var(--ids-comp-sidesheet-container-orientation-size-border-radius-comfortable);
11747
+ }
11748
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline {
11749
+ background-color: var(--ids-comp-sidesheet-container-color-bg-default);
11750
+ gap: var(--ids-comp-sidesheet-container-orientation-size-gap-comfortable);
11751
+ max-width: var(--ids-comp-sidesheet-container-orientation-size-max-width-comfortable);
11752
+ width: var(--ids-comp-sidesheet-container-orientation-size-width-comfortable);
11753
+ min-height: var(--ids-comp-sidesheet-container-orientation-size-min-height-comfortable);
11754
+ padding: var(--ids-comp-sidesheet-container-orientation-size-padding-x-comfortable) var(--ids-comp-sidesheet-container-orientation-size-padding-y-comfortable);
11755
+ }
11756
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__content--scrollable, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__content--scrollable {
11757
+ padding: var(--ids-comp-sidesheet-content-scrollable-size-padding-y-top-comfortable) var(--ids-comp-sidesheet-content-scrollable-size-padding-x-comfortable) var(--ids-comp-sidesheet-content-scrollable-size-padding-y-bottom-comfortable);
11758
+ }
11759
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable), .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable) {
11760
+ padding: var(--ids-comp-sidesheet-content-fixed-size-padding-y-top-comfortable) var(--ids-comp-sidesheet-content-fixed-size-padding-x-comfortable);
11761
+ }
11762
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__footer, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__footer {
11763
+ padding: var(--ids-comp-sidesheet-footer-padding-y-top-comfortable) var(--ids-comp-sidesheet-footer-padding-x-comfortable) var(--ids-comp-sidesheet-footer-padding-y-comfortable);
11764
+ border-top: var(--ids-comp-sidesheet-footer-border-width-comfortable) solid var(--ids-comp-sidesheet-footer-color-border-surface-default);
11765
+ gap: var(--ids-comp-sidesheet-footer-gap-comfortable);
11766
+ }
11767
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__header--default, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11768
+ background: var(--ids-comp-sidesheet-header-color-bg-default);
11769
+ padding: var(--ids-comp-sidesheet-header-size-padding-y-comfortable) var(--ids-comp-sidesheet-header-size-padding-x-comfortable);
11770
+ }
11771
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title, .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title {
11772
+ font-family: var(--ids-comp-sidesheet-header-title-typography-font-family-comfortable);
11773
+ font-size: var(--ids-comp-sidesheet-header-title-typography-font-size-comfortable);
11774
+ font-weight: var(--ids-comp-sidesheet-header-title-typography-font-weight-comfortable);
11775
+ letter-spacing: var(--ids-comp-sidesheet-header-title-typography-letter-spacing-comfortable);
11776
+ line-height: var(--ids-comp-sidesheet-header-title-typography-line-height-comfortable);
11777
+ }
11778
+ .ids-side-sheet.ids-side-sheet-comfortable .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11779
+ gap: var(--ids-comp-sidesheet-header-size-gap-comfortable);
11780
+ }
11781
+ .ids-side-sheet.ids-side-sheet-left-comfortable .ids-side-sheet__container {
11782
+ border-right: var(--ids-comp-sidesheet-container-orientation-left-size-border-width-comfortable) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11783
+ }
11784
+ .ids-side-sheet.ids-side-sheet-left-comfortable .ids-side-sheet__backdrop {
11785
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-left-comfortable);
11786
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-right-comfortable);
11787
+ }
11788
+ .ids-side-sheet.ids-side-sheet-left-comfortable .ids-side-sheet__container {
11789
+ border-radius: var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-comfortable) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-comfortable) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-comfortable) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-comfortable);
11790
+ }
11791
+ .ids-side-sheet.ids-side-sheet-right-comfortable .ids-side-sheet__container {
11792
+ border-left: var(--ids-comp-sidesheet-container-orientation-right-size-border-width-comfortable) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11793
+ }
11794
+ .ids-side-sheet.ids-side-sheet-right-comfortable .ids-side-sheet__backdrop {
11795
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-left-comfortable);
11796
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-right-comfortable);
11797
+ }
11798
+ .ids-side-sheet.ids-side-sheet-right-comfortable .ids-side-sheet__container {
11799
+ border-radius: var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-comfortable) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-comfortable) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-comfortable) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-comfortable);
11800
+ }
11801
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline {
11802
+ border-radius: var(--ids-comp-sidesheet-container-orientation-size-border-radius-spacious);
11803
+ }
11804
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline {
11805
+ background-color: var(--ids-comp-sidesheet-container-color-bg-default);
11806
+ gap: var(--ids-comp-sidesheet-container-orientation-size-gap-spacious);
11807
+ max-width: var(--ids-comp-sidesheet-container-orientation-size-max-width-spacious);
11808
+ width: var(--ids-comp-sidesheet-container-orientation-size-width-spacious);
11809
+ min-height: var(--ids-comp-sidesheet-container-orientation-size-min-height-spacious);
11810
+ padding: var(--ids-comp-sidesheet-container-orientation-size-padding-x-spacious) var(--ids-comp-sidesheet-container-orientation-size-padding-y-spacious);
11811
+ }
11812
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__content--scrollable, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__content--scrollable {
11813
+ padding: var(--ids-comp-sidesheet-content-scrollable-size-padding-y-top-spacious) var(--ids-comp-sidesheet-content-scrollable-size-padding-x-spacious) var(--ids-comp-sidesheet-content-scrollable-size-padding-y-bottom-spacious);
11814
+ }
11815
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable), .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable) {
11816
+ padding: var(--ids-comp-sidesheet-content-fixed-size-padding-y-top-spacious) var(--ids-comp-sidesheet-content-fixed-size-padding-x-spacious);
11817
+ }
11818
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__footer, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__footer {
11819
+ padding: var(--ids-comp-sidesheet-footer-padding-y-top-spacious) var(--ids-comp-sidesheet-footer-padding-x-spacious) var(--ids-comp-sidesheet-footer-padding-y-spacious);
11820
+ border-top: var(--ids-comp-sidesheet-footer-border-width-spacious) solid var(--ids-comp-sidesheet-footer-color-border-surface-default);
11821
+ gap: var(--ids-comp-sidesheet-footer-gap-spacious);
11822
+ }
11823
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__header--default, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11824
+ background: var(--ids-comp-sidesheet-header-color-bg-default);
11825
+ padding: var(--ids-comp-sidesheet-header-size-padding-y-spacious) var(--ids-comp-sidesheet-header-size-padding-x-spacious);
11826
+ }
11827
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title, .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title {
11828
+ font-family: var(--ids-comp-sidesheet-header-title-typography-font-family-spacious);
11829
+ font-size: var(--ids-comp-sidesheet-header-title-typography-font-size-spacious);
11830
+ font-weight: var(--ids-comp-sidesheet-header-title-typography-font-weight-spacious);
11831
+ letter-spacing: var(--ids-comp-sidesheet-header-title-typography-letter-spacing-spacious);
11832
+ line-height: var(--ids-comp-sidesheet-header-title-typography-line-height-spacious);
11833
+ }
11834
+ .ids-side-sheet.ids-side-sheet-spacious .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11835
+ gap: var(--ids-comp-sidesheet-header-size-gap-spacious);
11836
+ }
11837
+ .ids-side-sheet.ids-side-sheet-left-spacious .ids-side-sheet__container {
11838
+ border-right: var(--ids-comp-sidesheet-container-orientation-left-size-border-width-spacious) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11839
+ }
11840
+ .ids-side-sheet.ids-side-sheet-left-spacious .ids-side-sheet__backdrop {
11841
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-left-spacious);
11842
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-right-spacious);
11843
+ }
11844
+ .ids-side-sheet.ids-side-sheet-left-spacious .ids-side-sheet__container {
11845
+ border-radius: var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-spacious) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-spacious) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-spacious) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-spacious);
11846
+ }
11847
+ .ids-side-sheet.ids-side-sheet-right-spacious .ids-side-sheet__container {
11848
+ border-left: var(--ids-comp-sidesheet-container-orientation-right-size-border-width-spacious) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11849
+ }
11850
+ .ids-side-sheet.ids-side-sheet-right-spacious .ids-side-sheet__backdrop {
11851
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-left-spacious);
11852
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-right-spacious);
11853
+ }
11854
+ .ids-side-sheet.ids-side-sheet-right-spacious .ids-side-sheet__container {
11855
+ border-radius: var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-spacious) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-spacious) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-spacious) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-spacious);
11856
+ }
11857
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline {
11858
+ border-radius: var(--ids-comp-sidesheet-container-orientation-size-border-radius-dense);
11859
+ }
11860
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline {
11861
+ background-color: var(--ids-comp-sidesheet-container-color-bg-default);
11862
+ gap: var(--ids-comp-sidesheet-container-orientation-size-gap-dense);
11863
+ max-width: var(--ids-comp-sidesheet-container-orientation-size-max-width-dense);
11864
+ width: var(--ids-comp-sidesheet-container-orientation-size-width-dense);
11865
+ min-height: var(--ids-comp-sidesheet-container-orientation-size-min-height-dense);
11866
+ padding: var(--ids-comp-sidesheet-container-orientation-size-padding-x-dense) var(--ids-comp-sidesheet-container-orientation-size-padding-y-dense);
11867
+ }
11868
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__content--scrollable, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__content--scrollable {
11869
+ padding: var(--ids-comp-sidesheet-content-scrollable-size-padding-y-top-dense) var(--ids-comp-sidesheet-content-scrollable-size-padding-x-dense) var(--ids-comp-sidesheet-content-scrollable-size-padding-y-bottom-dense);
11870
+ }
11871
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable), .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__content:not(.ids-side-sheet__content--scrollable) {
11872
+ padding: var(--ids-comp-sidesheet-content-fixed-size-padding-y-top-dense) var(--ids-comp-sidesheet-content-fixed-size-padding-x-dense);
11873
+ }
11874
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__footer, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__footer {
11875
+ padding: var(--ids-comp-sidesheet-footer-padding-y-top-dense) var(--ids-comp-sidesheet-footer-padding-x-dense) var(--ids-comp-sidesheet-footer-padding-y-dense);
11876
+ border-top: var(--ids-comp-sidesheet-footer-border-width-dense) solid var(--ids-comp-sidesheet-footer-color-border-surface-default);
11877
+ gap: var(--ids-comp-sidesheet-footer-gap-dense);
11878
+ }
11879
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__header--default, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__header--custom, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11880
+ background: var(--ids-comp-sidesheet-header-color-bg-default);
11881
+ padding: var(--ids-comp-sidesheet-header-size-padding-y-dense) var(--ids-comp-sidesheet-header-size-padding-x-dense);
11882
+ }
11883
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title, .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content .ids-side-sheet__title {
11884
+ font-family: var(--ids-comp-sidesheet-header-title-typography-font-family-dense);
11885
+ font-size: var(--ids-comp-sidesheet-header-title-typography-font-size-dense);
11886
+ font-weight: var(--ids-comp-sidesheet-header-title-typography-font-weight-dense);
11887
+ letter-spacing: var(--ids-comp-sidesheet-header-title-typography-letter-spacing-dense);
11888
+ line-height: var(--ids-comp-sidesheet-header-title-typography-line-height-dense);
11889
+ }
11890
+ .ids-side-sheet.ids-side-sheet-dense .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11891
+ gap: var(--ids-comp-sidesheet-header-size-gap-dense);
11892
+ }
11893
+ .ids-side-sheet.ids-side-sheet-left-dense .ids-side-sheet__container {
11894
+ border-right: var(--ids-comp-sidesheet-container-orientation-left-size-border-width-dense) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11895
+ }
11896
+ .ids-side-sheet.ids-side-sheet-left-dense .ids-side-sheet__backdrop {
11897
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-left-dense);
11898
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-left-size-padding-right-dense);
11899
+ }
11900
+ .ids-side-sheet.ids-side-sheet-left-dense .ids-side-sheet__container {
11901
+ border-radius: var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-dense) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-dense) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-right-dense) var(--ids-comp-sidesheet-container-orientation-left-size-border-radius-left-dense);
11902
+ }
11903
+ .ids-side-sheet.ids-side-sheet-right-dense .ids-side-sheet__container {
11904
+ border-left: var(--ids-comp-sidesheet-container-orientation-right-size-border-width-dense) solid var(--ids-comp-sidesheet-container-color-border-surface-default);
11905
+ }
11906
+ .ids-side-sheet.ids-side-sheet-right-dense .ids-side-sheet__backdrop {
11907
+ padding-left: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-left-dense);
11908
+ padding-right: var(--ids-comp-sidesheet-backdrop-orientation-right-size-padding-right-dense);
11909
+ }
11910
+ .ids-side-sheet.ids-side-sheet-right-dense .ids-side-sheet__container {
11911
+ border-radius: var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-dense) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-dense) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-right-dense) var(--ids-comp-sidesheet-container-orientation-right-size-border-radius-left-dense);
11912
+ }
11913
+ .ids-side-sheet .ids-side-sheet__container, .ids-side-sheet .ids-side-sheet__container--inline {
11914
+ display: flex;
11915
+ height: 100%;
11916
+ flex-direction: column;
11917
+ align-items: flex-start;
11918
+ position: fixed;
11919
+ top: 0;
11920
+ left: 0;
11921
+ z-index: 1000;
11922
+ }
11923
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header-custom-top-row, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header-custom-top-row {
11924
+ width: 100%;
11925
+ display: flex;
11926
+ justify-content: flex-end;
11927
+ align-items: center;
11928
+ }
11929
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header-custom-top-row:has(> :nth-child(2)), .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header-custom-top-row:has(> :nth-child(2)) {
11930
+ justify-content: space-between;
11931
+ }
11932
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header--custom, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--custom {
11933
+ width: 100%;
11934
+ display: flex;
11935
+ align-items: center;
11936
+ justify-content: space-between;
11937
+ }
11938
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header--default, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11939
+ width: 100%;
11940
+ display: flex;
11941
+ align-items: center;
11942
+ justify-content: space-between;
11943
+ }
11944
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-left-content, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11945
+ display: flex;
11946
+ align-items: center;
11947
+ }
11948
+ .ids-side-sheet .ids-side-sheet__container .ids-side-sheet__header--default .ids-side-sheet__header-close-btn, .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-close-btn {
11949
+ margin-left: auto;
11950
+ }
11951
+ .ids-side-sheet .ids-side-sheet__container.right, .ids-side-sheet .ids-side-sheet__container--inline.right {
11952
+ left: auto;
11953
+ right: 0;
11954
+ }
11955
+ .ids-side-sheet .ids-side-sheet__container--inline {
11956
+ position: sticky;
11957
+ display: flex;
11958
+ flex-direction: column;
11959
+ top: 0;
11960
+ left: 0;
11961
+ height: 100%;
11962
+ transform: none;
11963
+ }
11964
+ .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default {
11965
+ width: 100%;
11966
+ display: flex;
11967
+ align-items: center;
11968
+ justify-content: space-between;
11969
+ }
11970
+ .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-left-content {
11971
+ display: flex;
11972
+ align-items: center;
11973
+ }
11974
+ .ids-side-sheet .ids-side-sheet__container--inline .ids-side-sheet__header--default .ids-side-sheet__header-close-btn {
11975
+ margin-left: auto;
11976
+ }
11977
+ .ids-side-sheet .ids-side-sheet__container--inline.right {
11978
+ left: auto;
11979
+ right: 0;
11980
+ transform: none;
11981
+ }
11982
+ .ids-side-sheet .ids-side-sheet__header-close-btn {
11983
+ align-self: flex-start;
11984
+ cursor: pointer;
11985
+ }
11986
+
11617
11987
  .ids-snackbar-group {
11618
11988
  box-sizing: border-box;
11619
11989
  border-width: 0;