%message-form
{
    padding: steps(2);

    background: $color-background-lighter;

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

    .heading
    {
        @include inverted($text-color: $color-text-inverted-lighter);
        @include baseline-box(16px, steps(2), 0.5px, steps(1.5), steps(1.5));

        padding-left: steps(2);
        padding-right: steps(2);
        margin: steps(-2) steps(-2) steps(2);

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

    .field .control
    {
        width: auto;
    }

    .field.email,
    .field.subject,
    .field.message
    {
        .label
        {
            @include visually-hidden;
        }
    }

    .action .button
    {
        @include wide-button;
    }
}

main
{
    .message-types,
    .tools
    {
        .action a
        {
            display: inline-block;
            line-height: steps(2);
            padding: steps(1.5) steps(3.5);
        }
    }
}

section.reply,
section.composition
{
    @extend %message-form;
}

section.reply
{
    margin-top: steps(3);

    .heading
    {
        @include icon("reply", $color-text-inverted-lighter);

        display: block;
        padding-left: steps(5);

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