@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/components.css CHANGED
@@ -7832,11 +7832,9 @@
7832
7832
  }
7833
7833
  .rt-variant-blur {
7834
7834
  position: relative;
7835
+ }
7836
+ .rt-variant-blur--as-child {
7835
7837
  display: inline-block;
7836
- --blur-filter: blur(16px) saturate(1.5);
7837
- --blur-opacity: 0.5;
7838
- --blur-offset-y: 8px;
7839
- --blur-offset-x: 0;
7840
7838
  }
7841
7839
  .rt-variant-blur:where(:any-link, button, label) {
7842
7840
  cursor: pointer;
@@ -7860,18 +7858,6 @@
7860
7858
  outline: none !important;
7861
7859
  box-shadow: var(--box-shadow) !important;
7862
7860
  }
7863
- .rt-Image--blur-bg {
7864
- position: absolute;
7865
- top: var(--blur-offset-y, 8px);
7866
- left: var(--blur-offset-x, 0);
7867
- filter: var(--blur-filter);
7868
- opacity: var(--blur-opacity);
7869
- z-index: -1;
7870
- }
7871
- .rt-Image--blur {
7872
- position: relative;
7873
- z-index: 1;
7874
- }
7875
7861
  .rt-r-fit-cover {
7876
7862
  --object-fit: cover;
7877
7863
  }
@@ -11719,11 +11705,11 @@
11719
11705
  display: flex;
11720
11706
  align-items: center;
11721
11707
  gap: var(--space-2);
11722
- min-height: var(--sidebar-item-height);
11723
- padding-top: var(--sidebar-item-padding-y);
11724
- padding-bottom: var(--sidebar-item-padding-y);
11725
- padding-left: var(--sidebar-item-padding-left);
11726
- padding-right: var(--sidebar-item-padding-right);
11708
+ min-height: var(--base-menu-item-height);
11709
+ padding-top: var(--base-menu-item-padding-y);
11710
+ padding-bottom: var(--base-menu-item-padding-y);
11711
+ padding-left: var(--base-menu-item-padding-left);
11712
+ padding-right: var(--base-menu-item-padding-right);
11727
11713
  box-sizing: border-box;
11728
11714
  position: relative;
11729
11715
  outline: none;
@@ -11752,8 +11738,8 @@
11752
11738
  flex-direction: row;
11753
11739
  align-items: center;
11754
11740
  gap: var(--space-2);
11755
- padding: var(--sidebar-content-padding);
11756
- min-height: var(--sidebar-item-height);
11741
+ padding: var(--base-menu-content-padding);
11742
+ min-height: var(--base-menu-item-height);
11757
11743
  }
11758
11744
  .rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton) {
11759
11745
  flex: 1;
@@ -11798,15 +11784,20 @@
11798
11784
  gap: var(--space-4);
11799
11785
  }
11800
11786
  .rt-SidebarContent {
11801
- --scrollarea-scrollbar-vertical-margin-top: var(--sidebar-content-padding);
11802
- --scrollarea-scrollbar-vertical-margin-bottom: var(--sidebar-content-padding);
11803
- --scrollarea-scrollbar-horizontal-margin-left: var(--sidebar-content-padding);
11804
- --scrollarea-scrollbar-horizontal-margin-right: var(--sidebar-content-padding);
11787
+ --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
11788
+ --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
11789
+ --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
11790
+ --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
11805
11791
  display: flex;
11806
11792
  flex-direction: column;
11807
11793
  flex: 1;
11808
11794
  box-sizing: border-box;
11809
11795
  min-height: 0;
11796
+ background-color: transparent !important;
11797
+ -webkit-backdrop-filter: none !important;
11798
+ backdrop-filter: none !important;
11799
+ box-shadow: none !important;
11800
+ border-radius: 0 !important;
11810
11801
  }
11811
11802
  .rt-SidebarContent :where(.rt-ScrollAreaRoot) {
11812
11803
  flex: 1;
@@ -11824,8 +11815,7 @@
11824
11815
  flex: 1;
11825
11816
  display: flex;
11826
11817
  flex-direction: column;
11827
- gap: var(--space-2);
11828
- padding: var(--sidebar-content-padding);
11818
+ padding: var(--base-menu-content-padding);
11829
11819
  box-sizing: border-box;
11830
11820
  list-style: none;
11831
11821
  margin: 0;
@@ -11841,21 +11831,21 @@
11841
11831
  display: flex;
11842
11832
  align-items: center;
11843
11833
  gap: var(--space-2);
11844
- min-height: var(--sidebar-item-height);
11845
- padding-top: var(--sidebar-item-padding-y);
11846
- padding-bottom: var(--sidebar-item-padding-y);
11847
- padding-left: var(--sidebar-item-padding-left);
11848
- padding-right: var(--sidebar-item-padding-right);
11834
+ min-height: var(--base-menu-item-height);
11835
+ padding-top: var(--base-menu-item-padding-y);
11836
+ padding-bottom: var(--base-menu-item-padding-y);
11837
+ padding-left: var(--base-menu-item-padding-left);
11838
+ padding-right: var(--base-menu-item-padding-right);
11849
11839
  box-sizing: border-box;
11850
11840
  position: relative;
11851
11841
  outline: none;
11852
- scroll-margin: var(--sidebar-content-padding) 0;
11842
+ scroll-margin: var(--base-menu-content-padding) 0;
11853
11843
  background: none;
11854
11844
  border: none;
11855
11845
  width: 100%;
11856
11846
  text-align: left;
11857
11847
  border-radius: var(--radius-2);
11858
- transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
11848
+ transition: var(--transition-menu);
11859
11849
  -webkit-user-select: none;
11860
11850
  user-select: none;
11861
11851
  cursor: var(--cursor-menu-item);
@@ -11875,7 +11865,7 @@
11875
11865
  .rt-SidebarMenuButton:where([data-accent-color]) {
11876
11866
  color: var(--accent-a11);
11877
11867
  }
11878
- .rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
11868
+ .rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
11879
11869
  color: var(--gray-a10);
11880
11870
  }
