@kushagradhawan/kookie-ui 0.1.23 → 0.1.25

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.
Files changed (21) hide show
  1. package/components.css +298 -666
  2. package/dist/cjs/components/image.d.ts.map +1 -1
  3. package/dist/cjs/components/image.js +1 -1
  4. package/dist/cjs/components/image.js.map +3 -3
  5. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  6. package/dist/cjs/components/sidebar.js +1 -1
  7. package/dist/cjs/components/sidebar.js.map +2 -2
  8. package/dist/esm/components/image.d.ts.map +1 -1
  9. package/dist/esm/components/image.js +1 -1
  10. package/dist/esm/components/image.js.map +3 -3
  11. package/dist/esm/components/sidebar.d.ts.map +1 -1
  12. package/dist/esm/components/sidebar.js +1 -1
  13. package/dist/esm/components/sidebar.js.map +2 -2
  14. package/package.json +1 -1
  15. package/src/components/image.css +8 -18
  16. package/src/components/image.tsx +124 -112
  17. package/src/components/sidebar.css +333 -245
  18. package/src/components/sidebar.tsx +26 -5
  19. package/src/styles/tokens/constants.css +1 -1
  20. package/styles.css +299 -667
  21. package/tokens.css +1 -1
package/styles.css CHANGED
@@ -3329,7 +3329,7 @@
3329
3329
  --backdrop-blur-dialog: 32px;
3330
3330
  --panel-opacity-light: 0.75;
3331
3331
  --panel-opacity-heavy: 0.75;
3332
- --surface-opacity-light: 0.25;
3332
+ --surface-opacity-light: 0.5;
3333
3333
  --surface-opacity-heavy: 0.75;
3334
3334
  --surface-opacity-dark: 0.25;
3335
3335
  --dialog-opacity-light: 0.75;
@@ -12730,11 +12730,9 @@
12730
12730
  }
12731
12731
  .rt-variant-blur {
12732
12732
  position: relative;
12733
+ }
12734
+ .rt-variant-blur--as-child {
12733
12735
  display: inline-block;
12734
- --blur-filter: blur(16px) saturate(1.5);
12735
- --blur-opacity: 0.5;
12736
- --blur-offset-y: 8px;
12737
- --blur-offset-x: 0;
12738
12736
  }
12739
12737
  .rt-variant-blur:where(:any-link, button, label) {
12740
12738
  cursor: pointer;
@@ -12758,18 +12756,6 @@
12758
12756
  outline: none !important;
12759
12757
  box-shadow: var(--box-shadow) !important;
12760
12758
  }
12761
- .rt-Image--blur-bg {
12762
- position: absolute;
12763
- top: var(--blur-offset-y, 8px);
12764
- left: var(--blur-offset-x, 0);
12765
- filter: var(--blur-filter);
12766
- opacity: var(--blur-opacity);
12767
- z-index: -1;
12768
- }
12769
- .rt-Image--blur {
12770
- position: relative;
12771
- z-index: 1;
12772
- }
12773
12759
  .rt-r-fit-cover {
12774
12760
  --object-fit: cover;
12775
12761
  }
@@ -16617,11 +16603,11 @@
16617
16603
  display: flex;
16618
16604
  align-items: center;
16619
16605
  gap: var(--space-2);
16620
- min-height: var(--sidebar-item-height);
16621
- padding-top: var(--sidebar-item-padding-y);
16622
- padding-bottom: var(--sidebar-item-padding-y);
16623
- padding-left: var(--sidebar-item-padding-left);
16624
- padding-right: var(--sidebar-item-padding-right);
16606
+ min-height: var(--base-menu-item-height);
16607
+ padding-top: var(--base-menu-item-padding-y);
16608
+ padding-bottom: var(--base-menu-item-padding-y);
16609
+ padding-left: var(--base-menu-item-padding-left);
16610
+ padding-right: var(--base-menu-item-padding-right);
16625
16611
  box-sizing: border-box;
16626
16612
  position: relative;
16627
16613
  outline: none;
@@ -16650,8 +16636,8 @@
16650
16636
  flex-direction: row;
16651
16637
  align-items: center;
16652
16638
  gap: var(--space-2);
16653
- padding: var(--sidebar-content-padding);
16654
- min-height: var(--sidebar-item-height);
16639
+ padding: var(--base-menu-content-padding);
16640
+ min-height: var(--base-menu-item-height);
16655
16641
  }
16656
16642
  .rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton) {
16657
16643
  flex: 1;
@@ -16696,15 +16682,20 @@
16696
16682
  gap: var(--space-4);
16697
16683
  }
16698
16684
  .rt-SidebarContent {
16699
- --scrollarea-scrollbar-vertical-margin-top: var(--sidebar-content-padding);
16700
- --scrollarea-scrollbar-vertical-margin-bottom: var(--sidebar-content-padding);
16701
- --scrollarea-scrollbar-horizontal-margin-left: var(--sidebar-content-padding);
16702
- --scrollarea-scrollbar-horizontal-margin-right: var(--sidebar-content-padding);
16685
+ --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
16686
+ --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
16687
+ --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
16688
+ --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
16703
16689
  display: flex;
16704
16690
  flex-direction: column;
16705
16691
  flex: 1;
16706
16692
  box-sizing: border-box;
16707
16693
  min-height: 0;
16694
+ background-color: transparent !important;
16695
+ -webkit-backdrop-filter: none !important;
16696
+ backdrop-filter: none !important;
16697
+ box-shadow: none !important;
16698
+ border-radius: 0 !important;
16708
16699
  }
16709
16700
  .rt-SidebarContent :where(.rt-ScrollAreaRoot) {
16710
16701
  flex: 1;
@@ -16722,8 +16713,7 @@
16722
16713
  flex: 1;
16723
16714
  display: flex;
16724
16715
  flex-direction: column;
16725
- gap: var(--space-2);
16726
- padding: var(--sidebar-content-padding);
16716
+ padding: var(--base-menu-content-padding);
16727
16717
  box-sizing: border-box;
16728
16718
  list-style: none;
16729
16719
  margin: 0;
@@ -16739,21 +16729,21 @@
16739
16729
  display: flex;
16740
16730
  align-items: center;
16741
16731
  gap: var(--space-2);
16742
- min-height: var(--sidebar-item-height);
16743
- padding-top: var(--sidebar-item-padding-y);
16744
- padding-bottom: var(--sidebar-item-padding-y);
16745
- padding-left: var(--sidebar-item-padding-left);
16746
- padding-right: var(--sidebar-item-padding-right);
16732
+ min-height: var(--base-menu-item-height);
16733
+ padding-top: var(--base-menu-item-padding-y);
16734
+ padding-bottom: var(--base-menu-item-padding-y);
16735
+ padding-left: var(--base-menu-item-padding-left);
16736
+ padding-right: var(--base-menu-item-padding-right);
16747
16737
  box-sizing: border-box;
16748
16738
  position: relative;
16749
16739
  outline: none;
16750
- scroll-margin: var(--sidebar-content-padding) 0;
16740
+ scroll-margin: var(--base-menu-content-padding) 0;
16751
16741
  background: none;
16752
16742
  border: none;
16753
16743
  width: 100%;
16754
16744
  text-align: left;
16755
16745
  border-radius: var(--radius-2);
16756
- transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
16746
+ transition: var(--transition-menu);
16757
16747
  -webkit-user-select: none;
16758
16748
  user-select: none;
16759
16749
  cursor: var(--cursor-menu-item);
@@ -16773,7 +16763,7 @@
16773
16763
  .rt-SidebarMenuButton:where([data-accent-color]) {
16774
16764
  color: var(--accent-a11);
16775
16765
  }
16776
- .rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
16766
+ .rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
16777
16767
  color: var(--gray-a10);
16778
16768
  }
