@import "_mixins";

$mass_edit_height: 44px;

.page.movies {
	bottom: auto;
	z-index: 21;
	height: $header_height;

	.scroll_content {
		display: none;
	}

	@include media-phablet {
		height: $header_width_mobile;
	}
}

.page.movies_wanted,
.page.movies_manage {
	top: $header_height;
	padding: 0;
	will-change: top;
	transition: top 300ms $cubic;

	@include media-phablet {
		top: $header_width_mobile;
	}

	.mass_editing & {
		top: $header_height + $mass_edit_height;
	}

	.load_more {
		text-align: center;
		padding: $padding;
		font-size: 2em;
		display: block;
	}

	.empty_manage {
		padding: $padding;

		.after_manage {
			margin-top: $padding;
		}
	}
}

.movie {

	.ripple {
		display: none;
	}

	input[type=checkbox] {
		display: none;
	}

	.with_navigation & {
		input[type=checkbox] {
			display: inline-block;
			position: absolute;
			will-change: opacity;
			transition: opacity 200ms;
			opacity: 0;
			z-index: 2;
			cursor: pointer;

			@include media-phablet {
				display: none;
			}

			&:hover {
				opacity: 1 !important;
			}
		}

		&:hover input[type=checkbox] {
			opacity: .5;
		}

		&.checked input[type=checkbox] {
			opacity: 1;
		}
	}

	.quality {
		font-weight: 400;

		span {
			display: inline-block;
			background: get-theme(off);
			border: 1px solid transparent;
			color: rgba(get-theme(text), .5);
			border-radius: 1px;
			padding: 1px 3px;

			@include theme-dark {
				color: rgba(get-theme-dark(text), .5);
				background: get-theme-dark(off);
			}

			&.failed { background: #993619; color: #FFF; }
			&.available { color: #009902; border-color: #009902; background: get-theme(background);}
			&.snatched { background: #548399; color: #FFF }
			&.downloaded, &.done { background: #009902; color: #FFF }

			@include theme-dark {
				background: none;
				&.available { border-color: transparent; background: none;}
				&.snatched { background: #548399; }
				&.downloaded, &.done { background: #009902; color: #FFF; }
			}
		}
	}

	.rating {
		.votes {
			opacity: .7;
			margin-left: 4px;
		}
	}

	&.status_suggested {
		.quality {
			display: none;
		}
	}

}

.movies {
	position: relative;

	.no_movies {
		display: block;
		padding: $padding;

		@include media-tablet {
			padding: $padding/2;
		}

		a {
			@include theme(color, primary);
		}
	}

	.message {
		padding: $padding 0;
		text-align: center;

		a {
			@include theme(color, primary);
		}
	}

	&.movies > h2 {
		padding: 0 $padding;
		line-height: $header_height;

		@include media-phablet {
			line-height: $header_width_mobile;
			padding: 0 $padding/2;
		}
	}

	> .description {
		position: absolute;
		top: 0;
		right: $padding;
		width: auto;
		line-height: $header_height;
		opacity: .7;

		@include media-tablet {
			display: none;
		}

		a {
			@include theme(color, primary);
			display: inline;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	> .loading {
		@include theme(background, background);

		.message {
			@include theme(color, text);
		}

		.spinner {
			@include theme(background-color, background);
		}
	}

	.movie .actions {
		will-change: transform, opacity;
		transform: rotateZ(360deg);

		@include media-phablet {
			pointer-events: none;
		}
	}

	.progress {

		div {
			width: 50%;
			padding: $padding/4 $padding/2;
			display: flex;

			@include media-tablet {
				width: 100%;
			}

			.folder {
				flex: 1 auto;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: $padding/2;
			}

			.percentage {
				font-weight: bold;
			}
		}
	}
}

.list_list {
	font-weight: 300;

	.movie {
		display: block;
		border-bottom: 1px solid transparent;
		@include theme(border-color, off);

		position: relative;
		cursor: pointer;

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background: get-theme(off);

			@include theme-dark {
				background: get-theme-dark(off);
			}
		}

		input[type=checkbox] {
			left: $padding;
			top: 50%;
			transform: translateY(-50%);
		}

		.poster {
			display: none;
		}

		.info {
			padding: $padding/2 $padding;

			display: flex;
			flex-flow: row nowrap;
			align-items: center;

			@include media-tablet {
				display: block;
				padding: $padding/2;
			}

			.title {
				flex: 1 auto;

				@include media-tablet {
					display: flex;
					flex-flow: row nowrap;
				}

				span {
					transition: margin 200ms $cubic;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					@include media-tablet {
						width: 100%;
					}

				}

				.year {
					display: inline-block;
					margin: 0 10px;
					opacity: .5;
				}
			}

			.eta {
				font-size: .8em;
				opacity: .5;
				margin-right: 4px;

				@include media-phablet {
					display: none;
				}
			}

			.quality {
				clear: both;
				overflow: hidden;

				span {
					float: left;
					font-size: .7em;
					margin: 2px 0 0 2px;

					@include media-tablet {
						margin: 2px 2px 0 0;
					}
				}
			}

			.rating .vote {
				display: inline-block;
				min-width: 60px;
				text-align: right;
			}
		}

		.actions {
			position: absolute;
			right: $padding/2;
			top: 0;
			bottom: 0;
			display: none;
			z-index: 10;

			.action {
				display: inline-block;
			}

			a {
				height: 100%;
				display: block;
				@include theme(background, background);
				@include theme(color, primary);
				padding: $padding / 2;
				width: auto;
				float: right;
				@include theme(text, text);

				&:before {
					display: none;
				}

				&:hover {
					@include theme(background, off);
					@include theme(color, text);
				}

				.icon {
					display: none;
				}
			}
		}

		&:hover .actions {
			display: block;

			@include media-tablet {
				display: none;
			}
		}
	}

	&.with_navigation .movie {
		&:hover, &.checked {
			.info .title span {
				margin-left: $padding;

				@include media-tablet {
					margin-left: 0;
				}
			}
		}
	}
}

.thumb_list {

	$max-split: 20;
	$split-jump: 225px;

	padding: 0 $padding/4;

	> div:last-child {
		padding: 0 ($padding/2)+2px;
		@include media-phablet {
			padding: 0 $padding/6;
		}
	}

	.movie {
		overflow: visible;
		display: inline-block;
		vertical-align: top;
		margin-bottom: $padding;
		position: relative;
		cursor: pointer;
		width: 150px;
		border: 0 solid transparent;
		border-width: 0 $padding/3;

		.inner {
			will-change: transform;
			transform: rotateZ(360deg);
		}

		@while $max-split > 0 {
			@media (min-width : $split-jump * ($max-split - 1)) and (max-width : $split-jump * $max-split) {
				width: 100% / $max-split;
			}
			$max-split: $max-split - 1;
		}

		@include media-tablet {
			width: 33.333%;
			border-width: 0 $padding/4;
		}

		@include media-phablet {
			width: 50%;
			border-width: 0 $padding/5;
		}

		input[type=checkbox] {
			top: $padding/2;
			left: $padding/2;
		}

		.poster_container {
			border-radius: $border_radius;
			position: relative;
			width: 100%;
			padding-bottom: 150%;
			overflow: hidden;
		}

		.poster {
			position: absolute;
			background: center no-repeat;
			@include theme(background-color, off);
			background-size: cover;
			overflow: hidden;
			height: 100%;
			width: 100%;
		}

		.info {
			clear: both;
			font-size: .9em;

			.title {
				display: flex;
				padding: 3px 0;
				font-weight: 400;

				span {
					flex: 1 auto;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.year {
					display: inline-block;
					margin-left: 5px;
					opacity: .5;
				}
			}

			.eta {
				opacity: .5;
				float: right;
				margin-left: 4px;
			}

			.quality {
				white-space: nowrap;
				overflow: hidden;
				font-size: .9em;

				span {
					font-size: .8em;
					margin-right: 2px;
				}
			}
		}

		.actions {
			background-image: linear-gradient(25deg, rgba(get-theme(primary),.3) 0%, rgba(get-theme(primary),1) 80%);
			@include theme-dark {
				background-image: linear-gradient(25deg, rgba(get-theme-dark(primary),.3) 0%, rgba(get-theme-dark(primary),1) 80%);
			}

			will-change: opacity, visibility;
			transition: all 400ms;
			transition-property: opacity, visibility;
			opacity: 0;
			visibility: hidden;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			text-align: right;

			.action {
				position: relative;
				margin-right: $padding/2;
				float: right;
				clear: both;

				&:first-child {
					margin-top: $padding/2;
				}

				a {
					transition: all 150ms $cubic;
					will-change: color, background;
					transition-property: color, background;
					display: block;
					width: auto;
					padding: $padding / 3;
					color: #FFF;
					border-radius: $border_radius - 1px;
					font-weight: 400;

					&:hover {
						@include theme(background, background);
						@include theme(color, primary);

						@include theme-dark {
							color: #FFF;
						}
					}
				}
			}
		}

		&:hover .actions {
			opacity: 1;
			visibility: visible;

			@include media-phablet {
				display: none;
			}
		}

		&.hover_start .actions {
			pointer-events: none;
		}

		.mask {
			bottom: 44px;
			border-radius: $border_radius;
			will-change: opacity;
			transition: opacity 30ms;
		}
	}

}

.page.movie_details {
	pointer-events: none;
	$gab-width: $header_width/3;

	@include media-phablet {
		left: 0;
	}

	.overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: $header_width;
		background: rgba(0,0,0,.6);
		border-radius: $border_radius 0 0 $border_radius;
		opacity: 0;
		will-change: opacity;
		transform: rotateZ(360deg);
		transition: opacity 300ms ease 400ms;
		z-index: 1;

		.ripple {
			background: #FFF;
		}

		@include media-phablet {
			left: 0;
			border-radius: 0;
			transition: none;
		}

		.close {
			display: inline-block;
			text-align: center;
			font-size: 60px;
			line-height: $header_height;
			color: #FFF;
			width: 100%;
			height: 100%;
			opacity: 0;
			will-change: opacity;
			transition: opacity 300ms ease 200ms;

			&:before {
				display: block;
				width: $gab-width;
			}

			@include media-phablet {
				width: $header_width_mobile;
			}
		}
	}

	.scroll_content {
		position: fixed;
		z-index: 2;
		top: 0;
		bottom: 0;
		right: 0;
		left: $header_width + $gab-width;
		@include theme(background, background);
		border-radius: $border_radius 0 0 $border_radius;
		overflow-y: auto;
		will-change: transform;
		transform: translateX(100%) rotateZ(360deg);
		transition: transform 450ms $cubic;

		@include media-phablet {
			left: $header_width_mobile;
		}

		> .head {
			display: flex;
			flex-flow: row wrap;
			padding: 0 $padding 0 $padding/2;
			position: relative;
			z-index: 2;
			will-change: transform, opacity;
			transform: rotateZ(360deg);

			@include media-phablet {
				padding: 0;
				line-height: $header_width_mobile;
			}

			h1 {
				flex: 1 auto;
				margin: 0;
				font-size: 24px;
				font-weight: 300;
				max-width: 100%;

				@include media-phablet {
					min-width: 100%;
					line-height: $header_width_mobile;

					.more_menu {
						width: 100%;
					}
				}

				.more_menu {
					a {
						@include theme(color, text);
					}

					.icon-dropdown {
						padding-right: $padding*1.5;

						@include media-phablet {
							&:before {
								right: $padding/2;
							}
						}
					}
				}
			}

			.more_menu {
				display: inline-block;
				vertical-align: top;
				max-width: 100%;
				margin-bottom: 0;

				&.title .wrapper {
					transform-origin: 0 0;
				}

				> a {
					float: left;
					line-height: $header_height;
					@include theme(color, primary);

					&:hover {
						@include theme(color, text);
					}

					@include media-phablet {
						line-height: $header_width_mobile;
					}
				}

				.icon-dropdown {
					position: relative;
					padding: 0 $padding*1.25 0 $padding/2;

					&:before {
						position: absolute;
						right: $padding/2;
						top: -2px;
						opacity: .2;
					}

					&:hover:before {
						opacity: 1;
					}
				}

				.wrapper {
					top: $header_height - 10px;
					padding-top: 4px;
					border-radius: $border_radius $border_radius 0 0;
					font-size: 14px;

					@include media-phablet {
						top: 25px;
					}

					&:before {
						top: 0;
						left: auto;
						right: 22px;
					}

					ul {
						border-radius: $border_radius $border_radius 0 0;
						max-height: 215px;
						overflow-y: auto;
					}

					a {
						padding-right: $padding * 1.5;

						&:before {
							position: absolute;
							right: $padding/2;
						}

						&:hover, &.icon-ok {
							@include theme(color, primary);
						}
					}
				}

				&.title {
					> a {
						display: inline-block;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 100%;
					}

					.wrapper {
						left: 0;
						right: auto;

						@include media-phablet {
							top: 30px;
							max-width: 240px;
						}

						&:before {
							left: 22px;
							right: auto;
						}
					}
				}

			}

			.buttons {
				display: flex;
				flex-wrap: wrap;

				@include media-phablet {
					margin: 0;
				}

				> a {
					display: inline-block;
					padding: 0 10px;
					@include theme(color, primary);
					line-height: $header_height;

					@include media-phablet {
						line-height: $header_width_mobile;
					}

					&:hover {
						@include theme(background, off);
						@include theme(color, text);
					}
				}

			}
		}

		.section {
			padding: $padding;
			border-top: 1px solid rgba(0,0,0,.1);
			will-change: transform, opacity;
			transform: rotateZ(360deg);

			@include theme-dark {
				border-color: rgba(255,255,255,.1);
			}

			@include media-phablet {
				padding: $padding/2;
			}
		}
	}

	&.show {
		pointer-events: auto;

		.overlay {
			opacity: 1;
			transition-delay: 0s;

			.close {
				opacity: 1;
				transition-delay: 300ms;
			}
		}

		.scroll_content {
			transition-delay: 50ms;
			transform: translateX(0) rotateZ(360deg);
		}
	}

	.section_description {
		.meta {
			text-align: right;
			font-style: italic;
			font-size: .90em;

			span {
				display: inline-block;
				margin: $padding/2 $padding/2 0;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.section_add {
		@include theme(background, off);

		.options > div {
			display: flex;
			align-items: center;

			select {
				display: block;
				width: 100%;
			}

			.title {
				min-width: 75px;
				width: 2000px;
				margin: 0 10px 0 0;
			}

			.profile, .category {
				width: 200px;
				min-width: 50px;
				margin: 0 10px 0 0;
			}

			.add {
				width: 200px;

				.button {
					@include theme(background, background);
					flex: 1 auto;
					display: block;
					text-align: center;
					width: 100%;
					margin: 0;

					&:hover {
						@include theme(background, primary);
					}
				}

			}

		}

		.thumbnail,
		.data {
			display: none;
		}
	}

	.files {
		span {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			padding: $padding/3 0;
		}

		.name {
			text-align: left;
			flex: 1 1 auto;
		}

		.type {
			min-width: 80px;
		}
	}

	.releases {

		.buttons {
			margin-bottom: $padding/2;

			a {
				display: inline;
				@include theme(color, primary);

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.item {
			@include media-phablet {
				display: block;
			}

			&:not(.head):hover {
				@include theme(background, off);
				@include theme(text, text);
			}

			span {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
				padding: $padding/3 0;

				&:before {
					display: none;
					font-weight: bold;
					opacity: .8;
					margin-right: 3px;
					width: 100%;
					font-size: .9em;

					@include media-phablet {
						display: inline-block;
					}
				}

				@include media-phablet {
					vertical-align: top;
					white-space: normal;
					display: inline-block;
					width: 50%;
					padding: 0;
					min-width: 0;
					max-width: none;
					text-align: left;
					margin-top: 3px;
				}
			}

			.name {
				flex: 1 auto;
				text-align: left;

				@include media-phablet {
					width: 100%;
					font-weight: bold;
				}
			}

			&.head {

				@include media-phablet {
					display: none;
				}
			}

			&.ignored  {
				span:not(.actions) {
					opacity: .3;
				}

				.name {
					text-decoration: line-through;
				}
			}

			.actions {
				padding: 0;

				@include media-phablet {
					width: 100%;
					text-align: center;
				}

				a {
					display: inline-block;
					vertical-align: top;
					padding: $padding/3;
					min-width: 26px;
					@include theme(color, text);

					&:hover {
						@include theme(color, primary);
					}

					@include media-phablet {
						text-align: center;
					}

					&:after {
						margin-left: 3px;
						font-size: .9em;
					}

					@include media-phablet {
						&.icon-info:after { content: "more info"; }
						&.icon-download:after { content: "download"; }
						&.icon-cancel:after { content: "ignore"; }
					}
				}
			}
		}

		.status { min-width: 70px; max-width: 70px; &:before { content: "Status:"; } }
		.quality { min-width: 60px; max-width: 60px; &:before { content: "Quality:"; } }
		.size { min-width: 50px; max-width: 50px; &:before { content: "Size:"; } }
		.age { min-width: 40px; max-width: 40px; &:before { content: "Age:"; } }
		.score { min-width: 45px; max-width: 45px; &:before { content: "Score:"; } }
		.provider { min-width: 110px; max-width: 110px; &:before { content: "Provider:"; } }
		.actions { min-width: 80px; max-width: 80px; }

	}

	.section_trailer.section_trailer {
		$max_height: 450px;
		$max_width: $max_height * (16/9);

		padding: 0;
		@include theme(background, menu);
		max-height: $max_height;
		overflow: hidden;

		@include media-phablet {
			max-height: $max_height;
		}

		&.no_trailer {
			display: none;
		}

		.trailer_container {
			$play-size: 110px;

			max-height: $max_height;
			position: relative;
			overflow: hidden;
			max-width: $max_width;
			margin: 0 auto;
			cursor: pointer;

			@include media-phablet {
				margin-bottom: $padding/2;
			}

			.background {
				opacity: 0;
				background: no-repeat center;
				background-size: cover;
				position: relative;
				z-index: 1;
				max-height: $max_height;
				padding-bottom: 56.25%;
				will-change: opacity;
				transition: opacity 1000ms;

				&.visible {
					opacity: .4;
				}
			}

			.icon-play {
				opacity: 0.9;
				position: absolute;
				z-index: 2;
				text-align: center;
				width: 100%;
				top: 50%;
				transform: translateY(-50%);
				will-change: opacity;
				transition: all 300ms;
				color: #FFF;
				font-size: $play-size;

				@include media-desktop {
					font-size: $play-size/2;
				}

				@include media-phablet {
					font-size: $play-size/3.5;
				}

				span {
					transition: all 300ms;
					opacity: 0.9;
					position: absolute;
					font-size: 1em;
					top: 50%;
					left: 50%;
					margin-left: $play-size/2;
					transform: translateY(-54%);
					will-change: opacity;

					@include media-desktop {
						margin-left: $play-size/4;
					}

					@include media-phablet {
						margin-left: $play-size/7;
					}

					&:first-child {
						margin-left: -($play-size/2);
						transform: translate(-100%, -54%);

						@include media-desktop {
							margin-left: -($play-size/4);
						}

						@include media-phablet {
							margin-left: -($play-size/7);
						}
					}
				}
			}

			&:hover {
				@include theme(color, primary);

				.icon-play {
					opacity: 1;

					span {
						opacity: 1;
					}
				}
			}

			iframe {
				position: absolute;
				width: 100%;
				height: 100%;
				border: 0;
				top: 0;
				left: 0;
				max-height: $max_height;
				z-index: 10;
			}
		}
	}

}


.alph_nav {
	position: relative;

	.mass_edit_form {
		display: flex;
		@include theme(background, background);
		position: fixed;
		top: $header_height;
		right: 0;
		left: $header_width;
		flex-flow: row nowrap;
		align-items: center;
		will-change: max-height;
		transition: max-height 300ms $cubic;
		max-height: 0;
		overflow: hidden;

		.mass_editing & {
			max-height: $mass_edit_height;
		}

		> * {
			display: flex;
			align-items: center;
		}

		.select {
			margin: 0 $padding/2 0 $padding;

			@include media-phablet {
				margin: 0 $padding/4 0 $padding/2;
			}

			input, .count {
				margin-right: $padding/4;
			}
		}

	}

	.menus {

		.button {
			padding: 0 $padding/2;
			line-height: $header_height;
		}

		.counter, .more_menu, .actions {
			float: left;

			.wrapper {
				transform-origin: 92% 0;
				right: -7px;
			}

			> a {
				display: inline-block;
				width: 30px;
				line-height: $header_height;
				text-align: center;
				float: left;

				&:hover {
					@include theme(background, off);
				}

				@include media-tablet {
					line-height: $header_width_mobile;
				}
			}
		}

		.counter {
			line-height: $header_height;
			padding: 0 $padding/2;

			@include media-tablet {
				display: none;
			}
		}

		.actions {
			a {
				display: inline-block;
			}

			.active {
				display: none;
			}

		}

		.filter {
			.wrapper {
				width: 320px;

				@include media-phablet {
					right: -70px;
					transform-origin: 75% 0;

					&:before {
						right: 83px !important;
					}
				}
			}

			.button {
				margin-top: -2px;
			}

			.search {
				position: relative;

				&:before {
					position: absolute;
					height: 100%;
					line-height: 38px;
					padding-left: $padding/2;
					font-size: 16px;
					opacity: .5;
				}

				input {
					width: 100%;
					padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
					@include theme(background, background);
					border: none;
					border-bottom: 1px solid transparent;
					@include theme(border-color, off);

					@include media-phablet {
						font-size: 1.2em;
					}
				}
			}

			.numbers {
				padding: $padding/2;

				li {
					float: left;
					width: 10%;
					height: 30px;
					line-height: 30px;
					text-align: center;
					opacity: .2;
					cursor: default;
					border: 0;

					&.active {
						@include theme(background, off);
					}

					&.available {
						opacity: 1;
						cursor: pointer;

						&:hover {
							@include theme(background, off);
						}
					}
				}
			}
		}

		.more_menu {

			//&.show .button {
			//	color: rgba(0, 0, 0, 1);
			//}

			.wrapper {
				top: $header_height - 10px;
				padding-top: 4px;
				border-radius: $border_radius $border_radius 0 0;
				min-width: 140px;

				@include media-phablet {
					top: $header_width_mobile;
				}

				&:before {
					top: 0;
					left: auto;
					right: 22px;
				}

				ul {
					border-radius: $border_radius $border_radius 0 0;
				}
			}
		}
	}

}
