.minimog-tabs {
	--tab-title-spacing: 64px;
	--tab-title-graphic-spacing: 15px;
	--tab-title-font-size: 18px;
	--tab-content-spacing: 40px;

	display: flex;

	&--horizontal {
		flex-direction: column;

		.minimog-tabs__header-wrap {
			margin-bottom: var(--tab-content-spacing);
		}
	}

	&--horizontal-reverse {
		flex-direction: column-reverse;

		.minimog-tabs__header-wrap {
			margin-top: var(--tab-content-spacing);
		}
	}

	&--image-hover-grayscale {
		.tab-title__image {
			filter: grayscale(100%);
			opacity: .3;
		}

		.tab-title {
			&:hover,
			&.active {
				.tab-title__image {
					filter: none;
					opacity: 1;
				}
			}
		}
	}

	&--image-hover-opacity {
		.tab-title__image {
			opacity: .23;
		}

		.tab-title {
			&:hover,
			&.active {
				.tab-title__image {
					opacity: 1;
				}
			}
		}
	}

	&--image-hover-faded {
		.tab-title {
			&:hover,
			&.active {
				.tab-title__image {
					opacity: .2;
				}
			}
		}
	}
}

.minimog-tabs__header-wrap {
	position: relative;
	display: var(--minimog-tabs-heading-display, block);
	justify-content: space-between;
	align-items: center;

	&:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1px;
		height: 1px;
		background: #eeeee0;
	}
}

.minimog-tabs__header-inner {
	position: relative;
	overflow-x: auto;
	padding: 0 0 2px;

	.handheld & {
		overflow-x: scroll;
	}
}

.minimog-tabs__header {
	display: inline-flex;

	.tab-title {
		position: relative;
		cursor: pointer;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		padding: 8px 0 10px;

		&:after {
			transition: width .25s ease-in-out;
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 2px;
			background: $heading-color;
			z-index: 1;
		}

		+ .tab-title {
			margin-left: var(--tab-title-spacing);
		}

		span {
			display: block;
		}

		&--no-text {
			justify-content: center;
		}

		&__text {
			@extend %NormalTransition;
			font-size: var(--tab-title-font-size);
			font-family: $heading-font-family;
			font-weight: $heading-font-weight-secondary;
			line-height: 26px;
			color: #b3b3b3;
		}

		&__image {
			@extend %NormalTransition;
			line-height: 1;

			// img {
			// 	width: 50px;
			// }
		}

		&:hover,
		&.active {
			.tab-title__text {
				color: $heading-color;
			}
		}

		&.active {
			&:after {
				width: 100%;
			}
		}
	}
}

.tab-title__image {
	width: var(--image-width, auto);
	margin: 0 var(--image-space, 12px) 0 0;
}

.single-product {
	&.page-blocks-style-border-block-02,
	&.page-blocks-style-border-block-03 {
		.minimog-tabs {
			--tab-title-spacing: 55px;
			--tab-title-font-size: 24px;
			--tab-content-spacing: 31px;
			padding: 40px 20px;
		}

		.minimog-tabs__header-wrap {
			margin-bottom: var(--tab-content-spacing);

			&:after {
				display: none;
			}
		}

		.minimog-tabs__header-inner {
			text-align: center;
		}

		.tab-title {
			&__text {
				font-size: var(--tab-title-font-size);
				color: $heading_color;
				line-height: 1.15;
				font-weight: 600;
			}

			&.active, &:hover {
				.tab-title__text {
					color: $primary-color;
				}
			}

			&:after {
				height: 2px;
				bottom: 0;
				background-color: $primary-color;

				@include media-breakpoint-down(sm) {
					bottom: 5px;
				}
			}
		}
	}
}

.minimog-tabs--title-graphic-position-top {
	.tab-title {
		flex-direction: column;
	}

	.tab-title__graphic {
		margin-bottom: var(--tab-title-graphic-spacing);
	}
}

