.sheet {
background-color: var(--color-bg);
border-inline-width: var(--sheet-border);
box-shadow: var(--shadow-lg);
block-size: var(--size-full);
color: var(--color-text);
inline-size: var(--sheet-size, var(--size-3-4));
margin-inline: var(--sheet-margin);
max-block-size: unset;
&::backdrop {
background-color: rgba(0, 0, 0, .8);
}
/* Setup transition */
transition-behavior: allow-discrete;
transition-duration: var(--time-300);
transition-property: display, overlay, transform;
&::backdrop {
transition-behavior: allow-discrete;
transition-duration: var(--time-150);
transition-property: display, overlay, opacity;
}
/* Exit stage to */
& { transform: var(--sheet-transform); }
&::backdrop { opacity: 0; }
/* On stage */
&[open] { transform: translateX(0); }
&[open]::backdrop { opacity: 1; }
/* Enter stage from */
@starting-style {
&[open] { transform: var(--sheet-transform); }
&[open]::backdrop { opacity: 0;}
}
@media (width >= 40rem) {
max-inline-size: var(--sheet-size, var(--max-i-sm));
}
}
.sheet--left {
--sheet-border: 0 1px;
--sheet-margin: 0 auto;
--sheet-transform: translateX(-100%);
}
.sheet--right {
--sheet-border: 1px 0;
--sheet-margin: auto 0;
--sheet-transform: translateX(100%);
}
.sheet__content {
block-size: var(--size-full);
padding: var(--size-6);
}
.sheet__close {
inset-block-start: var(--size-3);
inset-inline-end: var(--size-3);
position: absolute;
}