11881
11871
  .rt-SidebarMenuButton:where([data-disabled], [data-highlighted], [data-active]) :where(.rt-SidebarMenuShortcut) {
@@ -11953,11 +11943,11 @@
11953
11943
  display: flex;
11954
11944
  align-items: center;
11955
11945
  gap: var(--space-2);
11956
- min-height: var(--sidebar-item-height);
11957
- padding-top: var(--sidebar-item-padding-y);
11958
- padding-bottom: var(--sidebar-item-padding-y);
11959
- padding-left: var(--sidebar-item-padding-left);
11960
- padding-right: var(--sidebar-item-padding-right);
11946
+ min-height: var(--base-menu-item-height);
11947
+ padding-top: var(--base-menu-item-padding-y);
11948
+ padding-bottom: var(--base-menu-item-padding-y);
11949
+ padding-left: var(--base-menu-item-padding-left);
11950
+ padding-right: var(--base-menu-item-padding-right);
11961
11951
  box-sizing: border-box;
11962
11952
  position: relative;
11963
11953
  outline: none;
@@ -11986,8 +11976,8 @@
11986
11976
  flex-direction: row;
11987
11977
  align-items: center;
11988
11978
  gap: var(--space-2);
11989
- padding: var(--sidebar-content-padding);
11990
- min-height: var(--sidebar-item-height);
11979
+ padding: var(--base-menu-content-padding);
11980
+ min-height: var(--base-menu-item-height);
11991
11981
  }
11992
11982
  .rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton) {
11993
11983
  flex: 1;
@@ -12035,79 +12025,45 @@
12035
12025
  width: 100%;
12036
12026
  margin: var(--space-2) 0;
12037
12027
  }
12038
- .rt-SidebarGroup {
12039
- display: flex;
12040
- flex-direction: column;
12041
- flex-shrink: 0;
12042
- }
12043
- .rt-SidebarGroup:where(:not(:first-child)) {
12044
- margin-top: var(--space-4);
12045
- }
12046
12028
  .rt-SidebarGroupLabel {
12047
12029
  display: flex;
12048
12030
  align-items: center;
12049
- min-height: var(--sidebar-item-height);
12050
- padding-top: var(--sidebar-item-padding-y);
12051
- padding-bottom: var(--sidebar-item-padding-y);
12052
- padding-left: var(--sidebar-item-padding-left);
12053
- padding-right: var(--sidebar-item-padding-right);
12031
+ min-height: var(--base-menu-item-height);
12032
+ padding-top: var(--base-menu-item-padding-y);
12033
+ padding-bottom: var(--base-menu-item-padding-y);
12034
+ padding-left: var(--base-menu-item-padding-left);
12035
+ padding-right: var(--base-menu-item-padding-right);
12054
12036
  box-sizing: border-box;
12055
12037
  color: var(--gray-a10);
12056
12038
  -webkit-user-select: none;
12057
12039
  user-select: none;
12058
12040
  cursor: default;
12059
- flex-shrink: 0;
12060
12041
  }
12061
- .rt-SidebarGroupContent {
12062
- display: flex;
12063
- flex-direction: column;
12064
- flex-shrink: 0;
12042
+ :where(.rt-SidebarMenuItem) + .rt-SidebarGroupLabel {
12043
+ margin-top: var(--space-2);
12065
12044
  }
12066
12045
  .rt-SidebarContainer:where(.rt-r-size-1) {
12067
12046
  --sidebar-base-padding: var(--space-3);
12068
- --sidebar-content-padding: var(--space-1);
12069
- --sidebar-item-padding-left: var(--space-2);
12070
- --sidebar-item-padding-right: var(--space-2);
12071
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12072
- --sidebar-item-height: var(--space-5);
12073
12047
  }
12074
12048
  .rt-SidebarContainer:where(.rt-r-size-2) {
12075
12049
  --sidebar-base-padding: var(--space-4);
12076
- --sidebar-content-padding: var(--space-2);
12077
- --sidebar-item-padding-left: var(--space-3);
12078
- --sidebar-item-padding-right: var(--space-3);
12079
- --sidebar-item-padding-y: var(--space-1);
12080
- --sidebar-item-height: var(--space-6);
12081
12050
  }
12082
12051
  .rt-SidebarContent:where(.rt-r-size-1) {
12083
- --sidebar-content-padding: var(--space-1);
12084
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12085
- --sidebar-item-padding-right: var(--space-2);
12086
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12087
- --sidebar-item-height: var(--space-5);
12088
- border-radius: var(--radius-3);
12089
- }
12090
- .rt-SidebarContent:where(.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12091
- --sidebar-item-padding-left: var(--space-2);
12092
- }
12093
- .rt-SidebarContent:where(.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12094
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12052
+ --sidebar-content-padding: var(--base-menu-content-padding);
12053
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12054
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12055
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12056
+ --sidebar-item-height: var(--base-menu-item-height);
12095
12057
  }
12096
12058
  .rt-SidebarContent:where(.rt-r-size-2) {
12097
- --sidebar-content-padding: var(--space-2);
12098
- --sidebar-item-padding-left: var(--space-3);
12099
- --sidebar-item-padding-right: var(--space-3);
12100
- --sidebar-item-padding-y: var(--space-1);
12101
- --sidebar-item-height: var(--space-6);
12102
- border-radius: var(--radius-4);
12103
- }
12104
- .rt-SidebarContent:where(.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12105
- --sidebar-item-padding-left: var(--space-3);
12106
- }
12107
- .rt-SidebarContent:where(.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12108
- --sidebar-item-padding-left: var(--space-5);
12059
+ --sidebar-content-padding: var(--base-menu-content-padding);
12060
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12061
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12062
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12063
+ --sidebar-item-height: var(--base-menu-item-height);
12109
12064
  }
12110
12065
  .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) {
12066
+ gap: var(--component-gap-2);
12111
12067
  font-size: var(--font-size-1);
12112
12068
  line-height: var(--line-height-1);
12113
12069
  letter-spacing: var(--letter-spacing-1);
@@ -12124,38 +12080,12 @@
12124
12080
  flex-shrink: 0;
12125
12081
  margin-left: auto;
12126
12082
  }
12127
- .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12128
- font-size: var(--font-size-1);
12129
- line-height: var(--line-height-1);
12130
- letter-spacing: var(--letter-spacing-1);
12131
- }
12132
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12133
- font-size: var(--font-size-1);
12134
- line-height: var(--line-height-1);
12135
- letter-spacing: var(--letter-spacing-1);
12136
- border-radius: var(--radius-1);
12137
- }
12138
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12139
- width: var(--content-icon-size-1);
12140
- height: var(--content-icon-size-1);
12141
- flex-shrink: 0;
12142
- }
12143
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12144
- font-size: var(--font-size-1);
12145
- line-height: var(--line-height-1);
12146
- letter-spacing: var(--letter-spacing-1);
12147
- border-radius: var(--radius-1);
12148
- }
12149
- .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12150
- width: var(--content-icon-size-1);
12151
- height: var(--content-icon-size-1);
12152
- flex-shrink: 0;
12153
- }
12154
12083
  .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) {
12084
+ gap: var(--component-gap-3);
12155
12085
  font-size: var(--font-size-2);
12156
12086
  line-height: var(--line-height-2);
12157
12087
  letter-spacing: var(--letter-spacing-2);
12158
- border-radius: var(--radius-3);
12088
+ border-radius: var(--radius-2);
12159
12089
  }
