/* ==========================================================================
   Blog List Metro styles
   ========================================================================== */

.qodef-blog {
	
	&.qodef-item-layout--metro {
		margin: 0;
		
		.qodef-blog-item {
			
			.qodef-e-media-image {
				
				&.qodef--background {
					margin-bottom: 0;
				}
			}
			
			.qodef-e-content {
				@include qodefAbsoluteLayout();
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
				padding: 20px 40px 35px;
				background-color: rgba($heading-color, .12);
				
				a {
					position: relative;
					z-index: 3;
				}
			}
			
			.qodef-e-title {
				margin: 0;
				color: #fff;
				
				a {
					color: inherit;
					
					&:hover {
						color: $heading-color;
					}
				}
			}
			
			.qodef-e-info {
				
				> * {
					color: #fff;
				}
				
				&.qodef-info--top {
					margin-bottom: 0;
				}
			}
			
			.qodef-e-post-link {
				@include qodefAbsoluteLayout();
				z-index: 2;
			}
			
			%post-format-icon-style {
				position: absolute;
				top: calc(50% - 36px);
				left: calc(50% - 36px);
				content: '\45';
				font-family: 'ElegantIcons';
				font-size: 72px;
				line-height: 1;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;
				color: #fff;
				speak: none;
				-webkit-font-smoothing: antialiased;
				z-index: 1;
				border: 3px solid #fff;
			}
			
			&.format-gallery {
				
				.qodef-e-media-image {
					
					&:after {
						@extend %post-format-icon-style;
						content: '\e006';
					}
				}
			}
			
			&.format-video {
				
				.qodef-e-media-image {
					
					&:after {
						@extend %post-format-icon-style;
						content: '\45';
					}
				}
			}
			
			&.format-audio {
				
				.qodef-e-media-image {
					
					&:after {
						@extend %post-format-icon-style;
						content: '\e027';
					}
				}
			}
			
			&.format-link {
				
				.qodef-e-link {
					padding: 76px 40px 31px;
					background-color: $additional-background-color;
				}
				
				.qodef-e-mark {
					position: absolute;
					top: 40px;
					left: 50%;
					font-size: 40px;
					line-height: 1;
					-webkit-text-stroke: 1px $heading-color;
					-webkit-text-fill-color: transparent;
					transform: translateX(-50%) rotate(90deg);
				}
				
				.qodef-e-link-text {
					margin: 34px 0 0;
				}
				
				.qodef-e-link-url {
					@include qodefAbsoluteLayout();
				}
			}
			
			&.format-quote {
				
				.qodef-e-quote {
					padding: 76px 40px 30px;
					background-color: $additional-background-color;
				}
				
				.qodef-e-mark {
					position: absolute;
					top: 38px;
					left: 50%;
					font-size: 40px;
					line-height: 1;
					-webkit-text-stroke: 1px $heading-color;
					-webkit-text-fill-color: transparent;
					transform: translateX(-50%);
				}
				
				.qodef-e-quote-text {
					margin: 29px 0 0;
				}
				
				.qodef-e-quote-author {
					margin: 20px 0 4px;
				}
				
				.qodef-e-quote-url {
					@include qodefAbsoluteLayout();
				}
			}
		}
		
		&.qodef-items--fixed {
			
			.qodef-blog-item {
				
				&.format-link {
					
					.qodef-e-link {
						display: flex;
						justify-content: center;
						flex-direction: column;
						height: 100%;
						padding-top: 40px;
						padding-bottom: 40px;
					}
				}
				
				&.format-quote {
					
					.qodef-e-quote {
						display: flex;
						justify-content: center;
						flex-direction: column;
						height: 100%;
						padding-top: 40px;
						padding-bottom: 40px;
					}
				}
			}
		}
	}
}