@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
@use "buttons/buttons" as *;
.thim-background-overlay {
	.thim-collection-info {
		.title {
			color: #fff;
			// font-weight: 200;
		}

		.line {
			&:before {
				border-top: 30px solid #fff;
			}
		}

		.description {
			color: #e2e0db;
		}

		.view-all-button {
			background-color: #fff;
			@media (min-width: 992px) {
				margin-left: auto;
				margin-right: 0;
			}

			&:hover {
				color: #fff;
			}
		}
	}

	.thim-courses-collection {
		.scrollbar {
			.handle {
				background-color: #fff;
			}
		}
	}
}

.thim-courses-collection-wrapper {
	padding-top: 65px;
}

.thim-collection-info {
	@include flexbox();
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 60px;

	.title {
		font-size: 36px;
		line-height: 1.25;
		margin-bottom: 0;
		margin-right: 20px;
		text-transform: capitalize;
		font-weight: 500;
	}

	.line {
		display: inline-block;
		line-height: 0;

		&:before {
			content: "";
			width: 1px;
			height: 30px;
			display: inline-block;
		}
	}

	.description {
		padding-left: 16px;
		font-size: 16px;
		line-height: 25px;
	}

	.view-all-button {
		color: #fff;
		padding: 13px 28px;
		line-height: 1.4em;
		font-size: 16px;
		text-transform: uppercase;
		font-weight: 500;
		@include rounded(28px);
		@include transition(all 0.5s);

		&:hover {
			@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
		}
	}

	// Rounded Corner layout
	&.rounded-colection-info {
		justify-content: center;
		flex-direction: column;
		margin-bottom: 60px;

		.title {
			margin-right: 0;
		}

		.description {
			padding-left: 0;
			margin-top: 32px;
			max-width: 700px;
		}
	}

	&.squared-colection-info {
		justify-content: center;
		flex-direction: column;
		text-align: center;

		.title {
			margin-right: 0;
			margin-bottom: 16px;
			// font-size: 46px;
		}

		.description {
			padding-left: 0;
			max-width: 700px;
		}
	}
}

