@kushagradhawan/kookie-ui 0.1.15 → 0.1.16

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 (49) hide show
  1. package/components.css +1321 -131
  2. package/dist/cjs/components/dropdown-menu.js +1 -1
  3. package/dist/cjs/components/dropdown-menu.js.map +2 -2
  4. package/dist/cjs/components/icons.d.ts +2 -1
  5. package/dist/cjs/components/icons.d.ts.map +1 -1
  6. package/dist/cjs/components/icons.js +1 -1
  7. package/dist/cjs/components/icons.js.map +3 -3
  8. package/dist/cjs/components/image.d.ts +4 -0
  9. package/dist/cjs/components/image.d.ts.map +1 -1
  10. package/dist/cjs/components/image.js +1 -1
  11. package/dist/cjs/components/image.js.map +3 -3
  12. package/dist/cjs/components/sidebar.d.ts +117 -42
  13. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  14. package/dist/cjs/components/sidebar.js +1 -1
  15. package/dist/cjs/components/sidebar.js.map +3 -3
  16. package/dist/cjs/components/sidebar.props.d.ts +17 -10
  17. package/dist/cjs/components/sidebar.props.d.ts.map +1 -1
  18. package/dist/cjs/components/sidebar.props.js +1 -1
  19. package/dist/cjs/components/sidebar.props.js.map +3 -3
  20. package/dist/esm/components/dropdown-menu.js +1 -1
  21. package/dist/esm/components/dropdown-menu.js.map +3 -3
  22. package/dist/esm/components/icons.d.ts +2 -1
  23. package/dist/esm/components/icons.d.ts.map +1 -1
  24. package/dist/esm/components/icons.js +1 -1
  25. package/dist/esm/components/icons.js.map +3 -3
  26. package/dist/esm/components/image.d.ts +4 -0
  27. package/dist/esm/components/image.d.ts.map +1 -1
  28. package/dist/esm/components/image.js +1 -1
  29. package/dist/esm/components/image.js.map +3 -3
  30. package/dist/esm/components/sidebar.d.ts +117 -42
  31. package/dist/esm/components/sidebar.d.ts.map +1 -1
  32. package/dist/esm/components/sidebar.js +1 -1
  33. package/dist/esm/components/sidebar.js.map +3 -3
  34. package/dist/esm/components/sidebar.props.d.ts +17 -10
  35. package/dist/esm/components/sidebar.props.d.ts.map +1 -1
  36. package/dist/esm/components/sidebar.props.js +1 -1
  37. package/dist/esm/components/sidebar.props.js.map +3 -3
  38. package/package.json +1 -1
  39. package/src/components/_internal/base-button.css +2 -9
  40. package/src/components/_internal/base-menu.css +2 -2
  41. package/src/components/button.css +2 -2
  42. package/src/components/dropdown-menu.tsx +2 -2
  43. package/src/components/icon-button.css +2 -2
  44. package/src/components/icons.tsx +18 -1
  45. package/src/components/image.tsx +48 -9
  46. package/src/components/sidebar.css +850 -54
  47. package/src/components/sidebar.props.tsx +15 -11
  48. package/src/components/sidebar.tsx +500 -367
  49. package/styles.css +1321 -131
package/styles.css CHANGED
@@ -6595,16 +6595,10 @@
6595
6595
  position: relative;
6596
6596
  cursor: wait;
6597
6597
  }
6598
- .rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
6599
- transform: scale(0.98);
6600
- }
6601
6598
  @media (prefers-reduced-motion: reduce) {
6602
6599
  .rt-BaseButton {
6603
6600
  transition: none;
6604
6601
  }
6605
- .rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
6606
- transform: none;
6607
- }
6608
6602
  }
6609
6603
  .rt-BaseButton:where(.rt-full-width) {
6610
6604
  display: flex;
@@ -7074,8 +7068,8 @@
7074
7068
  letter-spacing: var(--letter-spacing-1);
7075
7069
  }
7076
7070
  .rt-Button:where(.rt-r-size-1) :where(svg) {
7077
- width: var(--space-4);
7078
- height: var(--space-4);
7071
+ width: calc(var(--space-3) * 1.175);
7072
+ height: calc(var(--space-3) * 1.175);
7079
7073
  }
7080
7074
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
7081
7075
  padding-left: var(--space-2);
@@ -7151,8 +7145,8 @@
7151
7145
  letter-spacing: var(--letter-spacing-1);
7152
7146
  }
7153
7147
  .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
7154
- width: var(--space-4);
7155
- height: var(--space-4);
7148
+ width: calc(var(--space-3) * 1.175);
7149
+ height: calc(var(--space-3) * 1.175);
7156
7150
  }
7157
7151
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7158
7152
  padding-left: var(--space-2);
@@ -7229,8 +7223,8 @@
7229
7223
  letter-spacing: var(--letter-spacing-1);
7230
7224
  }
7231
7225
  .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
7232
- width: var(--space-4);
7233
- height: var(--space-4);
7226
+ width: calc(var(--space-3) * 1.175);
7227
+ height: calc(var(--space-3) * 1.175);
7234
7228
  }
7235
7229
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7236
7230
  padding-left: var(--space-2);
@@ -7307,8 +7301,8 @@
7307
7301
  letter-spacing: var(--letter-spacing-1);
7308
7302
  }
7309
7303
  .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
7310
- width: var(--space-4);
7311
- height: var(--space-4);
7304
+ width: calc(var(--space-3) * 1.175);
7305
+ height: calc(var(--space-3) * 1.175);
7312
7306
  }
7313
7307
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7314
7308
  padding-left: var(--space-2);
@@ -7385,8 +7379,8 @@
7385
7379
  letter-spacing: var(--letter-spacing-1);
7386
7380
  }
7387
7381
  .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
7388
- width: var(--space-4);
7389
- height: var(--space-4);
7382
+ width: calc(var(--space-3) * 1.175);
7383
+ height: calc(var(--space-3) * 1.175);
7390
7384
  }
7391
7385
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7392
7386
  padding-left: var(--space-2);
@@ -7463,8 +7457,8 @@
7463
7457
  letter-spacing: var(--letter-spacing-1);
7464
7458
  }
7465
7459
  .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
7466
- width: var(--space-4);
7467
- height: var(--space-4);
7460
+ width: calc(var(--space-3) * 1.175);
7461
+ height: calc(var(--space-3) * 1.175);
7468
7462
  }
7469
7463
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7470
7464
  padding-left: var(--space-2);
@@ -8992,8 +8986,8 @@
8992
8986
  border-radius: var(--radius-1);
8993
8987
  }
8994
8988
  .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
8995
- width: var(--space-4);
8996
- height: var(--space-4);
8989
+ width: calc(var(--space-3) * 1.175);
8990
+ height: calc(var(--space-3) * 1.175);
8997
8991
  flex-shrink: 0;
8998
8992
  }
8999
8993
  .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -9061,8 +9055,8 @@
9061
9055
  border-radius: var(--radius-1);
9062
9056
  }
9063
9057
  .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9064
- width: var(--space-4);
9065
- height: var(--space-4);
9058
+ width: calc(var(--space-3) * 1.175);
9059
+ height: calc(var(--space-3) * 1.175);
9066
9060
  flex-shrink: 0;
9067
9061
  }
9068
9062
  .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -9131,8 +9125,8 @@
9131
9125
  border-radius: var(--radius-1);
9132
9126
  }
9133
9127
  .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9134
- width: var(--space-4);
9135
- height: var(--space-4);
9128
+ width: calc(var(--space-3) * 1.175);
9129
+ height: calc(var(--space-3) * 1.175);
9136
9130
  flex-shrink: 0;
9137
9131
  }
9138
9132
  .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -9201,8 +9195,8 @@
9201
9195
  border-radius: var(--radius-1);
9202
9196
  }
9203
9197
  .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9204
- width: var(--space-4);
9205
- height: var(--space-4);
9198
+ width: calc(var(--space-3) * 1.175);
9199
+ height: calc(var(--space-3) * 1.175);
9206
9200
  flex-shrink: 0;
9207
9201
  }
9208
9202
  .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -9271,8 +9265,8 @@
9271
9265
  border-radius: var(--radius-1);
9272
9266
  }
9273
9267
  .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9274
- width: var(--space-4);
9275
- height: var(--space-4);
9268
+ width: calc(var(--space-3) * 1.175);
9269
+ height: calc(var(--space-3) * 1.175);
9276
9270
  flex-shrink: 0;
9277
9271
  }
9278
9272
  .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -9341,8 +9335,8 @@
9341
9335
  border-radius: var(--radius-1);
9342
9336
  }
9343
9337
  .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9344
- width: var(--space-4);
9345
- height: var(--space-4);
9338
+ width: calc(var(--space-3) * 1.175);
9339
+ height: calc(var(--space-3) * 1.175);
9346
9340
  flex-shrink: 0;
