/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block {
	max-width: 900px;
}

.inspector-flo-post-cards-layout {
	.components-base-control__field {
	}
	.components-radio-control__option {
		margin-top: 10px;

		input {
			display: none;

			&:checked {
				& + label {
					&:before {
						background: #e9f0f2;
						border: solid 1px #ec6042;
					}
				}
			}
		}
		label {
			display: block;
			text-align: center;
			line-height: 20px;

			&:before {
				background: #f8f8f8;
				border: 1px solid transparent;
				content: '';
				display: block;
				border-radius: 7px;
			}
			&:after {
				border: 1px solid transparent;
				background-position: 50% 50%;
				background-size: contain;
				border-radius: 7px;
				content: '';
				display: block;
				position: absolute;
				left: 7px;
				top: 7px;
				right: 7px;
				bottom: 27px;
				z-index: 1;
			}
		}

		&:first-child {
			label {
				position: relative;

				&:before {
					padding-bottom: 72.81%;
				}
				&:after {
					background-image: url(images/flo-block-post-cards--image-on-the-side.jpg);
				}
			}
		}
		&:nth-child(2) {
			label {
				position: relative;

				&:before {
					padding-bottom: 72.81%;
				}
				&:after {
					background-image: url(images/flo-block-post-cards--alternating.jpg);
				}
			}
		}
	}
}

.flo-block-post-cards {
	$b: '.flo-block-post-cards';
	a {
		pointer-events: none;
		cursor: default;
	}
	@media (min-width: 768px) {
		&--alternating,
		&--alternating {
			#{$b}__item:nth-child(even) {
				flex-direction: row-reverse;
			}
		}
	}
}