12160
12090
  .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12161
12091
  width: var(--content-icon-size-2);
@@ -12168,79 +12098,29 @@
12168
12098
  flex-shrink: 0;
12169
12099
  margin-left: auto;
12170
12100
  }
12171
- .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12172
- font-size: var(--font-size-2);
12173
- line-height: var(--line-height-2);
12174
- letter-spacing: var(--letter-spacing-2);
12175
- }
12176
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12177
- font-size: var(--font-size-2);
12178
- line-height: var(--line-height-2);
12179
- letter-spacing: var(--letter-spacing-2);
12180
- border-radius: var(--radius-3);
12181
- }
12182
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12183
- width: var(--content-icon-size-2);
12184
- height: var(--content-icon-size-2);
12185
- flex-shrink: 0;
12186
- }
12187
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12188
- font-size: var(--font-size-2);
12189
- line-height: var(--line-height-2);
12190
- letter-spacing: var(--letter-spacing-2);
12191
- border-radius: var(--radius-3);
12192
- }
12193
- .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12194
- width: var(--content-icon-size-2);
12195
- height: var(--content-icon-size-2);
12196
- flex-shrink: 0;
12197
- }
12198
12101
  @media (min-width: 520px) {
12199
12102
  .rt-SidebarContainer:where(.xs\:rt-r-size-1) {
12200
12103
  --sidebar-base-padding: var(--space-3);
12201
- --sidebar-content-padding: var(--space-1);
12202
- --sidebar-item-padding-left: var(--space-2);
12203
- --sidebar-item-padding-right: var(--space-2);
12204
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12205
- --sidebar-item-height: var(--space-5);
12206
12104
  }
12207
12105
  .rt-SidebarContainer:where(.xs\:rt-r-size-2) {
12208
12106
  --sidebar-base-padding: var(--space-4);
12209
- --sidebar-content-padding: var(--space-2);
12210
- --sidebar-item-padding-left: var(--space-3);
12211
- --sidebar-item-padding-right: var(--space-3);
12212
- --sidebar-item-padding-y: var(--space-1);
12213
- --sidebar-item-height: var(--space-6);
12214
12107
  }
12215
12108
  .rt-SidebarContent:where(.xs\:rt-r-size-1) {
12216
- --sidebar-content-padding: var(--space-1);
12217
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12218
- --sidebar-item-padding-right: var(--space-2);
12219
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12220
- --sidebar-item-height: var(--space-5);
12221
- border-radius: var(--radius-3);
12222
- }
12223
- .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12224
- --sidebar-item-padding-left: var(--space-2);
12225
- }
12226
- .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12227
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12109
+ --sidebar-content-padding: var(--base-menu-content-padding);
12110
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12111
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12112
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12113
+ --sidebar-item-height: var(--base-menu-item-height);
12228
12114
  }
12229
12115
  .rt-SidebarContent:where(.xs\:rt-r-size-2) {
12230
- --sidebar-content-padding: var(--space-2);
12231
- --sidebar-item-padding-left: var(--space-3);
12232
- --sidebar-item-padding-right: var(--space-3);
12233
- --sidebar-item-padding-y: var(--space-1);
12234
- --sidebar-item-height: var(--space-6);
12235
- border-radius: var(--radius-4);
12236
- }
12237
- .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12238
- --sidebar-item-padding-left: var(--space-3);
12239
- }
12240
- .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12241
- --sidebar-item-padding-left: var(--space-5);
12116
+ --sidebar-content-padding: var(--base-menu-content-padding);
12117
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12118
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12119
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12120
+ --sidebar-item-height: var(--base-menu-item-height);
12242
12121
  }
12243
12122
  .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
12123
+ gap: var(--component-gap-2);
12244
12124
  font-size: var(--font-size-1);
12245
12125
  line-height: var(--line-height-1);
12246
12126
  letter-spacing: var(--letter-spacing-1);
@@ -12257,38 +12137,12 @@
12257
12137
  flex-shrink: 0;
12258
12138
  margin-left: auto;
12259
12139
  }
12260
- .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12261
- font-size: var(--font-size-1);
12262
- line-height: var(--line-height-1);
12263
- letter-spacing: var(--letter-spacing-1);
12264
- }
12265
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12266
- font-size: var(--font-size-1);
12267
- line-height: var(--line-height-1);
12268
- letter-spacing: var(--letter-spacing-1);
12269
- border-radius: var(--radius-1);
12270
- }
12271
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12272
- width: var(--content-icon-size-1);
12273
- height: var(--content-icon-size-1);
12274
- flex-shrink: 0;
12275
- }
12276
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12277
- font-size: var(--font-size-1);
12278
- line-height: var(--line-height-1);
12279
- letter-spacing: var(--letter-spacing-1);
12280
- border-radius: var(--radius-1);
12281
- }
12282
- .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12283
- width: var(--content-icon-size-1);
12284
- height: var(--content-icon-size-1);
12285
- flex-shrink: 0;
12286
- }
12287
12140
  .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
12141
+ gap: var(--component-gap-3);
12288
12142
  font-size: var(--font-size-2);
12289
12143
  line-height: var(--line-height-2);
12290
12144
  letter-spacing: var(--letter-spacing-2);
12291
- border-radius: var(--radius-3);
12145
+ border-radius: var(--radius-2);
12292
12146
  }
12293
12147
  .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12294
12148
  width: var(--content-icon-size-2);
@@ -12301,80 +12155,30 @@
12301
12155
  flex-shrink: 0;
12302
12156
  margin-left: auto;
12303
12157
  }
12304
- .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12305
- font-size: var(--font-size-2);
12306
- line-height: var(--line-height-2);
12307
- letter-spacing: var(--letter-spacing-2);
12308
- }
12309
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12310
- font-size: var(--font-size-2);
12311
- line-height: var(--line-height-2);
12312
- letter-spacing: var(--letter-spacing-2);
12313
- border-radius: var(--radius-3);
12314
- }
12315
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12316
- width: var(--content-icon-size-2);
12317
- height: var(--content-icon-size-2);
12318
- flex-shrink: 0;
12319
- }
12320
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12321
- font-size: var(--font-size-2);
12322
- line-height: var(--line-height-2);
12323
- letter-spacing: var(--letter-spacing-2);
12324
- border-radius: var(--radius-3);
12325
- }
12326
- .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12327
- width: var(--content-icon-size-2);
12328
- height: var(--content-icon-size-2);
12329
- flex-shrink: 0;
12330
- }
12331
12158
  }
