@keyframes spin {

	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(-360deg);
	}
}

[data-tab=liquid_templates] {

	.vc_ui-template {
		width: calc( 50% - 30px );
		margin: 0 15px 30px !important;
		position: relative;
		flex-grow: 0;
		background-color: #fff;
		box-shadow: 0 19px 25px rgba(#131333, 0.04);
		text-align: center;
		transform: translateY(0);
		transition: transform 0.3s, box-shadow 0.3s;
	
		.vc_ui-list-bar-item {
			display: block;
			border: none;
			position: relative;
		}
		.liquid-template-preview {
			position: relative;
			background-size: cover;
			background-position: center;
			padding-bottom: 56.25%;
			
			img {
				visibility: hidden;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.vc_ui-list-bar-item-trigger {
			display: block;
			width: 100%;
			padding: 15px 15px 10px;
			font-size: 15px;
			line-height: 1.25em;
			font-weight: 500;
			color: #000;
			white-space: normal;
			text-align: center;
		}
		.liquid-template-categories {
			display: block;
			font-size: 12px;
			padding-bottom: 17px;
			color: rgba(#000, 0.45);
		}
		.vc_ui-list-bar-item-actions {
			display: block;
			width: 100%;
			height: 100%;
			padding: 0;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
	
			.vc_ui-control-button {
				display: flex;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				align-items: center;
				justify-content: center;

				i {
					display: inline-flex;
					width: 56px;
					height: 56px;
					align-items: center;
					justify-content: center;
					background-color: rgba(#000, 0.45);
					border-radius: 50em;	
					color: #fff;
				}
			}
		}
	
		.liquid-badge-new {
			display: inline-block;
			padding: 2px 10px;
			position: absolute;
			top: 15px;
			right: 15px;
			border-radius: 3px;
			background-color: $color-primary;
			box-shadow: 0 8px 25px rgba($color-primary, 0.3);
			text-transform: uppercase;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.1em;
			color: #fff;
		}
	
		&[class$=header] {
	
			.liquid-template-preview {
				padding-bottom: 32%;
			}
		}
	
		&.is-loading {
			
			.vc_ui-list-bar-item-actions {
				opacity: 1;
				visibility: visible;
			}
			button.vc_ui-control-button {
				
				i {
					animation: spin 2s linear infinite forwards;
				}
			}
		}
	
		&.hidden {
			display: none !important;
		}
	
		&:hover {
			box-shadow: 0 10px 20px rgba(#131333, 0.08);
			transform: translateY(1px);
		}
	}
}

.vc-composer-icon {
	display: inline-block;

	&.rotating {
		animation: spin 2s linear infinite forwards;	
	}
}