.wp-block-themeisle-blocks-plugin-cards {
	padding: 0;

	&.align-left {
		float: left;
	}

	&.align-center {
		text-align: center;
	}

	&.align-right {
		float: right;
	}

	.components-placeholder {
		padding: 60px 1em;

		.components-placeholder__fieldset {
			max-width: 100%;
			padding: 0 50px;

			.components-base-control__field {
				margin-bottom: 0;
			}

			.search-plugin-field {
				width: 100%;
				background: #ffffff;
				position: relative;
		
				svg.dashicon {
					position: absolute;
					left: 0;
					margin: 12px;
				}
		
				.components-spinner {
					position: absolute;
					margin: 12px;
					right: 0;
				}
		
				input[type="text"] {
					position: relative;
					width: 100%;
					margin: 0;
					padding: 1em 3.5em 1em 3.5em;
					border-radius: 0;
					border-color: #e6eaee;
					background: 0 0;
					box-shadow: none;
					z-index: 2;
		
					&:focus {
						color: #191e23;
						border-color: #00a0d2;
						box-shadow: 0 0 0 1px #00a0d2;
						outline: 2px solid transparent;
						outline-offset: -2px;
					}
				}
		
				.plugin-card-search-results {
					width: 100%;
					list-style: none;
					background: #fff;
					margin: -1px 0 0;
					border: 1px solid #e6eaee;
					box-shadow: 0 1px 3px #e6eaee;
		
					div {
						max-height: 175px;
						overflow-y: auto;

						.plugin-card-list-item {
							position: relative;
							border-width: 0 0 1px 0;
							border-style: solid;
							border-color: #e6eaee;
							transition: opacity .7s;
							cursor: pointer;
							color: #00a0d2;
							display: flex;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							-webkit-box-orient: horizontal;
							-webkit-box-direction: normal;
							-ms-flex-direction: row;
							flex-direction: row;
							padding: .75em 1.25em;

							&:hover {
								background-color: #f7fcff;
							}

							img {
								-o-object-fit: cover;
								object-fit: cover;
								-o-object-position: center;
								object-position: center;
								width: 2.5em;
								height: 2.5em;
								margin: 0 1em 0 0;
							}

							span {
								text-align: left;
							}
						}
					}
				}
		
			}
		}
	}

	.themeisle-plugin-card {
		border: 1px #EAEAEA solid;
		display: inline-block;
		width: 350px;
		font-family: "PT Serif Caption";

		a {
			color: #000;
			text-decoration: none;
		}

		.card-header {
			text-align: center;
			padding: 25px;

			.card-logo {
				padding: 10px;
				img {
					width: 128px;
					height: 128px;
				}
			}

			.card-info {
				padding: 10px;

				h4 {
					font-size: 24px;
					margin: 0;
				}

				h5 {
					font-size: 16px;
					margin: 0;
				}
			}

			.card-ratings {
				font-family: "Font Awesome 5 Free";

				.star-full:before {
					content: "\f005";
					font-weight: 900;
				}

				.star-half:before {
				    content: "\f5c0";
					font-weight: 900;
				}

				.star-empty:before {
				    content: "\f005";
				}
			}
		}

		.card-details {
			background: #FCFCFC;
			border-top: 1px #EAEAEA solid;
			padding: 20px;
			font-size: 12px;
			text-align: center;

			.card-description {
				color: #707070;
				font-size: 12px;
				text-align: center;
			}

			.card-stats {
				padding: 25px 0 0 0;
				text-align: justify;

				h5 {
					color: #707070;
					border-bottom: 1px #d8d8d8 solid;
					font-size: 14px;
					margin: 0;
				}

				.card-stats-list {
					display: flex;

					.card-stat {
						flex: auto;
						padding-top: 10px;
						text-align: center;

						.card-text-large {
							color: #4550ae;
							font-size: 24px;
							display: block;
						}
					}
				}
			}
		}

		.card-download {
			background: #4551af;
			text-align: center;

			a {
				color: #fff;
				text-decoration: none;
				display: block;
				padding: 20px;
			}
		}
	}
}

[data-type="themeisle-blocks/plugin-cards"] {
	.edit-plugin-card{
		&:hover {
			svg {
				padding: 5px;
				box-shadow: inset 0 0 0 1px #555d66,inset 0 0 0 2px #fff;
			}
		}
	}
}

@media ( max-width:415px ) {
	.wp-block-themeisle-blocks-plugin-cards {
		.themeisle-plugin-card {
			width: auto;

			.card-details {
				.card-stats {
					.card-stats-list {
						display: block;
					}
				}
			}
		}
	}
}