@import 'helpers';

.friends-list,
.profile,
.stream {

	header {
		position: relative;
		height: 120px;
		// background: linear-gradient(to bottom, #EEE, #CCC);
		background: url(/assets/texture.jpg) center/cover;
		overflow: hidden;

		// &::before {
		// 	content: '';
		// 	.fill();
		// 	top: -25%;
		// 	height: 150%;
		// 	background: url(/assets/texture.jpg) center/cover;
		// 	// opacity: 0.3;
		// 	// opacity: 0;
		// 	// transform: translateY(10%);
		// 	// animation: fadeIn 2s ease forwards 1 500ms;
		// 	// @keyframes fadeIn { to{
		// 	// 	opacity: 0.3;
		// 	// 	transform: translateY(0%);
		// 	// } }
		// }

		& > * {
			position: relative;
			z-index: 1;
		}

		h3, h4, small {
			margin: 0 130px 0 0;
			padding: 0;
			text-shadow: 0 1px 0 rgba(255,255,255,0.2);
			text-align: left;
			font-weight: 300;
			line-height: 1.1;
			overflow: hidden;
		}
		h3 {
			font-size: 200%;
			padding: 5px 0;
			color: #000;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		h4 {
			padding: 22px 0 0;
			color: #666;
			font-size: 100%;
		}
		small {
			display: block;
			color: #666;
			&:hover {
				color: #000;
			}
		}

		.avatar {
			display: inline-block;
			float: left;
			width: 100px;
			height: 100px;
			padding: 0;
			margin: 10px 20px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: 50%;
		}

		.opts {
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 10px;
		}

		.tags {
			position: absolute;
			right: 0;
			top: 0;
			padding: 10px;
		}

		.tag {
			margin: 0 5px 5px 0;
			background: #EEE;
			padding: 1px 3px;
			border-radius: 2px;
			color: #888;
			font-size: 80%;
			box-shadow: 0 0 1px rgba(0,0,0,0.5);
		}

		.follow, .unfollow {
			display: block;
		}
	}

	.posts {
		// .fill();
		// height: auto;
		// bottom: 60px;
		// overflow: auto;
		// overflow-scrolling: touch;
		// -webkit-overflow-scrolling: touch;

		// & > .post-inner {
		// 	overflow: hidden;
		// }
	}
}


.friend,
.post {
	margin: 10px;
	padding: 30px 10px 10px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	background: #FFF;
	overflow: hidden;
	max-width: 600px;

	&[minimal] {
		padding-top: 10px;
	}

	@media (min-width: 620px) {
		margin: 10px auto;
	}

	img {
		display: block;
		max-width: 95%;
		margin: auto;
		image-rendering: pixelated;
	}

	.avatar {
		float: right;
		width: 36px;
		height: 36px;
		margin: 0 7px;
		background-color: #CCC;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 50%;
		cursor: pointer;
	}

	&[unread-count] .avatar {
		box-shadow: 0 0 1px 2px #25d87a;
	}
}

.friend {
	cursor: pointer;
	padding: 20px 10px;

	.avatar {
		margin-right: 20px;
		width: 64px;
		height: 64px;
		float: left;
	}

	h2 {
		font-size: 130%;
		margin: 10px 0;
		padding: 0;
		line-height: 1.1em;
	}

	h4 {
		font-size: 90%;
		margin: 0 0 5px;
		padding: 0;
		line-height: 1.1em;
		color: #777;
	}

	footer {
		padding: 10px 0 0;
		color: #777;
		font-size: 100%;
		overflow: hidden;

		&:empty {
			display: none;
		}
	}

	.unread-count {
		color: #777;
	}

	&:not([unread-count]) .unread-count {
		display: none;
	}
}
