@import 'mdl';
@import 'scroll-list';
@import 'profile';
@import 'helpers';

html, body, #app {
	height: 100%;
	background: @background;
	overflow: hidden;
}

body[plain-background] {
	&, #content, #login {
		background: #F4F4F4;
	}

	.loading[overlay] {
		background: #F4F4F4;
	}
}


#app {
	background: #888;
}

#content, #login {
	background: @background;
}

button, a {
	outline: none;
	tap-highlight-color: rgba(0,0,0,0);
	user-select: none;
}

textarea {
	resize: none;
}


[optimized-visibility] {
	visibility: hidden;

	&[visible] {
		visibility: visible;
	}

	&[more-optimized]:not([visible]) > * {
		display: none !important;
	}
}


a {
	cursor: pointer;
	text-decoration: none;
}


.view.view-scroll {
	.fill();
	.scroller();
}


.loading {
	.fill();
	z-index: 400;
	&[overlay] {
		background: @background;
	}
	&:not([overlay]) {
		background: none;
		pointer-events: none;
	}

	.mdl-spinner {
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -14px 0 0 -15px;
	}
}

.comment-block,
.like-block,
.comments {
	.comment, .like {
		position: relative;
		border-left: 3px solid #EEE;
		margin: 5px 10px;
		padding: 5px 10px;

		p {
			margin: 0;
			font-size: 100%;
		}

		.comment-menu-wrap {
			float: right;
			position: relative;
			overflow: visible;

			.mdl-menu__container {
				top: 40px;
				right: 0;
			}
		}
	}
	author {
		display: block;
		margin: 0;
		padding: 0;
		//color: #888;
		opacity: 0.4;
	}
}

.explore {
	.fill();
	.scroller();

	.unread-count {
		color: #AAA;
		padding-left: 6px;
	}

	.stream-connection {
		min-height: 100px;

		&[read] {
			display: none;
		}

		.mdl-card__title {
			position: relative;
			z-index: 1;

			.avatar {
				float: left;
				width: 40px;
				height: 40px;
				margin: 0 10px -5px 0;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				border-radius: 50%;
				cursor: pointer;
			}
		}

		.mdl-card__supporting-text {
			margin: -20px 0 0;
			padding: 0;
			width: auto;
			overflow: visible;
		}

		.connection-meta {
			position: absolute;
			right: 5px;
			top: 17px;
			color: #888;
		}

		.post-meta {
			top: -30px;
			right: 40px;
			z-index: 2;
		}

		.post {
			border-radius: 0;
			margin: 0;
			box-shadow: none;
			max-width: auto;
			overflow: visible;

			&:not(:first-child) {
				border-top: 1px solid #DDD;
			}
		}
	}
}


.logo {
	position: relative;
	will-change: transform;
	transition: all 500ms ease;

	&[loading] {
		.spin3d();
		opacity: 0.5;
	}
}


.nothing {
	padding: 50px 20px 20px;
	font-size: 140%;
	text-align: center;
	line-height: 2em;
	color: #888;
	p { font-size:100%; }
}


.video-player {
	position: relative;
	overflow: hidden;
	background: #000;
	min-height: 300px;

	video {
		.fill();
		z-index: 20;
	}

	.poster {
		position: relative;
		overflow: hidden;
		//.fill();
		// background-color: #000;
		// background-position: center;
		// background-size: contain;
		// background-repeat: no-repeat;
		cursor: pointer;

		img {
			width: 100%;
		}

		.material-icons {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 50px;
			color: #FFF;
			opacity: 0.5;
			z-index: 10;
		}
	}
}


.post {
	position: relative;
	overflow: hidden;

	&.post-deleted {
		display: none;
	}

	p {
		margin: 0;
		font-size: 100%;
	}

	.items .item {
		padding: 10px 0;

		// &.item-image, &.item-video {
		// 	&:first-child {
		// 		padding-top: 30px;
		// 	}
		// }

		&.item-text, &.item-link {
			padding: 10px;
			font-size: 130%;
		}
	}


	&:not([has-avatar]) > .avatar {
		display: none;
	}

	.post-meta {
		position: absolute;
		right: 5px;
		top: 5px;
	}
	&[has-avatar] .post-meta {
		right: 60px;
	}

	.post-time {
		padding: 0 5px;
		color: #AAA;
		font-size: 70%;
	}

	// .post-menu {
	// 	position: absolute;
	// 	right: 40px;
	// 	top: 5px;
	// }
	//
	// .post-time {
	// 	position: absolute;
	// 	right: 70px;
	// 	top: 5px;
	// 	color: #AAA;
	// 	font-size: 70%;
	// }
	//
	// &[has-avatar] .post-time {
	// 	right: 85px;
	// 	top: 10px;
	// }

	.like-unlike {
		// position: absolute;
		// right: 5px;
		// top: 5px;
		color: #777;
		overflow: visible;

		&[is-liked] {
			color: #FF4081;
		}

		.mdl-badge:after {
			top: -8px;
			right: -8px;
			background: #BBB;
			transform: scale(0.7);
			transform-origin: top right;
		}
	}

	.comments {
		padding: 10px 0 0;
		max-width: 500px;
		margin: 0 auto;
		border-top: 1px solid #DDD;
		//overflow: hidden;

		author {
			display: inline-block;
			overflow: hidden;
			clear: both;
			cursor: pointer;
		}
	}

	.post-new-comment {
		position: relative;
		max-width: 500px;
		padding: 0 10px;
		margin: 0 auto;
		overflow: hidden;

		.mdl-textfield {
			display: block;
			width: auto;
			margin: -20px 30px -20px 0;

			textarea {
				height: 50px;
			}
		}

		.mdl-button {
			position: absolute;
			right: 5px;
			top: 50%;
			margin: -10px 0 0;
			color: #AAA;
		}
	}
}


