.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: 100%;
  max-inline-size: 28rem;
  margin: auto;
  padding: 0;
  white-space: normal;

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

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

.dialog--medio {
  max-inline-size: 46rem;
}

.dialog--largo {
  max-inline-size: 54rem;
}

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

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

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

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

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

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

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

.dialog__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

@media (width < 40rem) {
  .dialog__content {
    padding: 1rem;
  }
}