.overlay,
:global(.local-overlay) {
  position: absolute;
  inset: 0;
  z-index: var(--z-local-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--material-local-overlay);
  pointer-events: none;
}

.overlay[data-interactive="true"],
:global(.local-overlay[data-interactive="true"]) {
  pointer-events: auto;
}

.card,
:global(.local-overlay__card) {
  width: auto;
  max-width: min(24rem, calc(100% - var(--sp-4)));
  border: 1px solid var(--surface-overlay-border);
  border-radius: var(--radius-local-overlay);
  background: var(--surface-overlay-bg);
  box-shadow: var(--surface-overlay-shadow);
  pointer-events: none;
}

.overlay[data-interactive="true"] .card,
:global(.local-overlay[data-interactive="true"]) :global(.local-overlay__card) {
  pointer-events: auto;
}