16779
16769
  .rt-SidebarMenuButton:where([data-disabled], [data-highlighted], [data-active]) :where(.rt-SidebarMenuShortcut) {
@@ -16851,11 +16841,11 @@
16851
16841
  display: flex;
16852
16842
  align-items: center;
16853
16843
  gap: var(--space-2);
16854
- min-height: var(--sidebar-item-height);
16855
- padding-top: var(--sidebar-item-padding-y);
16856
- padding-bottom: var(--sidebar-item-padding-y);
16857
- padding-left: var(--sidebar-item-padding-left);
16858
- padding-right: var(--sidebar-item-padding-right);
16844
+ min-height: var(--base-menu-item-height);
16845
+ padding-top: var(--base-menu-item-padding-y);
16846
+ padding-bottom: var(--base-menu-item-padding-y);
16847
+ padding-left: var(--base-menu-item-padding-left);
16848
+ padding-right: var(--base-menu-item-padding-right);
16859
16849
  box-sizing: border-box;
16860
16850
  position: relative;
16861
16851
  outline: none;
@@ -16884,8 +16874,8 @@
16884
16874
  flex-direction: row;
16885
16875
  align-items: center;
16886
16876
  gap: var(--space-2);
16887
- padding: var(--sidebar-content-padding);
16888
- min-height: var(--sidebar-item-height);
16877
+ padding: var(--base-menu-content-padding);
16878
+ min-height: var(--base-menu-item-height);
16889
16879
  }
16890
16880
  .rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton) {
16891
16881
  flex: 1;
@@ -16933,79 +16923,45 @@
16933
16923
  width: 100%;
16934
16924
  margin: var(--space-2) 0;
16935
16925
  }
16936
- .rt-SidebarGroup {
16937
- display: flex;
16938
- flex-direction: column;
16939
- flex-shrink: 0;
16940
- }
16941
- .rt-SidebarGroup:where(:not(:first-child)) {
16942
- margin-top: var(--space-4);
16943
- }
16944
16926
  .rt-SidebarGroupLabel {
16945
16927
  display: flex;
16946
16928
  align-items: center;
16947
- min-height: var(--sidebar-item-height);
16948
- padding-top: var(--sidebar-item-padding-y);
16949
- padding-bottom: var(--sidebar-item-padding-y);
16950
- padding-left: var(--sidebar-item-padding-left);
16951
- padding-right: var(--sidebar-item-padding-right);
16929
+ min-height: var(--base-menu-item-height);
16930
+ padding-top: var(--base-menu-item-padding-y);
16931
+ padding-bottom: var(--base-menu-item-padding-y);
16932
+ padding-left: var(--base-menu-item-padding-left);
16933
+ padding-right: var(--base-menu-item-padding-right);
16952
16934
  box-sizing: border-box;
16953
16935
  color: var(--gray-a10);
16954
16936
  -webkit-user-select: none;
16955
16937
  user-select: none;
16956
16938
  cursor: default;
16957
- flex-shrink: 0;
16958
16939
  }
16959
- .rt-SidebarGroupContent {
16960
- display: flex;
16961
- flex-direction: column;
16962
- flex-shrink: 0;
16940
+ :where(.rt-SidebarMenuItem) + .rt-SidebarGroupLabel {
16941
+ margin-top: var(--space-2);
16963
16942
  }
16964
16943
  .rt-SidebarContainer:where(.rt-r-size-1) {
16965
16944
  --sidebar-base-padding: var(--space-3);
16966
- --sidebar-content-padding: var(--space-1);
16967
- --sidebar-item-padding-left: var(--space-2);
16968
- --sidebar-item-padding-right: var(--space-2);
16969
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
16970
- --sidebar-item-height: var(--space-5);
16971
16945
  }
16972
16946
  .rt-SidebarContainer:where(.rt-r-size-2) {
16973
16947
  --sidebar-base-padding: var(--space-4);
16974
- --sidebar-content-padding: var(--space-2);
16975
- --sidebar-item-padding-left: var(--space-3);
16976
- --sidebar-item-padding-right: var(--space-3);
16977
- --sidebar-item-padding-y: var(--space-1);
16978
- --sidebar-item-height: var(--space-6);
16979
16948
  }
16980
16949
  .rt-SidebarContent:where(.rt-r-size-1) {
16981
- --sidebar-content-padding: var(--space-1);
16982
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
16983
- --sidebar-item-padding-right: var(--space-2);
16984
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
16985
- --sidebar-item-height: var(--space-5);
16986
- border-radius: var(--radius-3);
16987
- }
16988
- .rt-SidebarContent:where(.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
16989
- --sidebar-item-padding-left: var(--space-2);
16990
- }
16991
- .rt-SidebarContent:where(.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
16992
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
16950
+ --sidebar-content-padding: var(--base-menu-content-padding);
16951
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
16952
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
16953
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
16954
+ --sidebar-item-height: var(--base-menu-item-height);
16993
16955
  }
16994
16956
  .rt-SidebarContent:where(.rt-r-size-2) {
16995
- --sidebar-content-padding: var(--space-2);
16996
- --sidebar-item-padding-left: var(--space-3);
16997
- --sidebar-item-padding-right: var(--space-3);
16998
- --sidebar-item-padding-y: var(--space-1);
16999
- --sidebar-item-height: var(--space-6);
17000
- border-radius: var(--radius-4);
17001
- }
17002
- .rt-SidebarContent:where(.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17003
- --sidebar-item-padding-left: var(--space-3);
17004
- }
17005
- .rt-SidebarContent:where(.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17006
- --sidebar-item-padding-left: var(--space-5);
16957
+ --sidebar-content-padding: var(--base-menu-content-padding);
16958
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
16959
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
16960
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
16961
+ --sidebar-item-height: var(--base-menu-item-height);
17007
16962
  }
17008
16963
  .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) {
16964
+ gap: var(--component-gap-2);
17009
16965
  font-size: var(--font-size-1);
17010
16966
  line-height: var(--line-height-1);
17011
16967
  letter-spacing: var(--letter-spacing-1);
@@ -17022,38 +16978,12 @@
17022
16978
  flex-shrink: 0;
17023
16979
  margin-left: auto;
17024
16980
  }
