@import "_utility";

.post-type-video_central_playlist #titlediv {
	margin-bottom: 10px;
}

.video-central-playlist-videolist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.video-central-playlist-video {
	background: #fff;
	margin: 10px 0 0 0;
	padding: 0;

	&.ui-sortable-helper {
		background: #f9f9f9;
		border-top: 1px solid #dfdfdf;
		border-bottom: 1px solid #dfdfdf;
	}
}

.video-central-playlist-video-title {
	background: #fafafa;
	border: 1px solid #dfdfdf;
	cursor: move;
	margin: 0;
	padding: 10px 20px;
	position: relative;

	.video-central-playlist-video-toggle {
		@extend .video-central-playlist-dashicon;

		font-size: 20px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: right;
		vertical-align: middle;
		width: 40px;

		&:before {
			box-sizing: border-box;
			color: #aaa;
			content: "\f140"; // Down arrow.
			position: absolute;
			top: 10px;
			right: 10px;
			bottom: 10px;
			left: 0;
			vertical-align: middle;
		}

		&:hover {
			&:before {
				color: #777;
			}
		}

		.is-open &:before {
			content: "\f142"; // Up arrow.
		}
	}

	&:hover {
		border-color: #999;
	}
}

.video-central-playlist-video-inside {
	border-color: #e5e5e5;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	display: none;
	margin: 0;
	padding: 10px;

	input.regular-text {
		max-width: 100%;
	}

	.is-open & {
		display: block;
	}
}

.video-central-playlist-video-audio-group {
	@include clearfix();

	border-bottom: 1px solid #e5e5e5;
	margin: 0 -10px 20px;
	min-height: 27px;
	padding: 0 10px 10px 150px;
	position: relative;

	.video-central-playlist-video-audio-selector {
		float: left;
		margin: 0;
		padding-right: 7px;
		padding-left: 5px;
		position: absolute;
		top: 0;
		left: 10px;
		width: 120px;

		&:before {
			@extend .video-central-playlist-dashicon;

			color: #888;
			content: "\f127";
			font-size: 16px;
			height: 18px;
			margin: 0 5px 0 2px;
			vertical-align: text-top;
			width: 18px;
		}
	}
}

.video-central-playlist-video-audio {
	.mejs-container {
		background: #fff;
		height: 30px;
		max-width: 100%;
		width: 100%;
	}

	.mejs-controls {
		background: none;
		background: #fff;
		height: 30px;
		margin: 0;
		padding: 0;

		.mejs-playpause-button {
			height: 30px;
			width: 30px;

			button {
				@extend .video-central-playlist-dashicon;

				background: none;
				color: #555;
				font-size: 20px;
				height: 30px;
				margin: 0;
				width: 30px;

				&:focus {
					outline: 0;
				}
			}
		}

		.mejs-pause button:before {
			content: "\f523"; // Pause icon.
		}

		.mejs-play button:before {
			content: "\f522"; // Play icon.
		}

		.mejs-time {
			height: 30px;
			line-height: 29px;
			padding: 1px 3px 0;
		}

		.mejs-time,
		.mejs-time span {
			color: #555;
			font-weight: normal;
		}

		.mejs-time-rail {
			background-clip: padding-box;
			border-radius: 2px;
			height: 30px;
			margin: 0 5px;
			padding-top: 10px 0 0 0;

			.mejs-time-buffering,
			.mejs-time-current,
			.mejs-time-loaded,
			.mejs-time-slider {
				margin: 0;
			}

			.mejs-time-handle {
				display: none;
			}

			.mejs-time-loaded {
				background: #999;
			}

			.mejs-time-total {
				background: #e0e0e0;
			}
		}
	}
}

.video-central-playlist-video-column-group {
	@include clearfix();
	padding-left: 140px;

	.video-central-playlist-video-column {
		float: left;
		width: 48%;

		p {
			margin-top: 0;
		}
	}

	.video-central-playlist-video-column-artwork {
		margin-left: -140px;
		width: 120px;
	}

	.video-central-playlist-video-column-right {
		float: right;
	}
}

.video-central-playlist-video-artwork {
	$artwork-size: 120px;

	background-clip: padding-box;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.13);
	box-sizing: border-box;
	cursor: pointer;
	float: left;
	height: $artwork-size;
	position: relative;
	width: $artwork-size;

	&:before {
		@extend .video-central-playlist-dashicon;

		color: #e5e5e5;
		content: "\f128";
		font-size: 30px;
		height: 100%;
		line-height: $artwork-size;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	img {
		border-radius: 3px;
		display: block;
		height: $artwork-size;
		width: $artwork-size;
	}

	&:hover{
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);

		&:before {
			color: #333;
		}
	}

	.has-artwork &:before {
		display: none;
	}
}

