@use "../utilities" as *;

/**----------------------------------------
START: Working process CSS
----------------------------------------*/
.h6-working-process {
	position: relative;
	z-index: 1;
	.content-wrap .tj-primary-btn {
		margin-top: 24px;
	}
	.content-wrap {
		max-width: 550px;
		margin-inline-start: auto;
		@media #{$md,$sm,$xs} {
			max-width: 100%;
			margin-inline-start: 0;
		}
	}
	&-inner {
		padding: 60px 50px 75px;
		border-radius: 10px;
		background-color: var(--tj-color-common-white);
		margin-inline-end: 10px;
		@media #{$lg,$md} {
			padding: 50px 40px 65px;
			margin-inline-end: 0;
		}
		@media #{$md} {
			margin-top: 45px;
		}
		@media #{$sm,$xs} {
			padding: 40px 15px 55px;
			margin-inline-end: 0;
			margin-top: 45px;
		}
	}

	&-wrapper {
		display: flex;
		flex-direction: column;
		gap: 45px;
		position: relative;
		z-index: 0;
		@media #{$lg,$md} {
			gap: 35px;
		}
		@media #{$sm,$xs} {
			gap: 25px;
		}
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: 34px;
			top: 0;
			width: 0;
			height: 100%;
			border-inline-end: 1px dashed var(--tj-color-border-1);
			z-index: -1;
			@media #{$sm,$xs} {
				inset-inline-start: 29px;
			}
		}
	}

	&-item {
		transition: all 0.6s;
		position: static;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		padding-inline-start: 95px;
		position: relative;
		z-index: 0;
		max-width: 100%;
		@media #{$sm} {
			padding-inline-start: 75px;
		}
		@media #{$xs} {
			padding-inline-start: 70px;
		}
		&:not(:last-child) {
			&::after {
				display: none;
			}
		}
		.process {
			&-step {
				background-image: none;
				background-clip: inherit;
				background-color: var(--tj-color-theme-bg);
				-webkit-text-fill-color: inherit;
				font-size: 24px;
				transform: 0.4s;
				line-height: 1;
				width: 70px;
				height: 70px;
				border-radius: 100%;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				inset-inline-start: 0;
				top: 0;
				outline: 15px solid var(--tj-color-common-white);
				transition: 0.3s;
				span {
					color: var(--tj-color-heading-primary);
				}
				@media #{$md} {
					font-size: 22px;
				}

				@media #{$sm,$xs} {
					font-size: 20px;
					width: 60px;
					height: 60px;
					outline-width: 10px;
				}
			}
			&-content {
				.title {
					margin-top: 15px;
					@media #{$sm,$xs} {
						margin-top: 10px;
					}
				}
			}
		}

		&.active {
			.process {
				&-step {
					background-color: var(--tj-color-theme-primary);
					span {
						color: var(--tj-color-common-white);
					}
				}
			}
		}
	}
}

/* !END: Working process CSS */