:root {
  --mfm-popup-clip-center:inset(49.5% 50% 49.5% 50%);
  --mfm-popup-clip-line:inset(49.5% 0 49.5% 0);
  --mfm-popup-clip-open:inset(0 0 0 0);
}

@property --mfm-popup-frame-top { syntax:"<length>"; inherits:true; initial-value:0px; }
@property --mfm-popup-frame-right { syntax:"<length>"; inherits:true; initial-value:0px; }
@property --mfm-popup-frame-bottom { syntax:"<length>"; inherits:true; initial-value:0px; }
@property --mfm-popup-frame-left { syntax:"<length>"; inherits:true; initial-value:0px; }

.mfm-popup-animated-frame {
  position:absolute;
  box-sizing:border-box;
  pointer-events:none;
  z-index:10;
}

.mfm-popup-backdrop-hold {
  position:fixed;
  inset:0;
  z-index:2147482999;
}

dialog[data-mfm-popup-surface] {
  clip-path:var(--mfm-popup-clip-open);
  transition:
    clip-path 180ms cubic-bezier(.4,0,.6,1),
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;
}

dialog[data-mfm-popup-surface]:not([open]) {
  clip-path:var(--mfm-popup-clip-center);
  display:none;
}

dialog[data-mfm-popup-surface][data-mfm-popup-dismissed] {
  transition:none;
}

@starting-style {
  dialog[data-mfm-popup-surface][open] {
    clip-path:var(--mfm-popup-clip-center);
  }
}