17025
- .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17026
- font-size: var(--font-size-1);
17027
- line-height: var(--line-height-1);
17028
- letter-spacing: var(--letter-spacing-1);
17029
- }
17030
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17031
- font-size: var(--font-size-1);
17032
- line-height: var(--line-height-1);
17033
- letter-spacing: var(--letter-spacing-1);
17034
- border-radius: var(--radius-1);
17035
- }
17036
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17037
- width: var(--content-icon-size-1);
17038
- height: var(--content-icon-size-1);
17039
- flex-shrink: 0;
17040
- }
17041
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17042
- font-size: var(--font-size-1);
17043
- line-height: var(--line-height-1);
17044
- letter-spacing: var(--letter-spacing-1);
17045
- border-radius: var(--radius-1);
17046
- }
17047
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17048
- width: var(--content-icon-size-1);
17049
- height: var(--content-icon-size-1);
17050
- flex-shrink: 0;
17051
- }
17052
16981
  .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) {
16982
+ gap: var(--component-gap-3);
17053
16983
  font-size: var(--font-size-2);
17054
16984
  line-height: var(--line-height-2);
17055
16985
  letter-spacing: var(--letter-spacing-2);
17056
- border-radius: var(--radius-3);
16986
+ border-radius: var(--radius-2);
17057
16987
  }
17058
16988
  .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17059
16989
  width: var(--content-icon-size-2);
@@ -17066,79 +16996,29 @@
17066
16996
  flex-shrink: 0;
17067
16997
  margin-left: auto;
17068
16998
  }
17069
- .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17070
- font-size: var(--font-size-2);
17071
- line-height: var(--line-height-2);
17072
- letter-spacing: var(--letter-spacing-2);
17073
- }
17074
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17075
- font-size: var(--font-size-2);
17076
- line-height: var(--line-height-2);
17077
- letter-spacing: var(--letter-spacing-2);
17078
- border-radius: var(--radius-3);
17079
- }
17080
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17081
- width: var(--content-icon-size-2);
17082
- height: var(--content-icon-size-2);
17083
- flex-shrink: 0;
17084
- }
17085
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17086
- font-size: var(--font-size-2);
17087
- line-height: var(--line-height-2);
17088
- letter-spacing: var(--letter-spacing-2);
17089
- border-radius: var(--radius-3);
17090
- }
17091
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17092
- width: var(--content-icon-size-2);
17093
- height: var(--content-icon-size-2);
17094
- flex-shrink: 0;
17095
- }
17096
16999
  @media (min-width: 520px) {
17097
17000
  .rt-SidebarContainer:where(.xs\:rt-r-size-1) {
17098
17001
  --sidebar-base-padding: var(--space-3);
17099
- --sidebar-content-padding: var(--space-1);
17100
- --sidebar-item-padding-left: var(--space-2);
17101
- --sidebar-item-padding-right: var(--space-2);
17102
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17103
- --sidebar-item-height: var(--space-5);
17104
17002
  }
17105
17003
  .rt-SidebarContainer:where(.xs\:rt-r-size-2) {
17106
17004
  --sidebar-base-padding: var(--space-4);
17107
- --sidebar-content-padding: var(--space-2);
17108
- --sidebar-item-padding-left: var(--space-3);
17109
- --sidebar-item-padding-right: var(--space-3);
17110
- --sidebar-item-padding-y: var(--space-1);
17111
- --sidebar-item-height: var(--space-6);
17112
17005
  }
17113
17006
  .rt-SidebarContent:where(.xs\:rt-r-size-1) {
17114
- --sidebar-content-padding: var(--space-1);
17115
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17116
- --sidebar-item-padding-right: var(--space-2);
17117
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17118
- --sidebar-item-height: var(--space-5);
17119
- border-radius: var(--radius-3);
17120
- }
17121
- .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17122
- --sidebar-item-padding-left: var(--space-2);
17123
- }
17124
- .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17125
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17007
+ --sidebar-content-padding: var(--base-menu-content-padding);
17008
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17009
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17010
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17011
+ --sidebar-item-height: var(--base-menu-item-height);
17126
17012
  }
17127
17013
  .rt-SidebarContent:where(.xs\:rt-r-size-2) {
17128
- --sidebar-content-padding: var(--space-2);
17129
- --sidebar-item-padding-left: var(--space-3);
17130
- --sidebar-item-padding-right: var(--space-3);
17131
- --sidebar-item-padding-y: var(--space-1);
17132
- --sidebar-item-height: var(--space-6);
17133
- border-radius: var(--radius-4);
17134
- }
17135
- .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17136
- --sidebar-item-padding-left: var(--space-3);
17137
- }
17138
- .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17139
- --sidebar-item-padding-left: var(--space-5);
17014
+ --sidebar-content-padding: var(--base-menu-content-padding);
17015
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17016
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17017
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17018
+ --sidebar-item-height: var(--base-menu-item-height);
17140
17019
  }
17141
17020
  .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
17021
+ gap: var(--component-gap-2);
17142
17022
  font-size: var(--font-size-1);
17143
17023
  line-height: var(--line-height-1);
17144
17024
  letter-spacing: var(--letter-spacing-1);
@@ -17155,38 +17035,12 @@
17155
17035
  flex-shrink: 0;
17156
17036
  margin-left: auto;
17157
17037
  }
17158
- .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17159
- font-size: var(--font-size-1);
17160
- line-height: var(--line-height-1);
17161
- letter-spacing: var(--letter-spacing-1);
17162
- }
17163
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17164
- font-size: var(--font-size-1);
17165
- line-height: var(--line-height-1);
17166
- letter-spacing: var(--letter-spacing-1);
17167
- border-radius: var(--radius-1);
17168
- }
17169
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17170
- width: var(--content-icon-size-1);
17171
- height: var(--content-icon-size-1);
17172
- flex-shrink: 0;
17173
- }
17174
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17175
- font-size: var(--font-size-1);
17176
- line-height: var(--line-height-1);
17177
- letter-spacing: var(--letter-spacing-1);
17178
- border-radius: var(--radius-1);
17179
- }
17180
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17181
- width: var(--content-icon-size-1);
17182
- height: var(--content-icon-size-1);
17183
- flex-shrink: 0;
17184
- }
17185
17038
  .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
17039
+ gap: var(--component-gap-3);
17186
17040
  font-size: var(--font-size-2);
17187
17041
  line-height: var(--line-height-2);
17188
17042
  letter-spacing: var(--letter-spacing-2);
17189
- border-radius: var(--radius-3);
17043
+ border-radius: var(--radius-2);
17190
17044
  }
17191
17045
  .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17192
17046
  width: var(--content-icon-size-2);
@@ -17199,80 +17053,30 @@
17199
17053
  flex-shrink: 0;
17200
17054
  margin-left: auto;
17201
17055
  }
