///
/// WCS
///
.form-content {
	&--titlebar {
		@extend .cci-page-header;

		margin-top: -4rem;
		margin-bottom: 2rem;
	}

	&--title {
		@extend .cci-page-header--title;
	}

	&--sidebox {
		@extend %cci-card;

		background: white;
		border-radius: $border-radius;
	}

	&--body {
		padding: 1rem;

		a:not([role=button]):not(.pk-button):not(.pk-big-button) {
			@extend %cci-link;
		}
	}
}

.wcs-steps {
	&--list {
		padding: 1rem;
		margin: 0;
	}

	@media($max-mobile-viewport) {
		padding: 0.5rem;
		padding-bottom: 1.5rem;

		background: $blue-gradient-1;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;

		font-size: $fz-3;
	}

	@media ($mq-max--wcs-steps-small-layout) {
		padding-bottom: 0.5rem;
	}
}

.wcs-step {
	position: relative;

	@media($max-mobile-viewport) {
		
		&--marker,
		&.current &--label,
		&.current &--marker {
			color: white;
		}
	}
}

@media ($min-desktop-viewport) {
	div#tracking-code {
		margin: 0;

		&.has-discard-button form {
		}

		div.tracking-code-part {
			display: flex;
			flex-direction: column;

			h3 {
				padding: 0.5rem;

				background: $blue-gradient-1;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: none;

				font-size: $fz-3;
				color: white;
			}

			a {
				padding-top: 0.5rem;
				padding-bottom: 0;
				text-align: center;
			}
		}

		form {
			margin: 0;
			margin-top: 0.5rem;
			display: flex;
			justify-content: center;

			button {
				margin: 0;
			}
		}
	}

	.wcs-step {
		font-size: $font-size;
		&--marker {
			&::before {
				width: 1.3rem;
				height: 1.4em;
				margin: auto;

				content: "";
			}
		}
		
		&--label {
			align-self: baseline;
			margin: auto 1rem auto 1rem;

			font-size: $font-size;
		}

		&.current &--marker::before {
			background: center /contain no-repeat url("img/chevron-right.svg");
		}
	}
}

div.form-validation {
	div.page {
		background: $gray-1;
		border-radius: $border-radius;
	}
}

input[readonly], select[readonly], textarea[readonly] {
	border-radius: $widget-border-radius;
	border-bottom-color: transparent;

	color: $gray-3;
}
