/*   Open state of the dialog  */
div.blogify dialog[open] {
  opacity: 1;
  transform: scaleY(1);
  width: 75%;
  border-radius: 25px;
}

/*   Closed state of the dialog   */
div.blogify dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out,
    overlay 0.5s ease-out allow-discrete,
    display 0.5s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.5s allow-discrete; */
}

/*   Before-open state  */
/* Needs to be after the previous dialog[open] rule to take effect,
    as the specificity is the same */
@starting-style {
  div.blogify dialog[open] {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
div.blogify dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.5s allow-discrete,
    overlay 0.5s allow-discrete,
    background-color 0.5s;
  /* Equivalent to
  transition: all 0.5s allow-discrete; */
}

div.blogify dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

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

div.blogify dialog h1 {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

div.blogify dialog form legend {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

div.blogify dialog form fieldset {
  margin: 15px 5px;
}

div.blogify dialog form fieldset label {
  margin: 5px;
}

div.blogify dialog form menu {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}