@import '../../../environment';
@import '../../../shared/personal';
@import '../../../shared/personal.messages';

main
{
    .tools
    {
        margin-bottom: steps(3.5);

        .links
        {
            @include buttons;

            display: flex;
            justify-content: space-between;

            margin-top: steps(-1);
            margin-bottom: steps(3);

            a
            {
                @include baseline-box(16px, steps(3), 0.5px);
            }
        }

        a.back
        {
            @include back-link;
        }

        a.reply
        {
            @include icon("reply", $color-brand-normal);
        }

        @include for-at-least-normal-tablets
        {
            display: flex;

            .links
            {
                flex-grow: 1;

                padding-left: steps(2.5);
                padding-right: steps(2.5);
                margin: 0;

                background: $color-background-darker;

                a
                {
                    @include baseline-paddings(16px, steps(3), steps(1), steps(1));
                }
            }
        }
    }

    .messages
    {
        margin-top: steps(2.5);

        .header
        {
            @include small-text(steps(1), steps(1));

            padding-left: steps(2);
            padding-right: steps(2);
            border-top: 1px solid $color-border-normal;
            margin-top: -1px;

            color: $color-text-lighter;
            background: $color-background-lighter;

            @include for-at-least-normal-tablets
            {
                @include baseline-paddings(16px, steps(2.5), steps(1), steps(0.5));

                padding-left: steps(3);
                padding-right: steps(3);
            }
        }

        .body
        {
            padding-left: steps(2);
            margin-bottom: steps(2.5);

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

            .button
            {
                @include alternative-button;

                @include for-phones
                {
                    display: block;
                    width: auto;
                    margin-left: steps(-2);

                    letter-spacing: 0.5px;
                }

                &:not(:last-child)
                {
                    margin-bottom: steps(1);
                }

                @include for-at-least-tablets
                {
                    margin-top: steps(1);

                    &:not(:last-child)
                    {
                        margin-right: steps(1);
                        margin-bottom: 0;
                    }
                }
            }
        }

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