/**
 * Notice over the sample review in the editor.
 */
.wp-block-affreviews-review-context.has-affr-sample-notice {
	position: relative;
}

.affr-review-context-notice {
	position: absolute;
	z-index: 5;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(30, 30, 30, 0.45);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	text-align: center;
	// Clicks reach the blocks underneath, so selecting the block still works.
	pointer-events: none;

	&__text {
		max-width: 460px;
		padding: 16px 24px;
		border-radius: 4px;
		background: #1e1e1e;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	}

	strong {
		display: block;
		margin-bottom: 4px;
		font-size: 20px;
	}

	a {
		color: #fff;
		text-decoration: underline;
		pointer-events: auto;
	}

	// While editing: a small label in the corner.
	&.is-compact {
		inset: 8px 8px auto auto;
		display: block;
		max-width: calc(100% - 16px);
		padding: 6px 10px;
		border-radius: 2px;
		background: rgba(30, 30, 30, 0.85);
		font-size: 12px;
		line-height: 1.4;
		text-align: left;

		.affr-review-context-notice__text {
			max-width: none;
			padding: 0;
			background: none;
			box-shadow: none;
		}

		strong {
			display: inline;
			margin: 0;
			font-size: inherit;
		}
	}
}

/**
 * Review layout previews (helpers/layout-picker.js), used by the Review
 * Context "Choose" modal and by the Affiliate Reviews editor sidebar. Both
 * render on the editor page, where this stylesheet also loads.
 */
.affr-layout-picker {
	display: grid;
	grid-template-columns: repeat(var(--affr-layout-picker-columns, 1), minmax(0, 1fr));
	gap: 16px;
	width: 100%;

	&__item {
		cursor: pointer;
		border-radius: 2px;
		outline: none;

		&:hover .affr-layout-picker__preview,
		&:focus-visible .affr-layout-picker__preview {
			box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #3858e9);
		}
	}

	&__preview {
		overflow: hidden;
		border-radius: 2px;
		background: #fff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
		pointer-events: none;
	}

	&__title {
		padding-top: 8px;
		color: #1e1e1e;
		font-size: 12px;
		text-align: center;
	}
}

/**
 * "No reviews yet" message in the Affiliate Reviews editor sidebar.
 */
.affr-sidebar-notice {
	margin-top: 12px;
	padding: 12px;
	border-left: 4px solid #5b3df5; // Brand purple, as on the settings page.
	background: #f2efff;

	p {
		margin-top: 0;
	}
}