22

✏️ Editing: _jet-tabs.scss

.jet-tabs {
	display: flex;
	align-items: stretch;

&__control-wrapper {
		display: flex;
		background-color: white;
		overflow: hidden;
		z-index: 1;
	}

&__content-wrapper {
		position: relative;
		overflow: hidden;
		background-color: white;
		transition: height 0.25s cubic-bezier(.44,.96,.5,.98);
	}

&__control {
		cursor: pointer;
		outline: none;
		flex-grow: inherit;
		flex: 1 0 auto;

&:focus-visible {
			outline: auto;
		}

&.jet-tabs__control-icon-left {
			> .jet-tabs__control-inner {
				flex-flow: row nowrap;

.rtl & {
					flex-direction: row-reverse;

.jet-tabs__label-icon {
						margin-right: 5px;
						margin-left: 0;
					}
				}
			}
		}

&.jet-tabs__control-icon-top {
			> .jet-tabs__control-inner {
				flex-flow: column nowrap;
			}
		}

&.jet-tabs__control-icon-right {
			> .jet-tabs__control-inner {
				flex-flow: row nowrap;

.jet-tabs__label-icon {
					margin-right: 0;
					margin-left: 5px;
				}

.rtl & {
					flex-direction: row-reverse;

.jet-tabs__label-icon {
						margin-right: 0;
						margin-left: 5px;
					}
				}
			}
		}
	}

&__control-inner {
		padding: 10px 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

&__label-icon {
		margin-right: 5px;
		line-height: 1;

.active-tab & {
			color: #6ec1e4;
		}
	}

&__label-image {
		width: 25px;
	}

&__label-text {
		margin: 0;
		.active-tab & {
			color: #6ec1e4;
		}
	}

&__content {
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		padding: 10px;

> .elementor {
			> .elementor-inner {
				margin: 0;
			}
		}

&.active-content {
			position: relative;
			pointer-events: auto;
			opacity: 1;
			visibility: inherit;

.jet-popup--hide-state & {
				pointer-events: none;
			}

.elementor-sticky__spacer & {
				visibility: hidden;
			}
		}
	}

&-position-top,
	&-position-bottom{
		> .jet-tabs__control-wrapper.jet-tabs-scrolling-navigation{
			max-width: 100%;
			flex-flow: row;
			overflow-x: auto;
		}
	}
	&-position-top {
		flex-flow: column nowrap;
		align-items: stretch;

> .jet-tabs__control-wrapper {
			align-self: flex-start;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: center;
			border-width: 1px 1px 0 1px;
			order: 1;

&.jet-tabs-swiper {
				position: relative;
				overflow: visible;
				align-self: normal;
				width: 100%;
				z-index: 1;
			}
		}

> .jet-tabs__content-wrapper {
			order: 2;
			border-top-width: 1px;
		}
	}

&-position-bottom {
		flex-flow: column nowrap;
		align-items: stretch;

> .jet-tabs__control-wrapper {
			align-self: flex-start;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: center;
			border-width: 0 1px 1px 1px;
			order: 2;

&.jet-tabs-swiper {
				position: relative;
				overflow: visible;
				align-self: normal;
				width: 100%;
				z-index: 1;
			}
		}

> .jet-tabs__content-wrapper {
			order: 1;
		}
	}

&-position-left {
		flex-flow: row nowrap;

> .jet-tabs__control-wrapper {
			flex: 0 1 auto;
			min-width: 200px;
			order: 1;
			display: flex;
			flex-flow: column nowrap;
			align-items: stretch;

.rtl & {
				order: 2;
			}
		}

> .jet-tabs__content-wrapper{
			flex: 1 1 auto;
			order: 2;
			border-left-width: 2px;
			align-self: stretch;

.rtl & {
				order: 1;
			}
		}
	}

&-position-right {
		flex-flow: row nowrap;

> .jet-tabs__control-wrapper {
			flex: 0 1 auto;
			min-width: 100px;
			width: 200px;
			order: 2;
			display: flex;
			flex-flow: column nowrap;
			align-items: stretch;

.rtl & {
				order: 1;
			}
		}

> .jet-tabs__content-wrapper{
			flex: 1 1 auto;
			order: 1;

.rtl & {
				order: 2;
			}
		}
	}

&-ajax-template {
		.jet-tabs__content {
			min-height: 30px;
		}
	}

&-fade-effect {
		> .jet-tabs__content-wrapper {
			> .jet-tabs__content {
				&.active-content {
					animation-name: fade;
					animation-duration: 500ms;
					animation-timing-function: cubic-bezier(.26,.69,.37,.96);
					animation-play-state: running;
				}
			}
		}
	}

&-column-fade-effect {
		> .jet-tabs__content {
			//display: none;

.elementor-top-column {
				animation-name: fade;
				animation-fill-mode: backwards;
				animation-duration: 500ms;
				animation-timing-function: cubic-bezier(.26,.69,.37,.96);
			}

&.active-content {
				//display: block;

.elementor-top-column {
					@for $i from 1 through 4 {
						&:nth-child(#{$i}) {
							animation-delay: #{$i*100}ms;
						}
					}
				}

}
		}
	}

&-zoom-in-effect {
		> .jet-tabs__content-wrapper {
			> .jet-tabs__content {
				&.active-content {
					animation-name: zoomIn;
					animation-duration: 500ms;
					animation-timing-function: cubic-bezier(.26,.69,.37,.96);
					animation-play-state: running;
				}
			}
		}
	}

&-zoom-out-effect {
		> .jet-tabs__content-wrapper {
			> .jet-tabs__content {
				&.active-content {
					animation-name: zoomOut;
					animation-duration: 500ms;
					animation-timing-function: cubic-bezier(.26,.69,.37,.96);
					animation-play-state: running;
				}
			}
		}
	}

&-move-up-effect {
		> .jet-tabs__content-wrapper {
			> .jet-tabs__content {
				&.active-content {
					animation-name: moveUp;
					animation-duration: 500ms;
					animation-timing-function: cubic-bezier(.26,.69,.37,.96);
					animation-play-state: running;
				}
			}
		}
	}

&-column-move-up-effect {
		> .jet-tabs__content {
			//display: none;

.elementor-top-column {
				animation-name: moveUp;
				animation-fill-mode: backwards;
				animation-duration: 500ms;
				animation-timing-function: cubic-bezier(.26,.69,.37,.96);
			}

&.active-content {
				//display: block;

.elementor-top-column {
					@for $i from 1 through 4 {
						&:nth-child(#{$i}) {
							animation-delay: #{$i*100}ms;
						}
					}
				}
			}
		}
	}

&-fall-perspective-effect {
		> .jet-tabs__content-wrapper {
			> .jet-tabs__content {
				&.active-content {
					animation-name: fallPerspective;
					animation-duration: 500ms;
					animation-timing-function: cubic-bezier(.26,.69,.37,.96);
					animation-play-state: running;
				}
			}
		}
	}

.jet-tabs-swiper-container {
		width: 100%;
		height: 100%;

.jet-tabs__label-image {
			width: 100%;
		}
	}
}

.jet-tabs__edit-cover {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	box-sizing: border-box;
	height: 30px;
	padding: 5px 10px;
	right: 15px;
	top: 15px;
	border-radius: 3px;
	background-color: #b7084e;
	z-index: 99;
	cursor: pointer;
	transition:  opacity 0.3s ease;

box-shadow: 0 0 0 0 rgba( 183, 8, 78, 0.6);
	animation: edit-button-pulse 5s infinite;

i {
		font-size: 14px;
		color: white;
		margin-right: 5px;
	}
	span {
		font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
		font-size: 13px;
		color: white;
	}

&:hover {
		background-color: #840739;
		animation: none;
	}
}

.jet-tabs-no-template-message {
	text-align: center;
	padding: 10px;
}

.jet-tabs-new-template-link {
	color: #6ec1e4;
	text-decoration: underline;
}

.jet-tabs-nav-position-outside {
	.swiper-button-next {
		right: -54px;
		z-index: 2;
	}

.swiper-button-prev {
		left: -54px;
		z-index: 2;
	}

.jet-tabs {
		@media (max-width: 1440px) {
			width: calc(100% - 56px);
			margin: 0 auto;

.swiper-button-next {
				right: -40px;
			}

.swiper-button-prev {
				left: -40px;
			}
		}
	}
}

.e-con-full {
	.jet-tabs-nav-position-outside {
		.jet-tabs {
			width: calc(100% - 108px);
			margin: 0 auto;

@media (max-width: 1440px) {
				width: calc(100% - 56px);
			}
		}
	}
}

MR SKB