@use "~admin-stylesheets/colors";

.nab-experiment-suggestion {
	--category-background-color: #f3f4f6;
	--category-line-color: #6b7280;

	border: 1px solid colors.$nab-border-lighter;
	display: flex;
	gap: 1em;
	flex-direction: row;
	padding: 1em;

	&-body {
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	&-title {
		font-size: 1.1em;
		font-weight: 700;
	}

	&-description {
		color: colors.$nab-text-dark-grey;
	}

	&-category-label {
		background: var(--category-background-color);
		color: var(--category-line-color);
		border-radius: 4px;
		display: inline-block;
		font-size: 0.8em;
		padding: 0.2em 0.8em;
		font-weight: 700;
	}

	&-actions {
		display: flex;
		align-items: flex-end;
	}

	&--call-to-action {
		--category-background-color: #ecfdf3;
		--category-line-color: #22c55e;
	}

	&--content {
		--category-background-color: #eff6ff;
		--category-line-color: #3b82f6;
	}

	&--form {
		--category-background-color: #f0fdfa;
		--category-line-color: #14b8a6;
	}

	&--headline {
		--category-background-color: #f3e8ff;
		--category-line-color: #8b5cf6;
	}

	&--media {
		--category-background-color: #fdf2f8;
		--category-line-color: #ec4899;
	}

	&--navigation {
		--category-background-color: #fff7ed;
		--category-line-color: #f59e0b;
	}

	&--trust {
		--category-background-color: #eef2ff;
		--category-line-color: #6366f1;
	}

	&--value-proposition {
		--category-background-color: #fef3c7;
		--category-line-color: #f97316;
	}

	&--visual-design {
		--category-background-color: #f5f3ff;
		--category-line-color: #a855f7;
	}
}

.nab-experiment-suggestion-icon {
	align-items: center;
	justify-content: center;
	display: flex;
	width: 1em;
	height: 1em;
	font-size: 42px;
	background: var(--category-background-color);
	padding: 5px;
	border-radius: 8px;
	color: var(--category-line-color);
}