/* ==========================================================================
   Interactive Link Showcase shortcode styles
   ========================================================================== */

.qodef-interactive-link-showcase {
	@include qodefRelativeLayout();
	height: 100vh;
	visibility: hidden;

	.admin-bar & {
		height: calc(100vh - 32px);
	}

	.qodef-m-image {
		@include qodefAbsoluteLayout();
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0;
		transform: translateY(-15%) rotate(-9deg);
		transition: opacity .4s ease-out, transform .4s ease-out;

		&.qodef--active {
			z-index: 5;
			opacity: 1;
			transform: translateY(0) rotate(0);
		}

		img {
			opacity: 1;
		}
	}

	.qodef-m-items {
		display: flex;
		align-items: center;
		z-index: 10;
		counter-reset: counter;
	}

	.qodef-m-item {
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: auto;
		padding: 0 0 0 90px;
		margin: 0 0 8px;
		@include qodefHeadingStyle(h2, false);
		transition: $color-transition, $background-color-transition;

		&:before {
			@include qodefMenuNumbersStyle();
			color: currentColor;
		}

		.qodef-e-title {
			position: relative;
			display: block;
			z-index: 2;
		}

		&.qodef--active {
			color: #fff;

			&:before {
				color: currentColor;
			}
		}
	}

	&.qodef--init {
		visibility: visible;
	}

	&.qodef-skin--light {

		.qodef-m-item {
			color: #fff;

			&.qodef--active {
				color: var(--qode-main-color);
				background-color: #fff;
			}
		}
	}
}