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;
    }

    & h2 {
        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);
    }

    & details {
        & summary {
            display: flex;
            justify-content: start;
            align-items: center;
            column-gap: var(--space-2xs);
            margin-bottom: var(--space-s);

            & div.inline-field {
                margin-bottom: 0;
            }

            &::marker {
                content: "";
            }

            &::-webkit-details-marker {
                display: none;
            }

            list-style-type: none;

        }

        & svg {
            fill: var(--color--brand--70) !important;
        }

        & span.close-details {
            display: none;
        }

        & span.open-details {
            display: inline-block;
        }

        &:open {
            & span.open-details {
                display: none;
            }

            & span.close-details {
                display: inline-block;
            }
        }
    }

    & h3 {
        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);
    }

    & p {
        font-family: var(--font--caption--family--medium);
        font-size: var(--font--caption--size--medium);
        font-weight: var(--font--caption--weight--medium);
        line-height: var(--font--caption--line-height--medium);
        letter-spacing: var(--font--caption--letter-spacing--medium);
        text-transform: var(--font--caption--casing--medium);
    }

}

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

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