@sigmela/router 0.3.7 → 0.5.0

package/dist/router.css

@@ -0,0 +1,975 @@
+/* ==================== ROUTER CSS CONTRACT ====================
+   Portable consumers may override only --router-* tokens. The Sigmela app
+   variables are fallbacks kept so the router can run unchanged in client. */
+:root {
+  --router-bg: var(--color-sigmela-bg, var(--background-page, #1c1c1e));
+  --router-text: var(--color-sigmela-text, var(--text-primary, #f5f5f0));
+  --router-text-secondary: var(
+    --color-sigmela-text-secondary,
+    var(--text-secondary, rgb(from var(--router-text) r g b / 62%))
+  );
+  --router-line: var(
+    --color-sigmela-line,
+    var(--separator-common, rgb(from var(--router-text) r g b / 12%))
+  );
+  --router-scrim: var(
+    --color-sigmela-scrim,
+    var(--background-overlay-light, rgba(0, 0, 0, 0.42))
+  );
+  --router-container: var(--container-app, 490px);
+  --router-card-shadow: var(--shadow-sigmela-card, 0 24px 80px rgba(0, 0, 0, 0.28));
+  --router-glass-bg: var(--glass-background, var(--router-bg));
+  --router-transparent: transparent;
+  --router-divider: var(--router-line);
+  --router-footer-fade-bg: var(--router-bg);
+  --router-footer-fade-transparent: rgb(from var(--router-bg) r g b / 0);
+  --router-drawer-bg: var(--background-content-alternate, var(--router-bg));
+  --router-drawer-text: var(--router-text);
+  --router-drawer-hover-bg: rgb(from var(--router-text) r g b / 6%);
+  --router-drawer-active-bg: var(
+    --background-tertiary-trans,
+    rgb(from var(--router-text) r g b / 10%)
+  );
+  --router-drawer-badge-bg: var(--router-drawer-text);
+  --router-drawer-badge-text: var(--router-drawer-bg);
+  --router-drawer-focus-ring: rgb(from var(--router-drawer-text) r g b / 40%);
+  --router-drawer-overlay-color: var(--constant-black, var(--router-text));
+  --router-drawer-overlay-bg: var(--router-transparent);
+  --router-drawer-overlay-open-bg: color-mix(
+    in srgb,
+    var(--router-drawer-overlay-color) 30%,
+    transparent
+  );
+  --router-close-button-bg: var(--router-transparent);
+  --router-close-button-text: var(--router-text);
+  --router-close-button-light-text: var(--constant-white, #fff);
+  --router-close-button-glass-bg: rgb(from var(--router-glass-bg) r g b / 70%);
+  --router-close-button-shadow: 0 2px 25px 0px rgba(0, 0, 0, 0.1);
+  --router-close-button-shine: linear-gradient(
+    8deg,
+    #fff0,
+    #ffffffe6 35%,
+    #ffffffe6 65%,
+    #fff0
+  );
+  --router-mask-fill: #000;
+  --router-title-font-family: var(--font-display, inherit);
+  --router-title-font-size: 20px;
+  --router-title-line-height: 24px;
+  --router-title-font-weight: 700;
+  --router-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* ==================== ROUTER SHELL ==================== */
+.screen-stack {
+  min-width: 100%;
+  width: 100%;
+  display: flex;
+  position: relative;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--router-bg);
+  color: var(--router-text);
+}
+
+.screen-stack > .screen-stack-item {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  display: none;
+  background: var(--router-bg);
+  transition: transform var(--stack-transition-time, 300ms)
+    cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.screen-stack > .screen-stack-item.push {
+  background: var(--router-bg);
+}
+
+.screen-stack > .screen-stack-item.push::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: var(--router-bg);
+  pointer-events: none;
+}
+
+.screen-stack[data-animation='true'] > .screen-stack-item {
+  will-change: transform;
+}
+
+.screen-stack[data-animation='true'] {
+  pointer-events: none;
+}
+
+.stack-screen-container {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  background: var(--router-bg);
+}
+
+.stack-screen-container > * {
+  flex: 1 0 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.screen-stack > .screen-stack-item.phase-active,
+.screen-stack > .screen-stack-item.transition-entered,
+.screen-stack > .screen-stack-item.transition-entering,
+.screen-stack > .screen-stack-item.transition-preEnter,
+.screen-stack > .screen-stack-item.transition-preExit,
+.screen-stack > .screen-stack-item.phase-inactive,
+.screen-stack > .screen-stack-item.phase-exiting,
+.screen-stack > .screen-stack-item.transition-exiting,
+.screen-stack > .screen-stack-item.pop-exit {
+  display: flex;
+}
+
+.screen-stack > .screen-stack-item.phase-inactive {
+  pointer-events: none;
+}
+
+.screen-stack > .screen-stack-item.phase-exiting,
+.screen-stack > .screen-stack-item.transition-exiting {
+  pointer-events: none;
+}
+
+.screen-stack-item.push.push-enter.transition-preEnter {
+  transform: translateX(100%);
+}
+
+.screen-stack-item.push.push-enter.transition-entering,
+.screen-stack-item.push.push-enter.transition-entered {
+  transform: translateX(0);
+}
+
+.screen-stack-item.push.slide-from-bottom-enter.transition-preEnter {
+  transform: translateY(100%);
+}
+
+.screen-stack-item.push.slide-from-bottom-enter.transition-entering,
+.screen-stack-item.push.slide-from-bottom-enter.transition-entered {
+  transform: translateY(0);
+}
+
+.screen-stack-item.push.push-background {
+  transform: translateX(-25%) !important;
+  transition: transform var(--stack-transition-time, 300ms)
+    cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.screen-stack-item.push.pop-background {
+  transform: translateX(-25%) !important;
+}
+
+.screen-stack-item.push.pop-exit.transition-exiting {
+  transform: translateX(100%);
+}
+
+.screen-stack-item.push.slide-from-bottom-exit.transition-exiting {
+  transform: translateY(100%);
+}
+
+.screen-stack-item.push.pop-enter {
+  transition: transform var(--stack-transition-time, 300ms)
+    cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.screen-stack-item.push.pop-enter.phase-active,
+.screen-stack-item.push.pop-enter.phase-active.transition-entered {
+  transform: translateX(0);
+}
+
+.screen-stack-item.none {
+  transform: translate3d(0, 0, 0) !important;
+  transition: none !important;
+}
+
+.router-overlay-shell {
+  pointer-events: none;
+  position: fixed;
+  inset-inline: 0;
+  margin-inline: auto;
+  max-width: var(--router-container);
+}
+
+.router-overlay-shell--content {
+  inset-block: 0;
+}
+
+.router-overlay-shell--fullscreen {
+  bottom: 0;
+}
+
+.router-modal-shell {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  isolation: isolate;
+}
+
+.router-modal-backdrop {
+  background: var(--router-scrim);
+  z-index: 0;
+}
+
+@media (max-width: 639px) {
+  .router-modal-backdrop {
+    background: var(--router-transparent);
+    opacity: 0 !important;
+  }
+}
+
+.router-modal-surface {
+  pointer-events: auto;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100dvh - env(safe-area-inset-top, 0px));
+  overflow: hidden;
+  border-radius: 33px 33px 0 0;
+  background: var(--router-bg);
+  color: var(--router-text);
+  box-shadow: var(--router-card-shadow);
+}
+
+/* A content-sized modal deliberately leaves the page visible behind it, so it
+   never dims — at any viewport width, unlike the width-scoped rule above. */
+.router-modal-backdrop--transparent {
+  background: var(--router-transparent);
+  opacity: 0 !important;
+}
+
+/* Grows with its content, never below half the viewport. */
+.router-modal-surface--content-sized {
+  height: auto;
+  min-height: 50dvh;
+  max-height: calc(100dvh - env(safe-area-inset-top, 0px));
+}
+
+.router-scroll {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.router-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.router-sheet-surface {
+  pointer-events: auto;
+  position: absolute;
+  display: flex;
+  width: auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.router-sheet-frame-scroll--fullscreen {
+  height: 100%;
+}
+
+.router-sheet-frame-scroll {
+  max-height: inherit;
+  overflow-y: auto;
+  overscroll-behavior: none;
+}
+
+.router-overlay-flow-stack {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.router-overlay-flow-screen {
+  position: relative;
+  display: flex;
+  flex: 1 0 100%;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  background: var(--router-bg);
+}
+
+.router-overlay-flow-stack--modal .stack-screen-container {
+  overflow-y: hidden;
+}
+
+.router-overlay-flow-stack--sheet {
+  flex: 0 0 auto;
+  height: auto;
+}
+
+.router-overlay-flow-stack--sheet > .screen-stack-item.phase-active {
+  position: relative;
+  inset: auto;
+  width: 100%;
+}
+
+.router-overlay-flow-stack--sheet .stack-screen-container,
+.router-overlay-flow-stack--sheet .router-overlay-flow-screen {
+  height: auto;
+  overflow-y: visible;
+}
+
+.router-sheet-header,
+.router-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--router-bg);
+}
+
+.router-sheet-header {
+  padding: 12px 16px;
+  border-radius: 28px 28px 0 0;
+}
+
+.router-modal-header {
+  padding: 20px 16px 12px;
+}
+
+.router-sheet-header--sticky,
+.router-modal-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.router-sheet-header-side,
+.router-modal-header-side {
+  display: flex;
+  align-items: center;
+  min-width: 42px;
+  flex-shrink: 0;
+}
+
+.router-sheet-header-side--trailing,
+.router-modal-header-side--trailing {
+  justify-content: flex-end;
+}
+
+.router-sheet-header-spacer {
+  flex: 1 1 auto;
+}
+
+.router-sheet-title,
+.router-modal-title {
+  display: -webkit-box;
+  flex: 1 1 auto;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: var(--router-text);
+  font-family: var(--router-title-font-family);
+  font-size: var(--router-title-font-size);
+  font-weight: var(--router-title-font-weight);
+  line-height: var(--router-title-line-height);
+}
+
+.router-sheet-title--center,
+.router-modal-title {
+  text-align: center;
+}
+
+.router-sheet-content,
+.router-modal-content {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--router-bg);
+}
+
+.router-sheet-scroll-view,
+.router-modal-scroll-view {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  background: var(--router-bg);
+}
+
+.router-sheet-footer {
+  position: sticky;
+  bottom: 0;
+  padding: 8px 16px 12px;
+  background: var(--router-bg);
+}
+
+.router-sheet-footer--attached {
+  padding-bottom: calc(8px + var(--router-safe-area-bottom));
+}
+
+.router-modal-footer {
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 30;
+  display: flex;
+  justify-content: center;
+  padding: 16px 16px calc(8px + var(--router-safe-area-bottom));
+  background: linear-gradient(
+    to top,
+    var(--router-footer-fade-bg) 0%,
+    var(--router-footer-fade-bg) 50%,
+    var(--router-footer-fade-transparent) 100%
+  );
+}
+
+.router-modal-footer-content {
+  pointer-events: auto;
+  width: 100%;
+  max-width: 424px;
+}
+
+html[data-router-shell='desktop-fullscreen'] #root {
+  max-width: none;
+  margin-inline: 0;
+  box-shadow: none;
+}
+
+.screen-stack[data-router-shell='desktop-fullscreen'] {
+  max-width: none;
+  width: 100vw;
+}
+
+.router-overlay-shell[data-router-shell='desktop-fullscreen'] {
+  max-width: none;
+  width: 100vw;
+  margin-inline: 0;
+}
+
+.router-overlay-shell[data-router-shell='desktop-fullscreen'].router-overlay-shell--fullscreen {
+  inset: 0;
+}
+
+@media (min-width: 640px) {
+  .router-overlay-shell[data-router-shell='desktop-fullscreen'].router-modal-shell {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .router-overlay-shell[data-router-shell='desktop-fullscreen'] .router-modal-surface {
+    width: 600px;
+    max-width: calc(100vw - 48px);
+    height: 75dvh;
+    max-height: calc(100dvh - 48px);
+    border-radius: 38px;
+  }
+
+  .router-overlay-shell[data-router-shell='desktop-fullscreen']
+    .router-modal-surface.router-modal-surface--wide {
+    width: 860px;
+    height: 86dvh;
+  }
+
+  .router-overlay-shell[data-router-shell='desktop-fullscreen']
+    .router-modal-surface--content-sized {
+    height: auto;
+  }
+}
+
+/* ==================== SPLIT VIEW ==================== */
+
+.sigmela-split-view {
+  --sigmela-split-primary-max-width: 390px;
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--router-bg);
+}
+
+.sigmela-split-view .screen-stack {
+  min-width: 0;
+}
+
+.sigmela-split-pane-stack {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.sigmela-split-view__primary {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-split-view__secondary {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-split-view__primary > *,
+.sigmela-split-view__secondary > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-split-view[data-layout='narrow'] .sigmela-split-view__secondary:empty {
+  display: none;
+}
+
+.sigmela-split-view[data-layout='narrow']:has(.sigmela-split-view__secondary:not(:empty))
+  .sigmela-split-view__primary {
+  pointer-events: none;
+}
+
+.sigmela-split-view[data-layout='wide'] {
+  display: flex;
+  flex-direction: row;
+}
+
+.sigmela-split-view[data-layout='wide'] .sigmela-split-view__primary {
+  flex: 0 0 auto;
+  width: min(100%, var(--sigmela-split-primary-max-width));
+  max-width: var(--sigmela-split-primary-max-width);
+  border-right: 1px solid var(--router-divider);
+}
+
+.sigmela-split-view[data-layout='wide'] .sigmela-split-view__secondary {
+  position: relative;
+  inset: auto;
+  z-index: auto;
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.sigmela-split-view[data-layout='wide'] .sigmela-split-view__primary {
+  pointer-events: auto;
+}
+
+/* ==================== DRAWER ==================== */
+
+.sigmela-drawer {
+  --sigmela-drawer-bg: var(--router-drawer-bg);
+  --sigmela-drawer-hover-bg: var(--router-drawer-hover-bg);
+  --sigmela-drawer-item-active-bg: var(--router-drawer-active-bg);
+  --sigmela-drawer-label: var(--router-drawer-text);
+  --sigmela-drawer-overlay: var(--router-drawer-overlay-color);
+  --sigmela-drawer-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  --sigmela-drawer-width: 280px;
+
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--router-bg);
+  color: var(--router-text);
+}
+
+.sigmela-drawer__sidebar {
+  display: flex;
+  flex: 0 0 var(--sigmela-drawer-width);
+  flex-direction: column;
+  width: var(--sigmela-drawer-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--sigmela-drawer-bg);
+}
+
+.sigmela-drawer__sidebar-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: 0;
+  gap: 4px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 12px;
+}
+
+.sigmela-drawer__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 12px;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  border-top: 1px solid var(--router-divider);
+}
+
+.sigmela-drawer__main {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-drawer__main > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-drawer__assistant {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  background: transparent;
+}
+
+.sigmela-drawer__assistant > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.sigmela-drawer__overlay {
+  appearance: none;
+  display: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--router-transparent);
+}
+
+.sigmela-drawer__item {
+  appearance: none;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  height: 44px;
+  margin: 0;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--router-transparent);
+  color: var(--sigmela-drawer-label);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.sigmela-drawer__item[data-active='true'] {
+  background: var(--sigmela-drawer-item-active-bg);
+}
+
+.sigmela-drawer__item:hover:not([data-active='true']) {
+  background: var(--sigmela-drawer-hover-bg);
+}
+
+.sigmela-drawer__item:focus {
+  outline: none;
+}
+
+.sigmela-drawer__item:focus-visible {
+  box-shadow: 0 0 0 2px var(--router-drawer-focus-ring);
+}
+
+.sigmela-drawer__section-label {
+  flex: 0 0 auto;
+  min-width: 0;
+  margin: 12px 14px 2px;
+  overflow: hidden;
+  color: var(--router-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sigmela-drawer__section-label:first-child {
+  margin-top: 4px;
+}
+
+.sigmela-drawer__item-icon {
+  display: flex;
+  flex: 0 0 24px;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.sigmela-drawer__item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sigmela-drawer__item-badge {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  margin-left: 8px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  background: var(--router-drawer-badge-bg);
+  color: var(--router-drawer-badge-text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.sigmela-drawer__group-container,
+.sigmela-drawer__group-items {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sigmela-drawer__group-label {
+  width: 100%;
+}
+
+.sigmela-drawer__group-chevron {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.sigmela-drawer__group-chevron[data-expanded='true'] {
+  transform: rotate(180deg);
+}
+
+.sigmela-drawer__subitem {
+  height: 38px;
+  padding-left: 28px;
+}
+
+.sigmela-drawer__subitem .sigmela-drawer__item-label {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+@media (max-width: 640px) {
+  .sigmela-drawer__sidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 101;
+    transform: translateX(calc(-1 * var(--sigmela-drawer-width)));
+    transition: transform var(--sigmela-drawer-transition);
+  }
+
+  .sigmela-drawer__main {
+    width: 100%;
+    transition: transform var(--sigmela-drawer-transition);
+  }
+
+  .sigmela-drawer__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+    display: block;
+    background: var(--router-drawer-overlay-bg);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--sigmela-drawer-transition),
+      background var(--sigmela-drawer-transition);
+  }
+
+  .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__sidebar {
+    transform: translateX(0);
+  }
+
+  .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__main {
+    transform: translateX(var(--sigmela-drawer-width));
+  }
+
+  .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__overlay {
+    background: var(--router-drawer-overlay-open-bg);
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (max-width: 1099px) {
+  .sigmela-drawer__assistant {
+    position: fixed;
+    inset: 0;
+    z-index: 120;
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+}
+
+@media (min-width: 641px) {
+  .sigmela-drawer__sidebar {
+    border-right: 1px solid var(--router-divider);
+    transition: margin-left var(--sigmela-drawer-transition);
+  }
+
+  .sigmela-drawer[data-drawer-open='true'] .sigmela-drawer__sidebar {
+    margin-left: calc(-1 * var(--sigmela-drawer-width));
+    border-right: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .screen-stack > .screen-stack-item {
+    transform: translate3d(0, 0, 0) !important;
+    transition: none !important;
+  }
+}
+
+/* ==================== ROUTER CLOSE BUTTON ==================== */
+.router-close-button-circle {
+  width: 42px;
+}
+
+.router-close-button {
+  appearance: none;
+  height: 42px;
+  padding: 0;
+  border: 0;
+  border-radius: 42px;
+  background: var(--router-close-button-bg);
+  position: relative;
+  transition: transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  cursor: pointer;
+}
+
+.router-close-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.router-close-button:active {
+  transform: scale(1.1);
+}
+
+.router-close-button-inner {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  height: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--router-close-button-text);
+}
+
+.router-close-button--light .router-close-button-inner,
+.router-close-button-inner.router-close-button--light {
+  color: var(--router-close-button-light-text);
+}
+
+.router-close-button-blur {
+  background: var(--router-close-button-glass-bg);
+  border-radius: 42px;
+  touch-action: none;
+  height: 42px;
+  cursor: pointer;
+  position: relative;
+  overflow: visible;
+}
+
+.router-close-mask-1 {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: inherit;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  will-change: transform;
+  z-index: 1;
+}
+
+.router-close-mask-2 {
+  border-radius: inherit;
+  box-shadow: var(--router-close-button-shadow);
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  will-change: transform;
+  z-index: 2;
+}
+
+.router-close-mask-3 {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: var(--router-close-button-shine);
+  border-radius: inherit;
+  inset: 0;
+  -webkit-mask:
+    linear-gradient(var(--router-mask-fill), var(--router-mask-fill) 0) content-box,
+    linear-gradient(var(--router-mask-fill), var(--router-mask-fill) 0);
+  mask:
+    linear-gradient(var(--router-mask-fill), var(--router-mask-fill) 0) content-box,
+    linear-gradient(var(--router-mask-fill), var(--router-mask-fill) 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 1px;
+  pointer-events: none;
+  position: absolute;
+  will-change: transform;
+  z-index: 2;
+  mix-blend-mode: overlay;
+}