12332
12159
  @media (min-width: 768px) {
12333
12160
  .rt-SidebarContainer:where(.sm\:rt-r-size-1) {
12334
12161
  --sidebar-base-padding: var(--space-3);
12335
- --sidebar-content-padding: var(--space-1);
12336
- --sidebar-item-padding-left: var(--space-2);
12337
- --sidebar-item-padding-right: var(--space-2);
12338
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12339
- --sidebar-item-height: var(--space-5);
12340
12162
  }
12341
12163
  .rt-SidebarContainer:where(.sm\:rt-r-size-2) {
12342
12164
  --sidebar-base-padding: var(--space-4);
12343
- --sidebar-content-padding: var(--space-2);
12344
- --sidebar-item-padding-left: var(--space-3);
12345
- --sidebar-item-padding-right: var(--space-3);
12346
- --sidebar-item-padding-y: var(--space-1);
12347
- --sidebar-item-height: var(--space-6);
12348
12165
  }
12349
12166
  .rt-SidebarContent:where(.sm\:rt-r-size-1) {
12350
- --sidebar-content-padding: var(--space-1);
12351
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12352
- --sidebar-item-padding-right: var(--space-2);
12353
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12354
- --sidebar-item-height: var(--space-5);
12355
- border-radius: var(--radius-3);
12356
- }
12357
- .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12358
- --sidebar-item-padding-left: var(--space-2);
12359
- }
12360
- .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12361
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12167
+ --sidebar-content-padding: var(--base-menu-content-padding);
12168
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12169
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12170
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12171
+ --sidebar-item-height: var(--base-menu-item-height);
12362
12172
  }
12363
12173
  .rt-SidebarContent:where(.sm\:rt-r-size-2) {
12364
- --sidebar-content-padding: var(--space-2);
12365
- --sidebar-item-padding-left: var(--space-3);
12366
- --sidebar-item-padding-right: var(--space-3);
12367
- --sidebar-item-padding-y: var(--space-1);
12368
- --sidebar-item-height: var(--space-6);
12369
- border-radius: var(--radius-4);
12370
- }
12371
- .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12372
- --sidebar-item-padding-left: var(--space-3);
12373
- }
12374
- .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12375
- --sidebar-item-padding-left: var(--space-5);
12174
+ --sidebar-content-padding: var(--base-menu-content-padding);
12175
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12176
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12177
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12178
+ --sidebar-item-height: var(--base-menu-item-height);
12376
12179
  }
12377
12180
  .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
12181
+ gap: var(--component-gap-2);
12378
12182
  font-size: var(--font-size-1);
12379
12183
  line-height: var(--line-height-1);
12380
12184
  letter-spacing: var(--letter-spacing-1);
@@ -12391,38 +12195,12 @@
12391
12195
  flex-shrink: 0;
12392
12196
  margin-left: auto;
12393
12197
  }
12394
- .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12395
- font-size: var(--font-size-1);
12396
- line-height: var(--line-height-1);
12397
- letter-spacing: var(--letter-spacing-1);
12398
- }
12399
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12400
- font-size: var(--font-size-1);
12401
- line-height: var(--line-height-1);
12402
- letter-spacing: var(--letter-spacing-1);
12403
- border-radius: var(--radius-1);
12404
- }
12405
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12406
- width: var(--content-icon-size-1);
12407
- height: var(--content-icon-size-1);
12408
- flex-shrink: 0;
12409
- }
12410
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12411
- font-size: var(--font-size-1);
12412
- line-height: var(--line-height-1);
12413
- letter-spacing: var(--letter-spacing-1);
12414
- border-radius: var(--radius-1);
12415
- }
12416
- .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12417
- width: var(--content-icon-size-1);
12418
- height: var(--content-icon-size-1);
12419
- flex-shrink: 0;
12420
- }
12421
12198
  .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
12199
+ gap: var(--component-gap-3);
12422
12200
  font-size: var(--font-size-2);
12423
12201
  line-height: var(--line-height-2);
12424
12202
  letter-spacing: var(--letter-spacing-2);
12425
- border-radius: var(--radius-3);
12203
+ border-radius: var(--radius-2);
12426
12204
  }
12427
12205
  .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12428
12206
  width: var(--content-icon-size-2);
@@ -12435,80 +12213,30 @@
12435
12213
  flex-shrink: 0;
12436
12214
  margin-left: auto;
12437
12215
  }
12438
- .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12439
- font-size: var(--font-size-2);
12440
- line-height: var(--line-height-2);
12441
- letter-spacing: var(--letter-spacing-2);
12442
- }
12443
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12444
- font-size: var(--font-size-2);
12445
- line-height: var(--line-height-2);
12446
- letter-spacing: var(--letter-spacing-2);
12447
- border-radius: var(--radius-3);
12448
- }
12449
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12450
- width: var(--content-icon-size-2);
12451
- height: var(--content-icon-size-2);
12452
- flex-shrink: 0;
12453
- }
12454
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12455
- font-size: var(--font-size-2);
12456
- line-height: var(--line-height-2);
12457
- letter-spacing: var(--letter-spacing-2);
12458
- border-radius: var(--radius-3);
12459
- }
12460
- .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12461
- width: var(--content-icon-size-2);
12462
- height: var(--content-icon-size-2);
12463
- flex-shrink: 0;
12464
- }
12465
12216
  }
12466
12217
  @media (min-width: 1024px) {
12467
12218
  .rt-SidebarContainer:where(.md\:rt-r-size-1) {
12468
12219
  --sidebar-base-padding: var(--space-3);
12469
- --sidebar-content-padding: var(--space-1);
12470
- --sidebar-item-padding-left: var(--space-2);
12471
- --sidebar-item-padding-right: var(--space-2);
12472
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12473
- --sidebar-item-height: var(--space-5);
12474
12220
  }
12475
12221
  .rt-SidebarContainer:where(.md\:rt-r-size-2) {
12476
12222
  --sidebar-base-padding: var(--space-4);
12477
- --sidebar-content-padding: var(--space-2);
12478
- --sidebar-item-padding-left: var(--space-3);
12479
- --sidebar-item-padding-right: var(--space-3);
12480
- --sidebar-item-padding-y: var(--space-1);
12481
- --sidebar-item-height: var(--space-6);
12482
12223
  }
12483
12224
  .rt-SidebarContent:where(.md\:rt-r-size-1) {
12484
- --sidebar-content-padding: var(--space-1);
12485
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12486
- --sidebar-item-padding-right: var(--space-2);
12487
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12488
- --sidebar-item-height: var(--space-5);
12489
- border-radius: var(--radius-3);
12490
- }
12491
- .rt-SidebarContent:where(.md\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12492
- --sidebar-item-padding-left: var(--space-2);
12493
- }
12494
- .rt-SidebarContent:where(.md\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12495
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12225
+ --sidebar-content-padding: var(--base-menu-content-padding);
12226
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12227
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12228
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12229
+ --sidebar-item-height: var(--base-menu-item-height);
12496
12230
  }
12497
12231
  .rt-SidebarContent:where(.md\:rt-r-size-2) {
12498
- --sidebar-content-padding: var(--space-2);
12499
- --sidebar-item-padding-left: var(--space-3);
12500
- --sidebar-item-padding-right: var(--space-3);
12501
- --sidebar-item-padding-y: var(--space-1);
12502
- --sidebar-item-height: var(--space-6);
12503
- border-radius: var(--radius-4);
12504
- }
12505
- .rt-SidebarContent:where(.md\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12506
- --sidebar-item-padding-left: var(--space-3);
12507
- }
12508
- .rt-SidebarContent:where(.md\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12509
- --sidebar-item-padding-left: var(--space-5);
12232
+ --sidebar-content-padding: var(--base-menu-content-padding);
12233
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12234
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12235
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12236
+ --sidebar-item-height: var(--base-menu-item-height);
12510
12237
  }
12511
12238
  .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
12239
+ gap: var(--component-gap-2);
12512
12240
  font-size: var(--font-size-1);
12513
12241
  line-height: var(--line-height-1);
12514
12242
  letter-spacing: var(--letter-spacing-1);
@@ -12525,38 +12253,12 @@
12525
12253
  flex-shrink: 0;
12526
12254
  margin-left: auto;
12527
12255
  }
