@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-icon-box {
	&.layout-1 {
		.icon-box-wrapper {
			max-width: 431px;
			margin: 0 auto;
			text-align: center;
			padding: 30px;
			border-radius: $thim_border_radius;
			@include box-shadow(0 4px 25px 0 rgba(0, 0, 0, 0.06));
			@include transition();
			border: 1px solid $border-color;
			&:hover {
				@include box-shadow(0 4px 25px 0 rgba(0, 0, 0, 0.12));
			}

			.box-icon {
				margin-bottom: 30px;
			}

			.box-content {
				.title {
					font-size: 20px;
					font-weight: 500;
					text-transform: capitalize;
					line-height: normal;
					margin-bottom: 12px;
				}

				.description {
					// font-size: 16px;
					// line-height: 24px;
					// letter-spacing: 0.3px;
					// margin-bottom: 13px;
				}
			}
		}
	}

	&.layout-2 {
		.icon-box-wrapper {
			position: relative;
			width: 168px;
			height: 168px;
			border: solid 1px #ecd06f;
			color: #ecd06f;
			@include rounded(50%);
			margin: 15px;
			text-align: center;
			@include transition(box-shadow 0.2s);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:hover {
				&:after {
					@include scale(0.9, 0.9);
					@include opacity(0.5);
				}
			}

			&:after {
				content: "";
				pointer-events: none;
				position: absolute;
				top: 0;
				left: 0;
				box-shadow: 0 0 0 1px;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				transition:
					transform 0.2s,
					opacity 0.2s;
			}

			.box-icon {
				font-size: 50px;
				margin-bottom: 12px;
			}

			.title {
				font-size: 16px;
				// letter-spacing: 0.3px;
				line-height: 1.5;
				font-weight: 400;
			}

			.box-content {
				padding: 0 11px;
			}
		}
	}

	&.layout-3 {
		&.icon-margin-bottom-30 {
			.icon-box-wrapper {
				margin-bottom: 30px;
			}
		}
		.icon-box-wrapper {
			margin-bottom: 60px;
			@include clearfix();
			.box-icon {
				font-size: 62px;
				width: 52px;
				float: left;
				line-height: 62px;
				text-align: center;

				.icon-ionicons {
					position: relative;
					top: -2px;
				}
			}

			.box-content {
				@include calc("width", "100% - 52px");
				float: left;
				padding: 0 30px;

				.title {
					font-size: 20px;
					line-height: 26px;
					font-weight: 500;
					margin-bottom: 12px;
					text-transform: capitalize;
					@include transition(all 0.5s);
				}

				.description {
					font-size: 16px;
					font-weight: 400;
					line-height: 25px;
				}
			}
		}

		&.style_kit {
			.icon-box-wrapper {
				.box-icon {
					width: 64px;
					height: 64px;
					line-height: 64px;
					border-radius: 50%;
					position: relative;

					.image-upload {
						vertical-align: inherit;
						position: absolute;
						top: 50%;
						left: 50%;
						@include translate(-50%, -50%);
					}
				}

				.box-content {
					@include calc("width", "100% - 89px");
					padding-left: 24px;
					padding-right: 0;
				}
			}
			&.box-info-border {
				.icon-box-wrapper {
					border: 1px solid #e0e0e0;
					padding: 30px;
					border-radius: 12px;
					transition: all 0.3s ease-in-out;
					.box-content {
						@include calc("width", "100% - 64px");
						padding-left: 30px;
					}
					&:hover {
						box-shadow: 0px 4px 30px 0px #1c1c1b33;
						border: 0;
					}
				}
			}
		}
		&.no-margin-bottom {
			.icon-box-wrapper {
				margin-bottom: 0;
			}
		}
	}

	&.layout-4 {
		text-align: center;
		@include clearfix();

		.box-icon {
			width: 86px;
			height: 86px;
			margin: auto;
			line-height: 100px;
			font-size: 50px;
			border: 1px solid;
			background: rgba(255, 255, 255, 0.3);
			@include rounded(50%);
		}

		.title {
			font-size: 16px;
			line-height: 26px;
			// letter-spacing: 0.3px;
			font-weight: 500;
			margin: 14px auto;
		}

		&:hover {
			.box-icon {
				border-color: transparent;
				color: #fff;
			}
		}
	}

	&.layout-5 {
		text-align: center;
		@include clearfix();

		.box-icon {
			width: 150px;
			height: 150px;
			margin: auto;
			line-height: 1;
			font-size: 50px;
			position: relative;
			text-align: center;
			padding: 52px;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: 2px solid;
				@include rounded(50%);
				@include transition();
			}
		}

		.title {
			font-size: 20px;
			line-height: 24px;
			// letter-spacing: 0.4px;
			font-weight: 500;
			margin-top: 30px;
			margin-bottom: 16px;
		}

		.description {
			font-size: 16px;
			line-height: 26px;
			// letter-spacing: 0.4px;
		}

		&:hover {
			.box-icon {
				&:before {
					border: 6px solid;
				}
			}
		}
	}

	&.layout-6 {
		text-align: center;
		max-width: 120px;
		margin: 0 auto;
		padding: 11px 0;

		&:hover {
			.box-icon {
				@include scale(1.1, 1.1);
			}
		}

		&.custom-style {
			.box-icon {
				margin-bottom: 0;
			}
		}

		.box-icon {
			font-size: 72px;
			line-height: 64px;
			@include transition();
			margin-bottom: 8px;
		}

		.title {
			font-size: 16px;
			line-height: 22px;
			letter-spacing: 0.3px;
			font-weight: 400;
		}

		.description {
			font-size: 14px;
		}
	}
}

// Color in row has background or overlay color.
.vc_row-has-fill,
.vc_col-has-fill {
	.thim-sc-icon-box {
		&.layout-2 {
			.title {
				color: #fff;
			}
		}

		&.layout-3 {
			.icon-box-wrapper {
				.title {
					color: #fff;
				}

				.description {
					color: #bcbcbc;
				}
			}
		}

		&.layout-4 {
			.box-icon {
				border: 1px solid rgba(255, 255, 255, 1);
				background: rgba(255, 255, 255, 0.3);
				color: #fff;
			}

			&:hover .box-icon {
				border-color: transparent;
			}

			.title {
				color: #fff;
			}
		}

		&.layout-5 {
			.box-icon {
				color: $thim_font_body_color;
			}

			.title {
				color: $thim_font_title_color;
			}

			.description {
				color: $thim_font_body_color;
				a {
					color: $thim_font_body_color;

					&:hover {
						color: $thim_body_primary_color;
					}
				}
			}
		}
		&.layout-6 {
			.box-icon {
				color: #fff;
			}

			.title {
				color: #fff;
			}

			.description {
				color: #fff;
				a {
					color: #fff;

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