17202
- .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17203
- font-size: var(--font-size-2);
17204
- line-height: var(--line-height-2);
17205
- letter-spacing: var(--letter-spacing-2);
17206
- }
17207
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17208
- font-size: var(--font-size-2);
17209
- line-height: var(--line-height-2);
17210
- letter-spacing: var(--letter-spacing-2);
17211
- border-radius: var(--radius-3);
17212
- }
17213
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17214
- width: var(--content-icon-size-2);
17215
- height: var(--content-icon-size-2);
17216
- flex-shrink: 0;
17217
- }
17218
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17219
- font-size: var(--font-size-2);
17220
- line-height: var(--line-height-2);
17221
- letter-spacing: var(--letter-spacing-2);
17222
- border-radius: var(--radius-3);
17223
- }
17224
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17225
- width: var(--content-icon-size-2);
17226
- height: var(--content-icon-size-2);
17227
- flex-shrink: 0;
17228
- }
17229
17056
  }
17230
17057
  @media (min-width: 768px) {
17231
17058
  .rt-SidebarContainer:where(.sm\:rt-r-size-1) {
17232
17059
  --sidebar-base-padding: var(--space-3);
17233
- --sidebar-content-padding: var(--space-1);
17234
- --sidebar-item-padding-left: var(--space-2);
17235
- --sidebar-item-padding-right: var(--space-2);
17236
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17237
- --sidebar-item-height: var(--space-5);
17238
17060
  }
17239
17061
  .rt-SidebarContainer:where(.sm\:rt-r-size-2) {
17240
17062
  --sidebar-base-padding: var(--space-4);
17241
- --sidebar-content-padding: var(--space-2);
17242
- --sidebar-item-padding-left: var(--space-3);
17243
- --sidebar-item-padding-right: var(--space-3);
17244
- --sidebar-item-padding-y: var(--space-1);
17245
- --sidebar-item-height: var(--space-6);
17246
17063
  }
17247
17064
  .rt-SidebarContent:where(.sm\:rt-r-size-1) {
17248
- --sidebar-content-padding: var(--space-1);
17249
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17250
- --sidebar-item-padding-right: var(--space-2);
17251
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17252
- --sidebar-item-height: var(--space-5);
17253
- border-radius: var(--radius-3);
17254
- }
17255
- .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17256
- --sidebar-item-padding-left: var(--space-2);
17257
- }
17258
- .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17259
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17065
+ --sidebar-content-padding: var(--base-menu-content-padding);
17066
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17067
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17068
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17069
+ --sidebar-item-height: var(--base-menu-item-height);
17260
17070
  }
17261
17071
  .rt-SidebarContent:where(.sm\:rt-r-size-2) {
17262
- --sidebar-content-padding: var(--space-2);
17263
- --sidebar-item-padding-left: var(--space-3);
17264
- --sidebar-item-padding-right: var(--space-3);
17265
- --sidebar-item-padding-y: var(--space-1);
17266
- --sidebar-item-height: var(--space-6);
17267
- border-radius: var(--radius-4);
17268
- }
17269
- .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17270
- --sidebar-item-padding-left: var(--space-3);
17271
- }
17272
- .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17273
- --sidebar-item-padding-left: var(--space-5);
17072
+ --sidebar-content-padding: var(--base-menu-content-padding);
17073
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17074
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17075
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17076
+ --sidebar-item-height: var(--base-menu-item-height);
17274
17077
  }
17275
17078
  .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
17079
+ gap: var(--component-gap-2);
17276
17080
  font-size: var(--font-size-1);
17277
17081
  line-height: var(--line-height-1);
17278
17082
  letter-spacing: var(--letter-spacing-1);
@@ -17289,38 +17093,12 @@
17289
17093
  flex-shrink: 0;
17290
17094
  margin-left: auto;
17291
17095
  }
17292
- .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17293
- font-size: var(--font-size-1);
17294
- line-height: var(--line-height-1);
17295
- letter-spacing: var(--letter-spacing-1);
17296
- }
17297
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17298
- font-size: var(--font-size-1);
17299
- line-height: var(--line-height-1);
17300
- letter-spacing: var(--letter-spacing-1);
17301
- border-radius: var(--radius-1);
17302
- }
17303
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17304
- width: var(--content-icon-size-1);
17305
- height: var(--content-icon-size-1);
17306
- flex-shrink: 0;
17307
- }
17308
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17309
- font-size: var(--font-size-1);
17310
- line-height: var(--line-height-1);
17311
- letter-spacing: var(--letter-spacing-1);
17312
- border-radius: var(--radius-1);
17313
- }
17314
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17315
- width: var(--content-icon-size-1);
17316
- height: var(--content-icon-size-1);
17317
- flex-shrink: 0;
17318
- }
17319
17096
  .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
17097
+ gap: var(--component-gap-3);
17320
17098
  font-size: var(--font-size-2);
17321
17099
  line-height: var(--line-height-2);
17322
17100
  letter-spacing: var(--letter-spacing-2);
17323
- border-radius: var(--radius-3);
17101
+ border-radius: var(--radius-2);
17324
17102
  }
17325
17103
  .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17326
17104
  width: var(--content-icon-size-2);
@@ -17333,80 +17111,30 @@
17333
17111
  flex-shrink: 0;
17334
17112
  margin-left: auto;
17335
17113
  }
17336
- .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17337
- font-size: var(--font-size-2);
17338
- line-height: var(--line-height-2);
17339
- letter-spacing: var(--letter-spacing-2);
17340
- }
17341
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17342
- font-size: var(--font-size-2);
17343
- line-height: var(--line-height-2);
17344
- letter-spacing: var(--letter-spacing-2);
17345
- border-radius: var(--radius-3);
17346
- }
17347
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17348
- width: var(--content-icon-size-2);
17349
- height: var(--content-icon-size-2);
17350
- flex-shrink: 0;
17351
- }
17352
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17353
- font-size: var(--font-size-2);
17354
- line-height: var(--line-height-2);
17355
- letter-spacing: var(--letter-spacing-2);
17356
- border-radius: var(--radius-3);
17357
- }
17358
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17359
- width: var(--content-icon-size-2);
17360
- height: var(--content-icon-size-2);
17361
- flex-shrink: 0;
17362
- }
17363
17114
  }
