@use "~admin-stylesheets/colors";

.nab-suggestions-modal {
	width: 50em;

	.components-modal__header {
		background: linear-gradient(
			135deg,
			#faf5ff 0%,
			#f3e8ff 35%,
			#ede9fe 65%,
			#eef2ff 100%
		);

		h1 svg {
			color: #854eff;
		}
	}

	.components-modal__content {
		padding-top: 1em;
	}

	&__subtitle {
		color: colors.$nab-text-dark-grey;
		font-size: 12px;
		font-weight: 400;
		margin-left: 2.3em;
		margin-top: 5px;
	}

	&__loading-text {
		color: colors.$nab-text-dark-grey;
		text-align: center;
		font-size: 1.2em;
		margin-top: 1em;
	}

	&__suggestions-body {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	&__fallback-experiment {
		text-align: center;
		margin-top: 1em;

		&--has-suggestions {
			display: flex;
			gap: 1.5em;
			align-items: center;
			padding: 1.5em;
			background: #f6f4fe;
		}

		&-icon-wrapper,
		&-button {
			flex: 0;
		}

		&-icon {
			font-size: 24px;
			padding: 5px;
			background: #e6dcfb;
			color: #7d3cdf;
			border-radius: 8px;
		}

		&-content {
			flex: 1;
			text-align: left;
		}

		&-title {
			font-weight: 700;
		}

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