@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-video-box {
	max-width: 1007px;
	margin: auto;
	.video {
		.video-box {
			position: relative;
			display: inline-block;
			width: 100%;
			height: 600px;
			margin-bottom: 30px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			overflow: hidden;
			border-radius: $thim_border_radius;
			.play-button {
				line-height: inherit;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				@include translate(-50%, -50%);
				a {
					// border: 4px solid rgba(255, 255, 255, 0.5);
					// height: 70px;
					// width: 70px;
					// line-height: 76px;
					// text-align: center;
					// display: block;
					// background: #e0e0e0;
					// color: #666666;
					// @include rounded(50%);
					i {
						font-size: 50px;
						color: #fff;
						// margin-left: 15px;
						// line-height: 27px;
						// &:before {
						// 	content: "";
						// 	display: inline-block;
						// 	font-family: "Ionicons";
						// 	font-style: normal;
						// 	font-weight: normal;
						// }
					}
				}
			}

			&:before {
				position: absolute;
				content: "";
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(45, 45, 45, 0.5);
			}
		}
	}
	hr {
		margin: 60px 0;
	}
	.content-box {
		margin-top: 30px;
		// padding-bottom: 23px;
		.share {
			line-height: 30px;
			list-style: none;
			max-width: 150px;
			text-align: center;
			.label {
				text-transform: uppercase;
				font-size: 16px;
				font-weight: 500;
				margin-bottom: 30px;
				display: block;
			}
			ul {
				list-style: none;
				margin-left: 0;
				padding: inherit;
				display: inline-block;
				li {
					// width: 45px;
					// height: 45px;
					// margin-top: 10px;
					margin-bottom: 34px;
					&:last-child {
						margin-bottom: 0;
					}
					a {
						// width: 45px;
						// height: 45px;
						// border: 1px solid #e6e6e6;
						// @include rounded(50%);
						text-align: center;
						// line-height: 44px;
						display: block;
						color: $thim_font_body_color;
						i {
							font-size: 20px;
						}
					}
				}
			}
		}
		.main-content {
			padding-left: 15px;
			padding-right: 45px;
			p {
				margin-bottom: 27px;
				// font-size: 18px;
				// font-weight: 300;
				// line-height: 30px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	&.layout-2 {
		.video {
			background-image: url(assets/images/macbook.png);
			height: 424px;
			background-repeat: no-repeat;
			background-position: center;
			display: inline-block;
			position: relative;
			width: 100%;
			.video-box {
				position: absolute;
				left: 501px;
				background-size: cover;
				width: 456px;
				height: 290px;
				top: 40%;
				@include translate(-50%, -50%);
				.play-button {
					a {
						height: 58px;
						width: 58px;
						line-height: 58px;
						border: 2px solid #fff;
						color: #fff;
						display: block;
						border-radius: 50%;
						.ion-play {
							font-size: 20px;
							margin-left: 3px;
							margin-top: 3px;
							position: absolute;
							top: 50%;
							left: 50%;
							@include translate(-50%, -50%);
							// &:before {
							// 	content: "\f04b";
							// 	font-family: FontAwesome;
							// }
						}
					}
				}
			}
		}
	}

	&.layout-3 {
		position: relative;
		@include clearfix();
		.video {
			@include clearfix();
			.video-box {
				float: right;
				margin-bottom: 0;
				display: block;
				width: 758px;
				height: 690px;
				&:before {
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 0 190px 190px;
					left: unset;
					top: unset;
					right: 0;
					bottom: 0;
					background-color: transparent;
				}
				.play-button {
					top: unset;
					left: unset;
					transform: none;
					right: 60px;
					bottom: 60px;
					// @include box-shadow(0 12px 15px 0 rgba(24, 23, 24, 0.15));
					@include rounded(50%);
					a {
						width: 70px;
						height: 70px;
						line-height: 70px;
						background: #f47e49;
						border: 0;
						color: #fff;
						display: inline-grid;
						align-items: center;
						border-radius: 50%;
						.ion-play {
							font-size: 37px;
							line-height: 85px;
							margin-left: 7px;
							// &:before {
							// 	content: "\f215";
							// }
						}
						&:hover {
							background: darken(#f47e49, 20%);
							color: #fff;
						}
					}
				}
			}
		}

		.video {
			position: relative;
			z-index: 2;
		}
		&:after {
			content: "";
			height: 238px;
			position: absolute;
			left: 0;
			right: 0;
			display: block;
			bottom: 0;
			z-index: 1;
		}
		&.no-border-radius-bottom-right .video .video-box {
			border-radius: $thim_border_radius $thim_border_radius $thim_border_radius 0;
		}
	}
}