17364
17115
  @media (min-width: 1024px) {
17365
17116
  .rt-SidebarContainer:where(.md\:rt-r-size-1) {
17366
17117
  --sidebar-base-padding: var(--space-3);
17367
- --sidebar-content-padding: var(--space-1);
17368
- --sidebar-item-padding-left: var(--space-2);
17369
- --sidebar-item-padding-right: var(--space-2);
17370
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17371
- --sidebar-item-height: var(--space-5);
17372
17118
  }
17373
17119
  .rt-SidebarContainer:where(.md\:rt-r-size-2) {
17374
17120
  --sidebar-base-padding: var(--space-4);
17375
- --sidebar-content-padding: var(--space-2);
17376
- --sidebar-item-padding-left: var(--space-3);
17377
- --sidebar-item-padding-right: var(--space-3);
17378
- --sidebar-item-padding-y: var(--space-1);
17379
- --sidebar-item-height: var(--space-6);
17380
17121
  }
17381
17122
  .rt-SidebarContent:where(.md\:rt-r-size-1) {
17382
- --sidebar-content-padding: var(--space-1);
17383
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17384
- --sidebar-item-padding-right: var(--space-2);
17385
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17386
- --sidebar-item-height: var(--space-5);
17387
- border-radius: var(--radius-3);
17388
- }
17389
- .rt-SidebarContent:where(.md\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17390
- --sidebar-item-padding-left: var(--space-2);
17391
- }
17392
- .rt-SidebarContent:where(.md\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17393
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17123
+ --sidebar-content-padding: var(--base-menu-content-padding);
17124
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17125
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17126
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17127
+ --sidebar-item-height: var(--base-menu-item-height);
17394
17128
  }
17395
17129
  .rt-SidebarContent:where(.md\:rt-r-size-2) {
17396
- --sidebar-content-padding: var(--space-2);
17397
- --sidebar-item-padding-left: var(--space-3);
17398
- --sidebar-item-padding-right: var(--space-3);
17399
- --sidebar-item-padding-y: var(--space-1);
17400
- --sidebar-item-height: var(--space-6);
17401
- border-radius: var(--radius-4);
17402
- }
17403
- .rt-SidebarContent:where(.md\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17404
- --sidebar-item-padding-left: var(--space-3);
17405
- }
17406
- .rt-SidebarContent:where(.md\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17407
- --sidebar-item-padding-left: var(--space-5);
17130
+ --sidebar-content-padding: var(--base-menu-content-padding);
17131
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17132
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17133
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17134
+ --sidebar-item-height: var(--base-menu-item-height);
17408
17135
  }
17409
17136
  .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
17137
+ gap: var(--component-gap-2);
17410
17138
  font-size: var(--font-size-1);
17411
17139
  line-height: var(--line-height-1);
17412
17140
  letter-spacing: var(--letter-spacing-1);
@@ -17423,38 +17151,12 @@
17423
17151
  flex-shrink: 0;
17424
17152
  margin-left: auto;
17425
17153
  }
17426
- .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17427
- font-size: var(--font-size-1);
17428
- line-height: var(--line-height-1);
17429
- letter-spacing: var(--letter-spacing-1);
17430
- }
17431
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17432
- font-size: var(--font-size-1);
17433
- line-height: var(--line-height-1);
17434
- letter-spacing: var(--letter-spacing-1);
17435
- border-radius: var(--radius-1);
17436
- }
17437
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17438
- width: var(--content-icon-size-1);
17439
- height: var(--content-icon-size-1);
17440
- flex-shrink: 0;
17441
- }
17442
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17443
- font-size: var(--font-size-1);
17444
- line-height: var(--line-height-1);
17445
- letter-spacing: var(--letter-spacing-1);
17446
- border-radius: var(--radius-1);
17447
- }
17448
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17449
- width: var(--content-icon-size-1);
17450
- height: var(--content-icon-size-1);
17451
- flex-shrink: 0;
17452
- }
17453
17154
  .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
17155
+ gap: var(--component-gap-3);
17454
17156
  font-size: var(--font-size-2);
17455
17157
  line-height: var(--line-height-2);
17456
17158
  letter-spacing: var(--letter-spacing-2);
17457
- border-radius: var(--radius-3);
17159
+ border-radius: var(--radius-2);
17458
17160
  }
17459
17161
  .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17460
17162
  width: var(--content-icon-size-2);
@@ -17467,80 +17169,30 @@
17467
17169
  flex-shrink: 0;
17468
17170
  margin-left: auto;
17469
17171
  }
17470
- .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17471
- font-size: var(--font-size-2);
17472
- line-height: var(--line-height-2);
17473
- letter-spacing: var(--letter-spacing-2);
17474
- }
17475
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17476
- font-size: var(--font-size-2);
17477
- line-height: var(--line-height-2);
17478
- letter-spacing: var(--letter-spacing-2);
17479
- border-radius: var(--radius-3);
17480
- }
17481
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17482
- width: var(--content-icon-size-2);
17483
- height: var(--content-icon-size-2);
17484
- flex-shrink: 0;
17485
- }
17486
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17487
- font-size: var(--font-size-2);
17488
- line-height: var(--line-height-2);
17489
- letter-spacing: var(--letter-spacing-2);
17490
- border-radius: var(--radius-3);
17491
- }
17492
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17493
- width: var(--content-icon-size-2);
17494
- height: var(--content-icon-size-2);
17495
- flex-shrink: 0;
17496
- }
17497
- }
17498
- @media (min-width: 1280px) {
17499
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
17500
- --sidebar-base-padding: var(--space-3);
17501
- --sidebar-content-padding: var(--space-1);
17502
- --sidebar-item-padding-left: var(--space-2);
17503
- --sidebar-item-padding-right: var(--space-2);
17504
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17505
- --sidebar-item-height: var(--space-5);
17172
+ }
17173
+ @media (min-width: 1280px) {
17174
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
17175
+ --sidebar-base-padding: var(--space-3);
17506
17176
  }
17507
17177
  .rt-SidebarContainer:where(.lg\:rt-r-size-2) {
17508
17178
  --sidebar-base-padding: var(--space-4);
17509
- --sidebar-content-padding: var(--space-2);
17510
- --sidebar-item-padding-left: var(--space-3);
17511
- --sidebar-item-padding-right: var(--space-3);
17512
- --sidebar-item-padding-y: var(--space-1);
17513
- --sidebar-item-height: var(--space-6);
17514
17179
  }
17515
17180
  .rt-SidebarContent:where(.lg\:rt-r-size-1) {
17516
- --sidebar-content-padding: var(--space-1);
17517
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17518
- --sidebar-item-padding-right: var(--space-2);
17519
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17520
- --sidebar-item-height: var(--space-5);
17521
- border-radius: var(--radius-3);
17522
- }
17523
- .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17524
- --sidebar-item-padding-left: var(--space-2);
17525
- }
17526
- .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17527
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17181
+ --sidebar-content-padding: var(--base-menu-content-padding);
17182
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17183
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17184
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17185
+ --sidebar-item-height: var(--base-menu-item-height);
17528
17186
  }
17529
17187
  .rt-SidebarContent:where(.lg\:rt-r-size-2) {
17530
- --sidebar-content-padding: var(--space-2);
17531
- --sidebar-item-padding-left: var(--space-3);
17532
- --sidebar-item-padding-right: var(--space-3);
17533
- --sidebar-item-padding-y: var(--space-1);
17534
- --sidebar-item-height: var(--space-6);
17535
- border-radius: var(--radius-4);
17536
- }
17537
- .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17538
- --sidebar-item-padding-left: var(--space-3);
17539
- }
17540
- .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17541
- --sidebar-item-padding-left: var(--space-5);
17188
+ --sidebar-content-padding: var(--base-menu-content-padding);
17189
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17190
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17191
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17192
+ --sidebar-item-height: var(--base-menu-item-height);
17542
17193
  }
