// Notes:
// 1- Using .has-builder class to distinguish the slider section with sidebar and
// 	category page with sidebar.
// 	To prevent the category slider from applying the two-column slider style.

// Post Overlay With Gradient Background
.thumb-overlay-link {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

// Used in:
// - Sliders.
// - Posts layouts 4, 5, 8.
// - Post sliders & widget slider.
// - Masonry 2, 3.
.thumb-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 30px;
	border-radius: $base-border-radius;

	.thumb-content {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 30px 20px;
		z-index: 3;
		width: 100%;
		pointer-events: none;
		transition: bottom 0.3s;
		backface-visibility: hidden;
	}

	.thumb-title a,
	.meta-author a {
		pointer-events: auto;
	}

	.post-meta,
	.thumb-title a{
		color: #ffffff !important;
	}

	.thumb-title {
		@include font-size(30px);
		color: #ffffff;

		a:hover {
			color: #cccccc;
		}
	}

	.meta-view,
	.meta-comments {
		pointer-events: auto;
		display: inline-block;
	}

	.thumb-meta {
		margin: 0 0 5px;

		.meta-view,
		.meta-comments{
			margin-right: 15px;
		}
	}

	.thumb-desc {
		color: #ffffff;
		max-height: 0;
		line-height: 18px;
		overflow: hidden;
		opacity: 0;
		transition: opacity 0.4s ease-out, max-height 0.4s ease-out, margin 0.4s;

		p {
			margin: 0;
		}
	}
}

@include breakpoint(md){
	.main-slider:not(.grid-slider-wrapper) .slide,
	.slide .grid-item,
	.media-page-layout .post-element,
	.boxed-slider-wrapper .tie-slick-slider{
		&:hover .thumb-desc {
			opacity: 1;
			max-height: 100px;
			margin-top: 5px;
			transition: opacity 0.4s ease-out, max-height 0.9s ease-out;
		}
	}
}

.thumb-overlay,
.first-post-gradient li:first-child .post-thumb, // Blocks 5, 15
.scroll-2-box .post-thumb{
	backface-visibility: hidden;

	&:after{
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 65%;
		transition: opacity 0.2s;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) );
		backface-visibility: hidden;
	}
}

.wide-slider-wrapper,
.wide-slider-three-slids-wrapper{
	.thumb-overlay:after{
		height: 85%;
	}
}

.wide-slider-wrapper .slide:hover, 										// Sliders 1, 3, 4
.wide-slider-three-slids-wrapper .slide:hover, 				// Slider  2
.boxed-slider:not(.grid-slider-wrapper) .slide:hover, // Sliders 5, 6, 7, 8
.grid-item:hover{ 																		// Sliders 9, 10, ..., 16
	.thumb-overlay:after{
		opacity: 0.9;
	}
}

