<button onclick="demo.showModal()" class="material-symbols-outlined">shopping_cart</button>

<dialog id="demo" class="push-x"> 
  <section>
    <header>
      <button title="Close" onclick="demo.close()" class="material-symbols-outlined">close</button>
    </header>
  </section>
</dialog>

@import "https://unpkg.com/open-props" layer(support.design-system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(support.demo);
@import "https://unpkg.com/open-props/buttons.min.css" layer(support.demo);
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" layer(support.demo);

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: translate .8s var(--ease-in-out-5);
    
    &:has(.push-x[open]) {
      translate: calc(min(var(--size-content-2), 80vw) * -1) 0;
      overflow: hidden;
    }
  }
}

dialog.push-x {
  --_duration: .5s;
  
  background: none;
	box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: clip;
  
  inset: 0 0 0 auto;
  margin: 0 0 0 auto;
  block-size: 100dvh;
  max-block-size: 100%;
    
  transition: 
    display var(--_duration) allow-discrete, 
    overlay var(--_duration) allow-discrete;
  
  &::backdrop {
    transition: opacity var(--_duration) var(--ease-4);
		opacity: 0;
		background-color: light-dark(#0003, #0008);
    cursor: zoom-out;
  }
  
  & > section {
    @media (prefers-reduced-motion: reduce) {
      transition: opacity .7s var(--ease-2);
      opacity: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      transition: translate .8s var(--ease-in-out-5);
      translate: 100% 0;
    }
  }
  
  &[open] {
    &, &::backdrop {
      opacity: 1;
    }
    
    & > section {
      opacity: 1;
      translate: 0;
    }
  }

  @starting-style {
    &[open],
    &[open]::backdrop {
      opacity: 0;
    }
    &[open] > section {
      opacity: 0;
      translate: 100% 0;
    }
  }
  
  section {
    inline-size: min(var(--size-content-2), 80vw);
    block-size: 100%;
		background: light-dark(white, var(--surface-2));
    
    > header {
      display: flex;
			place-content: end;
			padding: var(--size-3);
      
      > button {
				--_bg: none;
				--_border: none;

				padding: var(--size-1);
				aspect-ratio: var(--ratio-square);
				border-radius: var(--radius-round);
				box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
      }
    }
  }
}




@layer support.demo {
  html {
    background: light-dark(var(--gray-7), var(--gray-12));
  }
  body {
    background: var(--surface-1);
    display: grid;
    place-content: start end;
    padding: var(--size-5);
    gap: var(--size-5);
    
    > button {
      padding: var(--size-3);
      aspect-ratio: var(--ratio-square);
      border-radius: var(--radius-round);
      box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
    }
  } 
}

// add light dismiss
demo.addEventListener('click', ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
})