.minimog-tabs--title-graphic-position-bottom {
	.tab-title {
		flex-direction: column-reverse;
	}

	.tab-title__graphic {
		margin-top: var(--tab-title-graphic-spacing);
	}
}

.minimog-tabs--title-graphic-position-left {
	.tab-title__graphic {
		margin-right: var(--tab-title-graphic-spacing);
	}
}

.minimog-tabs--title-graphic-position-right {
	.tab-title {
		flex-direction: row-reverse;
	}

	.tab-title__graphic {
		margin-left: var(--tab-title-graphic-spacing);
	}
}

.minimog-tabs--title-graphic-align-left {
	.tab-title {
		align-items: flex-start;
	}
}

.minimog-tabs--title-graphic-align-center {
	.tab-title {
		align-items: center;
	}
}

.minimog-tabs--title-graphic-align-right {
	.tab-title {
		align-items: flex-end;
	}
}

.minimog-tabs__content {
	position: relative;
	//transition: height .3s cubic-bezier(.2, .35, .25, 1);
	transition: height .3s linear;

	/*
	// This can cropped tooltip.
	overflow: hidden;
	*/

	.switching & {
		overflow: hidden;
	}

	.tab-content {
		position: absolute;
		top: 0;
		// Make tab content out of viewport to make image lazy working.
		left: -9999px;
		width: 100%;
		opacity: 0;
		transition: opacity .2s;
		// Fix collapsing margins. Use flex instead of overflow: auto to avoid scrollbar.
		display: flex;

		&.active {
			opacity: 1;
			left: 0;
			z-index: 2;
		}

		&:not(.active) {
			pointer-events: none;

			> * {
				pointer-events: none !important;
			}
		}
	}

	.tab-content-wrapper {
		margin: 0 auto;
		width: 100%;
	}
}

.minimog-tabs:not(.initialized) {
	.tab-content.active {
		position: static;
	}
}

.minimog-tabs__icon {
	font-size: 55px;
	color: $primary-color;
	margin-bottom: 52px;
}

/**
 * Custom style here.
 */
.minimog-tabs--nav-type-dropdown {
	.minimog-tabs__header-inner {
		overflow: visible !important;
	}

	.minimog-nice-select-wrap {
		.minimog-nice-select {
			top: 100%;
		}

		&.focused {
			.minimog-nice-select {
				top: calc(100% - 5px);
			}
		}
	}
}

.minimog-tabs--nav-style-dropdown {
	.minimog-tabs__header-wrap {
		&:after {
			display: none;
		}
	}

	.minimog-tabs__header-inner {
		padding: 0;
	}
}

.minimog-tab-header__dropdown-section {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 42px;
	line-height: 1.3;

	.intro-text {
		color: #959595;
		margin: 0 20px 2px 0;
	}

	select,
	.minimog-nice-select-wrap {
		width: 245px;
		max-width: 100%;
	}

	select,
	.minimog-nice-select-current {
		font-size: inherit;
		color: #000;
		border: 0;
		padding: 0 15px 0 0;
		border-radius: 0;
		border-bottom: 2px solid currentColor;
		background-color: transparent !important;
		background-position: 100% 50%;
		background-size: 14px auto;
	}
}

.minimog-tabs--nav-style-01 {
	--tab-title-spacing: 55px;
	--tab-content-spacing: 60px;
	--tab-title-font-size: 18px;

	.minimog-tabs__header-wrap {
		&:after {
			display: none;
		}

		.tab-title {
			padding: 3px 0;

			.tab-title__text {
				line-height: 26px;
				font-weight: $heading-font-weight-secondary;
			}
		}
	}
}

.minimog-tabs--nav-style-02 {
	--tab-title-spacing: 55px;
	--tab-content-spacing: 60px;
	--tab-title-font-size: 36px;

	.minimog-tabs__header-wrap {
		&:after {
			display: none;
		}

		.tab-title {
			padding: 3px 0;

			.tab-title__text {
				line-height: 1.32;
				font-weight: $heading-font-weight;
			}
		}
	}
}

