// Form steps
// template : wcs/front/formdata_steps.html

//
//	 Config
//

// Steps Bloc
$wcs-steps-background: transparent !default;
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik

// Step
$wcs-step-color: #767676 !default; // color for default marker & label
$wcs-step-current-color: $primary-color !default;
$wcs-step-background: transparent !default;
$wcs-step-current-background: $wcs-step-background !default;
$wcs-step-border-bottom: 1px solid $wcs-step-color !default;
$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default;
@if ($wcs-step-border-bottom == none) {
	$wcs-step-current-border-bottom: none;
}
// Step option
$wsc-step-before-piled: false !default;

// marker
$wcs-step-marker-color: $wcs-step-color !default;
$wcs-step-current-marker-color: $wcs-step-current-color !default;
$wcs-step-marker-background: $wcs-step-background !default;
$wcs-step-current-marker-background: $wcs-step-current-background !default;
// marker options
$wcs-step-marker-size: 2.1em !default;
$wcs-step-current-marker-enlarge: 1 !default;
$wcs-step-marker-type: square !default; // square || tied || disc || disc tied
$wcs-step-marker-tie-color: $wcs-step-color !default;
$wcs-step-marker-tie-width: 5px !default;
$wcs-step-marker-background-type: solid !default;

// Label
$wcs-step-current-label-color: $wcs-step-current-color !default;

// Breakpoints between small & horizontal layout
$wcs-steps-small-layout-limit: $very-small-limit !default;

// UTILS for custom code
// media queries between small & horizontal layout
$mq-max--wcs-steps-small-layout: "max-width: #{$wcs-steps-small-layout-limit}";
$mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limit+1}";
//  Desktop Steps orientation sass mixins
//	Steps orientations depend on media-queries & $form-sidebar-position
@mixin desktop-horizontal-steps() {
	@if ($form-sidebar-position == top) {
		@media ($min-desktop-viewport) {
			@content;
		}
	}
}
@mixin desktop-vertical-steps() {
	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
		@media ($min-desktop-viewport) {
			@content;
		}
	}
}



//
// Default Steps (with SQUARES markers)
//

// Steps bloc
.wcs-steps {
	background: $wcs-steps-background;
	margin-bottom: 0.7rem;
	border-radius: $border-radius;

	@if $wcs-steps-background != transparent {
		padding: $wcs-steps-spacing;
	}

	// hide injected h2
	h2 {
		display: none;
	}

	// hide if only one step
	&.steps-1 {
		display: none;
	}

	&--list {
		margin: 0;
		padding: 0;
		list-style: none;
		color: $wcs-step-color;
	}
}

// Step item
.wcs-step {
	border-radius: $border-radius;
	background-color: $wcs-step-background;
	display: flex;

	&--marker {
		// marker is abbr tag
		text-decoration: none;

		font-size: 1em;
		text-align: center;

		display: flex;

		color: $wcs-step-marker-color;
		background: $wcs-step-marker-background;
		border-radius: $border-radius;

		width: $wcs-step-marker-size;
		height: $wcs-step-marker-size;
		flex: 0 0 $wcs-step-marker-size;

		&-nb {
			margin: auto;
		}

		&-total {
			display: none;
		}
	}

	&--label {
		display: block;
		align-self: center;
		letter-spacing: 1px;
		line-height: 1.25;
	}


	// If step is current
	&.current {
		font-weight: bold;
		background: $wcs-step-current-background;
	}

	&.current & {
		&--marker {
			background: $wcs-step-current-marker-background;
			color: $wcs-step-current-marker-color;
			@if ($wcs-step-current-marker-enlarge != 1) {
				transform: scale($wcs-step-current-marker-enlarge);
			}
		}
		&--label {
			color: $wcs-step-current-label-color;
		}
	}

	// If step is NOT current
	&:not(.current) & {
		&--label {
			display: none;
		}
	}
}

// Sidebar on TOP, SMALL LAYOUT (very-small viewport)
// Display only current step with nb and total in marker
@media ($mq-max--wcs-steps-small-layout) {
	.wcs-step {
		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
			padding: $wcs-steps-spacing;
		}

		&--marker {

			$size: $wcs-step-marker-size + 0.8;

			width: $size;
			height: $size;
			flex: 0 0 auto;
			align-items: center;
			justify-content: center;

			&-nb {
				margin: 0;
				transform: translateY(-0.5em);
				order: 1;
			}

			&-total {
				display: block;
				transform: translateY(0.5em);
				font-size: 0.75em;
				font-weight: normal;
				order: 3;
			}

			// add slash
			&::before {
				content: "";
				display: block;
				flex: 0 0 0.1em;
				height: 2em;
				margin: 0 0.1em;
				background: currentColor;
				transform: rotate(30deg);
				order: 2;
			}
		}

		&--label {
			margin-left: $wcs-steps-spacing*2;
		}

		// If step is NOT current
		&:not(.current) {
			display: none;
		}
	}
}

