/*
Copyright (c) Microsoft Corporation. All rights reserved
*/

/* styles */
.listviewpivotitem.win-pivot-item .win-pivot-item-content {
    /* Stretch across the whole width of the screen so the whole thing is pannable.*/
    padding: 0;
    margin: 0;
    width: 100%;
}

.win-listview {
    height: 100%;
}

#pivotScenario3 .win-listview .win-container {
    margin: 0;
    padding: 0 0 20px 0;
}

#pivotScenario3 .win-listview .win-item {
    margin: 0 20px 0 0;
    width: calc(100% - 20px);
}

#pivotScenario3 .win-listview.win-rtl .win-item {
    margin: 0 0 0 20px;
}

/* Mail item template CSS */
.mailItem h2 {
    line-height: 1.3;
}

.mailItem h5 {
    font-size: 12pt;
}

.mailItem {
    display: -ms-grid;
    -ms-grid-columns: 20px 1fr 60px;
    -ms-grid-rows: auto auto auto;
}

    .mailItem .selectionmodeHitTarget {
        /* So it is stacked on top of other grid elements */
        position: relative;
        z-index: 1;
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        width: 16px; /* reserve 4px gap between highlight and item edge */
        height: 100%;
        transition: background-color 250ms ease-out 250ms, visibility 0ms linear 500ms, transform cubic-bezier(0.17,0.79,0.215,1.0025) 250ms;
    }

        .mailItem .selectionmodeHitTarget:active {
            transition: background-color ease-out 100ms; /* fade in fast */
            background-color: Highlight;
        }

        .mailItem .selectionmodeHitTarget:after {
            display: block;
            margin: 0 16px;
            width: 16px;
            height: 100%;
            content: '';
        }

.win-selectionmode .mailItem .selectionmodeHitTarget {
    transform: translateX(-41px); /* delayed by transition */
    visibility: hidden;
}

.win-selectionmode .win-item {
    overflow: visible;
}

.author {
    white-space: nowrap;
    overflow: hidden;
}


.mailItem .authorRoot {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.mailItem .title {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    font-weight: 500;
    margin-top: -4px;
    white-space: nowrap;
    overflow: hidden;
}

.mailItem .previewText {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    margin-top: -4px;
    /* 255 * 0.6 = 153 */
    color: rgb(153,153,153);
    white-space: nowrap;
    overflow: hidden;
    font-weight: 300;
}

.mailItem .time {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-row-align: end;
    -ms-grid-column-align: end;
    margin-bottom: 4px;
    font-weight: 300;
}
