@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/components/ui/sidebar/sidebar.css

@@ -1,102 +1,110 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-sidebar {
-	@apply contents;
+  display: contents;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Provider                                                                   */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar-provider {
-	@apply relative flex h-svh min-w-0 w-full flex-1 overflow-hidden bg-background;
+  position: relative;
+  display: flex;
+  height: 100svh;
+  width: 100%;
+  min-width: 0px;
+  flex: 1;
+  overflow: hidden;
+  background-color: var(--color-background, var(--background));
 }
-
 .rui-sidebar-provider[data-layout='full'] {
-	@apply bg-transparent;
+  background-color: transparent;
 }
-
 .rui-sidebar-provider:has(> rui-sidebar[data-mobile='true'][data-state='expanded']) {
-	@apply overflow-hidden;
+  overflow: hidden;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Host                                                                       */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar {
-	@apply relative flex h-full min-w-0 shrink-0 self-stretch bg-surface text-on-background;
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 0px;
+  flex-shrink: 0;
+  align-self: stretch;
+  background-color: var(--color-surface, var(--surface));
+  color: var(--color-on-background, var(--on-background));
 }
-
 .rui-sidebar[data-side='right'] {
-	@apply flex-row-reverse;
+  flex-direction: row-reverse;
 }
-
 .rui-sidebar[data-variant='inset'] {
-	@apply rounded-lg border border-border bg-background;
+  border-radius: var(--radius-lg, var(--border-radius-lg));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-border, var(--border));
+  background-color: var(--color-background, var(--background));
 }
-
 .rui-sidebar[data-state='collapsed'] {
-	@apply min-w-0;
+  min-width: 0px;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Pane                                                                       */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar__pane {
-	@apply flex h-full min-h-0 min-w-0 flex-col overflow-hidden;
-	transition: width var(--duration-normal) var(--ease-out);
-	width: var(--rui-sidebar-pane-width, 256px);
-	flex: 0 0 auto;
+  display: flex;
+  height: 100%;
+  min-height: 0px;
+  min-width: 0px;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width var(--duration-normal) var(--ease-out);
+  width: var(--rui-sidebar-pane-width, 256px);
+  flex: 0 0 auto;
 }
-
 .rui-sidebar[data-state='collapsed'][data-collapsible='full'] > .rui-sidebar__pane,
 .rui-sidebar[data-state='collapsed'][data-collapsible='off'] > .rui-sidebar__pane {
-	@apply w-0 overflow-hidden;
-	opacity: 0;
+  width: 0px;
+  overflow: hidden;
+  opacity: 0;
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] > .rui-sidebar__pane {
-	@apply items-center;
+  align-items: center;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Resize handle                                                              */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar__handle {
-	@apply flex shrink-0 cursor-col-resize items-center justify-center bg-border p-0 outline-hidden;
-	width: 6px;
-	transition: background-color var(--duration-fast) var(--ease-standard);
+  display: flex;
+  flex-shrink: 0;
+  cursor: col-resize;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-border, var(--border));
+  padding: 0px;
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  width: 6px;
+  transition: background-color var(--duration-fast) var(--ease-standard);
 }
-
 .rui-sidebar[data-side='right'] > .rui-sidebar__handle {
-	@apply cursor-col-resize;
+  cursor: col-resize;
 }
-
 .rui-sidebar__handle:hover,
 .rui-sidebar__handle:focus-visible {
-	@apply bg-primary;
+  background-color: var(--color-primary, var(--primary));
 }
-
 .rui-sidebar__handle:focus-visible {
-	@apply ring-2 ring-focus-ring;
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
 }
-
 .rui-sidebar__handle-grip {
-	@apply block h-8 w-0.5 rounded-full bg-on-surface/30;
+  display: block;
+  height: var(--spacing-8, var(--space-8));
+  width: calc(var(--spacing, 0.25rem) * 0.5);
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-on-surface, var(--on-surface));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-on-surface, var(--on-surface)) 30%, transparent);
+  }
 }
-
 .rui-sidebar__handle:hover .rui-sidebar__handle-grip,
 .rui-sidebar__handle:focus-visible .rui-sidebar__handle-grip {
-	@apply bg-on-primary;
+  background-color: var(--color-on-primary, var(--on-primary));
 }