12528
- .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12529
- font-size: var(--font-size-1);
12530
- line-height: var(--line-height-1);
12531
- letter-spacing: var(--letter-spacing-1);
12532
- }
12533
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12534
- font-size: var(--font-size-1);
12535
- line-height: var(--line-height-1);
12536
- letter-spacing: var(--letter-spacing-1);
12537
- border-radius: var(--radius-1);
12538
- }
12539
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12540
- width: var(--content-icon-size-1);
12541
- height: var(--content-icon-size-1);
12542
- flex-shrink: 0;
12543
- }
12544
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12545
- font-size: var(--font-size-1);
12546
- line-height: var(--line-height-1);
12547
- letter-spacing: var(--letter-spacing-1);
12548
- border-radius: var(--radius-1);
12549
- }
12550
- .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12551
- width: var(--content-icon-size-1);
12552
- height: var(--content-icon-size-1);
12553
- flex-shrink: 0;
12554
- }
12555
12256
  .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
12257
+ gap: var(--component-gap-3);
12556
12258
  font-size: var(--font-size-2);
12557
12259
  line-height: var(--line-height-2);
12558
12260
  letter-spacing: var(--letter-spacing-2);
12559
- border-radius: var(--radius-3);
12261
+ border-radius: var(--radius-2);
12560
12262
  }
12561
12263
  .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12562
12264
  width: var(--content-icon-size-2);
@@ -12569,80 +12271,30 @@
12569
12271
  flex-shrink: 0;
12570
12272
  margin-left: auto;
12571
12273
  }
12572
- .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12573
- font-size: var(--font-size-2);
12574
- line-height: var(--line-height-2);
12575
- letter-spacing: var(--letter-spacing-2);
12576
- }
12577
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12578
- font-size: var(--font-size-2);
12579
- line-height: var(--line-height-2);
12580
- letter-spacing: var(--letter-spacing-2);
12581
- border-radius: var(--radius-3);
12582
- }
12583
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12584
- width: var(--content-icon-size-2);
12585
- height: var(--content-icon-size-2);
12586
- flex-shrink: 0;
12587
- }
12588
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12589
- font-size: var(--font-size-2);
12590
- line-height: var(--line-height-2);
12591
- letter-spacing: var(--letter-spacing-2);
12592
- border-radius: var(--radius-3);
12593
- }
12594
- .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12595
- width: var(--content-icon-size-2);
12596
- height: var(--content-icon-size-2);
12597
- flex-shrink: 0;
12598
- }
12599
- }
12600
- @media (min-width: 1280px) {
12601
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
12602
- --sidebar-base-padding: var(--space-3);
12603
- --sidebar-content-padding: var(--space-1);
12604
- --sidebar-item-padding-left: var(--space-2);
12605
- --sidebar-item-padding-right: var(--space-2);
12606
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12607
- --sidebar-item-height: var(--space-5);
12274
+ }
12275
+ @media (min-width: 1280px) {
12276
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
12277
+ --sidebar-base-padding: var(--space-3);
12608
12278
  }
12609
12279
  .rt-SidebarContainer:where(.lg\:rt-r-size-2) {
12610
12280
  --sidebar-base-padding: var(--space-4);
12611
- --sidebar-content-padding: var(--space-2);
12612
- --sidebar-item-padding-left: var(--space-3);
12613
- --sidebar-item-padding-right: var(--space-3);
12614
- --sidebar-item-padding-y: var(--space-1);
12615
- --sidebar-item-height: var(--space-6);
12616
12281
  }
12617
12282
  .rt-SidebarContent:where(.lg\:rt-r-size-1) {
12618
- --sidebar-content-padding: var(--space-1);
12619
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12620
- --sidebar-item-padding-right: var(--space-2);
12621
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12622
- --sidebar-item-height: var(--space-5);
12623
- border-radius: var(--radius-3);
12624
- }
12625
- .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12626
- --sidebar-item-padding-left: var(--space-2);
12627
- }
12628
- .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12629
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12283
+ --sidebar-content-padding: var(--base-menu-content-padding);
12284
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12285
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12286
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12287
+ --sidebar-item-height: var(--base-menu-item-height);
12630
12288
  }
12631
12289
  .rt-SidebarContent:where(.lg\:rt-r-size-2) {
12632
- --sidebar-content-padding: var(--space-2);
12633
- --sidebar-item-padding-left: var(--space-3);
12634
- --sidebar-item-padding-right: var(--space-3);
12635
- --sidebar-item-padding-y: var(--space-1);
12636
- --sidebar-item-height: var(--space-6);
12637
- border-radius: var(--radius-4);
12638
- }
12639
- .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12640
- --sidebar-item-padding-left: var(--space-3);
12641
- }
12642
- .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12643
- --sidebar-item-padding-left: var(--space-5);
12290
+ --sidebar-content-padding: var(--base-menu-content-padding);
12291
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12292
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12293
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12294
+ --sidebar-item-height: var(--base-menu-item-height);
12644
12295
  }
12645
12296
  .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
12297
+ gap: var(--component-gap-2);
12646
12298
  font-size: var(--font-size-1);
12647
12299
  line-height: var(--line-height-1);
12648
12300
  letter-spacing: var(--letter-spacing-1);
@@ -12659,38 +12311,12 @@
12659
12311
  flex-shrink: 0;
12660
12312
  margin-left: auto;
12661
12313
  }
