/**
 * Dialog modals
 */

dialog {
  border-radius: 0.5rem;
  color: inherit;
  max-height: 90dvh;
  max-width: 90dvw;
  padding: 0;
  width: 40rem;
}

.dialog-content {
  max-height: 90dvh;
  max-width: 95dvw;
  overflow: auto;
  padding: 1rem;
}

.dialog-close {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0.5rem;
  border: none;
  margin: 0.5rem;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
}
.dialog-close:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* Dialog modal animations */
dialog[open] {
  opacity: 1;
  transform: translateY(0);
}

dialog {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 250ms ease-out, transform 250ms ease-out, overlay 250ms ease-out allow-discrete,
    display 250ms ease-out allow-discrete;
  /* Equivalent to: transition: all 250ms allow-discrete; */
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(10%);
  }
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: display 250ms allow-discrete, overlay 250ms allow-discrete, background-color 250ms;
  /* Equivalent to: transition: all 250ms allow-discrete; */
}

dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}