17543
17194
  .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
17195
+ gap: var(--component-gap-2);
17544
17196
  font-size: var(--font-size-1);
17545
17197
  line-height: var(--line-height-1);
17546
17198
  letter-spacing: var(--letter-spacing-1);
@@ -17557,38 +17209,12 @@
17557
17209
  flex-shrink: 0;
17558
17210
  margin-left: auto;
17559
17211
  }
17560
- .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17561
- font-size: var(--font-size-1);
17562
- line-height: var(--line-height-1);
17563
- letter-spacing: var(--letter-spacing-1);
17564
- }
17565
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17566
- font-size: var(--font-size-1);
17567
- line-height: var(--line-height-1);
17568
- letter-spacing: var(--letter-spacing-1);
17569
- border-radius: var(--radius-1);
17570
- }
17571
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17572
- width: var(--content-icon-size-1);
17573
- height: var(--content-icon-size-1);
17574
- flex-shrink: 0;
17575
- }
17576
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17577
- font-size: var(--font-size-1);
17578
- line-height: var(--line-height-1);
17579
- letter-spacing: var(--letter-spacing-1);
17580
- border-radius: var(--radius-1);
17581
- }
17582
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17583
- width: var(--content-icon-size-1);
17584
- height: var(--content-icon-size-1);
17585
- flex-shrink: 0;
17586
- }
17587
17212
  .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
17213
+ gap: var(--component-gap-3);
17588
17214
  font-size: var(--font-size-2);
17589
17215
  line-height: var(--line-height-2);
17590
17216
  letter-spacing: var(--letter-spacing-2);
17591
- border-radius: var(--radius-3);
17217
+ border-radius: var(--radius-2);
17592
17218
  }
17593
17219
  .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17594
17220
  width: var(--content-icon-size-2);
@@ -17601,80 +17227,30 @@
17601
17227
  flex-shrink: 0;
17602
17228
  margin-left: auto;
17603
17229
  }
17604
- .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17605
- font-size: var(--font-size-2);
17606
- line-height: var(--line-height-2);
17607
- letter-spacing: var(--letter-spacing-2);
17608
- }
17609
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17610
- font-size: var(--font-size-2);
17611
- line-height: var(--line-height-2);
17612
- letter-spacing: var(--letter-spacing-2);
17613
- border-radius: var(--radius-3);
17614
- }
17615
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17616
- width: var(--content-icon-size-2);
17617
- height: var(--content-icon-size-2);
17618
- flex-shrink: 0;
17619
- }
17620
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17621
- font-size: var(--font-size-2);
17622
- line-height: var(--line-height-2);
17623
- letter-spacing: var(--letter-spacing-2);
17624
- border-radius: var(--radius-3);
17625
- }
17626
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17627
- width: var(--content-icon-size-2);
17628
- height: var(--content-icon-size-2);
17629
- flex-shrink: 0;
17630
- }
17631
17230
  }
17632
17231
  @media (min-width: 1640px) {
17633
17232
  .rt-SidebarContainer:where(.xl\:rt-r-size-1) {
17634
17233
  --sidebar-base-padding: var(--space-3);
17635
- --sidebar-content-padding: var(--space-1);
17636
- --sidebar-item-padding-left: var(--space-2);
17637
- --sidebar-item-padding-right: var(--space-2);
17638
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17639
- --sidebar-item-height: var(--space-5);
17640
17234
  }
17641
17235
  .rt-SidebarContainer:where(.xl\:rt-r-size-2) {
17642
17236
  --sidebar-base-padding: var(--space-4);
17643
- --sidebar-content-padding: var(--space-2);
17644
- --sidebar-item-padding-left: var(--space-3);
17645
- --sidebar-item-padding-right: var(--space-3);
17646
- --sidebar-item-padding-y: var(--space-1);
17647
- --sidebar-item-height: var(--space-6);
17648
17237
  }
17649
17238
  .rt-SidebarContent:where(.xl\:rt-r-size-1) {
17650
- --sidebar-content-padding: var(--space-1);
17651
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17652
- --sidebar-item-padding-right: var(--space-2);
17653
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
17654
- --sidebar-item-height: var(--space-5);
17655
- border-radius: var(--radius-3);
17656
- }
17657
- .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17658
- --sidebar-item-padding-left: var(--space-2);
17659
- }
17660
- .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17661
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
17239
+ --sidebar-content-padding: var(--base-menu-content-padding);
17240
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17241
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17242
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17243
+ --sidebar-item-height: var(--base-menu-item-height);
17662
17244
  }
17663
17245
  .rt-SidebarContent:where(.xl\:rt-r-size-2) {
17664
- --sidebar-content-padding: var(--space-2);
17665
- --sidebar-item-padding-left: var(--space-3);
17666
- --sidebar-item-padding-right: var(--space-3);
17667
- --sidebar-item-padding-y: var(--space-1);
17668
- --sidebar-item-height: var(--space-6);
17669
- border-radius: var(--radius-4);
17670
- }
17671
- .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
17672
- --sidebar-item-padding-left: var(--space-3);
17673
- }
17674
- .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
17675
- --sidebar-item-padding-left: var(--space-5);
17246
+ --sidebar-content-padding: var(--base-menu-content-padding);
17247
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
17248
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
17249
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
17250
+ --sidebar-item-height: var(--base-menu-item-height);
17676
17251
  }
17677
17252
  .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
17253
+ gap: var(--component-gap-2);
17678
17254
  font-size: var(--font-size-1);
17679
17255
  line-height: var(--line-height-1);
17680
17256
  letter-spacing: var(--letter-spacing-1);
@@ -17691,38 +17267,12 @@
17691
17267
  flex-shrink: 0;
17692
17268
  margin-left: auto;
17693
17269
  }
17694
- .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
17695
- font-size: var(--font-size-1);
17696
- line-height: var(--line-height-1);
17697
- letter-spacing: var(--letter-spacing-1);
17698
- }
17699
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17700
- font-size: var(--font-size-1);
17701
- line-height: var(--line-height-1);
17702
- letter-spacing: var(--letter-spacing-1);
17703
- border-radius: var(--radius-1);
17704
- }
17705
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17706
- width: var(--content-icon-size-1);
17707
- height: var(--content-icon-size-1);
17708
- flex-shrink: 0;
17709
- }
17710
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17711
- font-size: var(--font-size-1);
17712
- line-height: var(--line-height-1);
17713
- letter-spacing: var(--letter-spacing-1);
17714
- border-radius: var(--radius-1);
17715
- }
17716
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17717
- width: var(--content-icon-size-1);
17718
- height: var(--content-icon-size-1);
17719
- flex-shrink: 0;
17720
- }
17721
17270
  .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