12662
- .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12663
- font-size: var(--font-size-1);
12664
- line-height: var(--line-height-1);
12665
- letter-spacing: var(--letter-spacing-1);
12666
- }
12667
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12668
- font-size: var(--font-size-1);
12669
- line-height: var(--line-height-1);
12670
- letter-spacing: var(--letter-spacing-1);
12671
- border-radius: var(--radius-1);
12672
- }
12673
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12674
- width: var(--content-icon-size-1);
12675
- height: var(--content-icon-size-1);
12676
- flex-shrink: 0;
12677
- }
12678
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12679
- font-size: var(--font-size-1);
12680
- line-height: var(--line-height-1);
12681
- letter-spacing: var(--letter-spacing-1);
12682
- border-radius: var(--radius-1);
12683
- }
12684
- .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12685
- width: var(--content-icon-size-1);
12686
- height: var(--content-icon-size-1);
12687
- flex-shrink: 0;
12688
- }
12689
12314
  .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
12315
+ gap: var(--component-gap-3);
12690
12316
  font-size: var(--font-size-2);
12691
12317
  line-height: var(--line-height-2);
12692
12318
  letter-spacing: var(--letter-spacing-2);
12693
- border-radius: var(--radius-3);
12319
+ border-radius: var(--radius-2);
12694
12320
  }
12695
12321
  .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12696
12322
  width: var(--content-icon-size-2);
@@ -12703,80 +12329,30 @@
12703
12329
  flex-shrink: 0;
12704
12330
  margin-left: auto;
12705
12331
  }
12706
- .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12707
- font-size: var(--font-size-2);
12708
- line-height: var(--line-height-2);
12709
- letter-spacing: var(--letter-spacing-2);
12710
- }
12711
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12712
- font-size: var(--font-size-2);
12713
- line-height: var(--line-height-2);
12714
- letter-spacing: var(--letter-spacing-2);
12715
- border-radius: var(--radius-3);
12716
- }
12717
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12718
- width: var(--content-icon-size-2);
12719
- height: var(--content-icon-size-2);
12720
- flex-shrink: 0;
12721
- }
12722
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12723
- font-size: var(--font-size-2);
12724
- line-height: var(--line-height-2);
12725
- letter-spacing: var(--letter-spacing-2);
12726
- border-radius: var(--radius-3);
12727
- }
12728
- .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12729
- width: var(--content-icon-size-2);
12730
- height: var(--content-icon-size-2);
12731
- flex-shrink: 0;
12732
- }
12733
12332
  }
12734
12333
  @media (min-width: 1640px) {
12735
12334
  .rt-SidebarContainer:where(.xl\:rt-r-size-1) {
12736
12335
  --sidebar-base-padding: var(--space-3);
12737
- --sidebar-content-padding: var(--space-1);
12738
- --sidebar-item-padding-left: var(--space-2);
12739
- --sidebar-item-padding-right: var(--space-2);
12740
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12741
- --sidebar-item-height: var(--space-5);
12742
12336
  }
12743
12337
  .rt-SidebarContainer:where(.xl\:rt-r-size-2) {
12744
12338
  --sidebar-base-padding: var(--space-4);
12745
- --sidebar-content-padding: var(--space-2);
12746
- --sidebar-item-padding-left: var(--space-3);
12747
- --sidebar-item-padding-right: var(--space-3);
12748
- --sidebar-item-padding-y: var(--space-1);
12749
- --sidebar-item-height: var(--space-6);
12750
12339
  }
12751
12340
  .rt-SidebarContent:where(.xl\:rt-r-size-1) {
12752
- --sidebar-content-padding: var(--space-1);
12753
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12754
- --sidebar-item-padding-right: var(--space-2);
12755
- --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
12756
- --sidebar-item-height: var(--space-5);
12757
- border-radius: var(--radius-3);
12758
- }
12759
- .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12760
- --sidebar-item-padding-left: var(--space-2);
12761
- }
12762
- .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12763
- --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
12341
+ --sidebar-content-padding: var(--base-menu-content-padding);
12342
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12343
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12344
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12345
+ --sidebar-item-height: var(--base-menu-item-height);
12764
12346
  }
12765
12347
  .rt-SidebarContent:where(.xl\:rt-r-size-2) {
12766
- --sidebar-content-padding: var(--space-2);
12767
- --sidebar-item-padding-left: var(--space-3);
12768
- --sidebar-item-padding-right: var(--space-3);
12769
- --sidebar-item-padding-y: var(--space-1);
12770
- --sidebar-item-height: var(--space-6);
12771
- border-radius: var(--radius-4);
12772
- }
12773
- .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
12774
- --sidebar-item-padding-left: var(--space-3);
12775
- }
12776
- .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
12777
- --sidebar-item-padding-left: var(--space-5);
12348
+ --sidebar-content-padding: var(--base-menu-content-padding);
12349
+ --sidebar-item-padding-left: var(--base-menu-item-padding-left);
12350
+ --sidebar-item-padding-right: var(--base-menu-item-padding-right);
12351
+ --sidebar-item-padding-y: var(--base-menu-item-padding-y);
12352
+ --sidebar-item-height: var(--base-menu-item-height);
12778
12353
  }
12779
12354
  .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
12355
+ gap: var(--component-gap-2);
12780
12356
  font-size: var(--font-size-1);
12781
12357
  line-height: var(--line-height-1);
12782
12358
  letter-spacing: var(--letter-spacing-1);
@@ -12793,38 +12369,12 @@
12793
12369
  flex-shrink: 0;
12794
12370
  margin-left: auto;
12795
12371
  }
12796
- .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
12797
- font-size: var(--font-size-1);
12798
- line-height: var(--line-height-1);
12799
- letter-spacing: var(--letter-spacing-1);
12800
- }
12801
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12802
- font-size: var(--font-size-1);
12803
- line-height: var(--line-height-1);
12804
- letter-spacing: var(--letter-spacing-1);
12805
- border-radius: var(--radius-1);
12806
- }
12807
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12808
- width: var(--content-icon-size-1);
12809
- height: var(--content-icon-size-1);
12810
- flex-shrink: 0;
12811
- }
12812
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12813
- font-size: var(--font-size-1);
12814
- line-height: var(--line-height-1);
12815
- letter-spacing: var(--letter-spacing-1);
12816
- border-radius: var(--radius-1);
12817
- }
12818
- .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12819
- width: var(--content-icon-size-1);
12820
- height: var(--content-icon-size-1);
12821
- flex-shrink: 0;
12822
- }
12823
12372
  .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
12373
+ gap: var(--component-gap-3);
12824
12374
  font-size: var(--font-size-2);
12825
12375
  line-height: var(--line-height-2);
12826
12376
  letter-spacing: var(--letter-spacing-2);
12827
- border-radius: var(--radius-3);
12377
+ border-radius: var(--radius-2);
12828
12378
  }
12829
12379
  .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
12830
12380
  width: var(--content-icon-size-2);
