// =============================================================================
// :: Step List
// =============================================================================
.c-steps-list {
	overflow: hidden;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-steps-list__content {
	padding: 0;

	list-style: none;
}

.c-steps-list__item {
	margin-bottom: 5rem;

	@include respond-at(get-breakpoint("tablet")) {
		margin-bottom: 15rem;
	}
}

.c-step__tip {
	margin-top: 5rem;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-steps-list__item--even,
.c-steps-list__item--odd {
	position: relative;

	&::after {
		content: "";

		position: absolute;
		z-index: $z-index-pit;

		width: 100%;
		height: 100%;

		background-repeat: no-repeat;
	}
}

.c-steps-list__item--even {

	&::after {
		top: 10%;
		left: -15%;

		background-image: url("/assets/images/general/background/bg-steps-mobile-02.svg");

		@include respond-at(get-breakpoint("mobile")) {
			top: 30%;
			left: -5%;
		}

		@include respond-at(get-breakpoint("tablet")) {
			top: 75%;
			left: 0;

			background-image: url("/assets/images/general/background/bg-steps-02.svg");
		}

		// needed this because IE11 is behaving weird with this
		@supports (-webkit-appearance: none) {
			@include respond-at(get-breakpoint("tablet")) {
				top: 70%;
				left: 37%;

				background-image: url("/assets/images/general/background/bg-steps-02.svg");
			}
		}
	}
}

.c-steps-list__item--odd {

	&::after {
		top: 7rem;
		right: -10%;

		background-image: url("/assets/images/general/background/bg-steps-mobile-01.svg");

		@include respond-at(get-breakpoint("mobile")) {
			top: 12rem;
			right: -40%;
		}

		@include respond-at(get-breakpoint("tablet")) {
			top: 70%;
			right: -30%;

			background-image: url("/assets/images/general/background/bg-steps-01.svg");
		}
	}
}

.c-steps-list__item--last {
	margin-bottom: 5rem;

	&::after {
		display: none;
	}
}

.c-steps-list--with-tip {

	.c-steps-list__item--even {

		&::after {
			top: 10%;
			left: -40%;

			background-image: url("/assets/images/general/background/bg-steps-green-mobile.svg");

			transform: scaleX(-1);

			@include respond-at(get-breakpoint("mobile")) {
				top: 30%;
				left: -60%;
			}

			@include respond-at(get-breakpoint("tablet")) {
				top: 60%;
				left: 20%;

				background-image: url("/assets/images/general/background/bg-steps-green-02.svg");

				transform: scaleX(1);
			}

			@include respond-at(get-breakpoint("desktop")) {
				left: 30%;
			}
		}
	}

	.c-steps-list__item--odd {

		&::after {
			top: 7rem;
			right: -40%;

			background-image: url("/assets/images/general/background/bg-steps-green-mobile.svg");

			@include respond-at(get-breakpoint("mobile")) {
				top: 12rem;
				right: -60%;
			}

			@include respond-at(get-breakpoint("tablet")) {
				top: 60%;
				right: -30%;

				background-image: url("/assets/images/general/background/bg-steps-green-01.svg");
			}
		}
	}
}