$dialog-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

.overlay {
  &[data-state="open"] {
    animation: dialogOverlayIn 200ms ease-out both;
  }

  &[data-state="closed"] {
    animation: dialogOverlayOut 150ms ease both;
  }

  @media (prefers-reduced-motion: reduce) {
    &[data-state="open"],
    &[data-state="closed"] {
      animation: none;
    }
  }
}

/** Dark scrim for product dialogs portaled into `#prototype-viewport`. */
.productOverlay {
  z-index: 40;
  background: rgb(0 0 0 / 0.8);

  @media (min-width: 640px) {
    background: rgb(0 0 0 / 0.65);
  }
}

/** Sit above `.productOverlay` (same portal). */
.productContent {
  z-index: 51;
}

.content {
  transform: translate(-50%, -50%);

  &[data-state="open"] {
    animation: dialogContentIn 220ms $dialog-ease-out both;
  }

  &[data-state="closed"] {
    animation: dialogContentOut 160ms ease both;
  }

  @media (prefers-reduced-motion: reduce) {
    &[data-state="open"],
    &[data-state="closed"] {
      animation: none;
    }
  }
}

@keyframes dialogOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dialogOverlayOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes dialogContentIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 6px)) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dialogContentOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 4px)) scale(0.97);
  }
}