.thim-courses-collection {
	max-width: 1516px;

	.scrollbar {
		position: relative;
		height: 6px;
		border-top: 1px solid rgba(232, 232, 232, 0.3);
		margin-bottom: 65px;

		.handle {
			width: 40px;
			height: 100%;
			@include rounded(10px);
			cursor: all-scroll;
			margin-top: -3px;
		}
	}

	.collection-frame-none_carousel {
		max-width: 1412px;
		margin: auto;

		.slidee {
			padding-top: 20px;

			li.collection-item {
				margin: 20px;
			}
		}
	}

	.collection-frame {
		height: 200px;

		&.items-3 {
			width: calc(100% - 525px);
			margin-left: 260px;
		}

		&.items-2 {
			width: calc(100% - 830px);
			margin-left: 404px;
		}

		&.items-1 {
			width: calc(100% - 1091px);
			margin-left: 542px;
		}
	}

	.collection-frame {
		margin-left: -15px;
		margin-right: -15px;
	}

	.slidee {
		list-style: none;
		margin: 0;
		height: 177px;

		.collection-item {
			float: left;
			width: 271px;
			height: 100%;
			margin: 0 15px;
			// @include rounded(12px);
			border-radius: $thim_border_radius;
			border: 1px solid $border-color;
			overflow: hidden;
			position: relative;
			@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
			@include transition(0.5s);
			&:before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				@include transition(all 0.5s);
				z-index: 1;
			}

			.collection-wrapper {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				@include flexbox();
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				z-index: 1;

				h3 {
					padding: 0 10px;
					text-align: center;
					line-height: 1;
					margin-bottom: 14px;
					text-transform: uppercase;
					font-size: 18px;
					font-weight: 500;
					letter-spacing: 0.4px;
					color: #fff;
					@include transition(all 0.5s);
				}

				.number-courses {
					// line-height: 1;
					// font-size: 14px;
					color: #fff;
					font-weight: 400;
				}
			}

			$colors-collection: #f5a727 #ff3a3a #08d981 #4b93fe #f5a727;
			$index: 1;
			@for $i from 1 through 30 {
				&:nth-child(#{$i}) {
					&:before {
						background-color: nth($colors-collection, $index);
					}
				}
				$index: $index + 1;
				@if ($index > 5) {
					$index: 1;
				}
			}

			&:hover {
				@include box-shadow(none);

				&:before {
					opacity: 0.8;
				}
			}
		}
	}

	//Rounded Corner layout
	&.rounded-courses-collection {
		position: relative;

		.scrollbar {
			border-top: 1px solid #e8e8e8;

			.handle {
				background-color: #202121;
			}
		}

		.collection-frame {
			margin: 0 -20px;
			padding-bottom: 20px;
		}

		.slidee {
			.collection-item {
				&:before {
					background-color: rgba(0, 0, 0, 0.5);
				}

				&:hover {
					&:before {
						background-color: rgba(var(--thim-body_primary_color_rgb), 0.9);
					}
				}
			}
		}
	}

	//Squared Corner layout
	&.squared-courses-collection {
		.collection-frame {
			height: auto;
			// padding-top: 15px;
			// padding-bottom: 50px;
			margin-top: 15px;
			margin-bottom: 50px;
			border-radius: $thim_border_radius;
			border: 1px solid #e0e0e0;
			overflow: hidden;
			position: relative;

			&.items-3 {
				width: calc(100% - 620px);
				margin-left: 310px;
			}

			&.items-2 {
				width: calc(100% - 930px);
				margin-left: 465px;
			}

			&.items-1 {
				width: calc(100% - 1240px);
				margin-left: 620px;
			}

			.slidee {
				height: auto;
				margin: 0 auto;

				.collection-item {
					position: relative;
					width: 310px;
					margin: 0;
					overflow: visible;
					@include rounded(0);
					@include box-shadow(none);
					border-width: 0 0 0 1px;
					&:before {
						content: none;
					}

					// &:nth-child(2n + 1) .collection-wrapper {
					// 	background: #f6f6f6;
					// }

					.collection-wrapper {
						position: relative;
						background-color: #fff;
						padding-top: 20px;
						padding-bottom: 20px;
						//z-index: 10;

						.name {
							font-size: 16px;
							margin-bottom: 8px;
						}

						.number-courses {
							text-transform: capitalize;
						}
					}

					.thumbnail {
						position: relative;

						&:before {
							@include transition(all 0.3s);
							content: "";
							position: absolute;
							width: 100%;
							height: 100%;
							background: #000;
							@include opacity(0);
						}

						.collection-link {
							position: absolute;
							display: block;
							width: 100%;
							height: 100%;
							z-index: 999;
						}

						.wrapper {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							@include flexbox();
							flex-direction: column;
							justify-content: center;
							align-items: center;
							color: #fff;
							opacity: 0;
							@include transition(all 0.5s);

							& > span {
								font-size: 44px;
								line-height: 1;
								margin-bottom: 18px;
							}

							.view {
								line-height: 1;
								font-size: 16px;
								text-transform: uppercase;
								letter-spacing: 0.3px;
								font-weight: 400;
							}
						}
					}

					&:hover {
						@include scale(1.09, 1.06);
						z-index: 2;
						@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));

						.thumbnail {
							&:before {
								@include opacity(0.55);
							}

							.wrapper {
								@include opacity(1);
							}
						}

						.collection-wrapper {
							background-color: #fff;
						}
					}
				}
			}

			.controls {
				.page-controls {
					background-color: #fff;
					line-height: 40px;
					height: 40px;
					width: 40px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 24px;
					cursor: pointer;
					position: absolute;
					top: 50%;
					transform: translateY(calc(-50% - 50px));
					right: 0;
					border-radius: $thim_button_border_radius;
					&.disabled {
						cursor: not-allowed;
					}
				}

				.prev {
					right: auto;
					left: 0;
				}
			}
		}
	}
}

.rounded-view-all-button {
	margin-top: 37px;
	text-align: center;
	position: relative;

	&:before {
		content: "";
		top: 50%;
		left: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid $border-color;
		z-index: -1;
		position: absolute;
	}

	a {
		display: inline-block;
		color: #fff;
		padding: 12px 44px;
		@include rounded(40px);
		line-height: 24px;
		font-size: 16px;
		font-weight: 500;
		text-transform: uppercase;
		@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));

		&:hover {
			color: #fff;
			@include box-shadow(4.5px 5.4px 10px 0 rgba(0, 0, 0, 0.06));
		}
	}
}

#lp-archive-courses {
	.thim-courses-collection {
		max-width: 100%;

		.collection-frame-none_carousel {
			max-width: 100%;
		}

		.slidee {
			height: auto;
			padding: 0;

			.collection-item {
				height: 177px;
				width: calc(20% - 40px);
				margin: 20px;
			}
		}
	}
}

