/**
 * Editor styles for the admin
 */

div[data-type="c9-blocks/post-grid"] {
	z-index: 12;

	&.c9-is-vertically-aligned-top {
		align-self: flex-start;
	}

	&.c9-is-vertically-aligned-center {
		align-self: center;
	}

	&.c9-is-vertically-aligned-bottom {
		align-self: flex-end;
	}

	.wp-block {
		margin-top: 0;
		margin-bottom: 0;
	}

	.block-editor-block-list__layout .block-editor-default-block-appender>.block-editor-default-block-appender__content {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.c9-block-post-grid {
	.c9-block-post-grid-title a {
		text-decoration: none;
	}
}

.c9-blocks-hide-query .components-base-control:nth-of-type(3) {
	display: none;
}

.c9-block-post-grid-markup-settings {
	.components-base-control__help {
		margin-top: 8px;
	}
}

.wp-block .c9-block-post-grid a {
	color: inherit;
}

.c9-block-post-grid-image {
	position: relative;

	&:hover {
		.c9-post-grid-no-image-placeholder {
			opacity: 1;
			z-index: 1;
		}
	}
}

.c9-post-grid-no-image-placeholder {
	padding: 40px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: #f3f3f4;
	transition: .2s ease;

	svg {
		margin-bottom: 10px;
	}
}

.c9-post-grid-no-image-icon {
	position: absolute;
	top: 10px;
	background: #ffe606;
	right: 10px;
	padding: 6px;
	line-height: 1;
	height: 32px;
	transition: .2s ease;
	border-radius: 5px;
	z-index: 1;
}

.block-editor__container .components-placeholder__fieldset .c9-post-grid-image-help {
	display: inline-block;
	font-weight: bold;

	a {
		color: #0073aa;
		text-decoration: underline;

		&:hover {
			color: #00a0d2;
		}
	}
}

.c9-block-post-grid .is-list article:not(.has-post-thumbnail) {
	grid-template-columns: 1fr;

}

.c9-block-post-grid .is-list article {
	grid-template-columns: 30% 1fr !important;
}

/* for WordPress 5.5 mobile and tablet previews in backend */
.editor-styles-wrapper[style*="width: 360px;"] .c9-block-post-grid .is-grid.columns-2 {
	grid-template-columns: 1fr;
	grid-template-areas: "col1""col2";
}

.editor-styles-wrapper[style*="width: 360px;"] .c9-block-post-grid .is-grid.columns-3 {
	grid-template-columns: 1fr;
	grid-template-areas: "col1""col2""col3";
}

.editor-styles-wrapper[style*="width: 360px;"] .c9-block-post-grid .is-grid.columns-4 {
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "col1 col2""col3 col4";
}

.editor-styles-wrapper[style*="width: 360px;"] .c9-block-post-grid .is-grid.columns-5 {
	grid-template-columns: 1fr;
	grid-template-areas: "col1""col2""col3""col4""col5";
}

.editor-styles-wrapper[style*="width: 360px;"] .c9-block-post-grid .is-grid.columns-6 {
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "col1 col2""col3 col4""col5 col6";
}