.enb-patterns-library-modal {

	.components-modal__header {
		border-block-end: 1px solid var(--enb-color-200);
	}
}

.enb-patterns-library-modal-content {
	--column: 3;
	display: grid;
	grid-template-columns: repeat(var(--column), minmax(0, 1fr));
	gap: 2rem;
	padding: 24px 0 32px;

	&.has-sidebar {
		margin-inline-start: 280px;
	}

	&.has-col-2 {
		--column: 2;
	}

	&.has-col-4 {
		--column: 4;
	}
}

.enb-patterns-library-pattern {
	display: grid;
	border: 1px solid var(--enb-color-200);
	border-radius: 4px;
	overflow: hidden;

	&:hover {
		border-color: var(--enb-color-primary-600);
	}
}

.enb-patterns-library-pattern-preview-button {
	position: relative;
	display: block;
	border-radius: 0;
	min-block-size: 260px;
	padding: 0;
	cursor: pointer;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background-color: rgba(255, 255, 255, 0.75);
		opacity: 0;
		transition: opacity 0.25s;
	}

	span {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		z-index: 3;
		transform: translate(-50%, -50%);
		display: block;
		padding: 8px 16px;
		background-color: var(--enb-color-950);
		text-transform: uppercase;
		letter-spacing: 1px;
		color: var(--enb-color-white);
		opacity: 0;
		transition: opacity 0.25s;
	}

	&:hover {

		&::before,
		span {
			opacity: 1;
		}
	}
}

.enb-patterns-library-modal-content.has-sidebar	.enb-patterns-library-pattern-preview-button {
	min-block-size: 220px;
}

.enb-patterns-library-pattern-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-block-start: 1px solid var(--enb-color-200);
	padding: 8px 16px;

	.components-base-control__field {
		margin-block-end: 0;
	}
}

.enb-patterns-library-pattern-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: 16px;
	font-weight: 600;
	color: var(--enb-color-900);
}

.enb-patterns-library-pattern-insert-button {
	border-radius: 4px;
	block-size: auto;
	padding: 8px 16px;
	background-color: var(--enb-color-900);
	color: var(--enb-color-white);

	&:hover,
	&:hover:not(:disabled,[aria-disabled="true"]) {
		background-color: var(--enb-color-primary-600);
		color: var(--enb-color-white);
	}
}

.enb-patterns-library-modal-sidebar {
	position: absolute;
	inset-block-start: 72px;
	inset-block-end: 0;
	inset-inline-start: 0;
	border-inline-end: 1px solid var(--enb-color-200);
	inline-size: 280px;
	padding: 24px 32px 32px;
	overflow-x: clip;
	overflow-y: auto;
}

.enb-patterns-library-modal-categories .components-button {
	inline-size: 100%;
}

.enb-patterns-library-modal-layout-selector {
	display: flex;
	align-items: center;
	gap: 8px;
}

.enb-patterns-library-preview {

	.block-editor-block-preview__content {
		max-block-size: none !important;

		iframe {
			max-block-size: none !important;
		}
	}
}

.enb-patterns-library-preview-footer {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	z-index: 9;
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	inline-size: 100%;
	padding: 24px;
	background: var(--enb-color-white);
	border: 1px solid var(--enb-color-200);

	.is-tertiary {
		font-weight: 600;
		color: var(--enb-color-900);
	}
}

.enb-patterns-library-modal-loading {
	margin: 24px auto;
}