:host {
    --internal-header-background-color: var(--iq-background-color);
    --internal-header-foreground-color: var(--iq-foreground-color);
    --internal-primary-background-color: var(--iq-background-color);
    --internal-primary-foreground-color: var(--iq-foreground-color);
    --internal-dialog-background-color: rgba(0, 0, 0, 0.2);

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: grid;
    grid:
        ".    .    ." 1fr
        ". head-sp ." 2.5rem
        ". header  ." auto
        ". content ." minmax(27vh, max-content)
        ". buttons ." auto
        ". foot-sp ." 2.5rem
        ".    .    ." 1fr
        / 1fr minmax(40vw, max-content) 1fr;

    font-size: 1.125rem;

    background-color: var(--internal-dialog-background-color);
    z-index: 99;
}

:host::before {
    grid-area: head-sp;

    border-top-left-radius: calc(2 * var(--element-border-radius));
    border-top-right-radius: calc(2 * var(--element-border-radius));
    border-bottom: none !important;
}

:host::after {
    grid-area: foot-sp;

    border-bottom-left-radius: calc(2 * var(--element-border-radius));
    border-bottom-right-radius: calc(2 * var(--element-border-radius));
    border-top: none !important;
}

:host::before,
:host::after {
    display         : block;
    content         : "";
    background-color: var(--internal-header-background-color);
    border          : var(--border-thickness-normal) solid var(--iq-border-variant-color);
}

.dialog-header {
    grid-area: header;

    display: block;
    background-color: var(--internal-header-background-color);
    color: var(--internal-header-foreground-color);
    text-align: center;
}

.dialog-content {
    grid-area: content;

    background-color: var(--internal-primary-background-color);
    color           : var(--internal-primary-foreground-color);
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

.dialog-buttons {
    grid-area: buttons;

    display: block;
    background-color: white;
    text-align: center;
    user-select: none;
}

.dialog-header,
.dialog-content,
.dialog-buttons {
    border-left: var(--border-base) solid var(--iq-border-variant-color);
    border-right: var(--border-base) solid var(--iq-border-variant-color);
}

:host(.verbatim) .dialog-content {
    white-space: pre-wrap;
}

:host(.verbatim) .dialog-content,
:host(.fixed-width) .dialog-content {
    box-sizing: border-box;
    width     : 44vw;
    padding   : 0 6vw;
    text-align: center;
}

.dialog-buttons:empty {
    display: none;
}

.dialog-buttons > button:not(:last-child) {
    margin-right: var(--padding-step);
}