// Sliders Color Overlay
.slide-mask {
	.thumb-overlay:after{
		height: 100% !important;
		opacity: 0.7;
	}

	.tie-slide-1 .thumb-overlay:after {
		background-image: linear-gradient(135deg, #67B26F, #4ca2cd);
	}

	.tie-slide-2 .thumb-overlay:after {
		background-image: linear-gradient(-135deg, #d38312, #002f4b);
	}

	.tie-slide-3 .thumb-overlay:after {
		background-image: linear-gradient(135deg, #292484, #dc4225);
	}

	.tie-slide-4 .thumb-overlay:after {
		background-image: linear-gradient(-135deg, #e0be00, #dc4225);
	}

	.tie-slide-5 .thumb-overlay:after {
		background-image: linear-gradient(135deg, #5f2c82, #49a09d);
	}

	.tie-slide-6 .thumb-overlay:after {
		background-image: linear-gradient(135deg, #7474BF, #348AC7);
	}
}

// Disable sliders overlay gradient -
.is-slider-overlay-disabled{
	.thumb-overlay{
		background-color: rgba(0, 0, 0, 0.05); // Useful when the slider overlay gradient is disabled

		.dark-skin & {
			background-color: rgba(255, 255, 255, 0.05);
		}

		&:after{
			display: none;
		}
	}
}


// Slider Area
.slider-area{
	position: relative;
	overflow: hidden;

	.tie-media-icon{
		position: relative;
		float: right;
		margin: -9px -5px 0 10px;
		height: 40px;
		width: 40px;
		color: #ffffff;
		text-align: center;
		@include font-size(32px);
		line-height: 32px;
		z-index: 8;
		pointer-events: none;
	}

	.post-rating,
	.digital-rating{
		float: right;
		position: relative;
		top:0;
		right: -5px;
	}

	.digital-rating{
		top: -9px;
	}

	.digital-rating .pie-wrap {
    height: 40px;
    width: 40px;
    float: right;
  }

	.post-cat-wrap{
		float: left;
	}

  .tie-media-icon,
  .post-cat-wrap,
  .post-rating,
  .digital-rating{
		backface-visibility: hidden;
	}

	@include breakpoint(max_min_sm){
		.tie-media-icon,
		.post-rating,
		.digital-rating{
			display: none;
		}
	}
}

.slider-area-inner{
	position: relative;
}

.third-party-slider{
	margin-bottom: 50px;
}


// Deafult Slick Style
.slick-slider {
	position: relative;
	user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;

	.slick-track,
	.slick-list {
		transform: translate3d(0, 0, 0);
	}
}

.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
	width: 99%;
	width: calc(100% - 10px);

	a,
	&:focus {
		outline: none;
	}

	&.dragging {
		cursor: pointer;
		cursor: hand;
	}
}

.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;

	&:before,
	&:after {
		content: "";
		display: table;
	}

	&:after {
		clear: both;
	}

	.slick-loading & {
		visibility: hidden;
	}
}

.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none;

	[dir="rtl"] & {
		float: right;
	}

	.tie-main-slider & img{
		display: none;
		max-width: none;
	}

	&.slick-loading img {
		display: none;
	}

	&.dragging img {
		pointer-events: none;
	}

	.slick-initialized & {
		display: block;
	}

	.slick-loading & {
		visibility: hidden;
	}

	.slick-vertical & {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}
}

.slick-arrow.slick-hidden {
	display: none;
}

.tie-slick-dots{
	position: absolute;
	bottom: 100px;
	list-style: none;
	display: block;
	text-align: left;
	padding: 0;
	width: 100%;

	@include breakpoint(max_min_lg){
		bottom: 30px;
	}

	li {
		position: relative;
		display: inline-block;
		width: 10px;
		height: 11px;
		margin: 0 3px;
		padding: 0;
		cursor: pointer;
	}

	button {
		border: 0;
		display: block;
		outline: none;
		line-height: 0;
		font-size: 0;
		color: transparent;
		cursor: pointer;
		background: $dark-color;
		height: 8px;
		width: 8px;
		padding: 0;
		margin: 1px;
		border-radius: 100%;
		transition: 0.3s;

		&:hover,
		&:focus {
			outline: none;

			&:before {
				opacity: 1;
			}
		}
	}

	.slick-active button,
	button:hover{
		background: $brand-color;
		transform: scale(1.5, 1.5);

		.fullwidth-slider-wrapper &,
		.boxed-slider-wrapper &{
			background: #ffffff;
		}
	}
}


// lazyload
.slide-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center top;
	transition: opacity 0.5s;
	opacity: 0;

	&[style]{
		opacity: 1;
	}
}


// General for all sliders
.main-slider{
	position: relative;
	z-index: 3;

	.slider-main-container{
		max-width: 100%;
		width: 100%;
		padding: 0;
	}

	.slick-list{
		width: 100%
	}

	.slide{
		position: relative;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.tie-slick-slider{
		&:not(.slick-initialized) {
			.slide{
				display: none;
			}

			.slide:first-child,
			.tie-slider-nav + .slide{
				display: block;
			}
		}
	}

	.tie-slick-dots{
		pointer-events: none;

		li{
			pointer-events: auto;
		}
	}

	.slide-overlay .container{
		max-width: 100%;
	}

	.thumb-meta{
		color: #ffffff;

		a:not(:hover),
		.post-meta a:not(:hover){
			color: #ffffff;

			&:hover{
				opacity: 0.8;
			}
		}

		.tie-alignright{
			float:none;
			display: inline-block;
		}
	}

	@include breakpoint(max_min_md){
		.thumb-desc{
			display: none;
		}
	}

	@include breakpoint(max_min_xs){
		.thumb-title{
			font-size: 16px !important;
		}
	}

	@include breakpoint_max(320px){
		.post-cat,
		.thumb-meta{
			display: none;
		}
	}
}

.all-over-thumb-link{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 2;
}

// Their layout painted by slcik [JS]
.wide-slider-three-slids-wrapper, 		// slider 2
.boxed-slider-three-slides-wrapper,		// slider 5
.boxed-five-slides-slider,						// slider 6
.boxed-four-taller-slider{						// slider 7
	.tie-slick-slider:not(.slick-initialized) .slide{
		display: none !important;
	}
}












// Sliders #10 / #12 / #15 [Two Columns Layout]
@include breakpoint(md){
	.has-builder .has-sidebar{
		.grid-3-slides .grid-item:nth-child(n + 2),
		.grid-5-in-rows,
		.grid-4-slides,
		.grid-6-slides{
			.thumb-title{
				display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
				overflow: hidden;
		    text-overflow: ellipsis;
		    max-height: 2.6em;
		  }

			.thumb-overlay,
			.thumb-content{
				padding: 20px 15px 10px;
			}
		}
	}
}

// Always display the description on Grids that has a first big Thumb.
.grid-3-slides, 								// Slider 10
.grid-5-slider,									// Sliders 13 & 14
.grid-4-big-first-half-second{	// Slider 16
	.grid-item:nth-child(1){
		.thumb-desc{
			opacity: 1;
			max-height: 100px;
			margin-top: 5px;
		}
	}
}


// Size of Post title
@include breakpoint(sm){
	.grid-3-slides,
	.grid-5-slider, // slider 13 & 14
	.grid-4-big-first-half-second{
		.grid-item:nth-child(1) .thumb-title{
			font-size: 35px;
		}
	}

	.grid-4-slides,
	.grid-5-in-rows .grid-item:nth-child(-n + 2){
		.thumb-title{
			@include font-size(24px);
		}
	}
}

// General Responsive fixes
@include breakpoint(max_min_lg){
	.boxed-four-taller-slider{
		.tie-media-icon,
		.post-rating,
		.digital-rating{
			display: none;
		}
	}
}

@include breakpoint_min_max($screen-md, $screen-lg){
	.full-width{
		.grid-5-slider .grid-item:nth-child(n + 2),
		.grid-4-big-first-half-second .grid-item:nth-child(n + 3){
			.tie-media-icon,
			.post-rating,
			.digital-rating{
				display: none;
			}
		}
	}
}

@include breakpoint(max_min_md){
	.grid-6-slides,
	.grid-5-in-rows .grid-item:nth-child(n + 3),
	.grid-3-slides .grid-item:nth-child(n + 2){
		.tie-media-icon,
		.post-rating,
		.digital-rating{
			display: none;
		}
	}
}

@include breakpoint_max(320px){
	.grid-3-slides,
	.grid-4-slides,
	.grid-4-big-first-half-second,
	.grid-5-in-rows,
	.grid-5-slider, // slider 13 & 14
	.grid-6-slides{
		.slide{
			height: auto;
		}

		.grid-item:nth-child(n){
			width: 100% !important;
			margin-right: 0 !important;
			height: 120px;
		}
	}
}