@import '../../../css/includes/_variables.scss';
@import '../../../css/includes/_variables_dimensions.scss';

@import '../../../css/config/index.scss';

.item{
	vertical-align:top;
	display:block;
	width:100%;
	max-width: var( --max-item-width, var(--default-max-item-width) );
	margin-bottom: var( --item-margin-bottom-width, var(--default-item-margin-bottom-width) );
}

.item-thumb,
a.item-thumb{
	position:relative;
	display:block;
	height:auto;
	padding-bottom: 56.11%;
	overflow:hidden;
	text-decoration:none;
	background-position: center;
	background-size: cover;
	background-color: var(--item-thumb-bg-color);
}

.item-thumb.no-thumb{

	&:before{
		position:absolute;
		top:50%;
		left:50%;
		margin:0;
		margin-top:-1rem;
		margin-left:-1rem;
		font-size:2rem;

		line-height:1;
		padding:0;
		font-family: "Material Icons";
		text-decoration:none;
		color:#888;
	}

	// @link: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

	.item.video-item &{
		&:before{
			content: "\E02C";
			content: "\E54D";
			content: "\E04B";
		}
	}

	.item.image-item &{
		&:before{
			content: "\E3F4";
			content: "\E412";
		}
	}

	.item.audio-item &{
		&:before{
			content: "\E3A1";
		}
	}

	.item.pdf-item &,
	.item.attachment-item &{
		&:before{
			content: "\e415";
			content: "\e24d";
		}
	}

	.item.playlist-item &{
		&:before{
			content: '\e43c';
		}
	}

	.item.category-item &{
		&:before{
			content: "\e892";
			content: "list_alt";
		}
	}

	.item.countries-item &{
		&:before{
			content: "public";
		}
	}

	.item.languages-item &{
		&:before{
			content: "languages";
		}
	}

	.item.topics-item &{
		&:before{
			content: "topics";
		}
	}

	.item.tag-item &{
		&:before{
			content: "\e54e";
		}
	}

	.item.other-item &{
		&:before{
			content: "\e2bc";
			content: "\e24d";
		}
	}

	.item.member-item &{
		&:before{
			content: "person";
		}
	}

}

.item-img{

	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;

	display:block;

	img{
		width:100%;
		max-height:100%;
		pointer-events: none;
		visibility:hidden;
	}
}

.item-img-preview{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	display:block;
	pointer-events: none;
	visibility:hidden;
	opacity: 0;
	transition: all 750ms;
}

.item-duration,
.item-type-icon{

	position:absolute;
	bottom:0;
	right:0;
	pointer-events: none;

	> * {
		display:inline-block;
		margin:4px;
		padding:2px 4px;
		color:hsl(0, 0%, 100%);
		background-color: hsl(0, 0%, 6.7%);
		border-radius: 2px;
		opacity: 0.8;
	}

}

.item-duration{
	font-size:12px;
	font-weight:500;
	line-height:13.5px;
	letter-spacing:0.5px;
}

.item-type-icon{

	> * {

		float:left;

		&:before{
			font-family: 'Material Icons';
			font-weight: normal;
			font-style: normal;
			line-height: 1;
			letter-spacing: normal;
			text-transform: none;
			display: inline-block;
			white-space: nowrap;
			word-wrap: normal;
			direction: ltr;
			-webkit-font-feature-settings: 'liga';
			-webkit-font-smoothing: antialiased;

			float:left;
			padding:0;
			margin:0;
			text-align: center;
		}

		.item.video-item &{
			&:before{
				content: "\E02C";
				content: "\E54D";
				content: "\E04B";
			}
		}

		.item.audio-item &{
			&:before{
				content: "\E3A1";
			}
		}

		.item.image-item &{
			&:before{
				content: "\E3F4";
				content: "\E412";
			}
		}

		.item.pdf-item &,
		.item.attachment-item &{
			&:before{
				content: "\e24d";
			}
		}

		.item.category-item &{
			&:before{
				content: "\e892";
				content: "list_alt";
			}
		}

		.item.countries-item &{
			&:before{
				content: "languages";
			}
		}

		.item.tag-item &{
			&:before{
				content: "\e54e";
			}
		}

		.item.other-item &{
			&:before{
				content: "\e001";
			}
		}
	}
}

.item-categories{

	display:block;

	span{

		margin-right: 4px;

		&:after{
			content: ",";
		}

		&:last-child{
			margin:0;

			&:after{
				content: "";
			}
		}
	}
}

.item-meta {

	clear:left;
	float:left;

	font-family: Arial, sans-serif;
	line-height:18px;
	font-size:13px;
	width:100%;
	color: var(--item-meta-text-color);

	> * {
		vertical-align:top;
	}

	a,
	a{

		color: var(--item-meta-link-text-color);

		&:hover,
		&:focus{

			color: var(--item-meta-link-hover-text-color);
		}
	}
}

.item-author{
	display:block;

	a{
		width:auto;
		display:inline-block;
	}
}

.item-views{

}

.item-views + .item-date{
	&:before{
		content: '•';
		content: '\2022';
		margin:0 4px;
	}
}

