/* Dialog Component Styles */

/* Reset popover default styles */
[popover] {
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
}

/* Hide popover when not open */
[popover]:not(:popover-open) {
  display: none;
}

/* Popover open state */
[popover]:popover-open {
  display: flex;
}

/* Animation for closing */
.animate-fade-out {
  animation: dialog-fade-out 0.15s ease-in forwards;
}

[popover]:popover-open > div:nth-child(2) { /* container wrapper */
  animation: dialog-fade-in 0.15s ease-out forwards;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Backdrop animation (opacity only) */
[popover]:popover-open > div:first-child {
  animation: backdrop-fade-in 0.15s ease-out forwards;
}

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* O container de toasts também é um [popover], mas não é um modal: cada toast
   já entra com a própria transição (Toast::Component). Sem esta exceção, todo
   toast visível piscaria quando o container é reaberto para voltar ao topo da
   camada superior, por cima de um modal (lib/toasts_layer.js). */
#toasts-popover-container > div:first-child {
  animation: none;
}