dialog.listing-modal
{
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 8px;

  &:-internal-dialog-in-top-layer::backdrop
  {
    background-color: #00000070;
  }

  &[open]
  {
    animation: xzddopen 0.5s forwards;
  }

  &.closing
  {
    transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
    animation: xzddclose 0.5s forwards;
  }
}

@keyframes xzddopen {
  0%    { scale: 0%; opacity: 0; }
  75%   { scale: 110%; opacity: 1; }
  100%  { scale: 100%; }
}

@keyframes xzddclose {
  0%    { scale: 100%; }
  75%   { scale: 110%; }
  100%  { scale: 0%; }
}