.tribe-editor__related-events {
	.editor-styles-wrapper & h2 {
		margin: 0;
	}
}

.tribe-editor__related-events__title {
	align-items: center;
	display: flex;
	justify-content: center;
	max-width: 100%;

	&--selected {
		border: none;
	}

	&--placeholder {
		cursor: text;
		background-color: transparent;
		border: 0;
		display: block;
		font-size: 1.3125rem;
		min-height: 50px;
		min-width: 200px;
		padding: 5px 0;
	}
}

.tribe-editor__related-events__title-text {
	border: 0;
	padding: 0;
	margin: 0;
	color: #fff;
	background-color: transparent;
	flex: 1;
	font-size: 1.3125rem;
	font-weight: normal;
	width: 100%;

	input {

		/* extra class to override WP 5.0 styles */
		.tribe-editor__related-events & {
			font-size: 1.3125rem;
			min-height: 50px;
			background-color: #fff;
			border: 0;
			font-size: 1.3125rem;
			overflow: hidden;
			padding: 5px 0;
			max-width: calc(100% - 20px);
			min-width: 400px;

			&:focus {
				outline: 0;
				box-shadow: none;
			}
		}
	}

	&--empty {
		input {
			background-color: #FFF;
			color: #8D949B;

			&::placeholder {
				color: #8D949B;
			}
		}
	}

	.tribe-editor__related-events__title &,
	.tribe-editor__related-events__title &:focus {
		[data-mce-selected="inline-boundary"] {
			background: transparent;
		}
	}
}

.tribe-editor__related-events__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.tribe-editor__related-events__grid--item {
	display: flex;
	flex-direction: column;
	flex: 0 1 32%;
	margin: 1%;

	&:nth-of-type(3n) {
		margin-right: 0;
	}

	&:nth-of-type(3n+1) {
		margin-left: 0;
	}

	svg {
		background-color: #e9e9e9;
		fill: #c0c0c0;

	}
}

.tribe-editor__related-events__grid--item-title {
	/* editor compatibility, to make it look like the front-end design */
	.editor-styles-wrapper &,
	.edit-post-visual-editor .editor-block-list__block & {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
		margin-top: 5px;
		padding-top: 0;
	}
}

.tribe-editor__related-events__grid--item-date {
	/* editor compatibility, to make it look like the front-end design */
	.editor-styles-wrapper & {
		font-size: 12px;
	}
}