/**
 * The following styles get applied inside the editor only.
 */

.lb-editor-color-settings {
	padding: 0 !important;
	border-top: 0 !important;

	.block-editor-tools-panel-color-gradient-settings__item.first {
		margin-top: 0;
	}
}

.lb-editor-placeholder {

	&__card {
		display: flex;
		flex-direction: row;
		gap: 18px;
		width: 100%;
		height: 165px;
	}

	&__card-body {
		display: flex;
		flex-direction: column;
		flex-grow: 10;
	}

	&__card-img {
		flex-grow: 3;
	}

	&__title {
		width: 100%;
		height: 24px;
		margin-bottom: 10px;
	}

	&__summary {
		width: 100%;
		height: 18px;
		margin-bottom: 18px;
	}

	&__footer {
		display: flex;
		flex-direction: row;
		gap: 30%;
		width: 100%;
		justify-content: space-between;
		align-items: end;
	}

	&__location {
		flex-grow: 3;
		height: 18px;
	}

	&__btn {
		flex-grow: 2;
		height: 24px;
		background-color: #000;
	}

	&__card-img,
	&__title,
	&__summary,
	&__location {
		position: relative;
		overflow: hidden;
		background-color: #ddd;
	}

	&__card-img::before,
	&__title::before,
	&__summary::before,
	&__location::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: -100%;
		height: 100%;
		width: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		animation: shimmer 2s infinite;
	}

	@keyframes shimmer {

		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}
}