//==============================================================================
// GB Tools Plugin - Page Plugins
//==============================================================================


.gbt-wrapper
{
	&.gbt-plugins
	{
		text-align: left;
		max-width: 100%; 
		margin: 60px 0; 
		font-size: 0;
		
		@media (max-width: 860px)
		{
			margin: 34px auto 22px;
		}

		&.theme-inactive
		{
			p
			{
				text-align: center;
				max-width: 325px; 
				color: $grey;
				font-weight: 500;
				line-height: 18px; 
				margin: 15px auto 0; 
			}
		}

		.gbt-plugin 
		{
			background-color: #FFFFFF;
			display: inline-block;
			margin-bottom: 22px; 
			width: 100%; 
			vertical-align: top;
			
			
			@media (min-width: 768px)
			{
				width: 240px;  
				height: 299px; 
				margin-bottom: 30px !important;
				margin-right: 30px;
			}
			
			@media (min-width: 1360px)
			{
				margin-left: 15px;
				margin-right: 15px;

				&:first-child
				{
					margin-left: 0;
				}

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

			&.placeholder
			{
				border: 1px dashed #CCCCCC;
				background: none; 
				box-sizing: border-box;
				width: 100%;
				height: 299px; 
				
				@media (min-width: 768px) 
				{
					width: 240px; 
				}
				
				&.last
				{
					margin-right: 0;
				}
			}

			.plugin-image
			{
				line-height: 0;
				text-align: center;
				position: relative;
				height: 160px; 
				
				.plugin-featured-icon
				{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
					height: 160px; 
				}

				.update-tag
				{
					position: absolute;
					top: 0;
					background-color: #d54e21;
					width: 100%; 
					font-weight: 500;
					line-height: 16px;  
					color: #FFF; 
					padding: 12px 0; 
					margin: 0; 
					
					
					&:before
					{
						content: "\f463";
						display: inline-block;
					    font: 400 20px/1 dashicons;
					    margin-right: 5px;
					    speak: none;
					    vertical-align: middle;
					    position: relative;
					    top: -1px; 
					}
				}
			}
			
			.plugin-body
			{
				border: 1px solid #DDDDDD;
				border-top: none; 
				padding-right: 17px;
				padding-left: 31px; 
				position: relative;
				height: 112px; 
				padding-top: 26px; 
				
				.required-tag
				{
					background-color: #81B536;
					border-radius: 3px;
					color: #FFF;  
					font-size: 9px;
					font-weight: bold;
					line-height: initial; 
					margin: 0;
					position: absolute;
					padding: 3px 8px 4px 8px;
					text-transform: uppercase;
					top: -10px; 
				}
				
				h3
				{
					margin-top: 0;
					line-height: 11px; 
										
					.plugin-name
					{
						color: $black;
						font-size: 16px;
						font-weight: 500;
					}
				}

				.action-links
				{
					position: absolute;
					bottom: 28px;
					left: 31px;
					
					.button
					{
						&.install
						{
							background-color: #616D7E;
						}						
						
						&.button-disabled
						{
							pointer-events: none; 
						}

						&.update-now
						{
							&:before
							{
								color: #f56e28;
							    content: "\f463";
							    display: inline-block;
							    font: 400 20px/1 dashicons;
							    margin: 3px 0 0 -2px;
							    speak: none;
							    vertical-align: top;
							}
							
						}

						&.update-now.updating-message
						{
							&:before
							{
								color: #f56e28;
							    content: "\f463";
							    display: inline-block;
							    font: 400 20px/1 dashicons;
							    margin: 3px 5px 0 -2px;
							    speak: none;
							    vertical-align: top;
							}
						}

						&.failed-message
						{
							color: #DD322A;
							
							&:before
							{
								color: #DD322A;
							    content: "\f348";
							    display: inline-block;
							    font: 400 16px/17px dashicons;
							    margin: -2px 7px 0 -2px;
							    vertical-align: middle;
							}
						}

						&.failed-message.updating-message
						{
							color: #555;
							 
						    &:before
						    {
						    	color: #f56e28;
								content: "\f463";
						    }
						}

					}
					
				}
				
			}

		}
		
	}
}