@use "../utils" as *;

/*----------------------------------------*/
/*  2.22 Section Title  
/*----------------------------------------*/

.bd-section {
	&-title {
		font-weight: var(--bd-fw-sbold);
		font-family: var(--bd-ff-title);

		&.bottom-line {
			border-bottom: 1px solid var(--bd-border-primary);
			padding-bottom: 15px;
			position: relative;

			&::before {
				position: absolute;
				content: "";
				left: 0;
				bottom: -2px;
				width: 10%;
				height: 3px;
				background-color: var(--bd-primary);
				transition: all 0.3s ease-in-out;
			}
		}
	}

	&-subtitle {
		color: var(--bd-primary);
		font-size: 16px;
		text-transform: uppercase;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;

		&.bg-field {
			background-color: rgba($color: $primary, $alpha: .15);
			border-radius: 6px;
			height: 32px;
			padding: 0 14px;
		}
		&.white {
			color: var(--bd-white);
		}
		&.secondary {
			color: var(--bd-secondary);
		}
	}
}

.down-mark-line {
	position: relative;
	z-index: 2;
	display: inline-block;

	&::before {
		position: absolute;
		content: "";
		left: 0;
		bottom: -2px;
		width: 100%;
		z-index: -1;
		height: 100%;
		background: url(../images/shape/down-mark-line.webp);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom;
		-webkit-animation: section-animation 3s infinite;
		animation: section-animation 3s infinite;
	}
}

@keyframes section-animation {
	0% {
		width: 0;
	}

	15% {
		width: 100%;
	}

	85% {
		opacity: 1;
	}

	90% {
		width: 100%;
		opacity: 0;
	}

	to {
		width: 0;
		opacity: 0;
	}
}

.down-mark-line-2 {
	position: relative;
	z-index: 2;
	display: inline-block;

	&::before {
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: -1;
		height: 100%;
		background: url(../images/shape/down-mark-line-2.webp);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom;
		-webkit-animation: section-animation 3s infinite;
		animation: section-animation 3s infinite;
	}
}

.down-mark-line-3 {
	position: relative;
	z-index: 2;
	display: inline-block;

	&::before {
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: -1;
		height: 100%;
		background: url(../images/shape/down-mark-line-3.webp);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom;
		-webkit-animation: section-animation 3s infinite;
		animation: section-animation 3s infinite;
	}
}

.bd-section-bg {
	background-color: var(--bd-white);
	border-radius: 8px;
	padding: 15px 15px;
	box-shadow: 0px 1px 2px 1px rgba(3, 11, 30, 0.06), 0px 1px 1px 0px rgba(3, 11, 30, 0.1);
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
	border-bottom: 3px solid var(--bd-primary);
}

.bd-title-underline {
	position: relative;
	z-index: 1;
	display: inline-block;

	svg {
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: -1;

		path {
			stroke: var(--bd-secondary);
			stroke-dasharray: 560;
			stroke-dashoffset: 560;
			animation: section_stroke 3s linear forwards infinite;
			-webkit-animation: section_stroke 3s linear forwards infinite;
		}
	}

	&.primary {
		svg {
			path {
				stroke: var(--bd-primary);
			}
		}
	}
}

@keyframes section_stroke {
	0% {
		stroke-dashoffset: 560;
	}

	50% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -560;
	}
}

/* Elements section title */

.bd-elements {
	&-line {
		display: flex;
		position: relative;
		align-items: center;
		margin: 0 -15px;

		@media #{$xs} {
			justify-content: center;
		}
	}

	&-title {
		position: relative;
		padding: 0 15px;
		width: max-content;

		@media #{$xs} {
			width: auto;
		}
	}
}

.bd-separator-line {
	position: relative;
	background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));
	width: 100%;
	height: 1px;
	left: 0%;
	top: 0%;
	right: 0%;
	bottom: auto;

	@media #{$xs} {
		width: auto;
		background-image: none;
	}

	&.line-left {
		background-image: linear-gradient(-90deg, #46494D, rgba(33, 38, 45, 0));

		@media #{$xs} {
			background-image: none;
		}
	}

	&.line-right {
		background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));

		@media #{$xs} {
			background-image: none;
		}
	}
}