/* ==========================================================================
   Portfolio List shortcode variation styles
   ========================================================================== */

.qodef-portfolio-list {

	&.qodef-item-layout--info-on-hover {
		margin: 0;

		article {

			&:hover {

				.qodef-e-content {
					opacity: 1;
				}

				.qodef-e-title {
					transform: translateY(0);
					opacity: 1;
				}
			}

			.qodef-e-media-image {

				&.qodef--background {
					margin-bottom: 0;
				}
			}

			.qodef-e-content {
				@include qodefAbsoluteLayout();
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 2%;
				background-color: rgba($additional-background-color, .85);
				opacity: 0;
				transition: opacity .3s ease-out;

				a {
					position: relative;
					z-index: 3;
				}
			}

			.qodef-e-title {
				color: $heading-color;
				transform: translateY(20px);
				opacity: 0;
				transition: opacity .4s ease-out, transform .6s ease-out;

				a {
					color: inherit;
				}
			}

			.qodef-e-info {

				> * {
					color: #fff;
				}

				a {

					&:hover {
						color: var(--qode-main-color);
					}
				}
			}

			.qodef-e-post-link {
				z-index: 2;
			}
		}
	}
}
