/* app content list & detail view */
/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */
/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */

.app-content-list {
	width: 30%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid nc-darken($color-main-background, 8%);
}

.app-content-detail {
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.app-content-list-button {
	display: block;
	margin: 10px auto;
	padding: 10px;
}

.app-content-list-item {
	position: relative;
	height: 68px;
	border-top: 1px solid nc-darken($color-main-background, 8%);
	cursor: pointer;
}

.app-content-list-item:hover,
.app-content-list-item:focus,
.app-content-list-item.active {
	background-color: nc-darken($color-main-background, 6%);
}

.app-content-list-item-link {
	display: block;
	height: 100%;
}

.app-content-list-item-icon {
	position: absolute;
	display: inline-block;
	left: 6px;
	top: 14px;
}

.app-content-list-item-star {
	position: absolute;
	display: none; /* change to inline-block when we implement it */
	left: 16px;
	top: 28px;
	padding: 20px;
	background-size: 16px;
	z-index: 100;
}

.app-content-list-item-line-one,
.app-content-list-item-line-two {
	position: absolute;
	display: inline-block;
	width: 100%;
	padding: 12px;
	padding-left: 50px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-content-list-item-line-one.no-line-two {
	padding-top: 24px;
	padding-bottom: 24px;
}

.app-content-list-item-line-two {
	top: 25px;
	opacity: .5;
}

#app-navigation-toggle-back {
	display: none;
}

/* Mobile width < 768px */
@media only screen and (max-width: 768px) {

	/* full width for message list on mobile */
	.app-content-list {
		width: 100%;
		background: $color-main-background;
		position: relative;
		z-index: 100;
	}

	/* overlay message detail on top of message list */
	.app-content-detail {
		background: $color-main-background;
		width: 100%;
		left: 0;
		height: 100%;
		top: 0;
		box-shadow: 0 0 100px rgba(100, 100, 100, .9);
		position: absolute;
	}

	#app-navigation-toggle.showdetails {
		transform: translate(-50px, 0);
	}

	#app-navigation-toggle-back {
		position: fixed;
		display: inline-block !important;
		top: 45px;
		left: 0;
		width: 44px;
		height: 44px;
		z-index: 149;
		background-color: rgba(255, 255, 255, .7);
		cursor: pointer;
		opacity: .6;
		transform: rotate(90deg);
	}

	/* end of media query */
}