// ============================================================================
// :: STEP
// ============================================================================
.m-step {
	position: relative;

	margin-top: 3rem;

	text-align: left;

	& + .m-step {

		@include respond-to($screen-small-base) {
			margin-top: 6rem;
		}
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-step__title {
	position: relative;
	z-index: $z-index-base;

	overflow: visible;

	margin-bottom: 1rem;
	padding-top: 2rem;

	@include respond-at($screen-small-base) {
		padding-top: 7rem;
	}

	&::before {
		content: "0" counter(step-counter);

		position: absolute;
		top: 1rem;
		left: 0;
		z-index: $z-index-lowest;

		display: block;
		height: auto;

		overflow: visible;

		font-weight: $font-weight-bold;

		font-size: $font-size-5x-large;

		color: $text-color-grey-lightest;
		counter-increment: step-counter;

		@include respond-at($screen-small-base) {
			top: 5rem;

			font-size: 9.5rem;
		}
	}
}

.m-step__actions {
	margin-top: 1rem;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-step--standalone {
	padding: 2rem 4rem 4rem;

	background-color: white;
	box-shadow: $box-shadow;
}

.m-step--no-padding-bottom {

	@include respond-at($screen-small-base) {
		font-weight: $font-weight-medium;
	}
}

.m-step--background {

	margin-top: 1rem;
	padding: 4rem;

	text-align: left;

	background-color: $background-color-white;
	box-shadow: $box-shadow;
}