::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

dialog {
    /* The dialog width is fit-content.
     * However, we sometimes wish to know how much width is available for content.
     * We have a chicken-and-egg problem where the container is sizing to the content
     * but the content wants to size to the container.
     * explicitly define max width
     * border box messes with user agent style sheet
     */
    min-width: calc(min(390px, 100%) - 2em);
    border: 3px solid var(--header-background);
    border-radius: 5px;
    padding: 0.25rem;
    max-width: calc(100% - 2em - 6px - 0.5rem);
    max-height: calc(100% - 2em - 6px - 0.5rem);
}

@media (min-width: 640px) {
    dialog {
        min-width: 480px;
    }
}

@media (height > 720px) {
    dialog {
        margin-top: 14vh;
    }
}

dialog > form > h2 {
    margin: 0;
    border-radius: 5px;
    padding: 6px 9px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-size: x-large;
    background-color: var(--header-background);
    color: var(--header-text);
}

dialog > form > h2 > button > svg.icon,
dialog > form > div.footer > button > svg.icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* close button */
dialog > form > h2 > button > svg.icon {
    margin-right: initial;
}

/* content */
dialog > form > div:first-of-type {
    margin: 0.25rem 0;
}

dialog > form > div.footer {
    border-radius: 5px;
    padding: 6px 9px;
    text-align: right;
    background-color: var(--low-light);
}

/* footer buttons */
dialog > form > div.footer > button {
    font-size: large;
}

dialog > form > div.footer > button:not(:first-child) {
    margin-left: 0.5rem;
}

dialog > form > div.footer > button > svg.icon {
    margin-right: 0.25rem;
}