-
-/* -------------------------------------------------------------------------- */
-/* Pane internals                                                             */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar__header,
 .rui-sidebar__content,
 .rui-sidebar__footer,
@@ -109,123 +117,232 @@ rui-sidebar {
 .rui-sidebar__group-label,
 .rui-sidebar__group-action,
 .rui-sidebar__group-header {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
-
 .rui-sidebar__header {
-	@apply flex h-14 shrink-0 flex-row items-center gap-2 border-b border-border px-3;
+  display: flex;
+  height: calc(var(--spacing, 0.25rem) * 14);
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2, var(--space-2));
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-border, var(--border));
+  padding-inline: var(--spacing-3, var(--space-3));
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__header {
-	@apply flex-col justify-center gap-1 px-1 py-2;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1, var(--space-1));
+  padding-inline: var(--spacing-1, var(--space-1));
+  padding-block: var(--spacing-2, var(--space-2));
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__brand {
-	@apply w-full flex-none justify-center gap-0;
+  width: 100%;
+  flex: none;
+  justify-content: center;
+  gap: 0px;
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__brand-text {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar__content {
-	@apply flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-3;
+  display: flex;
+  min-height: 0px;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-4, var(--space-4));
+  overflow-y: auto;
+  padding: var(--spacing-3, var(--space-3));
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__content {
-	@apply gap-2 overflow-x-hidden px-1;
+  gap: var(--spacing-2, var(--space-2));
+  overflow-x: hidden;
+  padding-inline: var(--spacing-1, var(--space-1));
 }
-
 .rui-sidebar__footer {
-	@apply flex shrink-0 flex-col gap-2 border-t border-border p-3;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: var(--spacing-2, var(--space-2));
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  border-color: var(--color-border, var(--border));
+  padding: var(--spacing-3, var(--space-3));
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__footer {
-	@apply items-center gap-1 px-1 py-2;
+  align-items: center;
+  gap: var(--spacing-1, var(--space-1));
+  padding-inline: var(--spacing-1, var(--space-1));
+  padding-block: var(--spacing-2, var(--space-2));
 }
-
 .rui-sidebar__separator {
-	@apply mx-2 my-1 border-0 border-t border-border;
+  margin-inline: var(--spacing-2, var(--space-2));
+  margin-block: var(--spacing-1, var(--space-1));
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  border-color: var(--color-border, var(--border));
 }
-
 .rui-sidebar__group {
-	@apply flex flex-col gap-1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, var(--space-1));
 }
-
 .rui-sidebar__group-header {
-	@apply flex items-center justify-between gap-1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-1, var(--space-1));
 }
-
 .rui-sidebar__group-label {
-	@apply m-0 px-2 text-xs font-semibold tracking-wide text-on-surface uppercase;
+  margin: 0px;
+  padding-inline: var(--spacing-2, var(--space-2));
+  font-size: var(--text-xs, var(--text-xs));
+  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --tw-font-weight: var(--font-weight-semibold, var(--weight-semibold));
+  font-weight: var(--font-weight-semibold, var(--weight-semibold));
+  --tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  color: var(--color-on-surface, var(--on-surface));
+  text-transform: uppercase;
 }
-
 .rui-sidebar__group-action {
-	@apply inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-on-surface;
-	transition: background-color var(--duration-fast) var(--ease-standard);
+  display: inline-flex;
+  width: var(--spacing-6, var(--space-6));
+  height: var(--spacing-6, var(--space-6));
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, var(--border-radius-md));
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: var(--color-on-surface, var(--on-surface));
+  transition: background-color var(--duration-fast) var(--ease-standard);
 }
-
 .rui-sidebar__group-action:hover {
-	@apply bg-primary/10;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 10%, transparent);
+  }
 }
-
 .rui-sidebar__group-action:focus-visible {
-	@apply bg-primary/10 outline-hidden ring-2 ring-focus-ring ring-inset;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 10%, transparent);
+  }
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  --tw-ring-inset: inset;
 }
-
 .rui-sidebar__menu {
-	@apply m-0 flex list-none flex-col gap-0.5 p-0;
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: calc(var(--spacing, 0.25rem) * 0.5);
+  padding: 0px;
 }
-
 .rui-sidebar__menu-item {
-	@apply list-none;
+  list-style-type: none;
 }