.minimog-tabs--nav-style-03 {
	--tab-title-spacing: 40px;
	--tab-content-spacing: 30px;
	--tab-title-font-size: 15px;

	.minimog-tabs__header-wrap {
		&:after {
			display: none;
		}

		.tab-title {
			padding: 1px 0;

			.tab-title__text {
				line-height: 1.32;
				font-weight: $heading-font-weight;
			}

			&:after {
				bottom: 0;
				height: 1px;
				background-color: $primary-color;
			}

			&:hover,
			&.active {
				.tab-title__text {
					color: $primary-color;
				}
			}
		}
	}

	.minimog-tabs__header-inner {
		padding: 0;
	}
}

.minimog-tabs--nav-style-04 {
	--tab-title-spacing: 0;
	--tab-title-font-size: 15px;
	--tab-content-spacing: 10px;

	.minimog-tabs__header-wrap {
		text-align: center;

		&:after {
			display: none;
		}
	}

	.minimog-tabs__header {
		display: flex;
		margin: 0 1px 0 0;

		.tab-title {
			flex: 1 1;
		}
	}

	.tab-title {
		@extend %NormalTransition;
		min-width: 202px;
		flex-direction: column;
		border: 1px solid #EDEDED;
		padding: 10px 20px 10px;
		margin-right: -1px;
		justify-content: center;
		position: relative;
		z-index: 0;

		&:before {
			@extend %NormalTransition;
			content: '';
			position: absolute;
			top: -1px;
			right: 0;
			bottom: -1px;
			left: 0;
			background: rgba(#{$primary-rga-color}, .15);
			opacity: 0;
			z-index: -1;
		}

		&:after {
			bottom: -1px;
			height: 2px;
			background-color: $primary-color;
		}

		.tab-title__text {
			color: $heading-color;
			line-height: 1.32;
			font-weight: $heading-font-weight;
		}

		&:hover,
		&.active {
			.tab-title__text {
				color: $primary-color;
			}
		}

		&.active {
			border-color: transparent;

			&:before {
				opacity: 1;
			}
		}
	}

	.tab-title__image {
		max-width: 36px;
		height: 36px;
		margin: 0 0 var(--image-space, 11px);
	}
}

@include elementor-breakpoint-down(tablet) {
	.minimog-tabs {
		--tab-title-spacing: 40px;
		--tab-content-spacing: 40px;
	}

	.minimog-tab-header__dropdown-section .intro-text {
		margin-right: 10px;
	}

	.minimog-tabs--nav-style-02 {
		--tab-title-font-size: 24px;
	}

	// Override Scrollbar height
	.minimog-tabs {
		.ps__rail-x.ps--clicking .ps__thumb-x,
		.ps__rail-x:focus > .ps__thumb-x,
		.ps__rail-x:hover > .ps__thumb-x {
			height: 6px;
		}
	}
}

@include media-breakpoint-down(lg) {
	.single-product {
		&.page-blocks-style-border-block-02,
		&.page-blocks-style-border-block-03 {
			.minimog-tabs {
				--tab-title-spacing: 55px;
				--tab-title-font-size: 24px;
				--tab-content-spacing: 31px;
				padding: 40px 20px;
			}

			.tab-title {
				&__text {
					font-size: 20px !important;
				}
			}
		}

		&.page-blocks-style-border-block-02 {
			.minimog-tabs {
				@include media-breakpoint-up(lg) {
					padding: 52px 80px 57px 80px !important;
				}
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.minimog-tabs--nav-style-04 {
		.tab-title {
			min-width: 150px;
			margin-left: 0 !important;
		}
	}
}

.elementor-editor-active {
	.minimog-tabs {
		.minimog-tabs__content {
			height: auto !important;
		}

		.tab-content {
			position: static !important;
			top: auto;
			left: auto;
			right: auto;
			bottom: auto;

			&:not(.active) {
				display: none !important;
			}
		}
	}
}
