/**
 * With Wizard Screen
 */

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

.newspack-wizard {
	// Color
	--wp-admin-theme-color: #{colors.$primary-600};
	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};

	color: wp-colors.$gray-900;

	// Headings
	h1,
	h2,
	h3 {
		color: inherit;
	}

	h1 {
		line-height: 1.4;
	}

	// Links
	a {
		color: var(--wp-admin-theme-color);

		&:active,
		&:focus,
		&:hover {
			color: var(--wp-admin-theme-color-darker-10);
		}

		&:focus {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
			outline: 3px solid transparent;
		}
	}

	&__main {
		overflow: hidden;
		padding-bottom: 1px; /* Prevents borders from being cut off */
	}


	&__section-header {
		margin: 0 auto 32px;
		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
		&:not(.newspack-section-header--has-primary-action) {
			@media (min-width: 782px) {
				.newspack-section-header__title-container + p {
					max-width: 50%;
				}
			}
		}
	}

	&__content {
		margin: 0 auto;
		width: 100%;
		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
		padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;

		// Typography

		strong {
			font-weight: bold;
		}

		small {
			font-size: 12px;
			line-height: 1.4;
		}

		// Thematic Break

		hr:not(.newspack-divider) {
			background: wp-colors.$gray-300;
			border: 0;
			height: 1px;
			margin: 32px 0;

			@media screen and ( min-width: 744px ) {
				margin: 64px 0;
			}
		}
		&:not(.newspack-wizard__content--full-width) {
			.newspack-dataviews {
				margin-left: -24px;
				margin-right: -24px;
				@media (min-width: 380px) {
					margin-left: -48px;
					margin-right: -48px;
				}
			}
		}
	}

	&__above-header {
		border-radius: 0;
		margin: 0;
	}
}

/**
 * Wizard header overflow ("More") menu, rendered by the Wizard component into
 * admin-ui's Page actions slot. Hide the toggle when there are no overflow
 * actions, and hide the duplicated primary items inside the menu on wide
 * viewports.
 */
@media only screen and ( min-width: 782px ) {
	.newspack-wizard__actions__more--primary-only,
	.newspack-wizard__actions__more .newspack-wizard__actions__more__main {
		display: none;
	}
}