17271
+ gap: var(--component-gap-3);
17722
17272
  font-size: var(--font-size-2);
17723
17273
  line-height: var(--line-height-2);
17724
17274
  letter-spacing: var(--letter-spacing-2);
17725
- border-radius: var(--radius-3);
17275
+ border-radius: var(--radius-2);
17726
17276
  }
17727
17277
  .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
17728
17278
  width: var(--content-icon-size-2);
@@ -17735,33 +17285,6 @@
17735
17285
  flex-shrink: 0;
17736
17286
  margin-left: auto;
17737
17287
  }
17738
- .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
17739
- font-size: var(--font-size-2);
17740
- line-height: var(--line-height-2);
17741
- letter-spacing: var(--letter-spacing-2);
17742
- }
17743
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
17744
- font-size: var(--font-size-2);
17745
- line-height: var(--line-height-2);
17746
- letter-spacing: var(--letter-spacing-2);
17747
- border-radius: var(--radius-3);
17748
- }
17749
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
17750
- width: var(--content-icon-size-2);
17751
- height: var(--content-icon-size-2);
17752
- flex-shrink: 0;
17753
- }
17754
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
17755
- font-size: var(--font-size-2);
17756
- line-height: var(--line-height-2);
17757
- letter-spacing: var(--letter-spacing-2);
17758
- border-radius: var(--radius-3);
17759
- }
17760
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
17761
- width: var(--content-icon-size-2);
17762
- height: var(--content-icon-size-2);
17763
- flex-shrink: 0;
17764
- }
17765
17288
  }
17766
17289
  .rt-SidebarContainer:where(.rt-variant-ghost) {
17767
17290
  background-color: transparent;
@@ -17770,21 +17293,21 @@
17770
17293
  border: none;
17771
17294
  }
17772
17295
  .rt-SidebarContainer:where(.rt-variant-soft) {
17773
- background-color: var(--accent-2);
17296
+ background-color: var(--gray-2);
17774
17297
  }
17775
17298
  :where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-soft) {
17776
- background-color: var(--accent-a2);
17299
+ background-color: var(--gray-a2);
17777
17300
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
17778
17301
  backdrop-filter: var(--backdrop-filter-panel);
17779
17302
  }
17780
17303
  .rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='solid']) {
17781
- background-color: var(--accent-2);
17304
+ background-color: var(--gray-2);
17782
17305
  -webkit-backdrop-filter: none;
17783
17306
  backdrop-filter: none;
17784
17307
  --backdrop-filter-components: none;
17785
17308
  }
17786
17309
  .rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='translucent']) {
17787
- background-color: var(--accent-a2);
17310
+ background-color: var(--gray-a2);
17788
17311
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
17789
17312
  backdrop-filter: var(--backdrop-filter-panel);
17790
17313
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -17793,6 +17316,48 @@
17793
17316
  :where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-ghost) {
17794
17317
  box-shadow: var(--shadow-4);
17795
17318
  }
17319
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger) {
17320
+ transition: var(--transition-menu);
17321
+ }
17322
+ @media (prefers-reduced-motion: reduce) {
17323
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger) {
17324
+ transition: none;
17325
+ }
17326
+ }
17327
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger)), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger)), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger)) {
17328
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
17329
+ }
17330
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']) {
17331
+ background-color: var(--gray-3);
17332
+ }
17333
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open'])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open'])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open'])) {
17334
+ background-color: var(--gray-a3);
17335
+ }
17336
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']) {
17337
+ background-color: var(--gray-3);
17338
+ -webkit-backdrop-filter: none;
17339
+ backdrop-filter: none;
17340
+ --backdrop-filter-components: none;
17341
+ }
17342
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']) {
17343
+ background-color: var(--gray-a3);
17344
+ }
17345
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton)), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton)), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton)) {
17346
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
17347
+ }
17348
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) {
17349
+ background-color: var(--accent-9);
17350
+ color: var(--accent-contrast);
17351
+ }
17352
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
17353
+ color: var(--accent-contrast);
17354
+ }
17355
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
17356
+ color: inherit !important;
17357
+ }
17358
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17359
+ color: inherit !important;
17360
+ }
17796
17361
  .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) {
17797
17362
  background-color: var(--accent-9);
17798
17363
  color: var(--accent-contrast);
@@ -17800,138 +17365,205 @@
17800
17365
  .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
17801
17366
  color: inherit !important;
17802
17367
  }
17803
- .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']) {
17368
+ .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17804
17369
  color: inherit !important;
17805
17370
  }
17806
- .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) {
17371
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) {
17372
+ background-color: var(--accent-12);
17373
+ color: var(--accent-1);
17374
+ }
17375
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
17376
+ color: var(--accent-1);
17377
+ }
17378
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
17379
+ color: inherit !important;
17380
+ }
17381
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17382
+ color: inherit !important;
17383
+ }
17384
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) {
17807
17385
  background-color: var(--accent-9);
17808
17386
  color: var(--accent-contrast);
17809
17387
  }
17810
- .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
17388
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
17811
17389
  color: inherit !important;
17812
17390
  }
17813
- .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']) {
17391
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17814
17392
  color: inherit !important;
17815
17393
  }
17816
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
17817
- .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
17818
- .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
17819
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
17820
- .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
17821
- .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) {
17394
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) {
17822
17395
  background-color: var(--accent-12);
17823
17396
  color: var(--accent-1);
17824
17397
  }
17825
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
17398
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
17826
17399
  color: inherit !important;
17827
17400
  }
17828
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']) {
17401
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17829
17402
  color: inherit !important;
17830
17403
  }
17831
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) {
17404
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) {
17832
17405
  background-color: var(--accent-9);
17833
17406
  color: var(--accent-contrast);
17834
17407
  }
17835
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
17408
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text) {
17836
17409
  color: inherit !important;
17837
17410
  }
17838
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']) {
17411
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)) {
17839
17412
  color: inherit !important;
17840
17413
  }
17841
- .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) {
17414
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger) {
17415
+ transition: var(--transition-menu);
17416
+ }
17417
+ @media (prefers-reduced-motion: reduce) {
17418
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger) {
17419
+ transition: none;
17420
+ }
17421
+ }
17422
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger)), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger)), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger)) {
17423
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
17424
+ }
17425
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']) {
17842
17426
  background-color: var(--accent-3);
17843
- color: var(--accent-12);
17844
17427
  }
17845
- :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
17428
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open'])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open'])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open'])) {
17846
17429
  background-color: var(--accent-a3);
17847
- color: var(--accent-a12);
17848
- -webkit-backdrop-filter: var(--backdrop-filter-components);
17849
- backdrop-filter: var(--backdrop-filter-components);
17850
17430
  }
17851
- :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
17431
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='solid']) {
17852
17432
  background-color: var(--accent-3);
17853
- color: var(--accent-12);
17854
17433
  -webkit-backdrop-filter: none;
17855
17434
  backdrop-filter: none;
17856
17435
  --backdrop-filter-components: none;
17857
17436
  }
