mail.scss

.loading {
	position: absolute;
	left: 50%;
	top: 50%;
}

.emptycontent {
	padding-top: 30vh;
	margin-top: 0px;
}
.emptycontent > h2 {
	padding-top: 20px;
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.folders .ui-droppable-active {
	background-color: rgb(240, 240, 240);
}

.folder.no-select {
	cursor: not-allowed;
}

/* ACCOUNT FORM */
#account-form {
	z-index: 1001;
	width: 250px;
	top: 15%;
	padding-bottom: 50px;
	margin: 0 auto;
	padding-top: 30px;
}
#mail-settings {
	#account-form {
		margin: 0;
		padding-top: 0;
	}
}
@media only screen and (max-height: 400px) {
	#account-form #emptycontent {
		margin-top: 0px;
	}
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
	#account-form #emptycontent {
		margin-top: 2vh;
	}
}
@media only screen and (min-height: 601px) {
	#account-form #emptycontent {
		margin-top: 10vh;
	}
}
#account-form h2 {
	text-align: center;
	position: relative;
	width: 300%;
	left: -100%;
	margin-bottom: 20px;
}
#account-form input {
	width: 100%;
	box-sizing: border-box;
}

#account-form .toggle-manual-mode {
	background-position: right;
	padding-right: 16px;
	margin-left: 6px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	opacity: .3;
}

#setup-imap-ssl-mode,
#setup-smtp-ssl-mode {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	z-index: 100;
}

#connect-loading {
	position: absolute;
	top: 206px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 30px;
}

/* app navigation */

/* do not display empty folders in the sidebar */
.app-navigation .empty {
	display: none;
}

.app-navigation .navigation-account:not(:first-child) {
    margin-top: 22px;
}


/* do not overlap collapse icon with special use icon */
.app-navigation .special-inbox .collapse,
.app-navigation .special-drafts .collapse,
.app-navigation .special-sent .collapse,
.app-navigation .special-trash .collapse {
	display: none !important;
}
.app-navigation .special-inbox:hover .collapse,
.app-navigation .special-inbox:focus .collapse,
.app-navigation .special-drafts:hover .collapse,
.app-navigation .special-drafts:focus .collapse,
.app-navigation .special-sent:hover .collapse,
.app-navigation .special-sent:focus .collapse,
.app-navigation .special-trash:hover .collapse,
.app-navigation .special-trash:focus .collapse {
	display: inline-block !important;
}

#accounts-list li.collapse-folders a {
	color: var(--color-text-maxcontrast);
}

#emptycontent,
#mail-messages #emptycontent.emptycontent-search {
	position: static;
}
#mail-messages #emptycontent.emptycontent-search h2 {
	line-height: 150%;
}
#mail-messages #emptycontent {
	position: absolute;
}

.mail-account-email {
	display: inline-block;
	opacity: .5;
	padding: 20px 0 10px 25px;
	width: calc(100% - 50px);
	margin: initial;
	font-size: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-account-email:first-child {
	display: none;
}

.account-toggle-collapse {
	opacity: .5;
}


/* settings */

.mailaccount-list li {
	padding: 10px 0;
}
.mailaccount-list .mail-account-name {
	display: inline-block;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mailaccount-list .actions {
	display: inline-flex;
	position: absolute;
	right: 0;
	min-height: 16px;
	min-width: 16px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
	opacity: .25;
}
.mailaccount-list .actions:hover,
.mailaccount-list .actions:focus {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}


/* app content*/

#mail-messages {
	position: relative;
	width: 30%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid var(--color-border);
}
#mail-message-list-loading {
	position: sticky;
	height: 40px;
	z-index: 1;
	background: -moz-radial-gradient(top, ellipse cover, var(--color-main-background), rgba(255,255,255,0) 70%);
	background: -webkit-radial-gradient(top, ellipse cover, var(--color-main-background),rgba(255,255,255,0) 70%);
	background: radial-gradient(ellipse at top, var(--color-main-background),rgba(255,255,255,0) 70%);
}

.app-navigation .msg.success {
	color: #fff;
	background-color: var(--color-success);
	padding: 3px;
}
.app-navigation .msg.error {
	color: #fff;
	background-color: var(--color-error);
	padding: 3px;
}

/* autocomplete list */
.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete {
	margin: 0px;
	font-weight: normal !important;
	display: flex;
	align-content: center;
	align-items: center;
	border: none;
}
.ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete span {
	margin-left: 10px;
}
.ui-autocomplete {
	padding-left: 16px !important;
	border-radius: 0 !important;
	border-left: none;
	border-right: none;
	z-index: 1000;
}

.icon-starred[data-starred="false"]:hover {
	background-image: var(--icon-star-dark-fc0) !important;
}
.icon-starred[data-starred="false"]:not(:hover) {
	background-image: var(--icon-star-000) !important;
}

.unread {
	font-weight: bold;
}
/* make sure subfolders of unread folders are not bolded as well */
.unread ul {
	font-weight: normal;
}

