.root {
  display: contents;
}

.content {
}

.overlay {
}

.overlay[data-state="open"] {
  animation-name: fadeIn;
}

.overlay[data-state="closed"] {
  animation-name: fadeOut;
}

.content[data-state="open"] {
  animation-name: fadeIn, scaleIn;
}

.content[data-state="closed"] {
  animation-name: fadeOut, scaleOut;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    scale: 0.95;
  }
  to {
    scale: 1;
  }
}

@keyframes scaleOut {
  from {
    scale: 1;
  }
  to {
    scale: 0.95;
  }
}