dialog {
    color: var(--color--text--primary);
    border: solid var(--size--border) var(--color--border);
    max-width: 50rem;
    width: 100%;
    margin: auto;
    padding: var(--space-m);

    & form {
        display: block;
    }

    &::backdrop {
        background-color: var(--color--brand--80);
        opacity: 0.8;
    }

    & dl {
        display: block;

        & dt {
            padding-bottom: var(--space-xs);
            border: none;
            border-bottom: solid var(--size--border) var(--color--border);
            margin-bottom: var(--space-s);

            font-family: var(--font--title--family--xxsmall);
            font-size: var(--font--title--size--xxsmall);
            font-weight: var(--font--title--weight--xxsmall);
            line-height: var(--font--title--line-height--xxsmall);
            letter-spacing: var(--font--title--letter-spacing--xxsmall);
            text-transform: var(--font--title--casing--xxsmall);
        }

        & dd {
            margin-bottom: var(--space-l);

            font-family: var(--font--title--family--large);
            font-size: var(--font--title--size--large);
            font-weight: var(--font--title--weight--large);
            line-height: var(--font--title--line-height--large);
            letter-spacing: var(--font--title--letter-spacing--large);
            text-transform: var(--font--title--casing--large);
        }
    }

    & div.commands {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
}

@media (min-width: 600px) {
    dialog {
        padding: var(--space-2xl);

        & div.commands {
            justify-content: end;
        }
    }
}