dialog,
.modal {
  --background-color: var(--neutral-color-variation-1);
  --color: var(--on-neutral-color-variation-1);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-2);
  --border-radius: var(--elem-border-radius);

  display: block !important;
  position: fixed;
  inset: 0;
  max-width: min(90vw, 85ch);
  max-height: min(80vh, 100%);
  margin: auto;
  z-index: 5000;
  padding: 0;
  overflow: hidden;
  background: var(--background-color);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 0 1em rgb(0 0 0 / 0.35);
  transition: opacity 0.5s ease-in-out;

  &:not([open]) {
    pointer-events: none;
    opacity: 0;
  }

  .close {
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    height: 2em;
    justify-content: center;
    padding: 0;
    width: 2em;
  }

  &[open] {
    opacity: 1;
  }

  &[loading] {
    visibility: hidden;
  }

  &[modal-mode='simple']::backdrop {
    backdrop-filter: none;
    background: unset;
  }

  &::backdrop {
    background: rgb(0 0 0 / 0.35);
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: backdrop-filter 0.5s ease;
  }

  & header,
  & footer {
    --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-2-s), var(--neutral-color-variation-2-l) / 0.15);

    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    padding: var(--inner-h-spacing) var(--inner-v-spacing);

    /*& > *:first-child {
      margin-top: 0;
    }*/
  }

  & header + footer {
    margin-top: 0 !important;
  }

  & footer {
    column-gap: 0.25em;
    justify-content: flex-end;
  }

  & > form {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    max-height: 60vh;
    max-block-size: 60vh;
    padding: 0;

    + footer {
      margin-top: 0 !important;
    }
  }

  & article {
    margin-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: var(--inner-h-spacing) var(--inner-v-spacing);
    max-height: 60vh;
    max-block-size: 60vh;

    > header {
      padding: 0;
    }
    + footer {
      margin-top: 0 !important;
    }
  }
}