-
 .rui-sidebar__menu-button {
-	@apply flex w-full min-w-0 items-center gap-2 rounded-md border-0 bg-transparent px-2 py-1.5 text-left text-sm cursor-pointer text-on-background;
-	transition: background-color var(--duration-fast) var(--ease-standard);
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  cursor: pointer;
+  align-items: center;
+  gap: var(--spacing-2, var(--space-2));
+  border-radius: var(--radius-md, var(--border-radius-md));
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: transparent;
+  padding-inline: var(--spacing-2, var(--space-2));
+  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
+  text-align: left;
+  font-size: var(--text-sm, var(--text-sm));
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: var(--color-on-background, var(--on-background));
+  transition: background-color var(--duration-fast) var(--ease-standard);
 }
-
 .rui-sidebar__menu-button:hover {
-	@apply bg-primary/10;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 10%, transparent);
+  }
 }
-
 .rui-sidebar__menu-button:focus-visible {
-	@apply bg-primary/10 outline-hidden ring-2 ring-focus-ring ring-inset;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 10%, transparent);
+  }
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  --tw-outline-style: none;
+  outline-style: none;
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  --tw-ring-inset: inset;
 }
-
 .rui-sidebar__menu-button[aria-current='page'],
 .rui-sidebar__menu-button--active {
-	@apply bg-primary/15 font-medium text-on-background;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 15%, transparent);
+  }
+  --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
+  font-weight: var(--font-weight-medium, var(--weight-medium));
+  color: var(--color-on-background, var(--on-background));
 }
-
 .rui-sidebar__menu-button[aria-disabled='true'],
 .rui-sidebar__menu-button[disabled] {
-	@apply pointer-events-none cursor-not-allowed opacity-muted text-on-surface;
+  pointer-events: none;
+  cursor: not-allowed;
+  color: var(--color-on-surface, var(--on-surface));
+  opacity: var(--opacity-muted, var(--opacity-muted));
 }
-
 .rui-sidebar__menu-action {
-	@apply text-on-surface;
+  color: var(--color-on-surface, var(--on-surface));
 }
-
 .rui-sidebar__menu-action:hover {
-	@apply bg-primary/5;
+  background-color: var(--color-primary, var(--primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-primary, var(--primary)) 5%, transparent);
+  }
 }
-
 .rui-sidebar__menu-button > :first-child {
-	@apply shrink-0;
+  flex-shrink: 0;
 }
