.side-drawer{text-align:left;border:solid rgba(var(--color-foreground), var(--drawer-border-opacity));border-width:0 0 0 var(--drawer-border-width);background-color:rgb(var(--color-background));width:100%;max-width:100%;height:100%;max-height:100%;color:rgb(var(--color-foreground));filter:drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow), var(--drawer-shadow-opacity)));opacity:0;transition:opacity var(--duration-default) ease, transform var(--duration-default) ease, overlay var(--duration-default) allow-discrete, display var(--duration-default) allow-discrete;grid-template-rows:auto 1fr;margin:0;padding:0;display:grid;position:fixed;inset:0 0 0 auto;transform:translate(100%)}@media screen and (width>=750px){.side-drawer{width:40rem}}.side-drawer[open]{opacity:1;transform:translate(0)}@starting-style{.side-drawer[open]{opacity:0;transform:translate(100%)}}.side-drawer::backdrop{background-color:rgba(var(--color-foreground), .5);opacity:0;transition:opacity var(--duration-default) ease, overlay var(--duration-default) allow-discrete, display var(--duration-default) allow-discrete}.side-drawer[open]::backdrop{opacity:1}@starting-style{.side-drawer[open]::backdrop{opacity:0}}.side-drawer__content{height:100%;padding:0 1.6rem 1.6rem;overflow-y:auto}.side-drawer__header{justify-content:space-between;align-items:center;padding:1.6rem;display:flex}.side-drawer__title{margin:0}.side-drawer__close{width:4.4rem;height:4.4rem;color:rgb(var(--color-foreground));cursor:pointer;background-color:#0000;border:none;padding:1.2rem;display:block}.side-drawer__close:hover{color:rgba(var(--color-foreground), .75)}.side-drawer__close .icon{width:2rem}