/* Steps and tracking code */
div#side {
	display: flex;
	flex-direction: column;
	#tracking-code {
		order: 2;
	}
}

div#tracking-code {
	text-align: center;

	margin-bottom: 2rem;
	@media screen and ($max-mobile-viewport) {
		order: 0;
		margin-bottom: 0;
	}

	h3 { padding: 0; display: block; }

	a {
        padding: 0;
        border: none;
        text-decoration: underline;
    }
}

div.tracking-code-part {
	display: inline-block;
	position: relative;
	@media screen and ($max-mobile-viewport) {
		left: 1.65em;
	}
	width: 15em;
	background-color: #82cebb;
	padding: 1em 1em;

	&::before {
		content: ' ';
		background-image: url(img/ticket.svg);
		height: 100%;
		width: 3.3em;
		left: -3.3em;
		top: 0;
		background-size: contain;
		position: absolute;
	}
}

body.one-step #steps { display: none; }
body.without-tracking-code #steps { margin-bottom: 2em; }

.wcs-steps {
	margin-top: 0;

	@media ($mq-min--wcs-steps-horizontal-layout) {
		&--list {
			justify-content: center;
		}
	}

	@include desktop-horizontal-steps() {
		margin-top: 7em;
	}
}

.wcs-step {
	&--marker {
		border: 5px solid #9b9b9b;
	}

	&.current & {
		&--marker {
			border-color: $primary-color;
		}
	}

	&.step-before & {
		&--marker {
			background: #9b9b9b;
		}		
	}
	@media ($mq-min--wcs-steps-horizontal-layout) {
		&:not(:last-child) {
			flex-grow: 1;
		}
		max-width: 8.5rem;
		&--marker-nb {
			display: none;
		}
		&--label {
			text-align: center;
		}
	}

	@include desktop-horizontal-steps() {
		position: relative;
		min-width: 5rem;
		&--label {
			text-align: left;
			font-size: 0.8em;
			display: block !important;
			width: 12em;
			position: absolute;
			top: auto;
			left: auto;
			transform: rotate(-45deg);
			transform-origin: -1.5em -1.5em;
		}
	}
}