@@ -12837,33 +12387,6 @@
12837
12387
  flex-shrink: 0;
12838
12388
  margin-left: auto;
12839
12389
  }
12840
- .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
12841
- font-size: var(--font-size-2);
12842
- line-height: var(--line-height-2);
12843
- letter-spacing: var(--letter-spacing-2);
12844
- }
12845
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
12846
- font-size: var(--font-size-2);
12847
- line-height: var(--line-height-2);
12848
- letter-spacing: var(--letter-spacing-2);
12849
- border-radius: var(--radius-3);
12850
- }
12851
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
12852
- width: var(--content-icon-size-2);
12853
- height: var(--content-icon-size-2);
12854
- flex-shrink: 0;
12855
- }
12856
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
12857
- font-size: var(--font-size-2);
12858
- line-height: var(--line-height-2);
12859
- letter-spacing: var(--letter-spacing-2);
12860
- border-radius: var(--radius-3);
12861
- }
12862
- .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
12863
- width: var(--content-icon-size-2);
12864
- height: var(--content-icon-size-2);
12865
- flex-shrink: 0;
12866
- }
12867
12390
  }
12868
12391
  .rt-SidebarContainer:where(.rt-variant-ghost) {
12869
12392
  background-color: transparent;
@@ -12872,21 +12395,21 @@
12872
12395
  border: none;
12873
12396
  }
12874
12397
  .rt-SidebarContainer:where(.rt-variant-soft) {
12875
- background-color: var(--accent-2);
12398
+ background-color: var(--gray-2);
12876
12399
  }
12877
12400
  :where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-soft) {
12878
- background-color: var(--accent-a2);
12401
+ background-color: var(--gray-a2);
12879
12402
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
12880
12403
  backdrop-filter: var(--backdrop-filter-panel);
12881
12404
  }
12882
12405
  .rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='solid']) {
12883
- background-color: var(--accent-2);
12406
+ background-color: var(--gray-2);
12884
12407
  -webkit-backdrop-filter: none;
12885
12408
  backdrop-filter: none;
12886
12409
  --backdrop-filter-components: none;
12887
12410
  }
12888
12411
  .rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='translucent']) {
12889
- background-color: var(--accent-a2);
12412
+ background-color: var(--gray-a2);
12890
12413
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
12891
12414
  backdrop-filter: var(--backdrop-filter-panel);
12892
12415
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -12895,6 +12418,48 @@
12895
12418
  :where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-ghost) {
12896
12419
  box-shadow: var(--shadow-4);
12897
12420
  }
12421
+ .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) {
12422
+ transition: var(--transition-menu);
12423
+ }
12424
+ @media (prefers-reduced-motion: reduce) {
12425
+ .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) {
12426
+ transition: none;
12427
+ }
12428
+ }
12429
+ :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)) {
12430
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12431
+ }
12432
+ .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']) {
12433
+ background-color: var(--gray-3);
12434
+ }
12435
+ :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'])) {
12436
+ background-color: var(--gray-a3);
12437
+ }
12438
+ .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']) {
12439
+ background-color: var(--gray-3);
12440
+ -webkit-backdrop-filter: none;
12441
+ backdrop-filter: none;
12442
+ --backdrop-filter-components: none;
12443
+ }
12444
+ .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']) {
12445
+ background-color: var(--gray-a3);
12446
+ }
12447
+ :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)) {
12448
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12449
+ }
12450
+ .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]) {
12451
+ background-color: var(--accent-9);
12452
+ color: var(--accent-contrast);
12453
+ }
12454
+ .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) {
12455
+ color: var(--accent-contrast);
12456
+ }
12457
+ .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) {
12458
+ color: inherit !important;
12459
+ }
12460
+ .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)) {
12461
+ color: inherit !important;
12462
+ }
12898
12463
  .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]) {
12899
12464
  background-color: var(--accent-9);
12900
12465
  color: var(--accent-contrast);
@@ -12902,138 +12467,205 @@
12902
12467
  .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) {
12903
12468
  color: inherit !important;
12904
12469
  }
12905
- .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']) {
12470
+ .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)) {
12906
12471
  color: inherit !important;
12907
12472
  }
12908
- .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]) {
12473
+ .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]) {
12474
+ background-color: var(--accent-12);
12475
+ color: var(--accent-1);
12476
+ }
12477
+ .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) {
12478
+ color: var(--accent-1);
12479
+ }
12480
+ .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) {
12481
+ color: inherit !important;
12482
+ }
12483
+ .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)) {
12484
+ color: inherit !important;
12485
+ }
12486
+ .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]) {
12909
12487
  background-color: var(--accent-9);
12910
12488
  color: var(--accent-contrast);
12911
12489
  }
12912
- .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) {
12490
+ .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) {
12913
12491
  color: inherit !important;
12914
12492
  }
12915
- .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']) {
12493
+ .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)) {
12916
12494
  color: inherit !important;
12917
12495
  }
12918
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
12919
- .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
12920
- .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
12921
- .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
12922
- .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
12923
- .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) {
12496
+ .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]) {
12924
12497
  background-color: var(--accent-12);
12925
12498
  color: var(--accent-1);
12926
12499
  }
12927
- .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) {
12500
+ .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) {
12928
12501
  color: inherit !important;
12929
12502
  }
12930
- .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']) {
12503
+ .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)) {
12931
12504
  color: inherit !important;
12932
12505
  }
12933
- .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]) {
12506
+ .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]) {
12934
12507
  background-color: var(--accent-9);
12935
12508
  color: var(--accent-contrast);
12936
12509
  }
12937
- .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) {
12510
+ .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) {
12938
12511
  color: inherit !important;
12939
12512
  }
12940
- .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']) {
12513
+ .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)) {
12941
12514
  color: inherit !important;
12942
12515
  }
12943
- .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]) {
12516
+ .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) {
12517
+ transition: var(--transition-menu);
12518
+ }
12519
+ @media (prefers-reduced-motion: reduce) {
12520
+ .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) {
12521
+ transition: none;
12522
+ }
12523
+ }
12524
+ :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)) {
12525
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12526
+ }
12527
+ .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']) {
12944
12528
  background-color: var(--accent-3);
12945
- color: var(--accent-12);
12946
12529
  }
12947
- :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])) {
12530
+ :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'])) {
12948
12531
  background-color: var(--accent-a3);
12949
- color: var(--accent-a12);
12950
- -webkit-backdrop-filter: var(--backdrop-filter-components);
12951
- backdrop-filter: var(--backdrop-filter-components);
12952
12532
  }
12953
- :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])) {
12533
+ .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']) {
12954
12534
  background-color: var(--accent-3);
12955
- color: var(--accent-12);
12956
12535
  -webkit-backdrop-filter: none;
12957
12536
  backdrop-filter: none;
12958
12537
  --backdrop-filter-components: none;
12959
12538
  }
