22

✏️ Editing: _jet-switcher.scss

.jet-switcher {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;

&__control-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
	}

&__control-instance {
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;
		background-color: #f7f7fb;
		border-radius: 50px;
		transition: background-color 0.3s cubic-bezier(.44,.95,.57,.97);
	}

&__control-handler {
		position: absolute;
		border-radius: inherit;
		display: flex;
		align-items: stretch;
		top: 0;
		z-index: 1;

span {
			flex: 0 1 100%;
			margin: 3px;
			transition: all 0.3s cubic-bezier(.44,.95,.57,.97);
			border-radius: inherit;
		}
	}

&__control {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		outline: none;
		pointer-events: none;
		z-index: 2;
		text-align: center;
		transition: all 0.3s cubic-bezier(.44,.95,.57,.97);

&--disable {
		}

&--enable {
		}

&:focus-visible {
			outline: auto;
		}
	}

&__label-text {
		user-select: none;
	}

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

&__content {
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		opacity: 0;
		pointer-events: none;

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

&.active-content {
			position: relative;
			pointer-events: auto;
			opacity: 1;
			z-index: 1;

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

.jet-switcher--preset-1 {

&.jet-switcher--disable {
		& > .jet-switcher__control-wrapper{
			.jet-switcher__control{
				&-handler {
					transform: translateX(0);

span {
						background-color: #c3c3c3;
					}
				}
				&--disable {
					color: #fff;
				}
			}
		}
	}

&.jet-switcher--enable {
		& > .jet-switcher__control-wrapper{
			.jet-switcher__control{
				&-handler {
					transform: translateX(100%);

.rtl & {
						transform: translateX(-100%);
					}

span {
						background-color: #61ce70;
					}
				}

&--enable {
					color: #fff;
				}
			}
		}
	}

.jet-switcher__control-instance {
		width: 160px;
		height: 50px;
		justify-content: flex-start;
	}

.jet-switcher__control {
		max-width: 50%;
	}

& > .jet-switcher__control-wrapper{

.jet-switcher__control-handler {
			width: 50%;
			height: 100%;
			transition: transform 0.3s cubic-bezier(.44,.95,.57,.97);
		}
	}

.jet-switcher__control--disable {
		width: 50%;
		height: 100%;
	}

.jet-switcher__control--enable {
		width: 50%;
		height: 100%;
	}
}

.jet-switcher--preset-2 {

&.jet-switcher--disable {
		& > .jet-switcher__control-wrapper{
			.jet-switcher__control-handler {
				left: 0;

span {
					background-color: #c3c3c3;
				}
			}
		}
	}

&.jet-switcher--enable {

& > .jet-switcher__control-wrapper{

.jet-switcher__control-handler {
				left: calc(100% - 30px);

span {
					background-color: #61ce70;
				}
			}
		}
	}

.jet-switcher__control-instance {
		width: 80px;
		height: 40px;
	}

& > .jet-switcher__control-wrapper{

.jet-switcher__control-handler {
			width: 60px;
			height: 100%;
			transition: left 0.3s cubic-bezier(.44,.95,.57,.97);
		}

}

.jet-switcher__control--disable {
		margin-right: 15px;

.rtl & {
			margin-left: 15px;
		}
	}

.jet-switcher__control--enable {
		margin-left: 15px;

.rtl & {
			margin-right: 15px;
		}
	}
}

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

&-zoom-in-effect {
		.jet-switcher__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-switcher__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-switcher__content {
			&.active-content {
				animation-name: moveUp;
				animation-duration: 500ms;
				animation-timing-function: cubic-bezier(.26,.69,.37,.96);
				animation-play-state: running;
			}
		}
	}

&-fall-perspective-effect {

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

.jet-switcher__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;
	}
}

.elementor-widget-jet-switcher{
	width: 100%;
}

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

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

MR SKB