.base-drawer{--drawer-width:min(24rem,86dvw);--drawer-backdrop:0;--drawer-divider:var(--ui-border-accented);width:100dvw;max-width:none;height:100dvh;max-height:none;color:inherit;background:0 0;border:0;margin:0;padding:0;position:fixed;inset:0;overflow:visible}.base-drawer::backdrop{opacity:calc(var(--drawer-backdrop)*.45);background:#000}.base-drawer__scroller{overscroll-behavior:none;scroll-snap-type:x mandatory;scrollbar-width:none;width:100dvw;height:100dvh;display:grid;position:fixed;inset:0;overflow:auto hidden}.base-drawer__scroller::-webkit-scrollbar{display:none}.base-drawer__scroller--hidden{pointer-events:none}.base-drawer__scroller:after,.base-drawer__scroller:before{content:"";pointer-events:none;display:block}.base-drawer--left .base-drawer__scroller{grid-template-columns:var(--drawer-width) 100%}.base-drawer--left .base-drawer__scroller:before{display:none}.base-drawer--left .base-drawer__scroller:after{scroll-snap-align:end;scroll-initial-target:nearest}.base-drawer--right .base-drawer__scroller{grid-template-columns:100% var(--drawer-width)}.base-drawer--right .base-drawer__scroller:before{scroll-snap-align:start;scroll-initial-target:nearest}.base-drawer--right .base-drawer__scroller:after{display:none}.base-drawer__sheet{width:var(--drawer-width);background:var(--ui-bg,#fff);height:100svh;max-height:100svh;color:var(--ui-text,#111827);scroll-snap-align:start;outline:none;grid-template-rows:auto minmax(0,1fr) auto;display:grid;overflow:hidden;box-shadow:0 24px 80px #0f172a42}.base-drawer--right .base-drawer__sheet{scroll-snap-align:end;grid-column:2}.base-drawer__footer,.base-drawer__header{align-items:center;gap:var(--spacing-md,.75rem);padding:var(--spacing-lg,1.5rem);display:flex}.base-drawer__header{border-bottom:1px solid var(--drawer-divider)}.base-drawer__footer{border-top:1px solid var(--drawer-divider)}.base-drawer__heading{flex:1;min-width:0}.base-drawer__title{font-size:var(--font-size-xl,1.25rem);margin:0;font-weight:700;line-height:1.25}.base-drawer__description{margin:var(--spacing-xs,.25rem) 0 0;color:var(--ui-text-muted,#6b7280);font-size:var(--font-size-sm,.875rem);line-height:1.5}.base-drawer__close{flex:none}.base-drawer__body{min-height:0;padding:var(--spacing-lg,1.5rem);overflow-y:auto}@media (prefers-reduced-motion:no-preference){.base-drawer__scroller{scroll-behavior:smooth}}@supports (animation-timeline:scroll()){.base-drawer{timeline-scope:--base-drawer-fade;animation:linear both base-drawer-backdrop;animation-timeline:--base-drawer-fade}.base-drawer__scroller{scroll-timeline:--base-drawer-fade x}@property --drawer-backdrop{syntax:"<number>";inherits:true;initial-value:0}@keyframes base-drawer-backdrop{0%{--drawer-backdrop:1}to{--drawer-backdrop:0}}.base-drawer--right{animation-name:base-drawer-backdrop-right}@keyframes base-drawer-backdrop-right{0%{--drawer-backdrop:0}to{--drawer-backdrop:1}}}