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

main
{
    .message-types
    {
        @include for-at-least-normal-tablets
        {
            display: flex;
            margin-bottom: steps(4);

            white-space: nowrap;
        }

        ul
        {
            @include tab-list;

            @include for-at-least-normal-tablets
            {
                flex-grow: 1;
                flex-wrap: nowrap;
            }
        }

        .action
        {
            margin-top: steps(2);
            margin-bottom: steps(2);

            @include for-at-least-normal-tablets
            {
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    }

    .message-heading
    {
        @include visually-hidden;
    }

    article.message
    {
        @include clickable(".heading > a");

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

        background: $color-background-lightest;

        + article.message
        {
            margin-top: steps(-2) - 1px;
        }

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

            + article.message
            {
                margin-top: steps(-3) - 1px;
            }
        }

        &.unread
        {
            header
            {
                background: $color-background-lighter;
            }

            .body
            {
                padding-top: steps(2);

                font-weight: bold;
            }
        }

        &.has-attachment .heading
        {
            display: flex;
            justify-content: space-between;

            &::after
            {
                content: svg-image-data-url('clip', $color-text-lighter);

                display: block;
                width: steps(2);
                height: steps(2);
                margin-left: steps(1.5);
                margin-right: steps(-0.5);

                @include for-at-least-normal-tablets
                {
                    margin: 2px 0 0 steps(2);
                }
            }
        }

        a
        {
            color: inherit;
            text-decoration: none;
        }

        header
        {
            padding: steps(2) steps(3);

            .heading,
            p
            {
                @include small-text;
            }

            .heading
            {
                font-weight: normal;
            }

            p
            {
                color: $color-text-lighter;
            }
        }

        .body
        {
            padding: 0 steps(3) steps(2);
        }

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

                .heading
                {
                    flex-grow: 1;
                }

                .date
                {
                    min-width: steps(7.5);
                    padding-left: steps(1);

                    text-align: right;
                    white-space: nowrap;
                }
            }
        }

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

            &:hover
            {
                position: relative;

                background: $color-background-lighter;

                &:before
                {
                    content: "";

                    position: absolute;
                    top: 0;
                    left: 0;

                    width: 3px;
                    height: 100%;

                    background: $color-link-normal;
                }

                header
                {
                    background-color: $color-background-darker;
                }
            }

            header
            {
                padding: steps(1) steps(2) steps(0.5);

                background: $color-background-lighter;
            }

            .body
            {
                padding: steps(2) steps(2) 0;
            }
        }
    }
}
