dialog {
  background-color: var(--color-white);
  color: var(--color-black);
  border: none;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.3);
  width: calc(100% - var(--gutter-half));
  min-width: calc(100% - var(--gutter-half));
  max-width: calc(100% - var(--gutter-half));
  position: fixed;
  transition: all var(--transition-slow) ease;
}

@media (min-width: 768px) {
  dialog {
    width: fit-content;
    min-width: fit-content;
    max-width: calc(100% - var(--gutter-half));
  }
}

dialog .scaffoldForm {
  padding: 0 !important;
}

dialog[open] {
}

dialog::backdrop {
  background: rgba(24, 24, 24, 0.7);
}

dialog::before {
  margin-bottom: var(--gutter-half);
  display: block;
  content: attr(dialog-title);
  color: var(--color-black);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}

dialog.no-title::before {
  display: none;
}

dialog section {
  margin-bottom: var(--gutter);
}

dialog .actions {
  place-content: center !important;
}

@media only screen and (min-width: 992px) {
  dialog::before {
    font-size: 20px;
  }
  dialog .actions {
    flex-direction: row;
  }
}