@import '../../common';

.prelements-heading{
	.title-inner{
		position: relative;
		.title {
			margin-bottom: 11px;
			span {
				color: $primaryColor;
				position: relative;
				z-index: 2;
			}
			a{
				color: #333;
			}
		}
		span.sub-text{
			display: inline-block;
			color:$primaryColor;
			font-weight: 500;
			margin-bottom: 14px;
			img{
				width: 24px;
				height: 24px;
				margin-right: -2px;
			}
			svg {
				width: 13px;
				height: 15px;
				margin: 0 3px 2px 0;
			}
		}
	}
	.description {
		p {
			margin-bottom: 10px;
		}
	}
	&.draw-line {
		&.animate-height {
			.title-inner{
				.title {
					position: relative;
					padding-left: 18px;
					&:after {
						position: absolute;
						content: '';
						left: 0;
						background: $primaryColor;
						transition: $transition;
						top: 50%;
						height: 0;
						transform: translateY(-50%);
						width: 8px;
					}
				}
			}
			&.start-draw {
				.title-inner{
					.title {
						&:after {
							height: 100%;
						}
					}
				}
			}
		}
		&.animate-width {
			.title-inner{
				padding: 18px 0 18px 18px;
				position: relative;
				> * {
					position: relative;
					z-index: 1;
				}
				&:after {
					position: absolute;
					content: '';
					left: 0;
					background: rgba(0,0,0,0.1);
					transition: $transition;
					top: 0;
					bottom: 0;
					width: 0;
				}
			}
			&.start-draw {
				.title-inner{
					&:after {
						width: 150px;
					}
				}
			}
		}
	}
}