.tm-blog-widget {
	&.style-list {
		.post-item {
			@extend %clearfix;

			+ .post-item {
				margin-top: 15px;
				border-top: 1px solid #f0f2f7;
				padding-top: 20px;
			}
		}

		.post-wrapper {
			display: flex;
		}

		.post-thumbnail {
			flex-shrink: 0;
			margin-right: 20px;
			width: 80px;
			height: 80px;
			border-radius: 5px;
			overflow: hidden;
			position: relative;

			&:hover {
				.post-overlay {
					visibility: visible;
					opacity: 1;
				}
			}

			img {
				width: 100%;
			}
		}

		.post-info {
			flex-grow: 1;
		}

		.post-categories {
			margin-bottom: 6px;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 500;
			font-size: 14px;

			a {
				color: inherit;
			}
		}

		.post-title {
			font-size: 18px;
			line-height: 1.78;
			margin-bottom: 0;

			a {
				color: #696969;
			}
		}

		.post-date {
			display: block;
			font-size: 14px;
			margin-top: 5px;
			position: relative;
			padding-left: 25px;

			&:before {
				@extend %FontAwesomeRegular;
				content: '\f073';
				position: absolute;
				top: 50%;
				left: 0;
				transform: translate(0, -50%);
			}
		}

		.post-overlay {
			@extend %transit;
			position: absolute;
			top: 0;
			left: 0;
			visibility: hidden;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
			opacity: 0;
		}

		.post-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #fff;
			font-weight: 500;
			font-size: 24px;
		}
	}

	&.style-simple-list {
		.post-item {
			@extend %clearfix;

			+ .post-item {
				margin-top: 22px;
			}
		}

		.post-wrapper {
			display: flex;
		}

		.post-thumbnail {
			flex-shrink: 0;
			margin-right: 20px;
			width: 80px;
			height: 80px;
			border-radius: 5px;
			overflow: hidden;
			position: relative;

			&:hover {
				.post-overlay {
					visibility: visible;
					opacity: 1;
				}
			}

			img {
				width: 100%;
			}
		}

		.post-info {
			flex-grow: 1;
			padding-left: 30px;
		}

		.post-categories {
			margin-bottom: 6px;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 500;
			font-size: 14px;

			a {
				color: inherit;
			}
		}

		.post-date {
			display: block;
			font-size: 14px;
			margin-top: 5px;
			position: relative;
			padding-left: 25px;

			&:before {
				@extend %FontAwesomeRegular;
				content: '\f073';
				position: absolute;
				top: 50%;
				left: 0;
				transform: translate(0, -50%);
			}
		}

		.post-overlay {
			@extend %transit;
			position: absolute;
			top: 0;
			left: 0;
			visibility: hidden;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
			opacity: 0;
		}

		.post-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #fff;
			font-weight: 500;
			font-size: 24px;
		}

		.post-title {
			margin-bottom: 0;

			a {
				position: relative;
				display: inline-block;
				font-size: 15px;
				font-weight: 600;

				&:before,
				&:after {
					@extend %FontAwesomeSolid;
					@extend %transit;
					content: '\f30b';
					position: absolute;
					top: 4px;
					left: -30px;
				}

				&:before {
					opacity: 0;
					visibility: hidden;
					transform: translateX(-100%);
				}

				&:hover {
					&:before {
						opacity: 1;
						visibility: visible;
						transform: translateX(0);
					}

					&:after {
						opacity: 0;
						visibility: hidden;
						transform: translateX(100%);
					}
				}
			}
		}
	}
}