sheet.css in css-zero-0.0.30

- old
+ new

@@ -3,21 +3,21 @@
   border-inline-start-width: var(--border);
   box-shadow: var(--shadow-lg);
   block-size: 100%;
   color: var(--color-text);
   inline-size: var(--size-3-4);
-  margin-inline-start: auto;
+  margin-inline: var(--sheet-margin);
   max-block-size: none;
   max-inline-size: var(--width-sm);
   padding: var(--size-6);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);
   }
 
   /* Setup animation */
-  transform: translateX(100%);
+  transform: var(--sheet-transform);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-500);
   transition-property: display, overlay, transform;
 
   &::backdrop {
@@ -37,20 +37,30 @@
   }
 
   /* Out animation */
   @starting-style {
     &[open] {
-      transform: translateX(100%);
+      transform: var(--sheet-transform);
     }
 
     &[open]::backdrop {
       opacity: 0;
     }
   }
 
   @media (width < 40rem) {
     max-inline-size: none;
   }
+}
+
+.sheet--left {
+  --sheet-margin: 0 auto;
+  --sheet-transform: translateX(-100%);
+}
+
+.sheet--right {
+  --sheet-margin: auto 0;
+  --sheet-transform: translateX(100%);
 }
 
 .sheet__close {
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);