@layer components{.drawer-root{z-index:var(--z-scrim);pointer-events:none;position:fixed;inset:0;overflow:hidden}.drawer__scrim{pointer-events:auto;background:var(--overlay-scrim);opacity:1;transition:opacity var(--duration-drawer) var(--ease-drawer);position:absolute;inset:0}.drawer__scrim[data-closed]{opacity:0}.drawer{pointer-events:auto;z-index:var(--z-modal);box-sizing:border-box;width:min(100%, calc(var(--space-4xl) * 7 + var(--space-sm)));background:var(--surface-default);max-width:100%;transition:transform var(--duration-drawer) var(--ease-drawer);flex-direction:column;align-items:stretch;display:flex;position:absolute;top:0;bottom:0}.drawer[data-closed]{pointer-events:none}.drawer--right{border-left:var(--border-width-thin) solid var(--border-subtle);right:0;transform:translate(0)}.drawer--left{border-right:var(--border-width-thin) solid var(--border-subtle);left:0;transform:translate(0)}.drawer--right[data-closed]{transform:translate(100%)}.drawer--left[data-closed]{transform:translate(-100%)}.drawer:focus{outline:none}.drawer:focus-visible{box-shadow:0 0 0 var(--size-focus-gap) var(--border-focus-gap), 0 0 0 calc(var(--size-focus-gap) + var(--size-focus-ring)) var(--border-focus)}@media (prefers-reduced-motion:reduce){.drawer__scrim{transition:opacity var(--duration-hint) ease}.drawer{opacity:1;transition:opacity var(--duration-hint) ease;transform:none}.drawer[data-closed],.drawer--right[data-closed],.drawer--left[data-closed]{opacity:0;transform:none}}}