@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.step-wrapper__header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.formatted-header {
		flex-grow: 1;
		text-wrap: pretty;
	}

	@include breakpoint-deprecated( "<660px" ) {
		flex-wrap: wrap;
	}
}

.step-wrapper__skip-hr {
	background: var(--color-primary-light);
	max-width: 270px;
	margin-bottom: 50px;
	margin-top: -20px;

	@include breakpoint-deprecated( "<660px" ) {
		margin: 30px auto;
	}
}

.step-wrapper__skip-heading {
	color: var(--color-text-inverted);
}

.is-large-skip-layout .step-wrapper__buttons {
	margin-bottom: 34px;

	@include breakpoint-deprecated( "<660px" ) {
		margin-bottom: 14px;
	}
}

.step-wrapper__header-button {
	@include breakpoint-deprecated( "<660px" ) {
		flex-basis: 100%;
	}
}

.step-wrapper__navigation.action-buttons {
	display: flex;
	align-items: center;
	font-size: 0.875rem;

	&:empty {
		display: none;
	}

	@mixin unstick {
		position: absolute;
		top: 9px;
		left: 56px;
		right: 16px;
		padding: 0;
		border: none;
		margin: 0;
		background-color: transparent;
	}

	&.no-sticky {
		@include unstick;
		height: 36px;
	}

	&:not(.is-sticky) {
		@include break-small {
			@include unstick;
		}
	}

	.step-wrapper__navigation-link {
		font-size: 0.875rem;
		font-weight: 500;

		&.button.is-primary {
			border-radius: 4px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

			.signup__step.is-courses & {
				color: #101517;
				background-color: #fff;
				border-color: transparent;
			}
		}

		&.has-underline {
			text-decoration: underline;
		}

		&.has-skip-heading {
			transform: translateY(-3px);
			// override unessecary super specificity added by another class
			padding-top: 0 !important;
		}
	}

	.step-wrapper__navigation-link.forward,
	.step-wrapper__skip-wrapper {
		margin-left: auto;
	}
}

.step-wrapper__header-image {
	margin-top: 64px;
	display: none;

	@include break-small {
		display: block;
	}
}

.layout:not(.dops) .step-wrapper {
	max-width: 960px;
	margin: 0 auto;

	// Some steps (like plans) need a larger
	// width column.
	&.is-wide-layout {
		max-width: 1040px;
	}

	// Some steps (like 2023 plans) need a larger width column
	&.is-extra-wide-layout {
		max-width: 1480px;

	}

	// Some steps (like courses) have their width limitation
	&.is-full-layout {
		max-width: unset;
	}

	// Some steps (intent gathering) use a horizontal layout
	&.is-horizontal-layout {
		align-items: flex-start;
		justify-content: space-between;
		max-width: 1024px;
		padding: 0 20px;
		margin-top: 28px;

		@include break-small {
			display: flex;
			margin-top: 25vh;
		}

		.step-wrapper__header {
			display: block;
			margin-top: 0;

			@include break-small {
				padding-right: 20px;
			}
		}
	}

	// Skip button
	.step-wrapper__buttons {
		text-align: center;
		margin-bottom: 20px;
	}

	.step-wrapper__header {
		margin-top: 48px;
		margin-bottom: 40px;

		@include breakpoint-deprecated( "<660px" ) {
			margin-top: 24px;
		}
	}

	// On small screens remove the margin from the
	// bottom of the cards.
	@include breakpoint-deprecated( "<660px" ) {
		.card {
			margin-bottom: 0;
		}

		&.has-navigation {
			padding-bottom: 60px;
		}
	}
}

.step-wrapper {
	.help-center-step-button {
		font-weight: 500;
		margin-left: auto;

		&__button {
			font-size: rem(14px);
			color: var( --studio-wordpress-blue );
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}
		}
	}
}
