// Messages.
$item-message-bg: $white !default;
$item-message-note-text: $gray-dark !default;
$item-message-note-font-size: 75% !default;
$item-message-mine-bg: $gray-light !default;

$core-discussion-messages-badge: $core-color !default;
$core-discussion-messages-badge-text: $white !default;

@mixin message-page {
    ion-content {
        background-color: $gray-lighter !important;
        @include darkmode() {
            background-color: $gray-darker !important;
        }
    }

    .addon-messages-discussion-container {
        display: flex;
        flex-direction: column;
        padding-bottom: 15px;
    }

    .addon-messages-date {
        font-weight: normal;
        font-size: 1.4rem;
    }

    .addon-messages-unreadfrom {
        color: $core-color;
        background-color: transparent;
        margin-top: 6px;
        ion-icon {
            color: $core-color;
            background-color: transparent;
        }
    }

    // Message item.
    .item.item-block.addon-message {
        border: 0;
        border-radius: 4px;
        padding: 8px;
        @include margin(8px, 8px, 0, 8px);
        background-color: $item-message-bg;
        align-self: flex-start;
        width: 90%;
        max-width: 90%;
        min-height: 0;
        position: relative;
        @include core-transition(width);
        // This is needed to display bubble tails.
        overflow: visible;

        core-format-text > p:only-child {
            display: inline;
        }


        .addon-message-user {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .5rem;
            margin-top: 0;
            color: $text-color;

            ion-avatar {
                display: block;
                min-width: 30px;
                min-height: 30px;
                margin: 0;
                img {
                    width: 30px;
                    height: 30px;
                }
            }

            div {
                font-weight: 500;
                flex-grow: 1;
                @include padding-horizontal(.5rem);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .note {
                @include text-align('end');
                color: $item-message-note-text;
                font-size: $item-message-note-font-size;
            }
        }

        &.addon-message-no-user .addon-message-user .note {
            width: 100%;
        }

        &.activated {
            background-color: darken($item-message-bg, 10%);
        }

        .item-inner {
            border-bottom: 0;
            padding: 0;
            margin: 0;
        }

        .label {
            margin: 0;
            padding: 0;
        }

        .addon-message-text {
            display: inline-flex;
            * {
                color: $text-color;
            }
        }

        .addon-messages-delete-button {
            min-height: initial;
            line-height: initial;
            @include margin(0, 0, 0, 10px);
            height: 1.6em !important;
            -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
            align-self: flex-end;
            vertical-align: middle;
            @include float('end');

            .icon {
                font-size: 1.4em;
                line-height: initial;
                color: $danger;
            }
        }

        .tail {
            content: '';
            width: 0;
            height: 0;
            border: 0.5rem solid transparent;
            position: absolute;
            touch-action: none;
        }

        // Defines when an item-message is the user's.
        &.addon-message-mine {
            background-color: $item-message-mine-bg;
            align-self: flex-end;

            &.activated {
                background-color: darken($item-message-mine-bg, 10%);
            }

            .spinner {
                @include float(end);
                @include margin(2px, -3px, -2px, 5px);

                svg {
                  width: 16px;
                  height: 16px;
                }
            }

            .tail {
                @include position(null, 0, 0, null);
                @include margin-horizontal(null, -0.5rem);
                border-bottom-color: $item-message-mine-bg;
            }

            &.activated .tail {
                border-bottom-color: darken($item-message-mine-bg, 10%);
            }
        }

        &.addon-message-not-mine .tail {
            @include position(null, null, 0, 0);
            @include margin-horizontal(-0.5rem, null);
            border-bottom-color: $item-message-bg;
        }

        &.addon-message-not-mine.activated .tail {
            border-bottom-color: darken($item-message-bg, 10%);
        }
    }

    .item.addon-message.addon-message-mine + .item.addon-message.addon-message-no-user.addon-message-mine,
    .item.addon-message.addon-message-not-mine + .item.addon-message.addon-message-no-user.addon-message-not-mine {
        h2 {
            margin-bottom: 0;
        }
        margin-top: -4px;
        padding-top: 0;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }

    .has-fab .scroll-content {
        padding-bottom: 0;
    }
    ion-fab button {
        overflow: visible;
        position: relative;
        box-shadow: $fab-md-box-shadow;

        .core-discussion-messages-badge {
            position: absolute;
            border-radius: 50%;
            color: $core-discussion-messages-badge-text;
            background-color: $core-discussion-messages-badge;
            display: block;
            line-height: 20px;
            height: 20px;
            width: 20px;
            right: -6px;
            top: -6px;

        }
    }

}


ion-app.app-root page-addon-messages-discussion.ion-page {

    @include message-page();

    .toolbar-title {
        padding: 0;

        img {
            @include margin-horizontal(null, 6px);
        }
        display: flex;
        align-items: center;

        core-format-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 1;
        }

        ion-icon {
            @include margin-horizontal(6px, null);
        }

        &.toolbar-title-ios {
            justify-content: center;
        }
    }
}

ion-app.app-root.ios page-addon-messages-discussion ion-footer .toolbar:last-child {
    padding-bottom: 4px;
    min-height: 0;
}