@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-card:not(.newspack-settings__no-border) .newspack-action-card__region-children > .newspack-grid.newspack-ras-campaign__grid {
	margin-top: 0 !important;
}

span.is-skipped {
	color: wp-colors.$gray-700;
}

.newspack-ras-campaign {
	&__prompt-wizard,
	&__completed {
		.newspack-buttons-card {
			margin-top: 32px;
		}
	}

	&__fields {
		.newspack-text-control,
		.newspack-textarea-control {
			position: relative !important;

			.components-base-control__help {
				margin-top: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		> .components-base-control + .components-base-control {
			margin-bottom: 32px !important;
			margin-top: 32px !important;
		}

		.components-checkbox-control + .components-checkbox-control {
			margin-top: 8px;
		}

		.newspack-image-upload {
			margin-top: 0;
		}

		.newspack-buttons-card {
			margin-bottom: 0;
			flex-direction: row;
		}
	}

	&__help {
		img {
			display: block;
			margin: 16px auto;
			width: 100%;
		}

		.newspack-ras-campaign__recommendation-heading {
			letter-spacing: 0.01em;
			margin-top: 32px;
			text-transform: uppercase;
		}

		ul {
			color: var(--wp-admin-theme-color);
			list-style: disc;
			padding-left: 24px;

			li span {
				color: wp-colors.$gray-700;
			}
		}
	}

	&__completed {
		.newspack-ras-campaign__completed-card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 50vh;

			@media screen and ( min-width: 600px ) {
				min-height: 450px;
			}

			h2,
			p {
				text-align: center;
			}
		}

		.newspack-progress-bar {
			margin: auto;
			max-width: 450px;
			width: 100%;

			&__headings h2 {
				color: wp-colors.$gray-700;
				font-size: 15px;
				font-weight: 400;
				margin-bottom: 32px;
				text-align: center;
				width: 100%;
			}
		}
	}
}

.newspack-ras-wizard {
	&__prerequisite.newspack-card.newspack-action-card {
		.newspack-action-card__notification.newspack-action-card__region-children .newspack-notice {
			margin-top: 0;
		}
		.button-group button {
			margin-right: 8px;
		}
	}
}