.star {
	padding: 20px;
	background-size: 16px;
	display: inline-block;
	position: absolute;
	left: 16px;
	top: 28px;
	z-index: 10;
}
/* only show star on hover of row */
.star.icon-star {
	display: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .3;
}
.star.icon-star:hover,
.star.icon-star:focus {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
}

.icon-add {
	display: inline-block;
	vertical-align: text-top;
}

.transparency {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	opacity: .6;
}


/* compose (handling mailto links) */

.compose {
	width: 60%;
	margin: 0 auto;
}

/* settings */
.mailaccount-list .mail-account-name {
	display: inline-block;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mailaccount-list .actions {
	opacity: .5;
}

/* icons */
@include icon-black-white('inbox', 'mail', 1);
@include icon-black-white('important', 'mail', 1);

.icon-flagged {
	@include icon-color('star', 'mail', $color-black);
}

@include icon-black-white('drafts', 'mail', 1);
@include icon-black-white('sent', 'mail', 1);
@include icon-black-white('archive', 'mail', 1);
@include icon-black-white('junk', 'mail', 1);
@include icon-black-white('trash', 'mail', 1);
@include icon-black-white('reply', 'mail', 1);
@include icon-black-white('reply-all', 'mail', 1);
@include icon-black-white('forward', 'mail', 1);

// FIXES for core apps.scss

.app-navigation {
	> ul {
		> .navigation-account > li,
		> .navigation-account > .folders > li,
		> .navigation-account > .folders > li > .folders > .folders > li {
			display: inline-flex;
			flex-wrap: wrap;
			order: 1;
			flex-shrink: 0;

			/* Pinned-to-bottom entries */
			&.pinned {
				order: 2;
				&.first-pinned {
					margin-top: auto !important;
				}
			}

			> a,
			> .app-navigation-entry-deleted {
				/* Ugly hack for overriding the main entry link */
				padding-left: 44px !important;
			}
			> .app-navigation-entry-edit {
				/* Ugly hack for overriding the main entry link */
				/* align the input correctly with the link text
				   44px-6px padding for the input */
				padding-left: 38px !important;
			}

			&:focus,
			&:hover,
			&.active,
			a.selected {
				&,
				> a {
					opacity: 1;
					box-shadow: inset 2px 0 $color-primary;
				}
			}

			/* align loader */
			&.icon-loading-small:after {
				left: 22px;
				top: 22px;
			}

			/* hide and animate deletion/collapse of subitems */
			&.deleted,
			&.collapsible:not(.open) {
				> ul,
				> .folders {
					opacity: 0;
					max-height: 0;
					/* bezier override the hide/slow effect due to the 2000 max-height */
					transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
								opacity 250ms ease-in-out;
				}
			}

			/* Second level nesting for lists */
			> ul {
				flex: 1 0 100%;
				padding-left: 62px;
				width: inherit;
				transition: max-height 2000ms ease-in-out,
							opacity 250ms ease-in-out;
				max-height: 9999px;
				opacity: 1;
				> li {
					display: inline-flex;
					flex-wrap: wrap;
					&:focus,
					&:hover,
					&.active,
					a.selected {
						&,
						> a {
							opacity: 1;
						}
					}

					/* align loader */
					&.icon-loading-small:after {
						left: -10px;
					}

					/* Submenu fix for icon */
					> a[class*='icon-'],
					> a[style*='background-image'],
					.app-navigation-entry-bullet {
						margin-left: -32px; /* 44px padding - 12px padding */
					}

					/* Submenu fix for bullet */
					> .app-navigation-entry-bullet {
						left: -32px;/* 44px padding - 12px padding */
					}
				}
			}
		}
		/* Menu and submenu */
		> .navigation-account > li,
		> .navigation-account > .folders > li,
		> .navigation-account > .folders > li > .folders > .folders > li {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			/* hide icons if loading */
			&.icon-loading-small {
				> a,
				> .app-navigation-entry-bullet {
					background: none !important;
				}
			}
			/* Main entry link */
			> a {
				background-size: 16px 16px;
				background-position: 14px center;
				background-repeat: no-repeat;
				display: block;
				justify-content: space-between;
				line-height: 44px;
				min-height: 44px;
				padding: 0 12px;
				overflow: hidden;
				box-sizing: border-box;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: var(--color-main-text);
				opacity: .57;
				flex: 1 1 0;
				z-index: 100; /* above the bullet */
				/* TODO: forbid using img as icon in menu? */
				&:first-child img {
				    margin-right: 11px;
				    width: 16px;
				    margin-left: -30px;
				}
			}

			/* Bullet icon */
			> .app-navigation-entry-bullet {
				position: absolute;
				display: block;
				margin: 16px;
				width: 12px;
				height: 12px;
				border: none;
				border-radius: 50%;
				cursor: pointer;
			}

			/* popover fix the flex positionning of the li parent */
			> .app-navigation-entry-menu {
				top: 44px;
			}
		}
	}
	.collapsible > .collapse {
		z-index: 500;
	}
}