// Squared corner 2 layout
.course-collection-squared-2 {
	margin-left: -15px;
	margin-right: -15px;
	text-align: center;

	// Section title
	.description {
		// font-size: 15px;
		// line-height: 25px;
		font-weight: 500;
		margin-bottom: 16px;
	}

	.title {
		text-transform: uppercase;
		font-size: 36px;
		line-height: 46px;
		margin-bottom: 60px;
		font-weight: 500;
	}

	// Section content
	.section-content-wrapper {
		ul.wrap-items {
			list-style: none;
			margin: 0 -15px 60px;
			@media (max-width: 676px) {
				margin: 0 -15px 20px;
			}
		}

		.collection-wrapper {
			padding: 20px;
		}

		.name {
			font-size: 16px;
			text-transform: capitalize;
			line-height: 25px;
			font-weight: 500;
			margin-bottom: 8px;
			display: inline-block;
			@include transition(all 0.5s);
		}

		.number-courses {
			// font-size: 15px;
			// line-height: 25px;
			font-weight: 400;
			color: $thim_font_body_color;
		}

		.collection-item {
			float: left;

			&.col-md-5c {
				width: 20%;
			}

			img {
				width: 100%;
			}

			.collection-content {
				@include box-shadow(0 15px 35px 0 rgba(0, 29, 44, 0.1));
				@include transition(box-shadow 0.5s);
				border-radius: $thim_border_radius;
				overflow: hidden;
				&:hover {
					@include box-shadow(4.5px 5.4px 10px 0 rgba(0, 0, 0, 0.06));
				}
			}
		}

		.thumbnail {
			position: relative;

			.img-link {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}
	}

	//Button view all
	.view-all-collections {
		a {
			color: #fff;
			display: inline-block;
			@include button_typo();
			padding: 0 44px;
			@include rounded(56px);
			@include transition(all 0.5s);
			background-size: 220% 100%;
			@include transition(all 0.4s ease-in-out);

			&:hover {
				background-position: right center;
			}

			&:after {
				content: "\f3d3";
				font-family: Ionicons;
				font-size: 18px;
				color: #fefefe;
				margin-left: 20px;
			}
		}
	}
}

//layout kit
.thim-courses-collection-wrapper-kit {
	.thim-collection-info-kit {
		.title {
			font-size: 36px;
			font-weight: 500;
			line-height: 1.25;
			text-align: left;
			color: $thim_font_title_color;
			margin-bottom: 16px;
		}

		// .description {
		// 	font-size: 16px;
		// 	font-weight: 400;
		// 	line-height: 25px;
		// 	text-align: left;
		// 	color: #848484;
		// }
	}

	.thim-courses-collection {
		margin-top: 60px;

		.collection-slick {
			.slider-collection {
				margin: 0;

				.owl-item {
					.collection-item {
						height: 235px;
						position: relative;
						list-style: none;
						border-radius: 10px;
						box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, 0.05);
						overflow: hidden;

						.collection-wrapper {
							position: absolute;
							top: 30px;
							left: 30px;

							.name {
								text-transform: capitalize;
								font-size: 20px;
								font-weight: 500;
								line-height: 1.25;
								color: #ffffff;

								&:hover {
									color: #333333;
								}
							}

							.number-courses {
								font-size: 16px;
								font-weight: 400;
								line-height: 1.5;
								color: #ffffff;
							}
						}

						img:not(.background-collection) {
							position: absolute;
							bottom: 10px;
							right: 20px;
							width: auto;
							@include transition(all 0.5s);
						}

						.background-collection {
							position: absolute;
							height: 135px;
							right: 0;
							left: 40px;
							bottom: 0;
							width: auto;
						}

						&:hover {
							img:not(.background-collection) {
								transform: scale(1.2);
							}
						}
					}

					$colors-collection: #2ec4b6 #f5a727 #ff477e #4b93fe;
					$index: 1;
					@for $i from 1 through 30 {
						&:nth-of-type(#{$i}) {
							.collection-item {
								background-color: nth($colors-collection, $index);
							}
						}
						$index: $index + 1;
						@if ($index > 4) {
							$index: 1;
						}
					}

					// &:nth-of-type(2n + 2) {
					// 	.collection-item {
					// 		margin-top: 55px;
					// 	}
					// }
				}

				.owl-nav {
					div {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						font-size: 0;
						border-radius: 50%;
						&:hover {
							// @include background-vertical(#60d3c6, #47d899);
							// background-clip: text;
							// -webkit-background-clip: text;
							// -moz-background-clip: text;
							//background-clip: text;
							// -webkit-text-fill-color: transparent;
							color: $thim_body_primary_color;
						}

						&.disabled {
							display: none;
						}
					}

					.owl-prev {
						left: 0;
						&:before {
							content: "\f124";
							font-family: Ionicons;
							font-size: 16px;
							width: 40px;
							height: 40px;
							border-radius: 50%;
							background: #fff;
							display: block;
							text-align: center;
							padding: 10px;
						}
					}

					.owl-next {
						right: 0;

						&:before {
							content: "\f125";
							font-family: Ionicons;
							font-size: 16px;
							width: 40px;
							height: 40px;
							border-radius: 50%;
							background: #fff;
							display: block;
							text-align: center;
							padding: 10px;
						}
					}
				}
			}
		}
	}
}