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