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