9347
9341
  }
9348
9342
  .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -10650,8 +10644,8 @@
10650
10644
  width: var(--base-button-height);
10651
10645
  }
10652
10646
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
10653
- width: var(--space-4);
10654
- height: var(--space-4);
10647
+ width: calc(var(--space-3) * 1.175);
10648
+ height: calc(var(--space-3) * 1.175);
10655
10649
  }
10656
10650
  .rt-IconButton:where(.rt-r-size-2) :where(svg) {
10657
10651
  width: var(--space-4);
@@ -10679,8 +10673,8 @@
10679
10673
  }
10680
10674
  @media (min-width: 520px) {
10681
10675
  .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
10682
- width: var(--space-4);
10683
- height: var(--space-4);
10676
+ width: calc(var(--space-3) * 1.175);
10677
+ height: calc(var(--space-3) * 1.175);
10684
10678
  }
10685
10679
  .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
10686
10680
  width: var(--space-4);
@@ -10709,8 +10703,8 @@
10709
10703
  }
10710
10704
  @media (min-width: 768px) {
10711
10705
  .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
10712
- width: var(--space-4);
10713
- height: var(--space-4);
10706
+ width: calc(var(--space-3) * 1.175);
10707
+ height: calc(var(--space-3) * 1.175);
10714
10708
  }
10715
10709
  .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
10716
10710
  width: var(--space-4);
@@ -10739,8 +10733,8 @@
10739
10733
  }
10740
10734
  @media (min-width: 1024px) {
10741
10735
  .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
10742
- width: var(--space-4);
10743
- height: var(--space-4);
10736
+ width: calc(var(--space-3) * 1.175);
10737
+ height: calc(var(--space-3) * 1.175);
10744
10738
  }
10745
10739
  .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
10746
10740
  width: var(--space-4);
@@ -10769,8 +10763,8 @@
10769
10763
  }
10770
10764
  @media (min-width: 1280px) {
10771
10765
  .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
10772
- width: var(--space-4);
10773
- height: var(--space-4);
10766
+ width: calc(var(--space-3) * 1.175);
10767
+ height: calc(var(--space-3) * 1.175);
10774
10768
  }
10775
10769
  .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
10776
10770
  width: var(--space-4);
@@ -10799,8 +10793,8 @@
10799
10793
  }
10800
10794
  @media (min-width: 1640px) {
10801
10795
  .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
10802
- width: var(--space-4);
10803
- height: var(--space-4);
10796
+ width: calc(var(--space-3) * 1.175);
10797
+ height: calc(var(--space-3) * 1.175);
10804
10798
  }
10805
10799
  .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
10806
10800
  width: var(--space-4);
@@ -14126,16 +14120,34 @@
14126
14120
  --separator-size: 100%;
14127
14121
  }
14128
14122
  }
14123
+ .rt-SidebarProvider:where([data-side="left"]) {
14124
+ order: -1;
14125
+ }
14126
+ .rt-SidebarProvider:where([data-side="right"]) {
14127
+ order: 999;
14128
+ }
14129
14129
  .rt-SidebarRoot {
14130
14130
  --sidebar-width: 16rem;
14131
- --sidebar-width-icon: 3rem;
14132
- position: fixed;
14133
- top: 0;
14134
- bottom: 0;
14135
- left: 0;
14136
- z-index: 30;
14137
14131
  width: var(--sidebar-width);
14138
- transition: transform 0.2s ease, width 0.2s ease;
14132
+ height: 100vh;
14133
+ flex-shrink: 0;
14134
+ display: flex;
14135
+ flex-direction: column;
14136
+ }
14137
+ .rt-SidebarRoot :where(.radix-themes) {
14138
+ display: flex;
14139
+ flex-direction: column;
14140
+ flex: 1;
14141
+ height: 100%;
14142
+ }
14143
+ .rt-SidebarRoot:where([data-type="floating"]) {
14144
+ border-radius: var(--radius-4);
14145
+ margin: var(--space-2);
14146
+ height: calc(100vh - var(--space-4));
14147
+ overflow: visible;
14148
+ }
14149
+ .rt-SidebarRoot:where([data-type="floating"]) :where(.radix-themes) {
14150
+ border-radius: inherit;
14139
14151
  }
14140
14152
  .rt-SidebarContainer {
14141
14153
  display: flex;
@@ -14143,122 +14155,1300 @@
14143
14155
  height: 100%;
14144
14156
  width: 100%;
14145
14157
  background-color: var(--color-panel-solid);
14146
- border-right: 1px solid var(--gray-a5);
14158
+ border-radius: inherit;
14159
+ flex: 1;
14147
14160
  }
14148
14161
  .rt-SidebarHeader {
14162
+ display: flex;
14163
+ flex-direction: column;
14164
+ flex-shrink: 0;
14165
+ border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
14166
+ }
14167
+ .rt-SidebarHeader :where(.rt-SidebarMenuButton) {
14149
14168
  display: flex;
14150
14169
  align-items: center;
14151
- padding: var(--space-3);
14152
- border-bottom: 1px solid var(--gray-a5);
14170
+ gap: var(--space-2);
14171
+ min-height: var(--sidebar-item-height);
14172
+ padding-top: var(--sidebar-item-padding-y);
14173
+ padding-bottom: var(--sidebar-item-padding-y);
14174
+ padding-left: var(--sidebar-item-padding-left);
14175
+ padding-right: var(--sidebar-item-padding-right);
14176
+ box-sizing: border-box;
14177
+ position: relative;
14178
+ outline: none;
14179
+ background: none;
14180
+ border: none;
14181
+ width: 100%;
14182
+ text-align: left;
14183
+ cursor: var(--cursor-menu-item);
14184
+ -webkit-user-select: none;
14185
+ user-select: none;
14186
+ justify-content: flex-start;
14187
+ border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
14188
+ transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
14189
+ }
14190
+ .rt-SidebarHeader :where(.rt-SidebarMenuButton):where([data-highlighted]:not([data-disabled])) {
14191
+ background-color: var(--gray-a3);
14192
+ }
14193
+ .rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:active:not([data-disabled])) {
14194
+ background-color: var(--gray-a4);
14195
+ }
14196
+ .rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:focus-visible) {
14197
+ outline: 2px solid var(--focus-8);
14198
+ outline-offset: 2px;
14199
+ }
14200
+ @media (prefers-reduced-motion: reduce) {
14201
+ .rt-SidebarHeader :where(.rt-SidebarMenuButton) {
14202
+ transition: none;
14203
+ }
14204
+ }
14205
+ .rt-SidebarHeader:where(.rt-SidebarHeader--container) {
14206
+ display: flex;
14207
+ flex-direction: row;
14208
+ align-items: center;
14209
+ gap: var(--space-2);
14210
+ padding: var(--sidebar-content-padding);
14211
+ min-height: var(--sidebar-item-height);
14212
+ }
14213
+ .rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton) {
14214
+ flex: 1;
14215
+ }
14216
+ .rt-SidebarHeader:where(.rt-flex-row) {
14217
+ flex-direction: row;
14218
+ }
14219
+ .rt-SidebarHeader:where(.rt-flex-col) {
14220
+ flex-direction: column;
14221
+ }
14222
+ .rt-SidebarHeader:where(.rt-items-center) {
14223
+ align-items: center;
14224
+ }
14225
+ .rt-SidebarHeader:where(.rt-items-start) {
14226
+ align-items: flex-start;
14227
+ }
14228
+ .rt-SidebarHeader:where(.rt-items-end) {
14229
+ align-items: flex-end;
14230
+ }
14231
+ .rt-SidebarHeader:where(.rt-justify-between) {
14232
+ justify-content: space-between;
14233
+ }
14234
+ .rt-SidebarHeader:where(.rt-justify-center) {
14235
+ justify-content: center;
14236
+ }
14237
+ .rt-SidebarHeader:where(.rt-justify-start) {
14238
+ justify-content: flex-start;
14239
+ }
14240
+ .rt-SidebarHeader:where(.rt-justify-end) {
14241
+ justify-content: flex-end;
14242
+ }
14243
+ .rt-SidebarHeader:where(.rt-gap-1) {
14244
+ gap: var(--space-1);
14245
+ }
14246
+ .rt-SidebarHeader:where(.rt-gap-2) {
14247
+ gap: var(--space-2);
14248
+ }
14249
+ .rt-SidebarHeader:where(.rt-gap-3) {
14250
+ gap: var(--space-3);
14251
+ }
14252
+ .rt-SidebarHeader:where(.rt-gap-4) {
14253
+ gap: var(--space-4);
14153
14254
  }
