@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
@import "../../../css/_trx_addons.colors.scss";

.elementor-editor-active .elementor-add-section-area-button.elementor-add-trx-addons-elementor-templates-library-button {
	background-color: #aedf49;
	background-image: url('../images/logo-transparent.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-left: 5px;
	position: relative;
	@include transition-property(background-color);

	&:hover {
		background-color: #90bb39;
	}

	// Animation for the button
	//--------------------------
	&:hover:before,
	&.sonar:before {
		content: ' ';
		display: block;
		background-color: #aedf49;
		@include abs-pos(-8px, -8px, -8px, -8px, -1);
		@include border-round;
		@include backface-hidden;
		@include perspective(800px);
		@include animation(sonarAnimation 2s ease 3 forwards);
	}
}

@keyframes sonarAnimation {
	0% {
		opacity: 0;
		@include scale(.8);
	}
	50% {
		opacity: .8;
	}
	100% {
		opacity: 0;
		@include scale(1);
	}
}