@use "sass:math";
@use "sass:color";
@use "../../../010-settings/"as *;
@use "../../../010-settings/legacy-settings/legacy-settings_panel" as *;
@use "../../../050-layout/basics" as *;
@use "../../../050-layout/standardpage/" as *;

//== Workflow
//
//##Workflow-steps have an icon indicating their status. The label changes color and size accordingly.
$il-workflow-icon-size: 22px;
$il-workflow-icon-font-color: white;
$il-workflow-available-text-color: $il-text-color;
$il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%);

.il-workflow {
	word-break: break-word;
	&.linear {
		-webkit-box-shadow: $il-panel-shadow;
		box-shadow: $il-panel-shadow;
	}
}
.il-workflow-header {
	// margin-bottom:  $il-slate-content-spacing;
	// height: $il-top-bar-height;
	.il-workflow-title {
		background-color: $il-main-dark-bg;
		color: $il-text-color;
		font-size: $il-font-size-xlarge;
		font-weight: $il-font-weight-base;
		margin-bottom:  $il-margin-large-vertical;
		margin-top: 0;
		padding: $il-padding-large-vertical $il-padding-large-horizontal;
	}
}
.il-workflow-container {
	list-style: none;
	padding: 0 $il-padding-small-horizontal;
	.il-workflow-step {
		&:before {
			background-color: $il-workflow-icon-font-color;
			border: 2px solid $il-main-color;
			border-radius: 50%;
			color: $il-workflow-icon-font-color;
			content: "";
			font-family: Glyphicons Halflings;
			font-size: math.floor($il-workflow-icon-size*0.52381);
			height: $il-workflow-icon-size;
			line-height: $il-workflow-icon-size;
			margin-left: math.floor($il-workflow-icon-size*0.25);
			padding-left: 0px;
			position: absolute;
			text-align: center;
			width: $il-workflow-icon-size;
		}
		&:last-child .text {
			border-left: none;
		}

		.il-workflow-step-description {
			font-size: $il-font-size-base;
			font-weight: $il-font-weight-light;
		}
	}
	//available, not-available, no-longer
	.not-available,
	.no-longer-available {
		&:before {
			content: "\e033";
			background-color: $il-main-bg;
			border: 2px solid $il-neutral-light-color;
		}
		&.in-progress {
			&:before {
				background-color: $il-neutral-light-color;
			}
			.text span {
				color: $il-workflow-unavailable-text-color;
			}
		}
		&.not-started {
			&::before {
				color: $il-workflow-unavailable-text-color;
			}
		}
		.text {
			color: $il-workflow-unavailable-text-color;
		}
	}
	.no-longer-available {
		&:before {
			content: "\e023";
		}
	}
	//successfully,unsuccessfully
	.completed-successfully,
	.completed-unsuccessfully {
		&:before {
			background-color: $il-neutral-light-color;
		}
	}
	.completed-successfully {
		&:before {
			content: "\e013";
		}
	}
	.completed-unsuccessfully {
		&:before {
			content: "\e014";
		}
	}
	.available.completed-successfully,
	.available.completed-unsuccessfully,
	.in-progress {
		&:before {
			background-color: $il-main-color;
		}
	}
	//active
	.active {
		&:before {
			margin: 0;
			width: $il-workflow-icon-size*1.5;
			height: $il-workflow-icon-size*1.5;
			font-size: $il-font-size-xlarge;
		}
		&.completed-successfully:before,
		&.completed-unsuccessfully:before {
	    	line-height: $il-workflow-icon-size*1.5;
			background-color: $il-main-color;
		}
		.text {
			.il-workflow-step-label,
			.il-workflow-step-label .btn.btn-link {
				color: $il-main-color;
				font-size: $il-font-size-large;
				font-weight: $il-font-weight-base;
			}
		}
	}
	//text
	.text {
		border-left: 1px dashed $il-neutral-color;
		font-size: $il-workflow-icon-size*0.7;
		margin-left: math.ceil($il-workflow-icon-size*0.75);
		padding: 0 0 $il-workflow-icon-size*1.5 $il-workflow-icon-size;
		.il-workflow-step-label {
			display: block;
		}
	}
	.available .il-workflow-step-label,
	.available .il-workflow-step-label .btn.btn-link {
		color: $il-workflow-available-text-color;
		font-size: $il-font-size-large;
		font-weight: $il-font-weight-base;
		margin-top: -($il-margin-large-vertical*0.5);
	}
}

#il_right_col .il-workflow {

	border: $il-panel-border;
	border-radius: $il-panel-border-radius;
	-webkit-box-shadow: $il-panel-shadow;
	box-shadow: $il-panel-shadow;

	.il-workflow-header {
		background-color: $il-main-dark-bg;
		margin: 0;
		padding: $il-panel-heading-padding;

		h3 {
			margin: 0;
			padding: 0;
			color: $il-panel-heading-color;
			font-size: $il-font-size-xlarge;
			line-height: $il-line-height-large;
			font-weight: $il-font-weight-bold;
		}
	}

	.il-workflow-container {
		padding: $il-padding-xxxlarge-vertical $il-padding-xlarge-horizontal;
	}
}