.component.thumbnail {
	position: relative;
	font-size: 0;
	margin-bottom: $std-mg-sm;


	.thumbnail-img, .poster-placeholder {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: $border-rad-lg;
	}

	.thumbnail-img {
		position: absolute;
		top: 0;
		opacity: 0;
		transition-duration: $trans-du;
		transition-property: opacity;
	}
	
	&.load-ready {
		.thumbnail-img {
			opacity: 1;
		}
	}

	.thumb-label {
		position: absolute;
		bottom: 3px;
		padding: 2px $std-pd-xsm;
		color: $color-text;
		background-color: $color-bg;
		border-radius: $border-rad-sm;
		font-size: 12px;
	}

	.series {
		right: 3px;
	}

	.status {
		left: 3px;
	}

	.watched {
		top: 3px;
		bottom: auto;
		right: 3px;
		background-color: $color-success;
	}

	.hover-effect {
		border-radius: 100%;
		width: 40px;
		height: 40px;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		opacity: 0;
		transition-duration: $trans-du*1.25;
		transition-property: opacity;

		.mdi {
			position: relative;
			top: 1px;
			left: -10px;
			transition-duration: $trans-du*1.25;
			transition-property: left;
		}
	}
}