-
 .rui-sidebar__menu-button > :last-child {
-	@apply min-w-0 flex-1 truncate;
+  min-width: 0px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-/* When collapsed to icon mode, hide every menu label and decorative chrome. */
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__menu-button,
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__menu-action {
-	@apply size-8 w-8 justify-center gap-0 p-0;
+  height: var(--spacing-8, var(--space-8));
+  width: var(--spacing-8, var(--space-8));
+  justify-content: center;
+  gap: 0px;
+  padding: 0px;
 }
-
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__menu-button > :last-child,
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__menu-action > :last-child,
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__group-label,
@@ -236,127 +353,228 @@ rui-sidebar {
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed']
 	.rui-sidebar__footer
 	> *:not(.rui-sidebar__menu):not(button):not(a) {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar__icon {
-	@apply size-4 shrink-0;
+  width: var(--spacing-4, var(--space-4));
+  height: var(--spacing-4, var(--space-4));
+  flex-shrink: 0;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Inset                                                                      */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar__inset {
-	@apply flex min-h-0 min-w-0 w-full flex-1 flex-col gap-0 overflow-hidden bg-background;
+  display: flex;
+  min-height: 0px;
+  width: 100%;
+  min-width: 0px;
+  flex: 1;
+  flex-direction: column;
+  gap: 0px;
+  overflow: hidden;
+  background-color: var(--color-background, var(--background));
 }
-
-/* -------------------------------------------------------------------------- */
-/* Trigger                                                                    */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar__trigger {
-	@apply inline-flex size-9 shrink-0 items-center justify-center p-0;
+  display: inline-flex;
+  width: calc(var(--spacing, 0.25rem) * 9);
+  height: calc(var(--spacing, 0.25rem) * 9);
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0px;
 }
-
 .rui-sidebar__trigger-icon {
-	@apply flex size-4 items-center justify-center;
+  display: flex;
+  width: var(--spacing-4, var(--space-4));
+  height: var(--spacing-4, var(--space-4));
+  align-items: center;
+  justify-content: center;
 }
-
 .rui-sidebar__trigger-glyph {
-	@apply size-4 shrink-0;
+  width: var(--spacing-4, var(--space-4));
+  height: var(--spacing-4, var(--space-4));
+  flex-shrink: 0;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Alternate header (collapse) vs inset (open) triggers                       */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true']))
 	rui-sidebar-trigger[data-placement='header'],
 .rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true']))
 	rui-sidebar-trigger[data-placement='inset'] {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar-provider:has(> rui-sidebar[data-state='expanded']:not([data-mobile='true']))
 	rui-sidebar-trigger[data-placement='inset'] {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed']:not([data-mobile='true']))
 	rui-sidebar-trigger[data-placement='header'] {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar-provider:has(> rui-sidebar[data-state='expanded'][data-mobile='true'])
 	rui-sidebar-trigger[data-placement='inset'] {
-	@apply hidden;
+  display: none;
 }
-
 .rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed'][data-mobile='true'])
 	rui-sidebar-trigger[data-placement='header'] {
-	@apply hidden;
+  display: none;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Mobile drawer                                                              */
-/* -------------------------------------------------------------------------- */
-
 .rui-sidebar[data-mobile='true'] {
-	@apply fixed inset-0 z-(--z-modal) flex min-w-0 bg-transparent;
+  position: fixed;
+  inset: 0px;
+  z-index: var(--z-modal);
+  display: flex;
+  min-width: 0px;
+  background-color: transparent;
 }
-
 .rui-sidebar[data-mobile='true'][data-state='collapsed'] {
-	@apply pointer-events-none;
+  pointer-events: none;
 }
-
 .rui-sidebar[data-mobile='true'][data-state='expanded'] {
-	@apply pointer-events-auto;
+  pointer-events: auto;
 }
-
 .rui-sidebar[data-mobile='true'] > .rui-sidebar__pane {
-	@apply relative z-(--z-modal) h-full bg-surface text-on-background;
+  position: relative;
+  z-index: var(--z-modal);
+  height: 100%;
+  background-color: var(--color-surface, var(--surface));
+  color: var(--color-on-background, var(--on-background));
 }
-
 .rui-sidebar[data-mobile='true'][data-variant='inset'] > .rui-sidebar__pane {
-	@apply bg-background;
+  background-color: var(--color-background, var(--background));
 }
-
 .rui-sidebar[data-mobile='true'][data-state='collapsed'] > .rui-sidebar__pane {
-	@apply w-0 overflow-hidden opacity-0;
+  width: 0px;
+  overflow: hidden;
+  opacity: 0%;
 }
-
 .rui-sidebar[data-mobile='true'][data-state='expanded'] > .rui-sidebar__pane {
-	@apply w-72 max-w-[85vw] opacity-100;
-	box-shadow: var(--shadow-modal);
+  width: calc(var(--spacing, 0.25rem) * 72);
+  max-width: 85vw;
+  opacity: 100%;
+  box-shadow: var(--shadow-modal);
 }
-
 .rui-sidebar[data-mobile='true'][data-side='left'] > .rui-sidebar__pane {
-	@apply me-auto;
+  margin-inline-end: auto;
 }
-
 .rui-sidebar[data-mobile='true'][data-side='right'] > .rui-sidebar__pane {
-	@apply ms-auto;
+  margin-inline-start: auto;
 }
-
 .rui-sidebar__scrim {
-	@apply absolute inset-0 z-(--z-overlay) cursor-pointer border-0 p-0 bg-overlay;
+  position: absolute;
+  inset: 0px;
+  z-index: var(--z-overlay);
+  cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  background-color: var(--color-overlay, var(--overlay));
+  padding: 0px;
 }
-
 .rui-sidebar[data-mobile='true'] > .rui-sidebar__handle {
-	@apply hidden;
+  display: none;
 }
-
-/* -------------------------------------------------------------------------- */
-/* Reduced motion                                                             */
-/* -------------------------------------------------------------------------- */
-
 @media (prefers-reduced-motion: reduce) {
-	.rui-sidebar__pane,
+  .rui-sidebar__pane,
 	.rui-sidebar__handle,
 	.rui-sidebar__handle-grip,
 	.rui-sidebar__group-action,
 	.rui-sidebar__menu-button {
-		transition: none;
-	}
+    transition: none;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+    }
+  }
 }