@import '../base';

@keyframes wpcsnBounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes wpcsnBounceInUp {
	40%, 60%, 75%, 90%, 100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%, 40% {
		opacity: 0;
		transform: translate3d(0, 100px, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0);
	}
	75% {
		transform: translate3d(0, 10px, 0);
	}
	90% {
		transform: translate3d(0, -5px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes wpcsnBounceInDown {
	40%, 60%, 75%, 90%, 100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%, 40% {
		opacity: 0;
		transform: translate3d(0, -100px, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}
	75% {
		transform: translate3d(0, -10px, 0);
	}
	90% {
		transform: translate3d(0, 5px, 0);
	}
	100% {
		transform: none;
	}
}

@keyframes wpcsnBounceInLeft {
	40%, 60%, 75%, 90%, 100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%, 40% {
		opacity: 0;
		transform: translate3d(-100px, 0, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0);
	}
	75% {
		transform: translate3d(-10px, 0, 0);
	}
	90% {
		transform: translate3d(5px, 0, 0);
	}
	100% {
		transform: none;
	}
}

@keyframes wpcsnBounceInRight {
	40%, 60%, 75%, 90%, 100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%, 40% {
		opacity: 0;
		transform: translate3d(100px, 0, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(-25px, 0, 0);
	}
	75% {
		transform: translate3d(10px, 0, 0);
	}
	90% {
		transform: translate3d(-5px, 0, 0);
	}
	100% {
		transform: none;
	}
}

@keyframes wpcsnBounceOut {
	0% {
		opacity: 1;
		visibility: visible;
	}
	20% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	50%, 55% {
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1);
	}
	100% {
		opacity: 0;
		visibility: hidden;
		transform: scale3d(0.3, 0.3, 0.3);
	}
}

@keyframes wpcsnBounceOutUp {
	0% {
		opacity: 1;
		visibility: visible;
	}
	20% {
		opacity: 1;
		transform: translate3d(0, -10px, 0);
	}
	40%, 45% {
		opacity: 0.5;
		transform: translate3d(0, 20px, 0);
	}
	80%, 100% {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, -50px, 0);
	}
}

@keyframes wpcsnBounceOutDown {
	0% {
		opacity: 1;
		visibility: visible;
	}
	20% {
		opacity: 1;
		transform: translate3d(0, 10px, 0);
	}
	40%, 45% {
		opacity: 0.5;
		transform: translate3d(0, -20px, 0);
	}
	80%, 100% {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 50px, 0);
	}
}

@keyframes wpcsnBounceOutLeft {
	0% {
		opacity: 1;
		visibility: visible;
	}
	20% {
		opacity: 1;
		transform: translate3d(20px, 0, 0);
	}
	40%, 100% {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(-100px, 0, 0);
	}
}

@keyframes wpcsnBounceOutRight {
	0% {
		opacity: 1;
		visibility: visible;
	}
	20% {
		opacity: 1;
		transform: translate3d(-20px, 0, 0);
	}
	40%, 100% {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(100px, 0, 0);
	}
}

.wpcsn-notification-time {
	font-size: 12px;
	color: #999;
}

.wpcsn-notification-thumbnail {
	display: inline-block;
	width: 80px;
	flex: 0 0 80px;
	margin: 0;
	text-align: center;

	img {
		border-radius: 0;
		display: block;
		margin: 0;
		padding: 0;
		max-width: 100%;
		height: auto;
	}
}

.wpcsn-notification-content-wrap {
	padding: 10px 30px 10px 10px;
	flex-grow: 1;

	.wpcsn-notification-title a {
		display: inline-block;
		font-weight: 700;
	}
}

.wpcsn-notification-close {
	@extend %NormalTransition;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	background: none;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: $text-lighten-color;

	&:before {
		@extend %FontAwesomeLight;
		content: $fa-times;
		font-size: 18px;
	}

	&:hover {
		color: $heading-color !important;
	}
}

.wpcsn-notification-item {
	background: #fff;
	position: fixed;
	z-index: 99999;
	display: flex;
	align-items: center;
	width: calc(100% - 60px);
	max-width: 450px;
	padding: 0;
	font-size: 15px;
	border-radius: 0;
	overflow: hidden;
	border: 1px solid #eee;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .03);

	a {
		color: inherit;
		display: block;
	}

	&.wpcsn-notification-item-html a {
		display: inline-block;
		text-decoration: underline;
	}

	&.bounceIn {
		animation-duration: 1s;
		animation-name: wpcsnBounceIn;
	}

	&.bounceInUp {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceInUp;
	}

	&.bounceInDown {
		animation-duration: 1s;
		animation-name: wpcsnBounceInDown;
	}

	&.bounceInLeft {
		animation-duration: 1s;
		animation-name: wpcsnBounceInLeft;
	}

	&.bounceInRight {
		animation-duration: 1s;
		animation-name: wpcsnBounceInRight;
	}

	&.bounceOut {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceOut;
		opacity: 0;
		visibility: hidden;
	}

	&.bounceOutUp {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceOutUp;
		opacity: 0;
		visibility: hidden;
	}

	&.bounceOutDown {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceOutDown;
		opacity: 0;
		visibility: hidden;
	}

	&.bounceOutLeft {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceOutLeft;
		opacity: 0;
		visibility: hidden;
	}

	&.bounceOutRight {
		animation-duration: 1.5s;
		animation-name: wpcsnBounceOutRight;
		opacity: 0;
		visibility: hidden;
	}
}

.wpcsn-notification-item-new-order,
.wpcsn-notification-item-virtual-order {
	.wpcsn-notification-thumbnail {
		width: 140px;
		flex: 0 0 110px;
		padding: 20px 0 20px 20px;

		img {
			width: 100%;
		}
	}

	.wpcsn-notification-content-wrap {
		padding: 20px 20px 20px 15px;
	}

	.wpcsn-notification-title {
		font-size: 15px;
		color: $text-color;
		margin-bottom: 6px;

		strong {
			font-weight: $body-font-weight;
			color: $heading-color;
		}
	}

	.wpcsn-notification-content {
		a {
			display: inline-block;
			font-size: 16px;
			font-weight: $heading-font-weight;
			color: $heading-color;

			&:hover {
				color: $primary-color;
			}
		}

		.price {
			color: $text-color;
			font-size: 18px;
			margin-top: 4px;

			del {
				font-size: 15px;
			}

			ins {
				font-size: 18px;
				color: $primary-color;
			}

			.wc-price-separator {
				color: inherit;
				font-size: inherit;
			}
		}
	}

	.wpcsn-notification-time {
		position: relative;
		padding: 0 0 0 20px;
		font-size: 15px;
		margin-top: 9px;
		color: $text-lighten2-color;

		&:before {
			@extend %FontAwesomeRegular;
			content: $fa-clock;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

.wpcsn-notification {
	// Position
	&.top-left {
		.wpcsn-notification-item {
			top: 30px;
			left: 30px;
		}
	}

	&.bottom-left {
		.wpcsn-notification-item {
			bottom: 30px;
			left: 30px;
		}
	}

	&.top-right {
		.wpcsn-notification-item {
			top: 30px;
			right: 30px;
		}
	}

	&.bottom-right {
		.wpcsn-notification-item {
			bottom: 30px;
			right: 30px;
		}
	}
}

.notification-product-title {
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

.elementor-editor-active {
	.wpcsn-notification {
		display: none !important;
	}
}

@media only screen and (max-width: 480px) {
	.wpcsn-notification-item {
		width: calc(100% - 30px);
		left: 15px;
		right: 15px;
	}

	.wpcsn-notification {
		&.bottom-left {
			.wpcsn-notification-item {
				bottom: 15px;
				left: 15px;
			}
		}

		&.bottom-right {
			.wpcsn-notification-item {
				bottom: 15px;
				right: 15px;
			}
		}

		&.top-left,
		&.top-right {
			.wpcsn-notification-item {
				bottom: 15px;
			}
		}
	}
}