12960
- :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])) {
12539
+ .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']) {
12961
12540
  background-color: var(--accent-a3);
12962
- color: var(--accent-a12);
12963
- -webkit-backdrop-filter: var(--backdrop-filter-components);
12964
- backdrop-filter: var(--backdrop-filter-components);
12965
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
12966
12541
  }
12967
- :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])) {
12542
+ :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)) {
12543
+ transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12544
+ }
12545
+ .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]) {
12546
+ background-color: var(--accent-4);
12547
+ }
12548
+ :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])) {
12549
+ background-color: var(--accent-a4);
12550
+ }
12551
+ .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']) {
12552
+ background-color: var(--accent-4);
12968
12553
  -webkit-backdrop-filter: none;
12969
12554
  backdrop-filter: none;
12555
+ --backdrop-filter-components: none;
12970
12556
  }
12971
- .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']) {
12557
+ .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']) {
12558
+ background-color: var(--accent-a4);
12559
+ }
12560
+ .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)) {
12972
12561
  color: var(--gray-11) !important;
12973
12562
  }
12974
- .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]) {
12563
+ .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]) {
12975
12564
  background-color: var(--accent-3);
12565
+ color: var(--accent-12);
12976
12566
  }
12977
- :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])) {
12567
+ :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])) {
12978
12568
  background-color: var(--accent-a3);
12979
- -webkit-backdrop-filter: var(--backdrop-filter-components);
12980
- backdrop-filter: var(--backdrop-filter-components);
12569
+ color: var(--accent-a12);
12981
12570
  }
12982
- :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])) {
12571
+ .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']) {
12983
12572
  background-color: var(--accent-3);
12573
+ color: var(--accent-12);
12984
12574
  -webkit-backdrop-filter: none;
12985
12575
  backdrop-filter: none;
12986
12576
  --backdrop-filter-components: none;
12987
12577
  }
12988
- :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])) {
12578
+ .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']) {
12989
12579
  background-color: var(--accent-a3);
12990
- -webkit-backdrop-filter: var(--backdrop-filter-components);
12991
- backdrop-filter: var(--backdrop-filter-components);
12992
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
12993
- }
12994
- :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])) {
12995
- -webkit-backdrop-filter: none;
12996
- backdrop-filter: none;
12580
+ color: var(--accent-a12);
12997
12581
  }
12998
- .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']) {
12582
+ .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)) {
12999
12583
  color: var(--gray-11) !important;
13000
12584
  }
13001
12585
  .rt-SidebarContent :where(.rt-BaseMenuItem) {
13002
12586
  border-radius: var(--radius-2);
13003
12587
  margin-bottom: var(--space-1);
13004
12588
  }
12589
+ .rt-SidebarRoot:where([data-collapsible="icon"]) {
12590
+ transition: none;
12591
+ overflow: hidden;
12592
+ flex-shrink: 0;
12593
+ }
12594
+ .rt-SidebarContainer:where(.rt-variant-ghost[data-collapsible="icon"][data-type="floating"]) {
12595
+ overflow: visible !important;
12596
+ }
13005
12597
  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
13006
- transform: translateX(-100%);
13007
- transition: transform var(--duration-3) var(--ease-2);
12598
+ width: 0;
12599
+ min-width: 0;
12600
+ opacity: 0;
12601
+ pointer-events: none;
12602
+ flex-basis: 0;
12603
+ width: 0;
12604
+ width: 0;
12605
+ min-width: 0;
12606
+ opacity: 0;
12607
+ pointer-events: none;
12608
+ margin: 0;
13008
12609
  }
13009
12610
  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
13010
- transform: translateX(0);
13011
- transition: transform var(--duration-3) var(--ease-2);
12611
+ width: var(--sidebar-width);
12612
+ min-width: var(--sidebar-width);
12613
+ opacity: 1;
12614
+ pointer-events: auto;
12615
+ flex-basis: var(--sidebar-width);
12616
+ width: var(--sidebar-width);
13012
12617
  }
13013
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"][data-side="right"]) {
13014
- transform: translateX(100%);
12618
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]) {
12619
+ transition: none;
12620
+ overflow: hidden;
12621
+ flex-shrink: 0;
13015
12622
  }
13016
- @media (prefers-reduced-motion: reduce) {
13017
- .rt-SidebarRoot:where([data-collapsible="icon"]) {
13018
- transition: none;
13019
- }
12623
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]:has(.rt-variant-ghost)) {
12624
+ overflow: visible;
12625
+ }
12626
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]) {
12627
+ width: var(--sidebar-width);
12628
+ min-width: var(--sidebar-width);
12629
+ opacity: 1;
12630
+ pointer-events: auto;
12631
+ margin: var(--space-2);
12632
+ }
12633
+ .rt-SidebarContainer:where([data-collapsible="icon"]) {
12634
+ width: var(--sidebar-width);
12635
+ min-width: var(--sidebar-width);
12636
+ flex-shrink: 0;
12637
+ }
12638
+ .rt-SidebarContent:where([data-collapsible="icon"]) {
12639
+ width: 100%;
12640
+ min-width: var(--sidebar-width);
12641
+ flex-shrink: 0;
13020
12642
  }
13021
12643
  @media (max-width: 768px) {
13022
12644
  .rt-SidebarRoot {
13023
12645
  display: none;
12646
+ display: none;
12647
+ }
12648
+ .rt-SidebarRoot:where([data-state="expanded"]) {
12649
+ display: flex;
12650
+ position: fixed;
12651
+ top: 0;
12652
+ left: 0;
12653
+ height: 100vh;
12654
+ width: var(--sidebar-width);
12655
+ z-index: 50;
12656
+ box-shadow: var(--shadow-6);
12657
+ }
12658
+ }
12659
+ @media (prefers-reduced-motion: reduce) {
12660
+ .rt-SidebarRoot:where([data-collapsible="icon"]) {
12661
+ transition: none;
13024
12662
  }
13025
12663
  }
13026
12664
  :where(.rt-SidebarContent.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
13027
- padding-right: calc(var(--space-1) * 0.75);
12665
+ padding-right: var(--base-menu-item-padding-y);
13028
12666
  }
13029
12667
  :where(.rt-SidebarContent.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
13030
- padding-right: var(--space-1);
13031
- }
13032
- :where(.rt-SidebarContainer.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
13033
- padding-right: calc(var(--space-1) * 0.75);
13034
- }
13035
- :where(.rt-SidebarContainer.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
13036
- padding-right: var(--space-1);
12668
+ padding-right: var(--base-menu-item-padding-y);
13037
12669
  }
13038
12670
  .rt-SidebarMenuShortcut {
13039
12671
  display: flex;