.mdl-layout__drawer {
	&, & ~ * {
		transition: all 300ms ease;
	}
	&.is-visible ~ * {
		transform: translateX(240px/2);
		opacity: 0.1;
		pointer-events: none;
	}

	.mdl-button.menu {
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 2;
	}

	.mdl-navigation__link {
		em {
			float: right;
			font-style: normal;
			color: #BBB;
			font-weight: 300;
		}
	}
}


.modal {
	.modal();
	// background: #FFF;

	.content {
		.pin();
		// .scroller();

		&.has-header {
			top: 56px;

			@media (min-width: 1025px) {
				top: 64px;
			}
		}

		&.has-footer {
			bottom: 56px;
		}
	}

	.footer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 56px;
		line-height: 56px;
		text-align: center;
	}
}


.wave.modal {
	background: #FFF;
	left: 50%;
	top: 100%;
	right: auto;
	height: auto;
	width: 240px;
	max-height: 80%;
	margin: 5px 0 0 -120px;
	padding: 0 0 5px;
	border-radius: 3px;
	box-shadow: 0 5px 25px rgba(0,0,0,0.5);
	.scroller();

	.content {
		position: relative;
	}

	.footer {
		position: relative;
		background: #FFF;

		.mdl-button {
			width: 90%;
		}
	}

	&[showing] ~ * {
		opacity: 0.1;
		pointer-events: none;
	}

	@media (min-height: 561px) {
		margin: 0 0 0 -120px;

		&[showing] {
			transform: translateY(-112.5%);
		}
	}

	@media (max-height: 560px) {
		height: 80%;

		.content {
			.pin();
			bottom: 56px;
			.scroller();
		}

		.footer {
			position: absolute;
			box-shadow: 0 0 4px rgba(0,0,0,0.3);
		}
	}

	// .content {
	// 	.scroller();
	// }
}


.create.modal {
	.content {
		.scroller();
	}

	@media (min-width: 1025px) {
		left: 50%;
		top: 105%;
		right: auto;
		height: auto;
		width: 1000px;
		height: 90%;
		margin: 0 0 0 -500px;
		padding: 0;
		border-radius: 3px;
		box-shadow: 0 5px 25px rgba(0,0,0,0.5);
		overflow: hidden;

		&[showing] {
			transform: translateY(-112.5%);

			& ~ * {
				opacity: 0.1;
				pointer-events: none;
			}
		}
	}

	.error {
		position: absolute;
		bottom: 20px;
		left: 10px;
		right: 10px;
		animation: out 1s forwards 1 2s;
		z-index: 10;

		@keyframes out {
			0% { bottom:20px; opacity:1; }
			100% { bottom:-50px; opacity:0; }
		}
	}

	.text {
		display: block;
		box-sizing: padding-box;
		width: 100%;
		height: 200px;
		// width: auto;
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 0;
		// bottom: 50%;
		margin: 0 0 10px;
		padding: 0 0 20px;
		// margin: 20px 10px 0;

		& > textarea {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 10px;
			background: #FFF;
			resize: none;
		}
	}

	// [is-magic] .text {
	// 	bottom: 50%;
	// }

	.magic, .images {
		// position: absolute;
		// top: 0;
		// left: 0;
		// height: 100%;
		position: relative;
		width: 100%;
		margin: 5px 0;
		height: 200px;
		.scroller();
		overflow-y: hidden;
		white-space: nowrap;
		// background: @background;
		// z-index: 100;

		display: none;
		&[show] {
			display: block;
		}

		& > .inner {
			width: auto;
			overflow: auto;
			height: 100%;
		}

		img {
			box-sizing: border-box;
			height: 90%;
			margin: 0 5px;
			border: 5px solid #FFF;

			&[selected] {
				border: 5px solid #FF4081;
			}
		}
	}

	button-bar {
		text-align: center;
	}
}


.error {
	display: none;
	margin: 5px;
	padding: 10px;
	background: #f2efe5;
	border: 1px solid #ddd5c0;
	border-radius: 3px;
	color: #888;
	font-size: 120%;
	text-align: center;

	&.showing {
		display: block;
	}
}


#login {
	form {
		text-align: center;
		padding: 0;
	}
}



.settings {
	h6 {
		color: #673AB7;
		font-size: 12px;
	}

	p {
		margin: 0;
	}

	.mdl-textfield {
		display: block;
	}

	.avatar {
		display: inline-block;
		vertical-align: middle;
		width: 100px;
		height: 100px;
		margin: -10px 10px -10px 0;
		background-color: #DDD;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 50%;
		cursor: pointer;
	}

	.byline {
		margin: -1em 0 0;
		padding-top: 0;
		padding-bottom: 0;
		color: #999;
		font-size: 80%;
		font-style: italic;
	}
}



.notifications {
	.accept {
		color: #FF4081;
	}
}
