.visualizacao-dialog {
  background-color: #ffffff;
  color: #374151;

  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  inline-size: min(95vw, 72rem);
  max-inline-size: 72rem;
  max-block-size: 90vh;

  margin: auto;
  padding: 0;

  overflow: hidden;

  transition: opacity 200ms ease, transform 200ms ease;

  opacity: 0;
  transform: scale(0.95);
}

.dark .visualizacao-dialog {
  background-color: var(--color-grafite-medio);
  color: var(--color-cinza-quase-branco);
  border-color: var(--color-cinza-escuro);
}

.visualizacao-dialog::backdrop {
  background-color: rgba(17, 24, 39, 0.5);
  transition: opacity 150ms ease;
  opacity: 0;
}

.dark .visualizacao-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.visualizacao-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

.visualizacao-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .visualizacao-dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }

  .visualizacao-dialog[open]::backdrop {
    opacity: 0;
  }
}

.visualizacao-dialog__content {
  padding: 1.5rem;
  overflow-y: auto;
  max-block-size: 90vh;

  display: flex;
  flex-direction: column;
}

@media (width < 40rem) {
  .visualizacao-dialog {
    inline-size: 100vw;
    max-inline-size: 100vw;
    max-block-size: 100vh;
    border-radius: 0;
  }

  .visualizacao-dialog__content {
    padding: 1rem;
    max-block-size: 100vh;
  }
}