.umap-dialog {
  z-index: var(--zindex-dialog);
  margin: auto;
  margin-top: calc(var(--header-height) + var(--panel-gutter));
  width: var(--dialog-width);
  max-width: 100vw;
  max-height: 80vh;
  padding: 20px;
  border: 1px solid #222;
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: 5px;
  overflow-y: auto;
  height: fit-content;
}

.umap-dialog ul+h4 {
  margin-top: var(--box-margin);
}

.umap-dialog .body {
  max-height: 50vh;
  overflow-y: auto;
}

.umap-dialog details>* {
  padding: var(--text-margin);
}

:where([data-component="no-dialog"]:not([hidden])) {
  display: block;
  position: relative;
}

:where([data-component*="dialog"] menu) {
  display: flex;
  gap: calc(var(--gutter) / 2);
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

:where([data-component*="dialog"] [data-ref="fieldset"]) {
  border: 0;
  margin: unset;
  padding: unset;
}

@media all and (max-width: 480px) {
  :root {
    --dialog-width: calc(100vw - var(--control-size) * 2 - var(--panel-gutter) * 8);
  }

  .umap-dialog {
    padding: var(--small-box-padding);
  }
}

/* hack for Firefox */
@-moz-document url-prefix() {
  [data-component="no-dialog"]:not([hidden]) {
    inset-inline-start: 0;
    transform: none;
  }
}