14154
14255
  .rt-SidebarContent {
14256
+ --scrollarea-scrollbar-vertical-margin-top: var(--sidebar-content-padding);
14257
+ --scrollarea-scrollbar-vertical-margin-bottom: var(--sidebar-content-padding);
14258
+ --scrollarea-scrollbar-horizontal-margin-left: var(--sidebar-content-padding);
14259
+ --scrollarea-scrollbar-horizontal-margin-right: var(--sidebar-content-padding);
14260
+ display: flex;
14261
+ flex-direction: column;
14155
14262
  flex: 1;
14156
- padding: var(--space-2);
14263
+ box-sizing: border-box;
14157
14264
  min-height: 0;
14158
14265
  }
14159
- .rt-SidebarFooter {
14160
- padding: var(--space-3);
14161
- border-top: 1px solid var(--gray-a5);
14266
+ .rt-SidebarContent :where(.rt-ScrollAreaRoot) {
14267
+ flex: 1;
14268
+ display: flex;
14269
+ flex-direction: column;
14270
+ min-height: 0;
14162
14271
  }
14163
- .rt-SidebarInset {
14272
+ .rt-SidebarContent :where(.rt-ScrollAreaViewport) {
14164
14273
  flex: 1;
14165
- margin-left: var(--sidebar-width);
14166
- transition: margin-left 0.2s ease;
14274
+ display: flex;
14275
+ flex-direction: column;
14276
+ min-height: 0;
14167
14277
  }
14168
- .rt-SidebarRoot:where(.rt-r-size-1) {
14169
- --sidebar-width: 14rem;
14170
- --sidebar-width-icon: 2.5rem;
14278
+ .rt-SidebarMenu {
14279
+ flex: 1;
14280
+ display: flex;
14281
+ flex-direction: column;
14282
+ gap: var(--space-2);
14283
+ padding: var(--sidebar-content-padding);
14284
+ box-sizing: border-box;
14285
+ list-style: none;
14286
+ margin: 0;
14287
+ min-height: 0;
14171
14288
  }
14172
- .rt-SidebarRoot:where(.rt-r-size-3) {
14173
- --sidebar-width: 18rem;
14174
- --sidebar-width-icon: 3.5rem;
14289
+ :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-SidebarMenu {
14290
+ padding-right: var(--space-3);
14175
14291
  }
14176
- @media (min-width: 520px) {
14177
- .rt-SidebarRoot:where(.xs\:rt-r-size-1) {
14178
- --sidebar-width: 14rem;
14179
- --sidebar-width-icon: 2.5rem;
14180
- }
14181
- .rt-SidebarRoot:where(.xs\:rt-r-size-3) {
14182
- --sidebar-width: 18rem;
14183
- --sidebar-width-icon: 3.5rem;
14184
- }
14292
+ .rt-SidebarMenuItem {
14293
+ list-style: none;
14185
14294
  }
14186
- @media (min-width: 768px) {
14187
- .rt-SidebarRoot:where(.sm\:rt-r-size-1) {
14188
- --sidebar-width: 14rem;
14189
- --sidebar-width-icon: 2.5rem;
14190
- }
14191
- .rt-SidebarRoot:where(.sm\:rt-r-size-3) {
14192
- --sidebar-width: 18rem;
14193
- --sidebar-width-icon: 3.5rem;
14194
- }
14295
+ .rt-SidebarMenuButton {
14296
+ display: flex;
14297
+ align-items: center;
14298
+ gap: var(--space-2);
14299
+ min-height: var(--sidebar-item-height);
14300
+ padding-top: var(--sidebar-item-padding-y);
14301
+ padding-bottom: var(--sidebar-item-padding-y);
14302
+ padding-left: var(--sidebar-item-padding-left);
14303
+ padding-right: var(--sidebar-item-padding-right);
14304
+ box-sizing: border-box;
14305
+ position: relative;
14306
+ outline: none;
14307
+ scroll-margin: var(--sidebar-content-padding) 0;
14308
+ background: none;
14309
+ border: none;
14310
+ width: 100%;
14311
+ text-align: left;
14312
+ border-radius: var(--radius-2);
14313
+ transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
14314
+ -webkit-user-select: none;
14315
+ user-select: none;
14316
+ cursor: var(--cursor-menu-item);
14195
14317
  }
14196
- @media (min-width: 1024px) {
14197
- .rt-SidebarRoot:where(.md\:rt-r-size-1) {
14198
- --sidebar-width: 14rem;
14199
- --sidebar-width-icon: 2.5rem;
14318
+ .rt-SidebarMenuButton:where([data-disabled]) {
14319
+ cursor: default;
14320
+ color: var(--gray-a8);
14321
+ }
14322
+ .rt-SidebarMenuButton:where([data-highlighted]:not([data-disabled])) {
14323
+ background-color: var(--gray-a3);
14324
+ }
14325
+ @media (hover: hover) {
14326
+ .rt-SidebarMenuButton:where(:hover:not([data-disabled])) {
14327
+ background-color: var(--gray-a3);
14200
14328
  }
14201
- .rt-SidebarRoot:where(.md\:rt-r-size-3) {
14202
- --sidebar-width: 18rem;
14203
- --sidebar-width-icon: 3.5rem;
14329
+ }
14330
+ .rt-SidebarMenuButton:where(:active:not([data-disabled])) {
14331
+ background-color: var(--gray-a4);
14332
+ }
14333
+ .rt-SidebarMenuButton:where([data-active], .rt-active) {
14334
+ background-color: var(--accent-a3);
14335
+ color: var(--accent-a12);
14336
+ }
14337
+ .rt-SidebarMenuButton:where(:focus-visible) {
14338
+ outline: 2px solid var(--focus-8);
14339
+ outline-offset: 2px;
14340
+ }
14341
+ .rt-SidebarMenuButton:where([data-accent-color]) {
14342
+ color: var(--accent-a11);
14343
+ }
14344
+ .rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
14345
+ color: var(--gray-a10);
14346
+ }
14347
+ @media (prefers-reduced-motion: reduce) {
14348
+ .rt-SidebarMenuButton {
14349
+ transition: none;
14204
14350
  }
14205
14351
  }
14206
- @media (min-width: 1280px) {
14207
- .rt-SidebarRoot:where(.lg\:rt-r-size-1) {
14208
- --sidebar-width: 14rem;
14209
- --sidebar-width-icon: 2.5rem;
14352
+ .rt-SidebarMenuSubTrigger {
14353
+ justify-content: space-between;
14354
+ }
14355
+ .rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon) {
14356
+ transition: transform 0.2s ease;
14357
+ }
14358
+ .rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
14359
+ transform: rotate(90deg);
14360
+ }
14361
+ .rt-SidebarMenuSubContent {
14362
+ overflow: hidden;
14363
+ }
14364
+ .rt-SidebarMenuSubContent:where(:focus-within) {
14365
+ overflow: visible;
14366
+ }
14367
+ .rt-SidebarMenuSubContent:where([data-state="open"]) {
14368
+ animation: rt-sidebar-slide-down 200ms ease-out;
14369
+ }
14370
+ .rt-SidebarMenuSubContent:where([data-state="closed"]) {
14371
+ animation: rt-sidebar-slide-up 200ms ease-out;
14372
+ }
14373
+ @keyframes rt-sidebar-slide-down {
14374
+ from {
14375
+ height: 0;
14210
14376
  }
14211
- .rt-SidebarRoot:where(.lg\:rt-r-size-3) {
14212
- --sidebar-width: 18rem;
14213
- --sidebar-width-icon: 3.5rem;
14377
+ to {
14378
+ height: var(--radix-accordion-content-height);
14214
14379
  }
14215
14380
  }
14216
- @media (min-width: 1640px) {
14217
- .rt-SidebarRoot:where(.xl\:rt-r-size-1) {
14218
- --sidebar-width: 14rem;
14219
- --sidebar-width-icon: 2.5rem;
14381
+ @keyframes rt-sidebar-slide-up {
14382
+ from {
14383
+ height: var(--radix-accordion-content-height);
14220
14384
  }
14221
- .rt-SidebarRoot:where(.xl\:rt-r-size-3) {
14222
- --sidebar-width: 18rem;
14223
- --sidebar-width-icon: 3.5rem;
14385
+ to {
14386
+ height: 0;
14224
14387
  }
14225
14388
  }
14226
- .rt-SidebarHeader:where(.rt-r-size-1) {
14227
- padding: var(--space-2);
14228
- }
14229
- .rt-SidebarHeader:where(.rt-r-size-3) {
14230
- padding: var(--space-4);
14389
+ .rt-SidebarMenuSubList {
14390
+ padding-left: var(--space-4);
14391
+ border-left: 1px solid var(--gray-a5);
14392
+ margin-left: var(--space-3);
14231
14393
  }
14232
- .rt-SidebarFooter:where(.rt-r-size-1) {
14233
- padding: var(--space-2);
14394
+ :where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
14395
+ padding-left: var(--space-3);
14396
+ padding-top: calc(var(--space-1) * 0.75);
14397
+ padding-bottom: calc(var(--space-1) * 0.75);
14398
+ min-height: var(--space-5);
14399
+ font-size: var(--font-size-1);
14234
14400
  }
14235
- .rt-SidebarFooter:where(.rt-r-size-3) {
14236
- padding: var(--space-4);
14401
+ :where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
14402
+ padding-left: var(--space-3);
14403
+ padding-top: var(--space-1);
14404
+ padding-bottom: var(--space-1);
14405
+ min-height: var(--space-6);
14406
+ font-size: var(--font-size-2);
14237
14407
  }
14238
- .rt-SidebarContent:where(.rt-r-size-1) {
14239
- padding: var(--space-1);
14408
+ .rt-SidebarFooter {
14409
+ display: flex;
14410
+ flex-direction: column;
14411
+ flex-shrink: 0;
14412
+ margin-top: auto;
14413
+ border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
14240
14414
  }
14241
- .rt-SidebarContent:where(.rt-r-size-3) {
14242
- padding: var(--space-3);
14415
+ .rt-SidebarFooter :where(.rt-SidebarMenuButton) {
14416
+ display: flex;
14417
+ align-items: center;
14418
+ gap: var(--space-2);
14419
+ min-height: var(--sidebar-item-height);
14420
+ padding-top: var(--sidebar-item-padding-y);
14421
+ padding-bottom: var(--sidebar-item-padding-y);
14422
+ padding-left: var(--sidebar-item-padding-left);
14423
+ padding-right: var(--sidebar-item-padding-right);
14424
+ box-sizing: border-box;
14425
+ position: relative;
14426
+ outline: none;
14427
+ background: none;
14428
+ border: none;
14429
+ width: 100%;
14430
+ text-align: left;
14431
+ cursor: var(--cursor-menu-item);
14432
+ -webkit-user-select: none;
14433
+ user-select: none;
14434
+ justify-content: flex-start;
14435
+ border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
14436
+ transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
14243
14437
  }
14244
- .rt-SidebarContainer:where(.rt-variant-classic) {
14245
- background-color: var(--color-surface);
14246
- border: 1px solid var(--gray-a5);
14438
+ .rt-SidebarFooter :where(.rt-SidebarMenuButton):where([data-highlighted]:not([data-disabled])) {
14439
+ background-color: var(--gray-a3);
14247
14440
  }
14248
- .rt-SidebarContainer:where(.rt-variant-ghost) {
14249
- background-color: transparent;
14250
- border: none;
14441
+ .rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:active:not([data-disabled])) {
14442
+ background-color: var(--gray-a4);
14251
14443
  }
14252
- .rt-SidebarContent :where(.rt-BaseMenuItem) {
14253
- border-radius: var(--radius-2);
14254
- margin-bottom: var(--space-1);
14444
+ .rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible) {
14445
+ outline: 2px solid var(--focus-8);
14446
+ outline-offset: 2px;
14255
14447
  }
14256
- @media (max-width: 768px) {
14257
- .rt-SidebarRoot {
14258
- display: none;
14448
+ @media (prefers-reduced-motion: reduce) {
14449
+ .rt-SidebarFooter :where(.rt-SidebarMenuButton) {
14450
+ transition: none;
14259
14451
  }
14260
- .rt-SidebarInset {
14261
- margin-left: 0;
14452
+ }
14453
+ .rt-SidebarFooter:where(.rt-SidebarFooter--container) {
14454
+ display: flex;
14455
+ flex-direction: row;
14456
+ align-items: center;
14457
+ gap: var(--space-2);
14458
+ padding: var(--sidebar-content-padding);
14459
+ min-height: var(--sidebar-item-height);
14460
+ }
14461
+ .rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton) {
14462
+ flex: 1;
14463
+ }
14464
+ .rt-SidebarFooter:where(.rt-flex-row) {
14465
+ flex-direction: row;
14466
+ }
14467
+ .rt-SidebarFooter:where(.rt-flex-col) {
14468
+ flex-direction: column;
14469
+ }
14470
+ .rt-SidebarFooter:where(.rt-items-center) {
14471
+ align-items: center;
14472
+ }
14473
+ .rt-SidebarFooter:where(.rt-items-start) {
14474
+ align-items: flex-start;
14475
+ }
14476
+ .rt-SidebarFooter:where(.rt-items-end) {
14477
+ align-items: flex-end;
14478
+ }
14479
+ .rt-SidebarFooter:where(.rt-justify-between) {
14480
+ justify-content: space-between;
14481
+ }
14482
+ .rt-SidebarFooter:where(.rt-justify-center) {
14483
+ justify-content: center;
14484
+ }
14485
+ .rt-SidebarFooter:where(.rt-justify-start) {
14486
+ justify-content: flex-start;
14487
+ }
14488
+ .rt-SidebarFooter:where(.rt-justify-end) {
14489
+ justify-content: flex-end;
14490
+ }
14491
+ .rt-SidebarFooter:where(.rt-gap-1) {
14492
+ gap: var(--space-1);
14493
+ }
14494
+ .rt-SidebarFooter:where(.rt-gap-2) {
14495
+ gap: var(--space-2);
14496
+ }
14497
+ .rt-SidebarFooter:where(.rt-gap-3) {
14498
+ gap: var(--space-3);
14499
+ }
14500
+ .rt-SidebarFooter:where(.rt-gap-4) {
14501
+ gap: var(--space-4);
14502
+ }
14503
+ .rt-SidebarSeparator {
14504
+ width: 100%;
14505
+ margin: var(--space-2) 0;
14506
+ }
14507
+ .rt-SidebarGroup {
14508
+ display: flex;
14509
+ flex-direction: column;
14510
+ flex-shrink: 0;
14511
+ }
14512
+ .rt-SidebarGroup:where(:not(:first-child)) {
14513
+ margin-top: var(--space-4);
14514
+ }
14515
+ .rt-SidebarGroupLabel {
14516
+ display: flex;
14517
+ align-items: center;
14518
+ min-height: var(--sidebar-item-height);
14519
+ padding-top: var(--sidebar-item-padding-y);
14520
+ padding-bottom: var(--sidebar-item-padding-y);
14521
+ padding-left: var(--sidebar-item-padding-left);
14522
+ padding-right: var(--sidebar-item-padding-right);
14523
+ box-sizing: border-box;
14524
+ color: var(--gray-a10);
14525
+ -webkit-user-select: none;
14526
+ user-select: none;
14527
+ cursor: default;
14528
+ flex-shrink: 0;
14529
+ }
14530
+ .rt-SidebarGroupContent {
14531
+ display: flex;
14532
+ flex-direction: column;
14533
+ flex-shrink: 0;
14534
+ }
14535
+ .rt-SidebarContainer:where(.rt-r-size-1) {
14536
+ --sidebar-base-padding: var(--space-3);
14537
+ --sidebar-base-border-radius: var(--radius-4);
14538
+ --sidebar-content-padding: var(--space-1);
14539
+ --sidebar-item-padding-left: var(--space-2);
14540
+ --sidebar-item-padding-right: var(--space-2);
14541
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14542
+ --sidebar-item-height: var(--space-5);
14543
+ }
14544
+ .rt-SidebarContainer:where(.rt-r-size-2) {
14545
+ --sidebar-base-padding: var(--space-4);
14546
+ --sidebar-base-border-radius: var(--radius-4);
14547
+ --sidebar-content-padding: var(--space-2);
14548
+ --sidebar-item-padding-left: var(--space-3);
14549
+ --sidebar-item-padding-right: var(--space-3);
14550
+ --sidebar-item-padding-y: var(--space-1);
14551
+ --sidebar-item-height: var(--space-6);
14552
+ }
14553
+ .rt-SidebarContent:where(.rt-r-size-1) {
14554
+ --sidebar-content-padding: var(--space-1);
14555
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14556
+ --sidebar-item-padding-right: var(--space-2);
14557
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14558
+ --sidebar-item-height: var(--space-5);
14559
+ border-radius: var(--radius-3);
14560
+ }
14561
+ .rt-SidebarContent:where(.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14562
+ --sidebar-item-padding-left: var(--space-2);
14563
+ }
14564
+ .rt-SidebarContent:where(.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14565
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14566
+ }
14567
+ .rt-SidebarContent:where(.rt-r-size-2) {
14568
+ --sidebar-content-padding: var(--space-2);
14569
+ --sidebar-item-padding-left: var(--space-3);
14570
+ --sidebar-item-padding-right: var(--space-3);
14571
+ --sidebar-item-padding-y: var(--space-1);
14572
+ --sidebar-item-height: var(--space-6);
14573
+ border-radius: var(--radius-4);
14574
+ }
14575
+ .rt-SidebarContent:where(.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14576
+ --sidebar-item-padding-left: var(--space-3);
14577
+ }
14578
+ .rt-SidebarContent:where(.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14579
+ --sidebar-item-padding-left: var(--space-5);
14580
+ }
14581
+ .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) {
14582
+ font-size: var(--font-size-1);
14583
+ line-height: var(--line-height-1);
14584
+ letter-spacing: var(--letter-spacing-1);
14585
+ border-radius: var(--radius-1);
14586
+ }
14587
+ .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
14588
+ width: calc(var(--space-3) * 1.175);
14589
+ height: calc(var(--space-3) * 1.175);
14590
+ flex-shrink: 0;
14591
+ }
14592
+ .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
14593
+ width: calc(8px * var(--scaling));
14594
+ height: calc(8px * var(--scaling));
14595
+ flex-shrink: 0;
14596
+ margin-left: auto;
14597
+ }
14598
+ .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarGroupLabel) {
14599
+ font-size: var(--font-size-1);
14600
+ line-height: var(--line-height-1);
14601
+ letter-spacing: var(--letter-spacing-1);
14602
+ }
14603
+ .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14604
+ font-size: var(--font-size-1);
14605
+ line-height: var(--line-height-1);
14606
+ letter-spacing: var(--letter-spacing-1);
14607
+ border-radius: var(--radius-1);
14608
+ }
14609
+ .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14610
+ width: calc(var(--space-3) * 1.175);
14611
+ height: calc(var(--space-3) * 1.175);
14612
+ flex-shrink: 0;
14613
+ }
14614
+ .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14615
+ font-size: var(--font-size-1);
14616
+ line-height: var(--line-height-1);
14617
+ letter-spacing: var(--letter-spacing-1);
14618
+ border-radius: var(--radius-1);
14619
+ }
14620
+ .rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14621
+ width: calc(var(--space-3) * 1.175);
14622
+ height: calc(var(--space-3) * 1.175);
14623
+ flex-shrink: 0;
14624
+ }
14625
+ .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) {
14626
+ font-size: var(--font-size-2);
14627
+ line-height: var(--line-height-2);
14628
+ letter-spacing: var(--letter-spacing-2);
14629
+ border-radius: var(--radius-2);
14630
+ }
14631
+ .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
14632
+ width: var(--space-4);
14633
+ height: var(--space-4);
14634
+ flex-shrink: 0;
14635
+ }
14636
+ .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
14637
+ width: calc(10px * var(--scaling));
14638
+ height: calc(10px * var(--scaling));
14639
+ flex-shrink: 0;
14640
+ margin-left: auto;
14641
+ }
14642
+ .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarGroupLabel) {
14643
+ font-size: var(--font-size-2);
14644
+ line-height: var(--line-height-2);
14645
+ letter-spacing: var(--letter-spacing-2);
14646
+ }
14647
+ .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14648
+ font-size: var(--font-size-2);
14649
+ line-height: var(--line-height-2);
14650
+ letter-spacing: var(--letter-spacing-2);
14651
+ border-radius: var(--radius-2);
14652
+ }
14653
+ .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14654
+ width: var(--space-4);
14655
+ height: var(--space-4);
14656
+ flex-shrink: 0;
14657
+ }
14658
+ .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14659
+ font-size: var(--font-size-2);
14660
+ line-height: var(--line-height-2);
14661
+ letter-spacing: var(--letter-spacing-2);
14662
+ border-radius: var(--radius-2);
14663
+ }
14664
+ .rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14665
+ width: var(--space-4);
14666
+ height: var(--space-4);
14667
+ flex-shrink: 0;
14668
+ }
14669
+ @media (min-width: 520px) {
14670
+ .rt-SidebarContainer:where(.xs\:rt-r-size-1) {
14671
+ --sidebar-base-padding: var(--space-3);
14672
+ --sidebar-base-border-radius: var(--radius-4);
14673
+ --sidebar-content-padding: var(--space-1);
14674
+ --sidebar-item-padding-left: var(--space-2);
14675
+ --sidebar-item-padding-right: var(--space-2);
14676
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14677
+ --sidebar-item-height: var(--space-5);
14678
+ }
14679
+ .rt-SidebarContainer:where(.xs\:rt-r-size-2) {
14680
+ --sidebar-base-padding: var(--space-4);
14681
+ --sidebar-base-border-radius: var(--radius-4);
14682
+ --sidebar-content-padding: var(--space-2);
14683
+ --sidebar-item-padding-left: var(--space-3);
14684
+ --sidebar-item-padding-right: var(--space-3);
14685
+ --sidebar-item-padding-y: var(--space-1);
14686
+ --sidebar-item-height: var(--space-6);
14687
+ }
14688
+ .rt-SidebarContent:where(.xs\:rt-r-size-1) {
14689
+ --sidebar-content-padding: var(--space-1);
14690
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14691
+ --sidebar-item-padding-right: var(--space-2);
14692
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14693
+ --sidebar-item-height: var(--space-5);
14694
+ border-radius: var(--radius-3);
14695
+ }
14696
+ .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14697
+ --sidebar-item-padding-left: var(--space-2);
14698
+ }
14699
+ .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14700
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14701
+ }
14702
+ .rt-SidebarContent:where(.xs\:rt-r-size-2) {
14703
+ --sidebar-content-padding: var(--space-2);
14704
+ --sidebar-item-padding-left: var(--space-3);
14705
+ --sidebar-item-padding-right: var(--space-3);
14706
+ --sidebar-item-padding-y: var(--space-1);
14707
+ --sidebar-item-height: var(--space-6);
14708
+ border-radius: var(--radius-4);
14709
+ }
14710
+ .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14711
+ --sidebar-item-padding-left: var(--space-3);
14712
+ }
14713
+ .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14714
+ --sidebar-item-padding-left: var(--space-5);
14715
+ }
14716
+ .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
14717
+ font-size: var(--font-size-1);
14718
+ line-height: var(--line-height-1);
14719
+ letter-spacing: var(--letter-spacing-1);
14720
+ border-radius: var(--radius-1);
14721
+ }
14722
+ .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
14723
+ width: calc(var(--space-3) * 1.175);
14724
+ height: calc(var(--space-3) * 1.175);
14725
+ flex-shrink: 0;
14726
+ }
14727
+ .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
14728
+ width: calc(8px * var(--scaling));
14729
+ height: calc(8px * var(--scaling));
14730
+ flex-shrink: 0;
14731
+ margin-left: auto;
14732
+ }
14733
+ .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
14734
+ font-size: var(--font-size-1);
14735
+ line-height: var(--line-height-1);
14736
+ letter-spacing: var(--letter-spacing-1);
14737
+ }
14738
+ .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14739
+ font-size: var(--font-size-1);
14740
+ line-height: var(--line-height-1);
14741
+ letter-spacing: var(--letter-spacing-1);
14742
+ border-radius: var(--radius-1);
14743
+ }
14744
+ .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14745
+ width: calc(var(--space-3) * 1.175);
14746
+ height: calc(var(--space-3) * 1.175);
14747
+ flex-shrink: 0;
14748
+ }
14749
+ .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14750
+ font-size: var(--font-size-1);
14751
+ line-height: var(--line-height-1);
14752
+ letter-spacing: var(--letter-spacing-1);
14753
+ border-radius: var(--radius-1);
14754
+ }
14755
+ .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14756
+ width: calc(var(--space-3) * 1.175);
14757
+ height: calc(var(--space-3) * 1.175);
14758
+ flex-shrink: 0;
14759
+ }
14760
+ .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
14761
+ font-size: var(--font-size-2);
14762
+ line-height: var(--line-height-2);
14763
+ letter-spacing: var(--letter-spacing-2);
14764
+ border-radius: var(--radius-2);
14765
+ }
14766
+ .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
14767
+ width: var(--space-4);
14768
+ height: var(--space-4);
14769
+ flex-shrink: 0;
14770
+ }
14771
+ .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
14772
+ width: calc(10px * var(--scaling));
14773
+ height: calc(10px * var(--scaling));
14774
+ flex-shrink: 0;
14775
+ margin-left: auto;
14776
+ }
14777
+ .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
14778
+ font-size: var(--font-size-2);
14779
+ line-height: var(--line-height-2);
14780
+ letter-spacing: var(--letter-spacing-2);
14781
+ }
14782
+ .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14783
+ font-size: var(--font-size-2);
14784
+ line-height: var(--line-height-2);
14785
+ letter-spacing: var(--letter-spacing-2);
14786
+ border-radius: var(--radius-2);
14787
+ }
14788
+ .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14789
+ width: var(--space-4);
14790
+ height: var(--space-4);
14791
+ flex-shrink: 0;
14792
+ }
14793
+ .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14794
+ font-size: var(--font-size-2);
14795
+ line-height: var(--line-height-2);
14796
+ letter-spacing: var(--letter-spacing-2);
14797
+ border-radius: var(--radius-2);
14798
+ }
14799
+ .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14800
+ width: var(--space-4);
14801
+ height: var(--space-4);
14802
+ flex-shrink: 0;
14803
+ }
14804
+ }
14805
+ @media (min-width: 768px) {
14806
+ .rt-SidebarContainer:where(.sm\:rt-r-size-1) {
14807
+ --sidebar-base-padding: var(--space-3);
14808
+ --sidebar-base-border-radius: var(--radius-4);
14809
+ --sidebar-content-padding: var(--space-1);
14810
+ --sidebar-item-padding-left: var(--space-2);
14811
+ --sidebar-item-padding-right: var(--space-2);
14812
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14813
+ --sidebar-item-height: var(--space-5);
14814
+ }
14815
+ .rt-SidebarContainer:where(.sm\:rt-r-size-2) {
14816
+ --sidebar-base-padding: var(--space-4);
14817
+ --sidebar-base-border-radius: var(--radius-4);
14818
+ --sidebar-content-padding: var(--space-2);
14819
+ --sidebar-item-padding-left: var(--space-3);
14820
+ --sidebar-item-padding-right: var(--space-3);
14821
+ --sidebar-item-padding-y: var(--space-1);
14822
+ --sidebar-item-height: var(--space-6);
14823
+ }
14824
+ .rt-SidebarContent:where(.sm\:rt-r-size-1) {
14825
+ --sidebar-content-padding: var(--space-1);
14826
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14827
+ --sidebar-item-padding-right: var(--space-2);
14828
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14829
+ --sidebar-item-height: var(--space-5);
14830
+ border-radius: var(--radius-3);
14831
+ }
14832
+ .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14833
+ --sidebar-item-padding-left: var(--space-2);
14834
+ }
14835
+ .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14836
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14837
+ }
14838
+ .rt-SidebarContent:where(.sm\:rt-r-size-2) {
14839
+ --sidebar-content-padding: var(--space-2);
14840
+ --sidebar-item-padding-left: var(--space-3);
14841
+ --sidebar-item-padding-right: var(--space-3);
14842
+ --sidebar-item-padding-y: var(--space-1);
14843
+ --sidebar-item-height: var(--space-6);
14844
+ border-radius: var(--radius-4);
14845
+ }
14846
+ .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14847
+ --sidebar-item-padding-left: var(--space-3);
14848
+ }
14849
+ .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14850
+ --sidebar-item-padding-left: var(--space-5);
14851
+ }
14852
+ .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
14853
+ font-size: var(--font-size-1);
14854
+ line-height: var(--line-height-1);
14855
+ letter-spacing: var(--letter-spacing-1);
14856
+ border-radius: var(--radius-1);
14857
+ }
14858
+ .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
14859
+ width: calc(var(--space-3) * 1.175);
14860
+ height: calc(var(--space-3) * 1.175);
14861
+ flex-shrink: 0;
14862
+ }
14863
+ .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
14864
+ width: calc(8px * var(--scaling));
14865
+ height: calc(8px * var(--scaling));
14866
+ flex-shrink: 0;
14867
+ margin-left: auto;
14868
+ }
14869
+ .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
14870
+ font-size: var(--font-size-1);
14871
+ line-height: var(--line-height-1);
14872
+ letter-spacing: var(--letter-spacing-1);
14873
+ }
14874
+ .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14875
+ font-size: var(--font-size-1);
14876
+ line-height: var(--line-height-1);
14877
+ letter-spacing: var(--letter-spacing-1);
14878
+ border-radius: var(--radius-1);
14879
+ }
14880
+ .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14881
+ width: calc(var(--space-3) * 1.175);
14882
+ height: calc(var(--space-3) * 1.175);
14883
+ flex-shrink: 0;
14884
+ }
14885
+ .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14886
+ font-size: var(--font-size-1);
14887
+ line-height: var(--line-height-1);
14888
+ letter-spacing: var(--letter-spacing-1);
14889
+ border-radius: var(--radius-1);
14890
+ }
14891
+ .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14892
+ width: calc(var(--space-3) * 1.175);
14893
+ height: calc(var(--space-3) * 1.175);
14894
+ flex-shrink: 0;
14895
+ }
14896
+ .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
14897
+ font-size: var(--font-size-2);
14898
+ line-height: var(--line-height-2);
14899
+ letter-spacing: var(--letter-spacing-2);
14900
+ border-radius: var(--radius-2);
14901
+ }
14902
+ .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
14903
+ width: var(--space-4);
14904
+ height: var(--space-4);
14905
+ flex-shrink: 0;
14906
+ }
14907
+ .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
14908
+ width: calc(10px * var(--scaling));
14909
+ height: calc(10px * var(--scaling));
14910
+ flex-shrink: 0;
14911
+ margin-left: auto;
14912
+ }
14913
+ .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
14914
+ font-size: var(--font-size-2);
14915
+ line-height: var(--line-height-2);
14916
+ letter-spacing: var(--letter-spacing-2);
14917
+ }
14918
+ .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
14919
+ font-size: var(--font-size-2);
14920
+ line-height: var(--line-height-2);
14921
+ letter-spacing: var(--letter-spacing-2);
14922
+ border-radius: var(--radius-2);
14923
+ }
14924
+ .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
14925
+ width: var(--space-4);
14926
+ height: var(--space-4);
14927
+ flex-shrink: 0;
14928
+ }
14929
+ .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
14930
+ font-size: var(--font-size-2);
14931
+ line-height: var(--line-height-2);
14932
+ letter-spacing: var(--letter-spacing-2);
14933
+ border-radius: var(--radius-2);
14934
+ }
14935
+ .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
14936
+ width: var(--space-4);
14937
+ height: var(--space-4);
14938
+ flex-shrink: 0;
14939
+ }
14940
+ }
14941
+ @media (min-width: 1024px) {
14942
+ .rt-SidebarContainer:where(.md\:rt-r-size-1) {
14943
+ --sidebar-base-padding: var(--space-3);
14944
+ --sidebar-base-border-radius: var(--radius-4);
14945
+ --sidebar-content-padding: var(--space-1);
14946
+ --sidebar-item-padding-left: var(--space-2);
14947
+ --sidebar-item-padding-right: var(--space-2);
14948
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14949
+ --sidebar-item-height: var(--space-5);
14950
+ }
14951
+ .rt-SidebarContainer:where(.md\:rt-r-size-2) {
14952
+ --sidebar-base-padding: var(--space-4);
14953
+ --sidebar-base-border-radius: var(--radius-4);
14954
+ --sidebar-content-padding: var(--space-2);
14955
+ --sidebar-item-padding-left: var(--space-3);
14956
+ --sidebar-item-padding-right: var(--space-3);
14957
+ --sidebar-item-padding-y: var(--space-1);
14958
+ --sidebar-item-height: var(--space-6);
14959
+ }
14960
+ .rt-SidebarContent:where(.md\:rt-r-size-1) {
14961
+ --sidebar-content-padding: var(--space-1);
14962
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14963
+ --sidebar-item-padding-right: var(--space-2);
14964
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
14965
+ --sidebar-item-height: var(--space-5);
14966
+ border-radius: var(--radius-3);
14967
+ }
14968
+ .rt-SidebarContent:where(.md\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14969
+ --sidebar-item-padding-left: var(--space-2);
14970
+ }
14971
+ .rt-SidebarContent:where(.md\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14972
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
14973
+ }
14974
+ .rt-SidebarContent:where(.md\:rt-r-size-2) {
14975
+ --sidebar-content-padding: var(--space-2);
14976
+ --sidebar-item-padding-left: var(--space-3);
14977
+ --sidebar-item-padding-right: var(--space-3);
14978
+ --sidebar-item-padding-y: var(--space-1);
14979
+ --sidebar-item-height: var(--space-6);
14980
+ border-radius: var(--radius-4);
14981
+ }
14982
+ .rt-SidebarContent:where(.md\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
14983
+ --sidebar-item-padding-left: var(--space-3);
14984
+ }
14985
+ .rt-SidebarContent:where(.md\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
14986
+ --sidebar-item-padding-left: var(--space-5);
14987
+ }
14988
+ .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
14989
+ font-size: var(--font-size-1);
14990
+ line-height: var(--line-height-1);
14991
+ letter-spacing: var(--letter-spacing-1);
14992
+ border-radius: var(--radius-1);
14993
+ }
14994
+ .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
14995
+ width: calc(var(--space-3) * 1.175);
14996
+ height: calc(var(--space-3) * 1.175);
14997
+ flex-shrink: 0;
14998
+ }
14999
+ .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
15000
+ width: calc(8px * var(--scaling));
15001
+ height: calc(8px * var(--scaling));
15002
+ flex-shrink: 0;
15003
+ margin-left: auto;
15004
+ }
15005
+ .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
15006
+ font-size: var(--font-size-1);
15007
+ line-height: var(--line-height-1);
15008
+ letter-spacing: var(--letter-spacing-1);
15009
+ }
15010
+ .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15011
+ font-size: var(--font-size-1);
15012
+ line-height: var(--line-height-1);
15013
+ letter-spacing: var(--letter-spacing-1);
15014
+ border-radius: var(--radius-1);
15015
+ }
15016
+ .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15017
+ width: calc(var(--space-3) * 1.175);
15018
+ height: calc(var(--space-3) * 1.175);
15019
+ flex-shrink: 0;
15020
+ }
15021
+ .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15022
+ font-size: var(--font-size-1);
15023
+ line-height: var(--line-height-1);
15024
+ letter-spacing: var(--letter-spacing-1);
15025
+ border-radius: var(--radius-1);
15026
+ }
15027
+ .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15028
+ width: calc(var(--space-3) * 1.175);
15029
+ height: calc(var(--space-3) * 1.175);
15030
+ flex-shrink: 0;
15031
+ }
15032
+ .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
15033
+ font-size: var(--font-size-2);
15034
+ line-height: var(--line-height-2);
15035
+ letter-spacing: var(--letter-spacing-2);
15036
+ border-radius: var(--radius-2);
15037
+ }
15038
+ .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
15039
+ width: var(--space-4);
15040
+ height: var(--space-4);
15041
+ flex-shrink: 0;
15042
+ }
15043
+ .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
15044
+ width: calc(10px * var(--scaling));
15045
+ height: calc(10px * var(--scaling));
15046
+ flex-shrink: 0;
15047
+ margin-left: auto;
15048
+ }
15049
+ .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
15050
+ font-size: var(--font-size-2);
15051
+ line-height: var(--line-height-2);
15052
+ letter-spacing: var(--letter-spacing-2);
15053
+ }
15054
+ .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15055
+ font-size: var(--font-size-2);
15056
+ line-height: var(--line-height-2);
15057
+ letter-spacing: var(--letter-spacing-2);
15058
+ border-radius: var(--radius-2);
15059
+ }
15060
+ .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15061
+ width: var(--space-4);
15062
+ height: var(--space-4);
15063
+ flex-shrink: 0;
15064
+ }
15065
+ .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15066
+ font-size: var(--font-size-2);
15067
+ line-height: var(--line-height-2);
15068
+ letter-spacing: var(--letter-spacing-2);
15069
+ border-radius: var(--radius-2);
15070
+ }
15071
+ .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15072
+ width: var(--space-4);
15073
+ height: var(--space-4);
15074
+ flex-shrink: 0;
15075
+ }
15076
+ }
15077
+ @media (min-width: 1280px) {
15078
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
15079
+ --sidebar-base-padding: var(--space-3);
15080
+ --sidebar-base-border-radius: var(--radius-4);
15081
+ --sidebar-content-padding: var(--space-1);
15082
+ --sidebar-item-padding-left: var(--space-2);
15083
+ --sidebar-item-padding-right: var(--space-2);
15084
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
15085
+ --sidebar-item-height: var(--space-5);
15086
+ }
15087
+ .rt-SidebarContainer:where(.lg\:rt-r-size-2) {
15088
+ --sidebar-base-padding: var(--space-4);
15089
+ --sidebar-base-border-radius: var(--radius-4);
15090
+ --sidebar-content-padding: var(--space-2);
15091
+ --sidebar-item-padding-left: var(--space-3);
15092
+ --sidebar-item-padding-right: var(--space-3);
15093
+ --sidebar-item-padding-y: var(--space-1);
15094
+ --sidebar-item-height: var(--space-6);
15095
+ }
15096
+ .rt-SidebarContent:where(.lg\:rt-r-size-1) {
15097
+ --sidebar-content-padding: var(--space-1);
15098
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
15099
+ --sidebar-item-padding-right: var(--space-2);
15100
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
15101
+ --sidebar-item-height: var(--space-5);
15102
+ border-radius: var(--radius-3);
15103
+ }
15104
+ .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
15105
+ --sidebar-item-padding-left: var(--space-2);
15106
+ }
15107
+ .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
15108
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
15109
+ }
15110
+ .rt-SidebarContent:where(.lg\:rt-r-size-2) {
15111
+ --sidebar-content-padding: var(--space-2);
15112
+ --sidebar-item-padding-left: var(--space-3);
15113
+ --sidebar-item-padding-right: var(--space-3);
15114
+ --sidebar-item-padding-y: var(--space-1);
15115
+ --sidebar-item-height: var(--space-6);
15116
+ border-radius: var(--radius-4);
15117
+ }
15118
+ .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
15119
+ --sidebar-item-padding-left: var(--space-3);
15120
+ }
15121
+ .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
15122
+ --sidebar-item-padding-left: var(--space-5);
15123
+ }
15124
+ .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
15125
+ font-size: var(--font-size-1);
15126
+ line-height: var(--line-height-1);
15127
+ letter-spacing: var(--letter-spacing-1);
15128
+ border-radius: var(--radius-1);
15129
+ }
15130
+ .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
15131
+ width: calc(var(--space-3) * 1.175);
15132
+ height: calc(var(--space-3) * 1.175);
15133
+ flex-shrink: 0;
15134
+ }
15135
+ .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
15136
+ width: calc(8px * var(--scaling));
15137
+ height: calc(8px * var(--scaling));
15138
+ flex-shrink: 0;
15139
+ margin-left: auto;
15140
+ }
15141
+ .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
15142
+ font-size: var(--font-size-1);
15143
+ line-height: var(--line-height-1);
15144
+ letter-spacing: var(--letter-spacing-1);
15145
+ }
15146
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15147
+ font-size: var(--font-size-1);
15148
+ line-height: var(--line-height-1);
15149
+ letter-spacing: var(--letter-spacing-1);
15150
+ border-radius: var(--radius-1);
15151
+ }
15152
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15153
+ width: calc(var(--space-3) * 1.175);
15154
+ height: calc(var(--space-3) * 1.175);
15155
+ flex-shrink: 0;
15156
+ }
15157
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15158
+ font-size: var(--font-size-1);
15159
+ line-height: var(--line-height-1);
15160
+ letter-spacing: var(--letter-spacing-1);
15161
+ border-radius: var(--radius-1);
15162
+ }
15163
+ .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15164
+ width: calc(var(--space-3) * 1.175);
15165
+ height: calc(var(--space-3) * 1.175);
15166
+ flex-shrink: 0;
15167
+ }
15168
+ .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
15169
+ font-size: var(--font-size-2);
15170
+ line-height: var(--line-height-2);
15171
+ letter-spacing: var(--letter-spacing-2);
15172
+ border-radius: var(--radius-2);
15173
+ }
15174
+ .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
15175
+ width: var(--space-4);
15176
+ height: var(--space-4);
15177
+ flex-shrink: 0;
15178
+ }
15179
+ .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
15180
+ width: calc(10px * var(--scaling));
15181
+ height: calc(10px * var(--scaling));
15182
+ flex-shrink: 0;
15183
+ margin-left: auto;
15184
+ }
15185
+ .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
15186
+ font-size: var(--font-size-2);
15187
+ line-height: var(--line-height-2);
15188
+ letter-spacing: var(--letter-spacing-2);
15189
+ }
15190
+ .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15191
+ font-size: var(--font-size-2);
15192
+ line-height: var(--line-height-2);
15193
+ letter-spacing: var(--letter-spacing-2);
15194
+ border-radius: var(--radius-2);
15195
+ }
15196
+ .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15197
+ width: var(--space-4);
15198
+ height: var(--space-4);
15199
+ flex-shrink: 0;
15200
+ }
15201
+ .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15202
+ font-size: var(--font-size-2);
15203
+ line-height: var(--line-height-2);
15204
+ letter-spacing: var(--letter-spacing-2);
15205
+ border-radius: var(--radius-2);
15206
+ }
15207
+ .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15208
+ width: var(--space-4);
15209
+ height: var(--space-4);
15210
+ flex-shrink: 0;
15211
+ }
15212
+ }
15213
+ @media (min-width: 1640px) {
15214
+ .rt-SidebarContainer:where(.xl\:rt-r-size-1) {
15215
+ --sidebar-base-padding: var(--space-3);
15216
+ --sidebar-base-border-radius: var(--radius-4);
15217
+ --sidebar-content-padding: var(--space-1);
15218
+ --sidebar-item-padding-left: var(--space-2);
15219
+ --sidebar-item-padding-right: var(--space-2);
15220
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
15221
+ --sidebar-item-height: var(--space-5);
15222
+ }
15223
+ .rt-SidebarContainer:where(.xl\:rt-r-size-2) {
15224
+ --sidebar-base-padding: var(--space-4);
15225
+ --sidebar-base-border-radius: var(--radius-4);
15226
+ --sidebar-content-padding: var(--space-2);
15227
+ --sidebar-item-padding-left: var(--space-3);
15228
+ --sidebar-item-padding-right: var(--space-3);
15229
+ --sidebar-item-padding-y: var(--space-1);
15230
+ --sidebar-item-height: var(--space-6);
15231
+ }
15232
+ .rt-SidebarContent:where(.xl\:rt-r-size-1) {
15233
+ --sidebar-content-padding: var(--space-1);
15234
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
15235
+ --sidebar-item-padding-right: var(--space-2);
15236
+ --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
15237
+ --sidebar-item-height: var(--space-5);
15238
+ border-radius: var(--radius-3);
15239
+ }
15240
+ .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
15241
+ --sidebar-item-padding-left: var(--space-2);
15242
+ }
15243
+ .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
15244
+ --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
15245
+ }
15246
+ .rt-SidebarContent:where(.xl\:rt-r-size-2) {
15247
+ --sidebar-content-padding: var(--space-2);
15248
+ --sidebar-item-padding-left: var(--space-3);
15249
+ --sidebar-item-padding-right: var(--space-3);
15250
+ --sidebar-item-padding-y: var(--space-1);
15251
+ --sidebar-item-height: var(--space-6);
15252
+ border-radius: var(--radius-4);
15253
+ }
15254
+ .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
15255
+ --sidebar-item-padding-left: var(--space-3);
15256
+ }
15257
+ .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
15258
+ --sidebar-item-padding-left: var(--space-5);
15259
+ }
15260
+ .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
15261
+ font-size: var(--font-size-1);
15262
+ line-height: var(--line-height-1);
15263
+ letter-spacing: var(--letter-spacing-1);
15264
+ border-radius: var(--radius-1);
15265
+ }
15266
+ .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
15267
+ width: calc(var(--space-3) * 1.175);
15268
+ height: calc(var(--space-3) * 1.175);
15269
+ flex-shrink: 0;
15270
+ }
15271
+ .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
15272
+ width: calc(8px * var(--scaling));
15273
+ height: calc(8px * var(--scaling));
15274
+ flex-shrink: 0;
15275
+ margin-left: auto;
15276
+ }
15277
+ .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
15278
+ font-size: var(--font-size-1);
15279
+ line-height: var(--line-height-1);
15280
+ letter-spacing: var(--letter-spacing-1);
15281
+ }
15282
+ .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15283
+ font-size: var(--font-size-1);
15284
+ line-height: var(--line-height-1);
15285
+ letter-spacing: var(--letter-spacing-1);
15286
+ border-radius: var(--radius-1);
15287
+ }
15288
+ .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15289
+ width: calc(var(--space-3) * 1.175);
15290
+ height: calc(var(--space-3) * 1.175);
15291
+ flex-shrink: 0;
15292
+ }
15293
+ .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15294
+ font-size: var(--font-size-1);
15295
+ line-height: var(--line-height-1);
15296
+ letter-spacing: var(--letter-spacing-1);
15297
+ border-radius: var(--radius-1);
15298
+ }
15299
+ .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15300
+ width: calc(var(--space-3) * 1.175);
15301
+ height: calc(var(--space-3) * 1.175);
15302
+ flex-shrink: 0;
15303
+ }
15304
+ .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
15305
+ font-size: var(--font-size-2);
15306
+ line-height: var(--line-height-2);
15307
+ letter-spacing: var(--letter-spacing-2);
15308
+ border-radius: var(--radius-2);
15309
+ }
15310
+ .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
15311
+ width: var(--space-4);
15312
+ height: var(--space-4);
15313
+ flex-shrink: 0;
15314
+ }
15315
+ .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
15316
+ width: calc(10px * var(--scaling));
15317
+ height: calc(10px * var(--scaling));
15318
+ flex-shrink: 0;
15319
+ margin-left: auto;
15320
+ }
15321
+ .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
15322
+ font-size: var(--font-size-2);
15323
+ line-height: var(--line-height-2);
15324
+ letter-spacing: var(--letter-spacing-2);
15325
+ }
15326
+ .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
15327
+ font-size: var(--font-size-2);
15328
+ line-height: var(--line-height-2);
15329
+ letter-spacing: var(--letter-spacing-2);
15330
+ border-radius: var(--radius-2);
15331
+ }
15332
+ .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
15333
+ width: var(--space-4);
15334
+ height: var(--space-4);
15335
+ flex-shrink: 0;
15336
+ }
15337
+ .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
15338
+ font-size: var(--font-size-2);
15339
+ line-height: var(--line-height-2);
15340
+ letter-spacing: var(--letter-spacing-2);
15341
+ border-radius: var(--radius-2);
15342
+ }
15343
+ .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
15344
+ width: var(--space-4);
15345
+ height: var(--space-4);
15346
+ flex-shrink: 0;
15347
+ }
15348
+ }
15349
+ .rt-SidebarContainer:where(.rt-variant-ghost) {
15350
+ background-color: transparent;
15351
+ border: none;
15352
+ }
15353
+ .rt-SidebarContainer:where(.rt-variant-soft) {
15354
+ background-color: var(--accent-a2);
15355
+ }
15356
+ .rt-SidebarContainer:where(.rt-variant-surface) {
15357
+ background-color: var(--color-surface);
15358
+ }
15359
+ .rt-SidebarContainer:where(.rt-variant-surface):where([data-side="left"]) {
15360
+ border-right: 1px solid var(--gray-a6);
15361
+ }
15362
+ .rt-SidebarContainer:where(.rt-variant-surface):where([data-side="right"]) {
15363
+ border-left: 1px solid var(--gray-a6);
15364
+ }
15365
+ :where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-ghost) {
15366
+ box-shadow: var(--shadow-4);
15367
+ }
15368
+ :where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface) {
15369
+ border: 1px solid var(--gray-a6);
15370
+ }
15371
+ .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]) {
15372
+ background-color: var(--accent-9);
15373
+ color: var(--accent-contrast);
15374
+ }
15375
+ .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) {
15376
+ color: inherit !important;
15377
+ }
15378
+ .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']) {
15379
+ color: inherit !important;
15380
+ }
15381
+ .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]) {
15382
+ background-color: var(--accent-9);
15383
+ color: var(--accent-contrast);
15384
+ }
15385
+ .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) {
15386
+ color: inherit !important;
15387
+ }
15388
+ .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']) {
15389
+ color: inherit !important;
15390
+ }
15391
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
15392
+ .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
15393
+ .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]),
15394
+ .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
15395
+ .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]),
15396
+ .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) {
15397
+ background-color: var(--accent-12);
15398
+ color: var(--accent-1);
15399
+ }
15400
+ .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) {
15401
+ color: inherit !important;
15402
+ }
15403
+ .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']) {
15404
+ color: inherit !important;
15405
+ }
15406
+ .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]) {
15407
+ background-color: var(--accent-9);
15408
+ color: var(--accent-contrast);
15409
+ }
15410
+ .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) {
15411
+ color: inherit !important;
15412
+ }
15413
+ .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']) {
15414
+ color: inherit !important;
15415
+ }
15416
+ .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]) {
15417
+ background-color: var(--accent-a4);
15418
+ color: var(--accent-a12);
15419
+ }
15420
+ .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']) {
15421
+ color: var(--gray-11) !important;
15422
+ }
15423
+ .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]) {
15424
+ background-color: var(--accent-a4);
15425
+ }
15426
+ .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']) {
15427
+ color: var(--gray-11) !important;
15428
+ }
15429
+ .rt-SidebarContent :where(.rt-BaseMenuItem) {
15430
+ border-radius: var(--radius-2);
15431
+ margin-bottom: var(--space-1);
15432
+ }
15433
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
15434
+ transform: translateX(-100%);
15435
+ transition: transform var(--duration-3) var(--ease-2);
15436
+ }
15437
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
15438
+ transform: translateX(0);
15439
+ transition: transform var(--duration-3) var(--ease-2);
15440
+ }
15441
+ .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"][data-side="right"]) {
15442
+ transform: translateX(100%);
15443
+ }
15444
+ @media (prefers-reduced-motion: reduce) {
15445
+ .rt-SidebarRoot:where([data-collapsible="icon"]) {
15446
+ transition: none;
15447
+ }
15448
+ }
15449
+ @media (max-width: 768px) {
15450
+ .rt-SidebarRoot {
15451
+ display: none;
14262
15452
  }
14263
15453
  }
14264
15454
  .rt-SliderRoot {