@mixin dialog-title($is-group: false)
{
    $bottom-margin: (
        mobile: steps(2.5),
        desktop: steps(3)
    );

    padding-left: steps(2);
    padding-right: steps(2);
    margin: steps(-2) steps(-2) map-get($bottom-margin, 'mobile');

    background: $color-background-lighter;

    @include for-at-least-normal-tablets
    {
        padding-left: steps(4);
        padding-right: steps(4);
        margin: steps(-4) steps(-4) map-get($bottom-margin, 'desktop');
    }

    @if ($is-group)
    {
        padding-top: steps(1);
        padding-bottom: steps(2);

        @include for-at-least-normal-tablets
        {
            padding-top: steps(3);
            padding-bottom: steps(3);
        }

        .title
        {
            @include normal-heading;

            padding-right: steps(5);

            &:only-child
            {
                margin-bottom: 0;

                @include for-at-least-normal-tablets
                {
                    margin-bottom: steps(-1);
                }
            }
        }

        p
        {
            @include baseline-box(14px, steps(2), 0.6px);

            @include for-at-least-normal-tablets
            {
                @include baseline-box(16px, steps(3), 0.5px);
            }

            a
            {
                @include alternative-link;
            }
        }

        .field .control
        {
            width: auto;
        }
    }
    @else
    {
        @include normal-heading(steps(1), steps(2));

        padding-right: steps(7);

        // redefine margins overridden by heading mixin
        margin-bottom: map-get($bottom-margin, 'mobile');

        &:first-child
        {
            margin-top: steps(-2);
        }

        @include for-at-least-normal-tablets
        {
            @include baseline-paddings(28px, steps(4), steps(3), steps(2));

            padding-right: steps(9);
            margin-bottom: map-get($bottom-margin, 'desktop');

            &:first-child
            {
                margin-top: steps(-4);
            }
        }
    }

    + .table-box
    {
        @include dialog-content-spacing;
    }
}

@mixin dialog-header
{
    @include dialog-title(true);
}

// adjust top margin for certain elements (e.g. tables) following dialog header
@mixin dialog-content-spacing
{
    margin-top: steps(3);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(4);
    }
}

@mixin alert-dialog($icon: null, $icon-color: $color-brand-darker)
{
    text-align: center;

    @include for-at-least-normal-tablets
    {
        padding: steps(6) steps(10);
    }

    .heading
    {
        @include normal-heading;

        @if ($icon)
        {
            &::before
            {
                content: svg-image-data-url($icon, $icon-color);

                display: block;
                width: steps(6);
                height: steps(6);
                margin: 0 auto steps(3);
            }
        }
    }

    > ul, 
    > ol
    {
        @include bullet-list;
    }
}
