@import '../../common';
.rs-latest-button {
	pointer-events: auto;
	cursor: pointer;
	background: #e7e7e7;
	border: none;
	padding: 1.5rem 3rem;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
	svg{
		height: 20px;
		position: relative;
		top: -1px;
	}
	&:before,&:after {
		position: absolute;
		top: -1px;
		left: 0;
		width: 100%;
		height: 100%;
	}
}


.rs-latest-button--calypso {
	overflow: hidden;
	font-size: 1.15rem;
	border-radius: 0.85rem;
	color: #fff;
	span {
		display: block;
		position: relative;
		z-index: 10;
		color: #0a0a0a;
		svg {
			path {
				fill: #0a0a0a;
			}
		}
	}

	&:hover {
		span {
			animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
			color: #fff;
			svg path{
				fill: #fff;
			}
		}
		&:before {
			transform: translate3d(0,0,0) scale3d(1,1,1);
			transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		}
		&:after {
			transform: translate3d(0,0,0);
			transition-duration: 0.05s;
			transition-delay: 0.4s;
			transition-timing-function: linear;
		}
	}
	&:before {
		content: '';
		background: #000;
		width: 120%;
		height: 0;
		padding-bottom: 120%;
		top: -110%;
		left: -10%;
		border-radius: 50%;
		transform: translate3d(0,68%,0) scale3d(0,0,0);
	}
	&:after {
		content: '';
		background: #000;
		transform: translate3d(0,-100%,0);
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
	}
}


.rs-btn {
	&.style1 {
		.rs_button {
			svg {
				transition: all 0.3s ease-in-out;
			}
			&:hover {
				svg {
					transform: translateX(5px);
				}
			}
		}
	}
	&.style2 {
		.rs_button {
			background: $primaryColor;
			color: #fff;
			&:hover {
				background: $secondaryColor;
				color: #fff;
			}
		}
	}

	&.style3{
		.rs_button {
			.btn-icon + .btn-icon {
				margin-inline-end: 0;
				margin-inline-start: 8px;
				display: inline-block;
				margin-inline-start: 0;
				margin-inline-end: 0;
				opacity: 0;
				transform: translateX(-10px);
				transition-delay: 0s;
				order: -2;
			}
			.btn-icon {
				display: inline-block;
				transition: opacity 0.4s 0.25s, transform 0.6s 0.25s;
				transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
			}

			&:hover {
				.btn-icon {
					opacity: 0;
					transition-delay: 0s;
					transform: translateX(10px);
				}
				.btn-icon + .btn-icon {
					opacity: 1;
					transform: translateX(0);
					transition-delay: 0.225s;
				}
				.btn_text {
					transition-delay: 0.1s;
					transform: translateX(23px);
				}
			}
			.icon-reverse-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn_text  {
				display: inline-block;
				transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1);
				margin-inline-start: -23px;
			}
		}
	}
	
	&.style4 {
		.rs_button {
			overflow: hidden;
			position: relative;
			display: inline-block;
			background: #231f20;
			color:#fff;
			padding: 15px 35px 15px 35px;
			webkit-clip-path: polygon(50% 0%, 100% 1%, 100% 35%, 100% 80%, 94% 100%, 50% 100%, 21% 100%, 0 100%, 0 0, 86% 0) !important;
    		clip-path: polygon(50% 0%, 100% 1%, 100% 35%, 100% 80%, 94% 100%, 50% 100%, 21% 100%, 0 100%, 0 0, 86% 0) !important;
			.btn_text {
				display: inline-block;
				z-index: 1;
				position: relative;
			}
			
			svg {
				width: 14px;
				height: 14px;
				position: relative;
				z-index: 1;
				transition: $transition;
				margin-left: 12px;
				margin-right: 3px;
				path {
					fill:#fff;
				}
			}
			&:before {
				position: absolute;
				content: '';
				background: #d52925;
				width: 100%;
				height: 100%;
				transform-origin: 50% 100%;
				-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
				transition: clip-path 0.2s, -webkit-clip-path 0.2s;
				transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
				left: 0;
    			top: 0;
			}
			&:hover:before {
				transition-duration: 0.3s;
				-webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
				clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
				// background: #231f20;
				color:#fff;
			}

			.icon-reverse-wrapper {
				display: block;
    			position: relative;
				overflow: hidden;
			}
			
			&:hover {
				.icon-reverse-wrapper {
					span {
						animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
					}
				}
				svg {
					transform: rotate(45deg);
				}
				&:after {
					transform: translate3d(100%,0,0);
				}
			}

		}
	}

	&.style5 {
		position: relative;
		a {
			background-color: transparent;
			color: $primaryColor;
			border-radius: 6px;
			font-size: 16px;
			z-index: 1;
			overflow: hidden;
			border-style: solid;
			border-width: 2px 2px 2px 2px;
			padding: 12px 34px;
			border-color: #E4003B33;
			transition: border-color .5s;
			&:before {
				content: "";
				position: absolute;
				z-index: -1;
				background: $primaryColor;
				height: 150px;
				width: 340px;
				border-radius: 48%;
				top: 100%;
				left: 100%;
				transition: all .5s;
			}
			&:hover {
				color: $whiteColor;
				border-color: $primaryColor;
				background: transparent;
				&:before {
					top: -30px;
					left: -30px;
					transform: scale(1.4);
				}
			}
		}
	}
	
}

@keyframes MoveScaleUpInitial {
	to {
		transform: translate3d(0,-105%,0) scale3d(1,2,1);
		opacity: 0;
	}
}

@keyframes MoveScaleUpEnd {
	from {
		transform: translate3d(0,100%,0) scale3d(1,2,1);
		opacity: 0;
	}
	to {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes rspulse512 {
	0% {
	//  box-shadow: 0 0 0 0 #05bada66;
	 box-shadow: 0 0 0 0 #ad6239;
	}
   
	70% {
	 box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
	}
   
	100% {
	 box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
	}
}
@keyframes MoveUpInitial {
	to {
		transform: translate3d(0,-105%,0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0,100%,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}