/* ======================================================
   <!-- Coach Mark -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. Ripple effect 1
 * 2. Ripple Effect 2
*/


$dot-size: 20px;


.uix-coach-mark-indicator-ripple {
	position: relative;
	display: inline-block;
	background: var(--uix-highlight-color1);
	height: $dot-size;
	width: $dot-size;
	border-radius: 100%;


	/*
	 ---------------------------
	 1. Ripple effect 1
	 ---------------------------
	 */
	&.uix-coach-mark-indicator-ripple--line {

		&:before,
		&:after {
			position: absolute;
			content: '';
			border-radius: inherit;
			height: 0px;
			width: 0px;
			box-shadow: 0 0 0 2px var(--uix-highlight-color1);
			left: calc($dot-size/2);
			top: calc($dot-size/2);
			transform: translate(-50%, -50%);

		}

		&:after {
			height: 7px;
			width: 7px;
			box-shadow: 0 0 0 2px var(--uix-highlight-color2);

		}

		&:not(.is-animating) {
			&:before {
				position: absolute;
				content: '';
				border-radius: inherit;
				height: #{$dot-size + 10};
				width: #{$dot-size + 10};
				box-shadow: 0 0 0 2px var(--uix-highlight-color1);
				left: calc($dot-size/2);
				top: calc($dot-size/2);
				transform: translate(-50%, -50%);

			}
		}

		&.is-animating {
			&:before {
				animation: uix-cssAnim--dotPulseInner 2s infinite ease-out;
			}
			&:after {
				animation: uix-cssAnim--dotPpulseOuter 2s infinite ease-out;
			}

		}


	}


	/*
	 ---------------------------
	 2. Ripple Effect 2
	 ---------------------------
	 */

	&.uix-coach-mark-indicator-ripple--bg {

		box-shadow: 0 0 0 5px rgba(var(--uix-highlight-color1), 0.4),
					0 0 0 10px rgba(var(--uix-highlight-color1), 0.1);

		&.is-animating {
			animation: uix-cssAnim--dotRipple 2s linear infinite;
		}
	}

}


@keyframes uix-cssAnim--dotPulseInner {
	0% {
		height: 0;
		width: 0;
		opacity: 0;
	}
	20% {
		opacity: 1
	}
	95% {
		height: #{$dot-size*2};
		width: #{$dot-size*2};
		opacity: 0.25;
	}
	100% {
		opacity: 0;
	}
}
@keyframes uix-cssAnim--dotPpulseOuter {
	0% {
		height: 7px;
		width: 7px;
		opacity: 0;
	}
	20% {
		opacity: 1
	}
	100% {
		height: #{$dot-size*3};
		width: #{$dot-size*3};
		opacity: 0.25;
	}
}



@keyframes uix-cssAnim--dotRipple {
    0% {
		box-shadow: 0 0 0 5px rgba(var(--uix-highlight-color1), 0.4),
					0 0 0 10px rgba(var(--uix-highlight-color1), 0.1);
    }
    100% {
		box-shadow: 0 0 0 25px rgba(var(--uix-highlight-color1), 0),
					0 0 0 30px rgba(var(--uix-highlight-color1), 0);
    }
}