17858
- :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
17437
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger[data-state='open']):where([data-panel-background='translucent']) {
17859
17438
  background-color: var(--accent-a3);
17860
- color: var(--accent-a12);
17861
- -webkit-backdrop-filter: var(--backdrop-filter-components);
17862
- backdrop-filter: var(--backdrop-filter-components);
17863
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
17864
17439
  }
17865
- :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
17440
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton)), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton)), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton)) {
17441
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
17442
+ }
17443
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) {
17444
+ background-color: var(--accent-4);
17445
+ }
17446
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])) {
17447
+ background-color: var(--accent-a4);
17448
+ }
17449
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='solid']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='solid']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='solid']) {
17450
+ background-color: var(--accent-4);
17866
17451
  -webkit-backdrop-filter: none;
17867
17452
  backdrop-filter: none;
17453
+ --backdrop-filter-components: none;
17868
17454
  }
17869
- .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
17455
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='translucent']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='translucent']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-panel-background='translucent']) {
17456
+ background-color: var(--accent-a4);
17457
+ }
17458
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
17870
17459
  color: var(--gray-11) !important;
17871
17460
  }
17872
- .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) {
17461
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) {
17873
17462
  background-color: var(--accent-3);
17463
+ color: var(--accent-12);
17874
17464
  }
17875
- :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])) {
17465
+ :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
17876
17466
  background-color: var(--accent-a3);
17877
- -webkit-backdrop-filter: var(--backdrop-filter-components);
17878
- backdrop-filter: var(--backdrop-filter-components);
17467
+ color: var(--accent-a12);
17879
17468
  }
17880
- :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer[data-panel-background='solid']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])) {
17469
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='solid']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='solid']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='solid']) {
17881
17470
  background-color: var(--accent-3);
17471
+ color: var(--accent-12);
17882
17472
  -webkit-backdrop-filter: none;
17883
17473
  backdrop-filter: none;
17884
17474
  --backdrop-filter-components: none;
17885
17475
  }
17886
- :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer[data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])) {
17476
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='translucent']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='translucent']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]):where([data-panel-background='translucent']) {
17887
17477
  background-color: var(--accent-a3);
17888
- -webkit-backdrop-filter: var(--backdrop-filter-components);
17889
- backdrop-filter: var(--backdrop-filter-components);
17890
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
17891
- }
17892
- :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])), :where(.rt-SidebarContainer.rt-variant-surface) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted])) {
17893
- -webkit-backdrop-filter: none;
17894
- backdrop-filter: none;
17478
+ color: var(--accent-a12);
17895
17479
  }
17896
- .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
17480
+ .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
17897
17481
  color: var(--gray-11) !important;
17898
17482
  }
17899
17483
  .rt-SidebarContent :where(.rt-BaseMenuItem) {
17900
17484
  border-radius: var(--radius-2);
17901
17485
  margin-bottom: var(--space-1);
17902
17486
  }
17487
+ .rt-SidebarRoot:where([data-collapsible="icon"]) {
17488
+ transition: none;
17489
+ overflow: hidden;
17490
+ flex-shrink: 0;
17491
+ }
17492
+ .rt-SidebarContainer:where(.rt-variant-ghost[data-collapsible="icon"][data-type="floating"]) {
17493
+ overflow: visible !important;
17494
+ }
17903
17495
  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
17904
- transform: translateX(-100%);
17905
- transition: transform var(--duration-3) var(--ease-2);
17496
+ width: 0;
17497
+ min-width: 0;
17498
+ opacity: 0;
17499
+ pointer-events: none;
17500
+ flex-basis: 0;
17501
+ width: 0;
17502
+ width: 0;
17503
+ min-width: 0;
17504
+ opacity: 0;
17505
+ pointer-events: none;
17506
+ margin: 0;
17906
17507
  }
17907
17508
  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
17908
- transform: translateX(0);
17909
- transition: transform var(--duration-3) var(--ease-2);
17509
+ width: var(--sidebar-width);
17510
+ min-width: var(--sidebar-width);
17511
+ opacity: 1;
17512
+ pointer-events: auto;
17513
+ flex-basis: var(--sidebar-width);
17514
+ width: var(--sidebar-width);
17910
17515
  }
17911
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"][data-side="right"]) {
17912
- transform: translateX(100%);
17516
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]) {
17517
+ transition: none;
17518
+ overflow: hidden;
17519
+ flex-shrink: 0;
17913
17520
  }
17914
- @media (prefers-reduced-motion: reduce) {
17915
- .rt-SidebarRoot:where([data-collapsible="icon"]) {
17916
- transition: none;
17917
- }
17521
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]:has(.rt-variant-ghost)) {
17522
+ overflow: visible;
17523
+ }
17524
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]) {
17525
+ width: var(--sidebar-width);
17526
+ min-width: var(--sidebar-width);
17527
+ opacity: 1;
17528
+ pointer-events: auto;
17529
+ margin: var(--space-2);
17530
+ }
17531
+ .rt-SidebarContainer:where([data-collapsible="icon"]) {
17532
+ width: var(--sidebar-width);
17533
+ min-width: var(--sidebar-width);
17534
+ flex-shrink: 0;
17535
+ }
17536
+ .rt-SidebarContent:where([data-collapsible="icon"]) {
17537
+ width: 100%;
17538
+ min-width: var(--sidebar-width);
17539
+ flex-shrink: 0;
17918
17540
  }
17919
17541
  @media (max-width: 768px) {
17920
17542
  .rt-SidebarRoot {
17921
17543
  display: none;
17544
+ display: none;
17545
+ }
17546
+ .rt-SidebarRoot:where([data-state="expanded"]) {
17547
+ display: flex;
17548
+ position: fixed;
17549
+ top: 0;
17550
+ left: 0;
17551
+ height: 100vh;
17552
+ width: var(--sidebar-width);
17553
+ z-index: 50;
17554
+ box-shadow: var(--shadow-6);
17555
+ }
17556
+ }
17557
+ @media (prefers-reduced-motion: reduce) {
17558
+ .rt-SidebarRoot:where([data-collapsible="icon"]) {
17559
+ transition: none;
17922
17560
  }
17923
17561
  }
17924
17562
  :where(.rt-SidebarContent.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
17925
- padding-right: calc(var(--space-1) * 0.75);
17563
+ padding-right: var(--base-menu-item-padding-y);
17926
17564
  }
17927
17565
  :where(.rt-SidebarContent.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
17928
- padding-right: var(--space-1);
17929
- }
17930
- :where(.rt-SidebarContainer.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
17931
- padding-right: calc(var(--space-1) * 0.75);
17932
- }
17933
- :where(.rt-SidebarContainer.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
17934
- padding-right: var(--space-1);
17566
+ padding-right: var(--base-menu-item-padding-y);
17935
17567
  }
17936
17568
  .rt-SidebarMenuShortcut {
17937
17569
  display: flex;