.item-description{

	$descr-font-size: 13px;
	$descr-max-lines:2;
	$descr-line-height:18px;

	color:rgb(136,136,136);

	font-size: $descr-font-size;
	line-height:1em;
	width:100%;
	float:left;
	margin:10px 0 8px;
	// overflow: hidden;

	/* Only for non-webkit */
	display: -webkit-box;
	-webkit-line-clamp: $descr-max-lines;
	-webkit-box-orient: vertical;

	/* Fallback for non-webkit */
	max-height: $descr-max-lines * $descr-line-height;

	div{
		@include multiline_texts_excerpt($font-size: $descr-font-size, $line-height: $descr-line-height, $lines-to-show: $descr-max-lines, $bg-color: transparent);
	}
}

.item.on-hover-preview{

	&:hover{
		.item-img-preview{
			visibility:visible;
			opacity: 1;
		}
	}
}

.item-content {

	position:relative;
	// display:inline-block;
	// width:100%;
	display:block;
	overflow:hidden;

	h3{

		display:inline-block;
		// overflow: hidden;

		clear:right;
		width:auto;
		position:relative;

		/* Fallback for non-webkit */
		max-height: calc( var(--item-title-max-lines) * var(--item-title-line-height) );

		/* Only for non-webkit */
		/*display: -webkit-box;
		-webkit-line-clamp: var(--item-title-max-lines);
		-webkit-box-orient: vertical;*/

		a{
			width:auto;
			max-width:100%;
			color:inherit;
		}

		span{

			line-height: var( --item-title-line-height );
			overflow: hidden;
			text-overflow: ellipsis;

			/* Fallback for non-webkit */
			display: block;
			max-height: calc( var( --item-title-max-lines ) * var( --item-title-line-height ) );

			/* Only for non-webkit */
			display: -webkit-box;
			-webkit-line-clamp: var( --item-title-max-lines );
			-webkit-box-orient: vertical;
			white-space: normal;
		}
	}
}

.item-content-link{

	h3{
		text-decoration:none;
		color: var(--item-title-text-color);
	}
}

.item-main{
	display:inline-block;
	width:100%;
	line-height:var( --item-title-line-height );

	h3{
		font-weight:500;
		font-size: var( --item-title-font-size );
		line-height:var( --item-title-line-height );
		margin-top: 12px;
		margin-bottom: 8px;
	}

	a{
		text-decoration:none;
	}
}

a.item-edit-link{
	display:block;
	line-height: 1;
	padding:8px 0;
	font-size: 0.928571429em;
	text-align: center;
	text-decoration:none;
	border-radius: 1px 1px 0 0;
	color:#fff;
	background-color: var( --brand-color, var(--default-brand-color) );
}

.playlist-item{

	.playlist-count{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		width:92px;
		display:block;
		line-height:1.25;
		color:rgba(#fff, 0.8);
		background-color:rgba(17,17,17,0.8);

		span{
			display:inline-block;
			width:100%;
		}

		.material-icons{
			font-size:29px;
			margin:1px 0 0 4px;
			padding:0;
			line-height:1;
		}
	}

	.playlist-hover-play-all{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		font-size:13px;
		font-weight: 500;
		color:rgba(#fff,0.8);
		background-color:rgba(17,17,17,0.8);

		letter-spacing: 0.007px;
		line-height:1;
		opacity: 0;

		transition: opacity 0.3s ease;

		span{
			display:inline-block;
			margin-right:2px;
		}

		.material-icons{
			margin-bottom:4px;
		}
	}

	.playlist-count,
	.playlist-hover-play-all{

		> *{
			display:table;
			width:100%;
			height:100%;
			text-align: center;

			> *{
				display:table-cell;
				vertical-align:middle;
			}
		}
	}

	&:hover{

		.playlist-hover-play-all{
			opacity: 1;
		}
	}

	.item-main{

		/* .playlist-date{
			font-size: 13px;
			line-height:18px;
			color:rgb(96,96,96);
		} */

		.item-meta{

		}

		a.view-full-playlist{
			position:relative;
			float:left;
			clear:both;
			display:inline-block;
			margin-top:4px;
			font-size:12.5px;
			font-weight:500;
		}

		a.view-full-playlist{

			color: var(--playlist-item-main-view-full-link-text-color);

			&:hover{
				color: var(--playlist-item-main-view-full-link-hover-text-color);
			}
		}
	}
}

.hover-overlay-title {

	 .item{

		.item-main,
		.item-content-link{
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}

		.item-main{
			display:block;
		}

		.item-content-link{
			display:table;
			width: 100%;
			height:100%;

			h3{
				z-index:+1;
				color:#fff;
				font-weight:400;
			}

			&:after,
			&:before{
				position:absolute;
				top:-1px;
				left:-1px;
				right:-1px;
				bottom:-1px;
				content:"";
				display:block;

				transition-property: opacity;
				transition-duration:0.2s;
			}

			transition-property: color, background-color;
			transition-duration:0.2s;


			&:before{
				opacity:1;
				background: radial-gradient( circle, rgba(#000,0.75) 0%, rgba(#4a4a4a, 0.75) 100% );
			}

			&:after{
				opacity:0;
				background: radial-gradient( circle, rgba(#fff,0.75) 0%, rgba(#c6c6c6,0.75) 100% );
			}

			&:hover{

				h3{
					color:#000;
				}

				&:before{
					opacity:0;
				}

				&:after{
					opacity:1;
				}
			}
		}

		h3 {

			display:table-cell;
			vertical-align: middle;
			text-align: center;
			max-height: 100% !important;
			margin:0 !important;
			padding:8px;

			font-size: 1.5em;

			span{
				max-height: 100% !important;
				line-height: 1.15;
				background:none;
			}
		}

		.item-meta,
		.item-description{
			display:none;
		}
	}
}