.video-central-playlist-video-actions {
	clear: both;
	line-height: 1;
	text-align: right;

	a {
		cursor: pointer;
	}

	.video-central-playlist-video-remove:hover {
		color: #ff0000;
	}
}

/* Panel
-------------------------------------------------------------- */

.video-central-playlist-panel {
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;
}

.video-central-playlist-panel-body {
	padding: 14px;

	.form-table {
		td {
			padding-top: 0;
			padding-bottom: 15px;
		}

		th {
			padding-top: 5px;
			padding-bottom: 20px;
		}

		tr:last-child td,
		tr:last-child th {
			padding-bottom: 0;
		}
	}

	> :first-child {
		margin-top: 0;
	}

	> :last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

.video-central-playlist-panel-footer {
	background: #f7f7f7;
	border-top: 1px solid #dedede;
	padding: 14px;
}

.video-central-playlist-panel-header {
	@include clearfix();

	border-bottom: 1px solid #dedede;
	padding: 14px;
}

.video-central-playlist-panel-title,
#poststuff .video-central-playlist-panel-title {
	font-size: 14px;
	margin: 0;
	padding: 0;
}

#post-body-content > .video-central-playlist-panel:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 480px) {
	.video-central-playlist-video-title {
		padding-top: 15px;
		padding-bottom: 15px;

		.video-central-playlist-video-toggle {
			font-size: 24px;
		}
	}

	.video-central-playlist-video-audio {
		.mejs-container {
			.mejs-controls {
				.mejs-currenttime,
				.mejs-duration {
					display: none;
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	.video-central-playlist-video-audio {
		.mejs-container {
			margin-top: 5px;

			.mejs-controls {
				// Give the play button some breathing room
				// and make it a little bigger.
				.mejs-playpause-button {
					width: 40px;

					button {
						font-size: 24px;
						width: 40px;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 974px) {
	.video-central-playlist-video-column-group {
		.video-central-playlist-video-column-left,
		.video-central-playlist-video-column-right {
			float: none;
			width: auto;
		}
	}
}



/** Video Central Browser **/
.video-central-videos-browser-list {
    margin: 0;
    overflow: auto;
    padding: 8px;
    position: absolute;
    top: 0;
    right: 300px;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.video-central-videos-browser-list-item {
    flex: 1 1 10%;
	padding: 8px;
	position: relative;
    width: 10%;

	&.selected {
		box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;
	}
}

.video-central-videos-media-thumbnail {
	background: #eee;
	cursor: pointer;
	-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
	box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
	position: relative;
	text-align: center;

	&:before {
		content: "";
		display: block;
		padding-top: 100%;
	}

	svg {
		fill: #82878c;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -70%);
		width: 50%;
	}
}

.video-central-videos-media-thumbnail-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.video-central-videos-media-thumbnail-image img {
	max-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-central-videos-media-thumbnail-title {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
	font-weight: bold;
	overflow: hidden;
	padding: 5px 10px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	word-wrap: break-word;
}

.video-central-videos-browser-empty {
	align-content: center;
	align-items: center;
	background: #fff;
	display: none;
	flex-flow: column nowrap;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 80; // Above the sidebar.

	h2 {
		font-size: 20px;
		font-weight: 400;
		line-height: 28px;
		margin: 0;
	}

	&.is-visible {
		display: flex;
	}
}

.video-central-videos-media-toggle-button {
	background-color: #0073aa;
	border-radius: 0;
	border-width: 0;
	-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
	color: #fff;
	cursor: pointer;
	display: none;
	font-size: 24px;
	height: 24px;
	margin: 0;
	outline: none;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	text-indent: -2px;
	width: 24px;
	z-index: 10;

	&:hover {
		text-indent: 0;

		 &:before {
			content: "\f460";
		}
	}

	.selected & {
		display: block;
	}
}

@media screen and (max-width: 1100px) {
	.video-central-videos-browser-list-item {
		width: 33.33%;
	}
}

@media screen and (max-width: 768px) {
	.video-central-videos-browser-list {
		right: 200px;
	}

	.video-central-videos-browser-sidebar {
		width: 200px;
	}

	.video-central-videos-browser-list-item {
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	.video-central-videos-browser-list-item {
		width: 100%;
	}
}