// Horizontal Layout
// Sidebar on TOP, SMALL and more viewport
// Diplay all marker, but only current Label
@media ($mq-min--wcs-steps-horizontal-layout) {

	.wcs-steps {
		&--list {
			position: relative;
			display: flex;
			flex-wrap: wrap;

			// keep space for label
			margin-bottom: 2em;
		}
	}

	.wcs-step {
		margin-bottom: $wcs-steps-spacing;
		margin-right: $wcs-steps-spacing*2;
		border-bottom: $wcs-step-border-bottom;
		&:last-child {
			margin-right: 0;
		}

		&--label {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			padding-bottom: $wcs-steps-spacing;
			text-align: left;
		}

		&.current {
			border-bottom: $wcs-step-current-border-bottom;
		}
	}


}


@include desktop-horizontal-steps() {
	.wcs-steps {
		font-size: 1.25em;
		&--list {
			justify-content: center;
		}
	}
	.wcs-step {
		margin-bottom: $wcs-steps-spacing*3;
		margin-right: $wcs-steps-spacing*3;
		&--label {
			text-align: center;
		}
	}
}

// Vertical Steps
// Sidebar on LEFT or RIGHT, DESKTOP only
// Display All steps with marker and label. One below the other.
@include desktop-vertical-steps() {
	.wcs-steps {
		font-size: 1.25em;

		// display even if only one step
		&.steps-1 {
			display: block;
		}

		&--list {
			flex-wrap: nowrap;
			flex-direction: column;
			// remove keep space for label
			padding-bottom: 0;
		}
	}

	.wcs-step {
		margin-bottom: $wcs-steps-spacing;

		@if $wcs-step-border-bottom != none {
			padding-bottom: $wcs-steps-spacing;
		}
		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
			padding: $wcs-steps-spacing;
		}

		margin-right: 0;

		&--label {
			position: static;
			font-size: 0.7em;
			margin-left: $wcs-steps-spacing;
			padding-bottom: 0;
		}

		// If step is NOT current
		&:not(.current) & {
			&--label {
				display: block;
			}
		}
	}
}

// OPTION marker-background-type: gradient.
// Generate automatically a gradient based on background-color
@if $wcs-step-marker-background-type == gradient {
	.wcs-step {
		&--marker {
			background-attachment: fixed;
			@media (min-width: $very-small-limit + 1) {
				background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%));
			}

			@include desktop-vertical-steps() {
				background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%));
			}
		}
	}
}

// OPTION Pile Step Before
// Work only for
// * horizontal mode: desktop breakpoint and sidebar on left or right
// * with background-color on step
@if ($wsc-step-before-piled ) {
	@include desktop-vertical-steps() {
		.wcs-step {
			&:not(:first-child) {
				&.step-before,
				&.current {
					box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%);
				}
			}

			&.step-before,
			&.current {
				z-index: 1;
				transition: margin 400ms, box-shadow 400ms;
			}

			&.step-before {
				margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);

				&:hover {
					margin-bottom: $wcs-steps-spacing;

					& + .wcs-step {
						box-shadow: 0 0 0 0 darken($wcs-step-background, 40%);
					}
				}
			}
		}
	}
}

// OPTION marker type DISC
@if (str-index('#{$wcs-step-marker-type}', 'disc')) {
	.wcs-step {
		&--marker {
			border-radius: 50% !important;

			@media ($mq-max--wcs-steps-small-layout) {
				$size: $wcs-step-marker-size + 1.4;
				width: $size;
				height: $size;
			}
		}
	}
}

// OPTION marker type TIED
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {

	.wcs-step {
		&:not(:last-child) {
			@media ($mq-min--wcs-steps-horizontal-layout) {
				&::after {
					content: "";
					display: block;
					height: $wcs-step-marker-tie-width;
					flex: 0 0 calc(100% + #{$wcs-steps-spacing});
					background-color: $wcs-step-marker-tie-color;
					margin: auto;
				}
			}

			@include desktop-vertical-steps() {
				position: relative;

				&::after {
					height: calc(100% + #{$wcs-steps-spacing});
					width: $wcs-step-marker-tie-width;

					position: absolute;
					z-index: 1;
					top: $wcs-steps-spacing;
					left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );

					@if $wcs-step-background != transparent {
						left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
					}
				}
			}
		}

		&--marker {
			position: relative;
			z-index: 2;
		}
	}
}
