/* Steps and tracking code */
div#side { position: relative; }

body.one-step div#tracking-code {
    display: inline-block;
    position: relative;
    top: 1em;
}

div#tracking-code {
	position: absolute;
	top: 5em;
    left: 50%;
    text-align: center;

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

	h3 { padding: 0; display: block; }

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

div.tracking-code-part {
	position: relative;
	left: -43%;
	background-color: #82cebb;
	padding: 1em 1em;

	&::before {
		content: ' ';
		background-image: url(img/ticket.svg);
		position: absolute;
		height: 100%;
		width: 3.3em;
		left: -3.3em;
		top: 0;
		background-size: contain;
		@media screen and (max-width: $mobile-limit) {
			width: 4.3em;
			left: -3.6em;
		}
	}
}

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

div#steps {
	margin-top: 8em;
	margin-bottom: 11.5em;

	@media screen and (max-width: $mobile-limit) {
		margin-top: 0;
		margin-bottom: 8.5em;
	}

	ol {
		display: -ms-flexbox;
		display: flex;
		li.first.last::after {
			background: none;
		}

		li {
			position: relative;
			-ms-flex: 1;
			flex: 1;
			padding: 0;
			text-transform: uppercase;
			color: $primary-color;
			font-size: 24px;
			margin-bottom: 0;
			border: none;
			min-width: 30px;
			min-height: 40px;
			&::after {
				content: '';
				height: 5px;
				width: 100%;
				display: block;
				position: absolute;
				left: 0;
				bottom: 5px;
				background: #9b9b9b;
				@media screen and (max-width: $mobile-limit) {
					bottom: 15px;
				}
			}
			&:first-child::after { left: 50%; width: 50%; }
			&:last-child::after { right: 50%; width: 50%; }
			span.marker {
				position: absolute;
				bottom: 0;
				overflow: hidden;
				left: 50%;
				text-indent: -1000px;
				border: none;
				color: $primary-color;
				background: white;
				width: 15px;
				height: 15px;
				box-shadow: 0 0 0 5px #9b9b9b;
				border-radius: 10px;
				z-index: 100;
				@media screen and (max-width: $mobile-limit) {
					padding: 0;
					bottom: 10px;
				}
			}
			span.label {
				display: block;
				left: 50%;
				position: absolute;
				width: 12em;
				font-size: $font-size;
				padding-right: 0;
				text-transform: none;
				color: #9b9b9b;
				transform: rotate(-45deg);
				transform-origin: top left;
				top: -0.2em;
		
				@media screen and (max-width: $mobile-limit) {
					display: none;
				}
			}
			&.current {
				span.marker {
					background: $primary-color;
					box-shadow: 0 0 0 5px $primary-color;
					@media screen and (max-width: $mobile-limit) {
						border-radius: 10px;
					}
				}
			}
			&.step-before {
				span.marker { background: #9b9b9b; }
			}
		}
	}
}