/*
*
* @copyright Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public License
* along with OX App Suite. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
*
* Any use of the work other than as authorized under this license or copyright law is prohibited.
*
*/

// definitions
@icon-size: 16px;
@flag-color: #ffb300;
@flag-icon: "\f005"; // fa-star
@flag-icon-unset: "\f006"; // fa-star-o
@a-color-neutral:    #888888;
@a-color-trusted:    #5c7f31;
@a-color-fail:       #c50000;

// preview panes
.rightside.classic-toolbar-visible .thread-view-control { top: @toolbar-height; }
.window-container.mail-categories-visible .rightside.classic-toolbar-visible .thread-view-control { top: @toolbar-height * 2; }

.preview-right {
    .leftside  { width: 320px; }
    .rightside { left:  320px; }

    @media(max-width: 900px) {
        .leftside  { width: 240px; }
        .rightside { left:  240px; }
    }

    .mail-item .list-item {
        .drag-title, .person {
            display: inline;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .drag-title {
            width: 100%;
        }

        &.unread .drag-title {
            width: calc(~"100% - 19px");
        }
    }
}
// fix for truncated letters on windows 10, see Bug 68163
html.windows {
    .preview-right .mail-item .list-item {
        margin-bottom: -2px;
        .from {
            padding-bottom: 2px;
        }
        .subject {
            margin-top: -2px;
            padding-bottom: 2px;
        }
        .list-item-row:last-child{
            margin-top: -2px;
            padding-bottom: 2px;
        }
    }
    .detail-view-row {
        .from {
            margin-bottom: -1px;
        }
        .recipients {
            padding-bottom: 2px;
        }
        .inline-toolbar-container {
            margin-top: -2px;
        }
    }
}

.io-ox-mail-window .vsplit .leftside .alert {
    position: relative;
    border-radius: 0;
    padding: 8px 30px 8px 16px;
    line-height: 24px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    height: 40px;
    a {
        color: @alert-info-text;
    }
    .fa-warning {
        margin-right: 16px;
    }
    .btn-close {
        position:absolute;
        right: 2px;
        top: 5px;
    }
}

.preview-bottom {
    .leftside {
        right: 0;
        bottom: auto;
        left: 0;
        width: auto !important;
        height: 45%;
        border-bottom: 1px solid #ccc;
        z-index: 2;
        overflow: visible;
    }

    .rightside {
        top: 45%;
        right: 0;
        left: 0 !important;
        z-index: 2;
        overflow: visible;
    }
    // outer layer overflow visible inner layer overflow auto. This is to show scrollbars when needed while keeping the dropdown from hiding under the mail list. see Bug(43449)
    .thread-view-control {
        overflow: auto;
    }
    // horizontal resizebar
    .list-view-control .resizebar {
        display: none;

        &.vertical {
            background: transparent;
            width: 100%;
            height: 5px;
            position: absolute;
            z-index: 10000;
            cursor: s-resize;
            cursor: ns-resize;
            cursor: row-resize;
            top: auto;
            right: auto;
            bottom: 0;
            display: block;
        }
    }
}

.preview-none {
    .leftside, .rightside {
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
    }

    .leftside {
        width: auto !important;
        z-index: 1;
    }

    .rightside {
        left: 0 !important;
        width: auto;
        display: none;
        z-index: 2;

        &.preview-visible { display: block; }
    }
}

.io-ox-mail-window .list-view-control.toolbar-top-visible .toolbar.top,
.io-ox-mail-window .list-view-control.toolbar-bottom-visible .toolbar.bottom {
    display: flex;
    // button label ellipsis
    .dropdown {
        // disable flexbox auto calculation
        min-width: 0;
        // pull right
        &.margin-auto {
            margin-left: auto;
        }
        & > a {
            display: flex;
            align-items: center;
            span { .ellipsis(); }
            padding-left: 16px;
        }
    }
    // toolbar elements won't shrink
    & > *:not('.dropdown') {
        min-width: 0;
        flex: 0 0 auto;
        padding-right: 8px;
    }
}

.list-item.small {
    padding-top: 7px;
    padding-bottom: 7px;

    .list-item-checkmark .fa.fa-checkmark { top: 8px; }
}

.list-item.small .list-item-content,
.thread-view .list-item.small {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.mail-item {

    .list-item {
        padding-top: 11px;
        padding-bottom: 12px;

        .smartphone & {
            padding-top: 16px;
            padding-bottom: 15px;
            .list-item-checkmark { top: 9px; }
        }
    }

    .list-item-column {
        display: table-cell;
        vertical-align: middle;
        padding: 0;
        @icon-width: 24px;

        &.column-1 { width: @icon-width; text-align: center; }
        &.column-2 { width: @icon-width; text-align: center; }
        &.column-3 { width: @icon-width; text-align: center; }
        &.column-4 { width: 11rem; padding-right: 8px; }
        &.column-5 { width: @icon-width; text-align: center; }
        &.column-6 { width: 90%; padding-right: 8px; .ellipsis; }
        &.column-7 { width: 136px; text-align: right; }
    }

    &.list-view .list-item {

        &.small {

            .priority { float: none; }

            .from span.person { font-weight: normal; }

            .subject {
                display: inline;
                margin-right: 16px;
            }

            .drag-title { opacity: 1; }
            .flag { float: right; }

            .date {
                display: block;
                float: none;
                .ellipsis();
            }

            &.unread {
                .from span.person, .subject, .date { font-weight: bold; }
            }
        }

        &.unread {
            .date { opacity: 1; font-weight: bold; color: #000; }
        }
    }
}

// macos and ios specific styles
html.macos .preview-right, html.ios {
    .mail-item.list-view .list-item .from .person {
        font-weight: 700;
    }
    .mail-item.list-view .list-item.unread .from .person {
        font-weight: 800;
        color: @black;
    }
    .visible-selection.mail-item.list-view.has-focus .list-item.unread.selected .from .person {
        color: @white;
    }
}

.swipe-option-cell {
    position: absolute;
    width: 100%;
    right: 0;
    z-index: -5;

    .swipe-button {
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        height: 100%;
        width: 95px;
        color:#fff;
        font-size: 30px;
        float: right;
        transition: width .35s ease-in-out;
        i { transition: opacity .3s; }
        &.delete { background: #FF4105; }
        &.more   {
            background: rgb(255, 169, 8);
            i { opacity: 1; }
        }
    }
}

.list-view.thread-view .list-item.small { padding: 7px 14px 7px 48px; }

.mail-detail {

    .content { display: none; }
    &.expanded .content { display: block };

    color: @black;
    background-color: #fff;
    position: relative;
    overflow-y: visible;
    clear: both;
    width: 100%;
    .user-select(text);

    section.body {
        margin: 0;
        padding: 24px 40px 16px 40px;
        background-color: #fff;
        display: none;
        width: 100%;
        cursor: default;
        &.loading { min-height: 80px; }
    }

    .ios.smartphone & {
        section.body {
            // special fix for ios iframe handling, keep this!
            overflow-x: auto;
            overflow-y: hidden; // added later, seems to prevent scroll bounce in mail detail frame
        }
    }

    section.attachments,
    section.notifications,
    section.error { display: none; }

    section.authenticity {
        padding: 16px 40px;
        border-bottom: 1px solid #ddd;
    }

    &.expanded section {
        &.attachments,
        &.notifications,
        &.error { display: block; }
        // for proper overflow behavior (see bug 45248)
        // 15.3.18: set to block. Works in Safari since iFrame. 45248 still fixed
        &.body { display: block; }
        &.attachments:empty { display: none;  }
    }

    section.error {
        color: #767676;
        position: relative;
        font-size: 13px;
        line-height: 16px;
        padding: 16px 16px 16px 72px;
        h4 {
            margin: 3px 0 1px 0;
            font-size: inherit;
            line-height: inherit;
            font-weight: bold;
        }
        p {
            margin-bottom: 8px;
        }
        i.fa {
            position: absolute;
            left: 20px;
            top: 19px;
            font-size: 32px;
        }
    }

    section.warnings {
        background-color: #FFF176;
    }

    &.no-padding {
        h1.subject,
        section.body,
        section.notifications,
        section.attachments {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .flag-picker .dropdown-menu {
        font: 14px/20 @normal-font-family;
        top: 110%;
    }

    .contact-picture {
        display: inline-block;
    }

    .from {
        display: flex;

        > a {
            display: flex;
            align-content: flex-start;
            .ellipsis();
            &:first-child {
                margin-right: 16px;
            }
        }

        .person-link {
            .ellipsis();
            min-width: 0;
            &.person-from {
                font-weight: bold;
                color: black;
            }
        }

        .address {
            &:before { content: "\00a0"; }
            color: #767676;
            .smartphone & { .ellipsis(); }
        }

        .authenticity {
            margin-left: 8px;
        }

        .spacer {
            flex: 1;
            .smartphone & { display: none }
        }
    }

    .sender {
        margin-bottom: 8px;
        .address {
            color: #767676;
        }
    }

    @picture-width:  40px;
    @picture-padding: @picture-width + @default-padding;

    &.io-ox-busy {
        min-height: 200px;
        display: block;
    }

    .io-ox-center { height: 200px; }

    .recipient-actions {
        display: inline-block;

        a.all-link { text-decoration: none; }
        i.fa-group { color: #aaa; }
    }

    .date {
        display: block;
        float: right;
    }

    .subject {
        .subject-base();

        &.empty {
            font-style: italic;
            color: #aaa;
        }

        .icon-unread { display: none; }
    }

    &.unread .subject .icon-unread {
        color: @link-color;
        display: inline-block;
        position: absolute;
        top: 2px;
        left: 0;
    }

    .thread-size {
        float: right;
        display: inline-block;
        margin-left: 0.5em;
    }

    .priority {
        float: right;
        font-size: @icon-size;
        font-weight: bold;
        display: inline-block;
        margin-left: 7px;

        .high { color: @mail-priority;     }
        .low  { color: @mail-priority-low; }
    }

    &.mail-item .contact-picture {
        top: @default-padding;
        right: @default-padding;
        left: auto;
        margin: 0;
        .picture(@picture-width, @picture-width);
    }

    .detail-view-header > .presence {
        position: absolute;
        right: 0;
        top: 40px;
        .icon {
            border: 2px solid white;
            border-radius: 50%;
            box-sizing: content-box;
        }
    }

    // used in portal sidepopup
    &.no-padding .detail-view-header > .presence {
        right: -8px;
        .icon {
            margin-right: 0;
        }
    }

    &.no-padding .contact-picture { right: 0; }

    .io-ox-label {
        font-weight: bold;
        white-space: nowrap;
    }

    .recipients .person-link {
        color: #333;
        @media(max-width: 900px) { white-space: normal; }
        .presence .icon {
            width: 8px;
            height: 8px;
            margin-right: 4px;
        }
    }

    .detail-view-header {

        position: relative;
        line-height: 16px;
        padding: (@default-padding + 3) (@picture-padding + @default-padding) 13px 40px;

        min-height: 64px;

        .fa-paperclip.has-attachments {
            display: none;
            position: absolute;
            top: 8px;
            right: 0px;
            font-size: 24px;
            width: 12px;
            overflow: hidden;
            color: #888;
        }
    }

    .detail-view-row {
        position: relative;

        .recipients {
            float: left;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .priority { font-size: 14px; }
        .flag-picker {
            text-align: right;
            a { color: #333; }
        }
        .actions {
            margin: 8px 8px 0 -8px;
            // min height to avoid flicker
            min-height: 32px;
            & > li {
                display: inline-block;
                > a {
                    padding: 4px 8px;
                    display: inline-block;
                    &:focus {
                        background: @brand-primary;
                        color: #fff;
                        outline: 0;
                        text-decoration: none;
                    }
                }
            }
            .fa-bars {
                font-size: 14px;
            }
        }
    }

    .detail-view-row.row-1 {
        display: flex;
        margin-right: @default-padding;
        .from { flex: 1; }
        & > *:not(:first-child) { margin-left: @default-padding; }
    }

    &:not(.expanded) {

        .fa-paperclip.has-attachments {
            display: inline-block;
            top: 38px;
            left: 9px;
            font-size: 15px;
        }

        .detail-view-row.row-5 { display: none; }

        .unread-toggle, .flag-picker > a, .recipients, .row-4 { opacity: 0.6; }

        &.unread .unread-toggle { opacity: 1; }

        .recipients {
            max-height: 1.5rem;
            .ellipsis();
            width: 100%;
        }
    }

    &.expanded .detail-view-header { border-bottom: 1px solid #ddd; }

    .notification-item,
    .notification-item.disposition-notification {
        display: flex;
        align-items: flex-start;

        padding: @default-padding;
        padding-left: 40px;
        border-bottom: 1px solid #ddd;

        .btn { margin-right: @default-padding; }
        .comment { flex: 1; align-self: center; }
        .close {
            height: 30px;
            padding: 5px 0;
            font-size: 16px;
        }
        .smartphone & { padding: 10px 15px; }
    }

    .notification-item + .notification-item { border-top: none; }

    .notifications { cursor: default; }

    &:not(.content-links) .disabled-links { display: none };

    .alert, .well {
        margin: 0;
        border: 0;
        padding: @default-padding 40px @default-padding @default-padding;
        border-radius: 0;
        box-shadow: none;
    }

    .alert + .alert { margin-top: 1px; }

    .well + .well { border-top: 1px solid #ddd; }

    article {
        padding: 19px;
        // to work with outline
        border: 1px solid white;
        display: table;
        background-color: white;

        &.text-html.horizontal-scrolling {
            max-width: 100%;
            overflow-x: auto;
            // funky trick
            margin-right: -10000px;
        }
    }
}

.mail-item {

    @pictureSize: 32px;

    .contact-picture {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0 @default-padding 0 0;
        .picture(@pictureSize, @pictureSize);
        .flex-center;
        color: rgba(0, 0, 0, 0.70);
        background-color: #eee;
        font-weight: bold;
    }

     &.show-contact-pictures .list-item:not(.small) .list-item-content {
        position: relative;
        padding-left: @pictureSize + 16px;
    }

    &.show-contact-pictures.show-text-preview .list-item:not(.small) .contact-picture {
        top: 4px;
    }

    .selected:not(:focus) .contact-picture {
        -webkit-filter: saturate(0);
    }

    .from {
        .ellipsis();
    }

    .unread .from span.person { font-weight: bold; }

    .date, .size {
        font-weight: normal;
        display: inline-block;
        margin-left: @default-padding / 2;
        float: right;
        padding: 2px;
    }

    &.visible-selection.has-focus .selected {
        .list-item-content .drag-title,
        .date { opacity: 1; }
    }

    .text-preview.multiline {
        @lines: 2;
        font-size: 13px;
        line-height: 16px;
        height: 1rem * @lines;
        -webkit-line-clamp: @lines;
        -webkit-box-orient: vertical;
        white-space: normal;
        display: none;
    }

    &.show-text-preview .text-preview.multiline {
        display: block; /* Fallback for non-webkit */
        display: -webkit-box;
    }

    .text-preview.inline { display: none }
    &.show-text-preview .text-preview.inline { display: inline; }

    @item-line-height: 16px;

    .list-item-content {
        // need explicit line-height to avoid flicker base on icon height + bold letters need 21px
        line-height: @item-line-height;
        .ellipsis();

        i {
            font-size: 14px;
            display: inline-block;
            float: left;
            line-height: @item-line-height;
            margin-right: (@default-padding / 2);
            &.seen-unseen-indicator {
                font-size: 12px;
                padding: 3px 5px 1px 0;
                margin: -2px 3px -2px 0;
            }
            &.seen-unseen-indicator:before {
                content: @mail-unseen-icon-seen;
                color: rgba(0, 0, 0, 0.50);
            }
            &.icon-answered  { color: #aaa; }
            &.icon-forwarded { color: #888; }
        }

        .subject {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        i.color-flag, .flag .fa {
            font-size: 18px;
            padding: 0;
            margin: 0 0 0 (@default-padding / 2);
            float: right;

            &.multiple-colors {
                color: #767676;
            }
        }

        // disable/reset some properties
        .breadcrumb-view {
            margin: 0;

            i {
                float: none;
                line-height: 14px;
            }
        }
    }

    .unread {
        i.seen-unseen-indicator:before {
            content: @mail-unseen-icon;
            color: @link-color;
        }
    }

    &.visible-selection.has-focus .list-item.selected i.seen-unseen-indicator:before {
        color: rgba(255, 255, 255, 0.50);
    }

    .fa-paperclip.has-attachments, .fa-cloud-download.is-shared-attachement, i.fa.signed, i.fa.encrypted {
        font-size: @icon-size;
        margin: 0 0 0 8px;
        float: right;
    }

    .list-item.deleted {
        text-decoration: line-through;
        color: #767676;
        .date, .drag-title { opacity: 1; }
    }

    &.visible-selection .list-item.selected.deleted {
        color: #626262;
    }

    &.visible-selection.has-focus .list-item.selected {
        .fa-paperclip.has-attachments { opacity: 1; }
        &.deleted { color: #f4f4f4; }
    }

    .priority {
        float: right;
        i.fa { margin: 0 0 0 8px; }
        .high { color: @mail-priority; }
        .low { color: @mail-priority-low; }
    }

    .account-name, .original-folder, .thread-size {
        font-size: 12px;
        color: @mail-thread-size-color;
        background-color: @mail-thread-size-background;
        line-height: 16px;
        padding: 0 4px;
        margin: 0 0 0 (@default-padding / 2);
        display: inline-block;
        float: right;
        overflow: visible;
        text-align: center;
        font-weight: normal;
        border-radius: @border-radius-small;
    }

    .original-folder {
        // do not overlap subject/attachment icon
        max-width: 50%;

        .breadcrumb-link {
            .ellipsis();
            width: 100%;
        }
    }

    .thread-size {
        min-width: 24px;
    }

    .selected {
        .thread-size,
        .account-name,
        .original-folder,
        .original-folder .breadcrumb-link {
            color: #333;
            background-color: rgba(0, 0, 0, 0.10);
        }
    }

    &.visible-selection.has-focus .selected {
        .thread-size,
        .account-name,
        .original-folder,
        .original-folder .breadcrumb-link {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.10);
        }
    }

    &.visible-selection.has-focus .selected:focus {
        .thread-size,
        .account-name,
        .original-folder,
        .original-folder .breadcrumb-link {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.20);
        }
    }

    .thread-item {
        padding: 5px @list-view-padding 5px (@list-view-padding + 30px);

        .from span.person { font-weight: normal; }

        i.icon-unread {
            color: @link-color;
            position: absolute;
            line-height: 20px;
            left: @list-view-padding;
        }

        &:first-child { padding-top:    7px; }
        &:last-child  { padding-bottom: 7px; }
    }

    .attachments {
        padding: 10px @default-padding 9px @default-padding;
        border-bottom: 1px solid #ddd;

        .inline-toolbar {
            display: inline;
            font-family: @normal-font-family;
            font-size: 13px;
            margin-left: @default-padding;
            a:hover { text-decoration: underline; }
        }

        .fa-paperclip {
            font-size: 16px;
            color: @link-color;
        }
    }

    .attachment-list {
        b { opacity: 0.30; }
        .dropdown { margin-right: 1em; }
        .fa-paperclip {
            font-size: 16px;
            color: @link-color;
        }
    }

    .unread-toggle {

        position: absolute;
        top: 20px;
        left: @default-padding;
        outline: 0;
        font-size: 12px;
        color: #767676;
        padding: 5px;
        margin: -5px;

        &:focus i {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        &:hover { text-decoration: none; color: #aaa; }
        i.fa:before { content: @mail-unseen-icon-seen; }
    }

    &.unread .unread-toggle {
        color: @link-color;
        i.fa:before { content: @mail-unseen-icon; }
    }
}

.subject-base() {
    font-size: 20px;
    line-height: 24px;
    padding: 4px @default-padding 4px 0;
    margin: 0;
    font-weight: 400;
}

// smaller padding in floating window to maximize mail display size
.floating-window thread-view-list{
    padding: 8px;
}

// ios specific Setting this to overflow: blocks scrolling with pointer devices
.ios .thread-view-list.scrollable { overflow: visible; }

.thread-view-list {

    padding: @default-padding;
    background-color: #eee;

    &.scrollable { overflow: auto; }

    & > .thread-view-header {

        padding: 0;

        .subject {
            font-size: 18px;
            line-height: 24px;
            padding: 6px 40px 18px 0;
            margin: 0;
            font-weight: 700;
            word-wrap: break-word;
        }

        .toggle-all, .toggle-big-screen {
            color: #767676;
            float: right;
            outline: 0;
            &:hover { color: #595959; }
            &:focus { color: @link-color; }
            padding: 0;
            margin: 8px @default-padding 4px 0;
            flex: 0 0 auto;
            .align-self(flex-start);
        }
    }
}

//
// Flag
//

.list-item {
    .flag {
        .smartphone & {
            display: none;
        }
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        .fa:before { content: @flag-icon-unset; }
        .fa { padding: 4px; }
    }
    &.flagged .flag {
        .smartphone & {
            pointer-events: none;
            display: initial;
        }
        color: @flag-color;
        .fa:before { content: @flag-icon; }
    }
}

//
// Progress
//

.mail-progress {
    flex-direction: column;
    .progress {
        height: 4px;
        margin-bottom: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .caption {
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 8px;
        flex: 1;
    }

    a {
        display: inline-block;
        padding-right: 14px;
    }
}

.thread-view-control {
    @height: 45px;
    background-color: #eee;

    .back-navigation {
        display: none;
        top: 0;
        border-bottom: 1px solid #ccc;

        a {
            outline: 0;

            &:hover { text-decoration: none; }
            &.disabled { color: #aaa; cursor: default; }
        }

        .button, .prev-next {
            display: table-cell;
            width: 40%;
        }

        .button {
            padding-left: @default-padding;

            i { margin-right: @default-padding; }
        }

        .position {
            color: #767676;
            display: table-cell;
            text-align: center;
            width: 20%;
        }

        .prev-next {
            text-align: right;
            padding-right: @default-padding;

            i { margin-left: @default-padding; }
        }

        .fa {
            color: inherit;
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
        }
    }

    .detail-view {
        top: 0;
        outline: 0;
        overflow: auto;
        z-index: 1;
    }

    &.back-navigation-visible {
        .back-navigation { display: table; }
        .detail-view, .thread-view-list { top: @height; }
    }

    &.thread-view-navigation-visible {
        .thread-view-navigation { display: table; }
        .detail-view { top: @height; }
    }
}

.thread-view.list-view {
    list-style-type: none;
    padding: 0;
    overflow: visible;
    height: auto;

    .list-item {
        cursor: default;
        background-color: white;
        clear: both;
        padding: 0;
        margin-bottom: (@default-padding / 2);
        border-bottom: 1px solid transparent;

        &.placeholder {
            min-height: 65px;
        }

        &:last-child {
            margin-bottom: 0;
            border-bottom-color: transparent;
        }
    }

    &.multiple-messages .list-item { cursor: pointer; }
}

// Detail view

.rightside.mail-detail-pane {
    z-index:1;
    background-color: #eee;

    .thread-view-control,
    &.selection-one .multi-selection-message { display: none; }

    &.selection-one .thread-view-control     { display: block; }

    .scrollable-pane {
        margin-bottom: 20px;
        // allows hiding "Entire thread"
        height: 110%;
    }

    .multi-selection-message div { color: #555; }
}

.mail-source-dialog {
    .modal-body {
        height: 400px;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        .mail-source-view {
            flex: 1;
            width: 100%;
        }
        .mail-authenticity-view {
            flex: 1;
            max-height: 70px;
        }
        #mail-authenticity-headline {
            font-size: 16px;
        }
    }
}

// CATEGORIES

.io-ox-alert .category-toast {
    .status { padding: 0 32px 0 0; }
    p { margin-bottom: 16px; }
}

.mail-categories-dialog {
    .description {
        padding: 0 16px;
        margin-top: 10px;
        line-height: 24px;
    }
    .category-item {
        position: relative;
        display: flex;
        padding-bottom: 6px;

        .name { margin-top: 6px; }
    }
    .hint { padding-top: 16px; }
}

// categories: available
.window-container.mail-categories-visible {

    &:not(.io-ox-find-active) {
        .categories-toolbar-container { display: flex; }
        .classic-toolbar-container .classic-toolbar { top: 40px; }

        // layout: vertical, horizontal, list
        .window-body.classic-toolbar-visible .abs.window-content { top: 5 * 16px; }
    }
}


// drag and drop helper text
.categories-toolbar-container {
    button { line-height: 42px; }
    .category-drop-helper { display: none; }
}

body.dragging .categories-toolbar-container {
    .category.hover {
        button, .category-drop-helper, button .category-counter .counter {
            background: @selected-focussed-background;
            color: white;
        }
    }
    .category button {
        line-height: 20px;
        height: 20px;
        border-bottom: 0;
    }
    .category-drop-helper {
        display: block;
        line-height: 20px;
        height: 20px;
        padding: 0 16px;
        font-size: 12px;
        font-weight: 300;
        border-bottom: 1px solid #ddd;
    }
}

.categories-toolbar-container {
    display: none;
    justify-content: flex-start;
    align-items: center;

    .classic-toolbar {
        display: flex;
        position: static;
        border-bottom: 0;
        width: 100%;
    }

    .free-space { flex: 1; }

    .category:not(.selected) button, .free-space, .help { border-bottom: 1px solid #dddddd; }

    .category {
        font-size: 13px;
        cursor: pointer;
        background: #f5f5f5;
        // arrange child
        flex: 1;
        display: flex;
        flex-direction: column;
        // vertical separation
        max-width: 160px;
        min-width: 0;

        .category-name { .ellipsis(); }
        .category-name, .category-counter { display: inline-block; }

        button, .category-drop-helper {
            border-right: 1px solid #dddddd;
            &:focus {
                font-weight: 500;
                border-bottom: 1px solid @brand-primary;
            }
        }
        &.selected {
            background: white;
            button {
                font-weight: bold;
                &:focus { background: white; }
            }
        }

        button {
            padding: 0 16px 2px;
            display: flex;
            align-items: center;
            width: 100%;
            color: inherit;

            &:focus, &:hover { text-decoration: none; }
            &:focus { outline: 0; }

            .category-counter .counter {
                padding-left: 8px;
                color: @foldertree-counter-color;
                font-weight: 700;
            }

            // hide empty child nodes (like counter)
            div:empty, span:empty { display: none; }
        }
    }
}

// checkmark icon next to sender address
.authenticity-icon-trusted,
.authenticity-icon-pass,
.authenticity-icon-neutral,
.authenticity-icon-suspicious,
.authenticity-icon-fail {
    font-size: 15px;
}
.authenticity-icon-trusted,
.authenticity-icon-pass {
    color: @a-color-trusted;
}
.authenticity-icon-neutral {
    color: @a-color-neutral;
}
.authenticity-icon-suspicious,
.authenticity-icon-fail {
    color: @a-color-fail;
}

.mail-detail .from .authenticity-sender {
    &.fail, &.suspicious {
        color: @a-color-fail;
    }
    &.trusted {
        color: @a-color-trusted;
    }
}

// colored info box with message
.mail-detail section.authenticity  {
    padding: 0;
    .message {
        color: #fff;
        padding: 16px 40px;
        line-height: 16px;
        .smartphone & { padding: 16px; }
    }
    .neutral { background-color: @a-color-neutral; }
    .suspicious,
    .fail { background-color: @a-color-fail; }
    .trusted { background-color: @a-color-trusted; }
}

.touch {
    &.ios, &.android {
        .mail-detail .detail-view-header { overflow: hidden; }
    }
}

@media (max-width: 768px) {
    .thread-view-list { padding: 8px; }
}


@media (max-width: 700px) {

    .io-ox-mail-window .vsplit {
        width: 100%;

        .rightside {
            width: auto;
            top: 0;
            right: 0;
        }
    }

    .mail-detail-pane .scrollable-pane,
    .mail-detail-pane.rightside { background-color: #fff; }

    .scrollable-pane::after { content: ''; }

    .mail-detail section.body {
        padding: 16px;
    }

    .mail-detail .subject   { padding-right: 0; }
}

.smartphone {

    // phone
    @phone-font-size: 15px;
    @phone-line-height: 20px;
    @border-color: #ddd;

    // helper
    .fixed-width() {
        width: 1.28571429em;
        text-align: center;
    }

    // single mail: in a detail view or as list item (.thread-view-list)
    .mail-detail {
        @padding-h: 15px;
        @padding-v: 10px;

        list-style-type: none;
        border-bottom: 0;

        .contact-picture { display: none; }

        &.unread .unread-toggle {
            visibility: visible;
        }

        .unread-toggle {
            visibility: hidden;
            position: relative;
            top: 0;
            left: auto;
            float: right;
            bottom: auto;
            margin: 0;
            padding-top: (@padding-v + 7);
            padding-right: (@padding-h);
        }

        .attachments .io-ox-inline-links {
            font-size: @phone-font-size;
            margin-left: 0;
        }

        .io-ox-label {
            font-weight: 100;
            color: #707070;
        }

        .detail-view-header {

            padding: (@padding-v + 4) 0 (@padding-v + 5) 0;
            font-size: @phone-font-size;
            line-height: @phone-line-height;

            .from, .recipients, .subject, time {
                padding: 0 @padding-h;
            }

            .from {

                flex-wrap: wrap;

                .person-link.person-from {
                    font-size: 16px;
                    font-weight: bold;
                }

                &.show-address {
                    flex-wrap: wrap;
                    .address {
                        .ellipsis();
                        display: block;
                        padding-bottom: 4px;
                    }
                }
            }

            .recipients {
                border-bottom: 1px solid @border-color;
                padding-bottom: (@padding-v + 5);
            }

            .subject {
                font-size: @phone-font-size + 5;
                font-weight: bold;
                line-height: @phone-line-height + 5;
                margin: 0;
                padding-top: (@padding-v + 4);
                padding-bottom: 4px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .sp { margin-right: 4px; }
        }

        section {
            .attachments, .body { border-top: 1px solid @border-color; }
            .attachments { margin-bottom: 0; }
            .body { padding: 8px @default-padding; }
        }

        &.expanded {
            //.detail-view-header {
            //    border-bottom: none;
            //}
            section.attachments:empty { border: 0; }
        }

        //.attachments { border-bottom-width: 0; }

        .has-attachments { display: none; }

        .mail-attachment-list {
            padding: 10px 0 9px 0;
            &.open { padding-bottom: 0; }
            .header  { padding: 0 15px; }
            ul.inline-items {
                margin: 0;
                &:not(.preview) > li.item {
                    padding: 10px 15px 9px 15px;
                }
                &.preview {
                    margin: 0 15px;
                    li.item .file { display: block; }
                }
            }
            .links { display:none; }
        }

        &:not(.expanded) .recipients { opacity: 1; }

        & > header {
            &.mobile-detail-view-mail {
                // use fa-fw for mobile
                .fa {
                    .fixed-width();
                    &.flag_0 {
                        display: none;
                    }
                }
                .date {
                    margin-left: 0;
                    display: inline-block;
                    float: none;
                    color: #767676;
                }
                .flags {

                    float: right;
                    & > * {
                        margin: 0 16px 0 0;
                        float: none;
                    }
                }
                .priority {
                    margin-right: @default-padding;
                }
            }
        }

        section.authenticity {
            padding: 0;
            border-bottom: 1px solid @border-color;
        }

        .notification-item.external-images {
            background-color: #eee;
            .comment {
                font-size: 12px;
                margin-right: 10px;
            }
        }
    }

    // list view
    .list-view.mail-item {

        @checkboxShift: 40px;

        .list-item {

            padding-top: 14px;
            padding-bottom: 15px;
            padding-left: 25px + @checkboxShift;

            border-right: 0;
            margin-right: -1px;
            background-color: #fff;

            &.unread.selected .subject { color: #000; }
            &.unread .date { font-weight: normal; }

            .subject {
                height: @phone-line-height;
            }

            &.complete > .list-item:last-child {
                margin-bottom: @toolbar-height;
                border-bottom: 0;
            }

            .from {
                font-size: 16px;
            }

            .list-item-content {
                font-size: @phone-font-size;
                line-height: @phone-line-height;
                i { line-height: @phone-line-height; }
                i.seen-unseen-indicator, i.fa-paperclip.has-attachments {
                    position: absolute;
                    top: 12px;
                    left: 8px + @checkboxShift;
                    margin: 0;
                }
                i.fa-paperclip.has-attachments {
                    top: 35px;
                    color: #707070;
                    font-size: 16px;
                }
            }

            .thread-size {
                font-size: inherit;
                line-height: inherit;
                margin-top: 0;
            }

            .list-item-row > i {
                margin-top: 2px;
            }

            &:hover { background-color: rgb(238, 238, 238); }

            .text-preview.multiline {
                font-size: inherit;
                line-height: inherit;
                height: 40px;
            }

            .fa-paperclip.has-attachments, .fa-cloud-download.is-shared-attachement, i.fa.signed, i.fa.encrypted {
                font-size: 18px;
                margin: 0 0 0 10px;
            }
        }

        &.hide-checkboxes .list-item {

            padding-left: 25px;

            .list-item-content {
                i.seen-unseen-indicator, i.fa-paperclip.has-attachments {
                    left: 8px;
                }
            }
        }

        &.complete > .list-item:last-child {
            margin-bottom: @toolbar-height;
            border-bottom: 0;
        }
    }

    // list of mails in a thread
    .thread-view-list {

        padding: 0;

        a.unread-toggle {
            left: 16px;
            float: left;
            top: -3px;
        }

        // thread header
        .thread-view-header {

            background-color: #eee;
            color: #333;
            border-bottom: 1px solid #ccc;

            // currently actually just subject
            & > * { font-size: @phone-font-size; }

            .subject {
                line-height: 20px;
                padding: 14px 15px 15px 25px;
                font-weight: bold;
                font-size: 16px;
            }
        }

        // list of mails in thread
        .thread-view {

            .list-item {

                border-bottom: 0;
                margin-bottom: 0;

                .detail-view-header {
                    padding: 14px 15px 16px 25px;
                    border-bottom: 1px solid #ccc;

                    .detail-view-row {
                        margin: 0;
                    }

                    .unread-toggle {
                        left: 8px;
                        top: 15px;
                        padding: 0;
                        position: absolute;
                    }

                    // from, recipient
                    .from, .date {
                        .ellipsis();
                        padding: 0;
                        white-space: normal;
                        font-size: @phone-font-size;
                        line-height: @phone-line-height;
                    }

                    .recipients {
                        padding: 0;
                        margin-bottom: -1px;
                        border-bottom: 0;
                        .person-link {
                            white-space: nowrap;
                        }
                    }
                    .person-from { flex: 1 }

                    .show-all-recipients {
                        display: none;
                    }
                }
                // do not show recipients
                &:not(.expanded) .recipients { max-height: initial; }
                // last element handling
                &:last-child {
                    margin-bottom: @toolbar-height;
                }
            }

            .list-item .unread-toggle { display: none; }
            .list-item.unread .unread-toggle { display: inline-block; }

            .row-2, .row-4, .row-5 { display: none; }
        }
    }

    .list-view-control:not(.upside-down).toolbar-bottom-visible .list-view {
        bottom: @mobile-toolbar-height;
    }

    // mail detail popup (portal)
    .io-ox-sidepopup-pane .mail-detail {

        &.no-padding .detail-view-header { padding-left: 0; }

        // portal widget fixes
        .subject {            display: flex;

        }

        .detail-view-header {
            .unread-toggle {
                float: left;
                padding: 0;
            }
            .date {
                padding-top: 0;
            }
            .from {
                padding: 0 0 0 12px;
            }
            .recipients {
                padding-left: 0;
                border-bottom: none;
            }
        }
    }
}