.StackedPage {
  contain: strict;
  container: StackedPage / inline-size;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}

dialog.StackedPage {
  border: none;
  position: fixed;
  padding: 0;
  overscroll-behavior: none;
  width: 560px;
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  /*
  * WebKit does not see contain-instric-size as the real element size.
  * If the container does not have height, the child element using 100%
  * height (usually Scafflod in our case) was have 0px computed height.
  *
  * This behaviour is different from Firefox. So we need to actually
  * define the box height here. (Rubicon)
  */
  height: 100vh;
  height: 100dvh;
  background: none;
  display: none;

  contain: strict;
  contain-intrinsic-size: 560px 100vh;
  contain-intrinsic-size: 560px 100dvh;
  content-visibility: auto;

  background: var(--tutu-color-surface);
  box-shadow: var(--tutu-shadow-e16);

  margin-left: auto;
  margin-right: auto;

  @media (max-width: 560px) {
    & {
      margin: 0;
      width: 100vw;
      width: 100dvw;
      contain-intrinsic-size: 100vw 100vh;
      contain-intrinsic-size: 100dvw 100dvh;
    }
  }

  &[open] {
    display: block;
  }

  &::backdrop {
    background: none;
  }

  &.animating {
    overflow: hidden;

    * {
      overflow: hidden;
    }
  }
}