/*
 * Shared for placeholder loading
 */
@keyframes loadingItem {
	from { opacity: .05; }
	to   { opacity: .15; }
}

%item-loading-pseudo {
	content: '\00a0';
	display: inline-block;
	border-radius: $global-border-radius;
	background-color: currentColor;
	line-height: 1.2;
	opacity: 0;
}

%appearing-container {
	animation: itemFadeIn .5s easing(easeOutQuint);
}

%placeholder-loading {
	animation: loadingItem .5s calc(var(--index, 0) * 20ms) easing(easeOutSine) infinite alternate;
}

@keyframes itemFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}


/*
 * items (conversations/contacts lists)
 */
$container-to-width: 3em !default;

.items-column-list {
	width: var(--width-conversation-column, calc((100% + var(--width-sidebar, #{$width-sidebar})) * #{$conversations-column-width/1%/100}));
}

.items-column-list-inner,
.ReactVirtualized__Grid__innerScrollContainer {
	border: solid var(--bordercolor-input, $pm-global-border);
	border-width: 0 1px;
	min-height: 100%;
}

.items-column-list-inner--noborder {
	// fix for Contact and ReactVirtualized__Grid
	border: 0;
}

.items-column-list--mobile {
	width: 100%;
}

.items-column-list,
.items-column-list--mobile,
.view-column-detail {
	height: 100%;
}

.view-column-detail {
	background: var(--bgcolor-view-column-detail, $white);
}

$item-container-height: 6.4rem !default;
$item-container-padding-top-bottom: em(8.5) !default;
$item-container-padding-left-right: em(12) !default;

$item-container-height-compact-mode: 4.8rem !default;
$item-container-row-height-compact-mode: 4rem !default;

.item-container,
.item-container-row {
	@extend %appearing-container;
	position: relative;
	padding: $item-container-padding-top-bottom $item-container-padding-left-right; // design wants ~64 height
	border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
	background-color: var(--bgcolor-item-column-list, $pm-global-muted);

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
		border: 1px solid transparent;
		transition: .15s easing(easeOutQuart);
	}

	&:hover::before {
		border-color: $pm-primary-light;
		box-shadow: 0 .125em .25em 0 var(--dropdown-box-shadow, $input-shadow-color);
	}
}

.item-container {
	height: $item-container-height;
}
// fix for Firefox multi-selection issue
.item-checkbox-label > .item-checkbox {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.item-firstline,
.item-secondline {
	margin-bottom: .25em;
}

.item-secondline:empty {
	min-height: 1.5em;
}

/* Compact view */
.is-shown-when-compact {
	display: none;
}

.is-compact {

	.item-container,
	.item-container-row {
		height: $item-container-height-compact-mode;

		.item-container-inner {
			padding: em(0) em(12);
		}
	}
	.item-container-row {
		height: $item-container-row-height-compact-mode;
	}
	.item-icon-compact {
		&::after {
			height: $item-container-row-height-compact-mode;
		}
	}
	.item-firstline,
	.item-secondline {
		margin: 0;
	}

	.is-hidden-when-compact {
		display: none;
	}

	.is-shown-when-compact {
		display: flex;
	}
}

.item-is-selected,
.item-container.active {
	// alias for Angular
	background-color: var(--bgcolor-item-column-active, $conversation-selected-bg);
}

.item-container:not(.item-is-selected):not(.read):not(.active),
.item-container-row:not(.item-is-selected):not(.read):not(.active) {
	background-color: var(--bgcolor-unread-item-column-list, $white);
}

.item-is-loading {
	background-color: var(--bgcolor-main-area, white);
	pointer-events: none;

	.item-checkbox-label::before,
	.item-icon-compact::before,
	.item-senders::before,
	.item-senddate-col::before,
	.item-senddate-row::before,
	.item-weight::before,
	.item-star,
	.item-subject::before {
		@extend %placeholder-loading;
	}

	.item-checkbox-label,
	.item-icon-compact {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			border-radius: $global-border-radius;
			background-color: currentColor;
			opacity: 0;
		}

		.item-icon,
		.pm-checkbox-fakecheck {
			opacity: 0;
		}
	}

	.item-senders,
	.item-senddate-col,
	.item-senddate-row,
	.item-weight,
	.item-subject {
		&::before {
			@extend %item-loading-pseudo;
		}
	}

	.item-senders {
		&::before {
			width: 35%;
		}
	}

	.item-senddate-col {
		min-width: 6em;

		&::before {
			width: 100%;
		}
	}

	.item-senddate-row {

		&::before {
			width: 70%;
		}
	}

	.item-weight {
		min-width: 4em;

		&::before {
			width: 100%;
		}
	}

	.item-subject {
		&::before {
			width: 60%;
		}
	}
}



$conversation-icon-size: 3.2rem !default;

.item-icon {
	width: $conversation-icon-size;
	height: $conversation-icon-size;
	font-size: 1.2rem;
	border: 1px solid var(--bordercolor-input, $pm-global-border);
	background-color: var(--bordercolor-input, $white);
}

.item-icon-compact {
	width: $conversation-icon-size;
	height: $conversation-icon-size;
	border-radius: 50%;
	font-size: 1.2rem;
	transition: background .25s ease;

	&:hover {
		background: var(--bordercolor-input, $pm-global-light);
	}
	&::after {
		content: '';
		position: absolute;
		left: -#{em(12)};
		right: -#{em(12)};
		top: -#{($item-container-height-compact-mode - $conversation-icon-size)/2};
        height: $item-container-height-compact-mode;
	}
}

.item-checkbox {

	// for allowing hovering larger than fake circle
	&:after {
		content: '';
		position: absolute;
		top: -#{($item-container-height - $conversation-icon-size)/2};
		bottom: -#{($item-container-height - $conversation-icon-size)/2};
		left: em(-12);
		width: calc(#{$conversation-icon-size} + #{$item-container-padding-left-right} + .5rem);
		// icon size + padding container + tiny margin for comfort
	}

	// hidden fake check by default
	&+.item-icon>.item-icon-fakecheck {
		display: none;
	}

	// focus state (used global hover state) => NEEDS IMPROVEMENTS
	// &:focus + .item-icon {
	//   & > .item-abbr {
	//     display: none;
	//   }

	//   & > .item-icon-fakecheck {
	//     display: flex;
	//     transform: scale(1);
	//   }

	//   .item-icon-fakecheck-icon {
	//     fill: $pm-global-border;
	//   }
	// }

	// hover state of checkbox
	&:hover+.item-icon,
	&+.item-icon:hover {
		background-color: var(--bgcolor-input, $white);
		border-color: var(--bordercolor-input, $pm-global-border);

		&>.item-abbr {
			display: none;
		}

		&>.item-icon-fakecheck {
			display: flex;
			transform: scale(1);
		}

		.item-icon-fakecheck-icon {
			fill: $pm-primary;
		}
	}

	// checked state
	&:checked+.item-icon {
		background-color: $pm-primary;
		border-color: $pm-primary;

		&>.item-abbr {
			display: none;
		}

		&>.item-icon-fakecheck {
			display: flex;
			animation: conversationIconIn ease .15s;
		}

		.item-icon-fakecheck-icon {
			fill: $white;
		}
	}
}

// fix pseudo element for row layout
.item-container-row {
	.item-checkbox {
		&:after {
			top: -#{$item-container-padding-top-bottom};
			bottom: -#{$item-container-padding-top-bottom};
		}
	}
	.item-weight {
		min-width: 5em;
	}
}

@keyframes conversationIconIn {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

.item-sender--smaller,
.item-date {
	font-size: em(12);
}

.message-header-metas-container {
	height: $conversation-icon-size;
}

.starbutton {
	color: var(--color-main-area, $pm-global-grey);
	width: 1.6rem;
	height: 1.6rem;
	opacity: .5;

	&:focus,
	&:hover {
		color: $pm-global-attention;
		opacity: 1;
	}

	[class*="starbutton-icon"] {
		position: absolute;
		top: 0;
		left: 0;
	}

	.starbutton-icon-starred {
		transform: scale(0);
		transition: transform .15s ease;
	}
}

.starbutton--is-starred {
	opacity: 1;
	color: $pm-global-attention;

	.starbutton-icon-starred {
		transform: scale(1);
	}
}

.pill-icon {
	display: inline-flex;
	padding: .125em .5em;
	border-radius: 1em;
	line-height: 1;

	& > * {
		color: white;
	}

	&-attachment {
		background-color: rgba(black, .5);
		// Plus some adaptations for dark theme in _pm-dark-theme.scss
	}
}

/*
 * view messages
 */
.message-conversation-summary {
	.is-appearing-content {
		@extend %appearing-container;
	}

	&-is-loading {
		pointer-events: none;
	}

	&-is-loading &-header,
	&-is-loading &-stat {
		position: relative;

		&::before {
			@extend %item-loading-pseudo;
			@extend %placeholder-loading;
		}
	}

	&-is-loading &-header {
		&::before {
			width: 25%;

			@include respond-to($breakpoint-small) {
				width: 50%;
			}
		}
	}

	&-is-loading &-stat {
		&::before {
			width: 2em;
		}
	}

	&-is-loading &-star {
		@extend %placeholder-loading;
	}
}

.trashed-messages,
.message-header {
	background-color: var(--bgcolor-item-column-list, $pm-global-muted);
}

.message-container {
	border: 1px solid var(--bordercolor-input, $pm-global-border);
	border-radius: $global-border-radius;
	@extend %appearing-container;
}

.message-header {
	border-radius: $global-border-radius; // Can't overflow 'cause of ::before, so repeat radius
	padding: .6em;

	.is-appearing-content {
		@extend %appearing-container;
	}

	&.is-unread {
		background: var(--bgcolor-unread-item-column-list, $white);
		box-shadow: 2px 2px 3px 0px $input-shadow-color;
		font-weight: bold;
	}

	&.is-loading {
		pointer-events: none;
	}

	&.is-loading .message-recipient-item-icon,
	&.is-loading &-star {
		@extend %placeholder-loading;
	}

	&.is-loading .message-recipient-item-icon {
		background-color: currentColor;
		opacity: 0;
	}

	&.is-loading .message-recipient-item-label,
	&.is-loading .message-recipient-item-address,
	&.is-loading &-metas,
	&.is-loading &-to,
	&.is-loading &-contact,
	&.is-loading .message-show-hide-link-container {
		position: relative;

		&::before {
			@extend %item-loading-pseudo;
			@extend %placeholder-loading;
		}
	}

	&.is-loading .message-recipient-item-label {
		width: 100%;
		max-width: 7.5em;

		&::before {
			width: 100%;
		}
	}

	&.is-loading .message-recipient-item-address {
		width: 100%;
		max-width: 12.5em;

		&::before {
			width: 100%;
		}
	}

	&.is-loading &-metas {
		&::before {
			width: 10em;
		}
	}

	&.is-loading &-to {
		&::before {
			width: 1.25em;
		}
	}

	&.is-loading &-contact {
		&::before {
			width: 7.5em;
		}
	}

	&.is-loading .message-show-hide-link-container {
		&::before {
			width: 6em;
		}
	}
}

// hide extra container when there is nothing inside
.message-header-extra:empty {
	display: none;
}

// when expanded but no full details
.message-header-expanded {
	padding: .6em .6em 0 .6em;

	.message-show-hide-link {
		padding: 0;
	}
}

// alignements when expanded/details
.message-header--showDetails {
	.message-show-hide-link-container {
		padding-left: calc(#{$container-to-width} + #{$conversation-icon-size} + .75em);
	}

	// show/hide details should go below otherwise it will be strangely place depending of recipients
	.message-header-recipients {
		flex-direction: column;

		&>* {
			width: 100%;
			flex-basis: auto;
		}
	}

	.message-recipient-item-expanded {
		margin-top: .25em;

		@include respond-to($breakpoint-small) {
			margin-top: .5em;
		}

		.message-recipient-item:not(:first-child) {
			margin-top: .25em;
		}
	}

	// display of email default none except when details
	.message-recipient-item-address,
	.message-recipient-item-label {
		@extend .ellipsis;

		@include respond-to($breakpoint-small) {
			display: block;
		}
	}
	.message-recipient-item-lockIcon::before {
		@include respond-to($breakpoint-small) {
			content: '\00a0';
			width: 100%;
		}
	}
}

.message-detailed-header-extra {
	.item-date {
		font-size: 1.4rem;
	}
}

/* states classes */
.message-container.is-opened {

	>.message-header {
		border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
	}

}

.message-container--hasAttachment {
	.message-content {
		border-radius: 0;
	}
}

.message-content {
	transition: .5s easing(easeOutSine);
	transition-property: background-color, color;

	&-loading-placeholder {
		position: relative;

		&::before {
			@extend %item-loading-pseudo;
			@extend %placeholder-loading;
			width: 100%;
		}
	}
}

.message-expand {
	padding: 0 .5em .6em; // centers
	background-color: var(--bgcolor-item-column-list, $pm-global-light);
	line-height: .75;
}

.message-attachments {
	font-size: 1.4rem;
}

.message-attachmentPrimaryAction,
.message-attachmentSecondaryAction {
	&:hover,
	&:focus-within {
		box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
	}
}
.isDarkMode {
	.message-attachmentPrimaryAction,
	.message-attachmentSecondaryAction {
		background-color: $pm-global-grey;
		&:hover,
		&:focus-within {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
}


.message-attachmentSecondaryAction {
	svg[aria-busy="true"] {
		background-size: 16px;
	}
}

.message-attachment {
	line-height: 1.3;
	padding: 0;

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

.message-attachmentList-item-container {
    margin-top: .5em;
	width: 50%;

    &:first-child,
    &:nth-child(2) {
        margin-top: 0;
    }
    &:nth-child(even) {
        padding-left: 0.5em;
    }
    &:nth-child(odd) {
        padding-right: 0.5em;
    }
    // fix on last only if there are more than 4
    &:nth-child(n + 5):last-child {
        padding-bottom: 0.5em;
    }

	@include respond-to($breakpoint-tiny) {
		width: 100%;
		&:nth-child(even),
		&:nth-child(odd) {
			padding-left: 0;
			padding-right: 0;
		}
		&:nth-child(2) {
			margin-top: .5em;
		}
	}

}


.message-attachmentList-item {
	&--uploadInProgress {
		background-color: var(--bordercolor-input, $pm-global-muted);
		.message-attachmentSecondaryAction {
			border: 0;
		}
	}
	&--loading {
		background: var(--bordercolor-input, $pm-global-muted);
	}
}


$message-attachment-icon-width: 2.6em !default;
.message-attachmentIcon {
	width: $message-attachment-icon-width;

	svg:not([class*="fill-"]) {
		fill: var(--color-main-area, $black);
	}
}


.message-attachmentInfo {
	border-left: 1px solid var(--bordercolor-input, $pm-global-border);
	padding: .3em .7em;
	max-width: calc(100% - #{$message-attachment-icon-width});
}

.message-attachmentSize {
	font-size: 1.2rem;
	opacity: .5;
}

.message-infobox {
	background: var(--bgcolor-main-area, $white);
}

.container-to {
	min-width: $container-to-width;

	.item-icon {
		&:focus,
		&:hover {
			.item-abbr {
				display: none;
			}

			.item-caret {
				display: block;
			}
		}
	}
}


.compose-fab {
	position: fixed;
	bottom: 1em;
	right: 1.6em;
	z-index: 77;
	height: 6.6rem;
	width: 6.6rem;
	border-radius: 50%;
	padding: .5em;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
	transition: bottom .5s easing(easeOutQuart);

	&--is-higher {
		bottom: 4em;
	}

	&--inBackground {
		z-index: 0;
	}
}


@import "_pm-reset-display-messages";