/* ======================================================
   <!-- Heading -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. Header Pinlines
 * 2. Text Overlay
 * 3. Show Image Under Text
 * 4. Custom Underline
 * 5. Hybrid Heading
 * 6. Placeholder Line Heading
*/


/*
 ---------------------------
 1. Header Pinlines
 ---------------------------
 */
.uix-heading--pinline {
    text-align: center;
    display: block;
    overflow: hidden;


	span {
		position: relative;
		display: inline-block;
		max-width: 80%;
		line-height: 1;


		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			height: 1px;
			background: var(--uix-primary-text-color);
			width: 99999px;
		}

		&::before {
			left: 100%;
			margin-left: 1.5rem;
		}

		&::after {
			right: 100%;
			margin-right: 1.5rem;
		}


	}

	&.uix-heading--pinline--left {
		text-align: left;

		span {

			&::after {
				display: none;
			}

		}
	}

	&.uix-heading--pinline--right {
		text-align: right;

		span {

			&::before {
				display: none;
			}

		}
	}
}



/*
 ---------------------------
 2. Text Overlay
 ---------------------------
 */
.uix-heading--overlay {
	position: relative;


	em {
		font-style: normal;
		position: relative;
		z-index: 1;
		margin: 0;
		padding: 0;
	}

	&::before {
		content: attr(data-text);
		color: rgba(220,220,220,0.5);
		font-size: inherit;
		display: block;
		font-weight: 900;
		letter-spacing: .5rem;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		font-size: 1.5em; /* Don't use "REM" */
//		transform: scale(2);
//		transform-origin: left center 0;
	}

	&.uix-t-r {
		&::before {
			transform-origin: right center 0;
		}
	}

	&.uix-heading--overlay--bottom {

		p {
			display: inline-block;
			margin-right: .5rem;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		&::before {
			display: none;
		}

		&::after {
			content: attr(data-text);
			color: var(--uix-sub-text-color);
			font-size: 0.35em; /* Don't use "REM" */
			display: block;
			font-weight: 900;
			position: relative;
			top: 0;
			left: 0;
			z-index: 0;
			font-weight: 900;
			word-wrap: break-word;
			line-height: 1.1;
			width: 100%;
		}

	}

	&.uix-heading--overlay--sub {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		padding: 1rem 4rem;
		@include transition-default();

		i {
			font-weight: normal;
			margin-left: .6rem;
		}

		&:hover {

			i {
				margin-left: 1rem;
			}
			box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1),
				0 -4px 0px 0px var(--uix-highlight-color1);


		}


	}

}


/*
 ---------------------------
 3. Show Image Under Text
 ---------------------------
 */
.uix-heading--fill {
	user-select: none;
	color: var(--uix-primary-text-color);  /* Fallback: assume this color ON TOP of image */
	background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat;
	background-size: cover;

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}


/*
 ---------------------------
 4. Custom Underline
 ---------------------------
 */
.uix-heading--underline {

	span {
		display: inline-block;
		@include bg-gradient( '130deg' );
		@include transition-default();
		background-repeat: no-repeat;
		background-size: 100% 0.3rem;
		background-position: 0 88%;


		&:hover {
			background-size: 100% 88%;
		}

	}


}



/*
 ---------------------------
 5. Hybrid Heading
 ---------------------------
 */
.uix-heading--hybrid {

	span {
		display: block;
		font-size: 0.35em; /* Don't use "REM" */
		letter-spacing: 2px;
	}

}


/*
 ---------------------------
 6. Placeholder Line Heading
 ---------------------------
 */
.uix-heading--placeholder-line {

    display: flex;

    &::after {
        content: " ";
        background: linear-gradient(to right, var(--uix-highlight-color1) 0%,var(--uix-highlight-color2) 100%);
        height: 3px;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: auto;
        margin: .8em 2px 0 3px;
        flex-grow: 1;
        border-radius: 2px;
    }  

}