@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-new-post {
	&.layout-1 {
		display: table;
		width: 100%;

		.thumbnail {
			width: 50%;
			display: table-cell;
			vertical-align: middle;
			position: relative;

			img:first-child {
				border-radius: 50%;
			}

			.image-upload {
				position: absolute;
			}
		}

		.content {
			display: table-cell;
			vertical-align: middle;

			.title {
				margin-bottom: 25px;

				a {
					font-size: 36px;
					line-height: 1.25;
					font-weight: 500;
					margin-bottom: 20px;
					color: $thim_font_title_color;
				}
			}

			.description {
				font-size: 15px;
				line-height: 25px;
				font-weight: 400;
				color: rgba($color: #000000, $alpha: 0.6);
				margin-bottom: 0;
			}

			a.view_more {
				height: 50px;
				border: solid 1px $thim_body_primary_color;
				font-size: 15px;
				line-height: 25px;
				font-weight: 500;
				text-align: center;
				padding: 5px 18px;
				text-transform: uppercase;
				display: block;
				margin-top: 30px;
				color: $thim_body_primary_color;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				transition: 0.3s;
				border-radius: $thim_button_border_radius;
				position: relative;
				&:hover {
					color: #fff;
					background: $thim_body_primary_second_color;
				}
				&::after {
					content: "\f125";
					font-family: ionicons;
					font-size: 14px;
					line-height: 1;
					margin-left: 13px;
				}
			}
		}

		&.layout-left {
			.thumbnail {
				width: 40%;
				text-align: right;
				// padding-right: 30px;

				.image-upload {
					left: 30px;
					bottom: 0;
				}
			}

			.content {
				padding: 0 60px;
				text-align: left;

				.title {
					text-align: left;
				}

				.description {
					text-align: left;
				}
			}
		}

		&.layout-right {
			.thumbnail {
				text-align: left;
				// padding-left: 34px;
				width: 40%;
				.image-upload {
					right: 30px;
					bottom: 0;
				}
			}

			.content {
				text-align: right;
				padding: 0 60px;

				.title {
					text-align: right;
				}

				.description {
					text-align: right;
				}

				a.view_more {
					float: right;
					// margin-top: 5px;
				}
			}
		}
	}

	&.layout-2 {
		.item-post {
			border: 1px solid #e0e0e0;
			border-radius: $thim_border_radius;
			overflow: hidden;
			background: #fff;
		}
		.content {
			text-align: center;
			// margin-bottom: 30px;
			padding: 30px;
			h4.title {
				padding: 0;
				margin: 0 0 16px;

				a {
					font-size: 24px;
					line-height: 34px;
					font-weight: 500;
					text-align: center;
					color: #000000;
				}
			}

			p.description {
				font-size: 15px;
				line-height: 25px;
				font-weight: 400;
				text-align: center;
				color: rgba($color: #000000, $alpha: 0.6);
			}

			a.view_more {
				color: $thim_body_primary_color;
				border: 1px solid $thim_body_primary_color;
				font-size: 15px;
				line-height: 26px;
				font-weight: 500;
				text-align: center;
				padding: 10px 50px;
				text-transform: uppercase;
				margin: 20px auto 0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: $thim_button_border_radius;
				position: relative;
				&:hover {
					color: #fff;
					background: $thim_body_primary_second_color;
				}
				&::after {
					content: "\f125";
					font-family: ionicons;
					font-size: 14px;
					line-height: 1;
					margin-left: 13px;
				}
				@media (max-width: 880px) {
					padding: 10px 25px;
				}
			}
		}
	}

	&.layout-kit {
		.wrapper {
			border-radius: 12px;
			// box-shadow: -7.5px 13px 35px 0 rgba(0, 0, 0, 0.05);
			background-color: #ffffff;
			margin-top: 0;
			border: 1px solid #e0e0e0;
			@include transition(all 0.3s);

			.thumbnail {
				img {
					border-top-right-radius: 10px;
					border-top-left-radius: 10px;
				}
			}

			.content {
				padding: 20px;

				.title {
					padding: 0;
					font-size: 16px;
					font-weight: 500;
					text-align: left;
					line-height: 1.25;
					color: $thim_font_title_color;
					margin: 0 0 8px;
				}

				.info {
					display: flex;
					justify-content: space-between;

					.author {
						i {
							font-size: 14px;
							font-weight: 400;
							text-align: left;
							color: #84cdf0;
							margin-right: 5px;
						}

						span {
							font-size: 16px;
							font-weight: 500;
							line-height: 2;
							text-align: left;
							color: $thim_font_body_color;
							text-transform: capitalize;
						}
					}

					.comment {
						font-size: 16px;
						line-height: 2;
						text-align: left;
						color: $thim_font_body_color;
						text-transform: capitalize;
						i {
							-webkit-transform: rotateY(180deg);
							-moz-transform: rotateY(180deg);
							-o-transform: rotateY(180deg);
							-ms-transform: rotateY(180deg);
							transform: rotateY(180deg);
							margin-right: 5px;
							font-size: 14px;
							text-align: left;
							color: #ffa0a0;
						}
					}
				}
			}

			&:hover {
				// margin-top: 30px;
				box-shadow: 0px 4px 30px 0px #1c1c1b33;
			}
		}
		&.hidden-icon {
			.wrapper .content .info i {
				display: none !important;
			}
		}
		&.hidden-comment {
			.wrapper .content .info .comment {
				display: none !important;
			}
		}
	}
}