@use '../utils' as *;

/*=============================
	04. Button
===============================*/

.tg-btn{
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--tg-common-white);
	border-radius: 6px;
	padding: 12px 27px;
	background: var(--tg-theme-primary);
	display: inline-block;
	&:hover{
		background: var(--tg-theme-primary);
		color: var(--tg-common-white);
	}
	&-black{
		background: var(--tg-common-black);
	}
	&-transparent{
		background: #f0e9ff;
		color: var(--tg-theme-primary);
		&:hover{
			color: var(--tg-common-white);
		}
	}
	&-switch{
		&-animation{
			& .btn-text{
				margin-left: -13px;
				position: relative;
				z-index: 3;
				transition: transform .6s 125ms cubic-bezier(.1,.75,.25,1);
			}
			& .btn-icon{
				margin-left: 6px;
				position: relative;
				transition: opacity .4s .25s, transform .6s .25s;
				transition-timing-function: cubic-bezier(.1,.75,.25,1);
				line-height: 0;
				z-index: 3;
			}
			& .btn-icon+.btn-icon {
				order: -2;
				opacity: 0;
				transition-delay: 0s;
				margin-left: 0;
				-webkit-transform: translateX(-10px);
				transform: translateX(-10px);
			}
			&:hover{
				& .btn-text {
					transition-delay: .1s;
					transform: translateX(23px);
				}
				& .btn-icon {
					transition-delay: 0s;
					transform: translateX(10px);
					opacity: 0;
				}
				& .btn-icon+.btn-icon {
					opacity: 1;
					transform: translateX(0);
					transition-delay: 225ms;
				}
			}  
		}  
	}
	&-header{
		font-weight: 600;
		font-size: 14px;
		text-transform: capitalize;
		color: var(--tg-common-white);
		border: 1px solid var(--tg-common-white);
		border-radius: 100px;
		padding: 6px 20px;
		display: inline-block;
		background: transparent;
		&:hover{
			color: var(--tg-common-white);
			background:  var(--tg-theme-primary);
			border-color: var(--tg-theme-primary);
		}
		& span{
			transform: translateY(-2px);
			display: inline-block;
			margin-right: 4px;
		}
	}
	&-gray{
		background: var(--tg-grey-7);
		color: var(--tg-theme-primary);
		&:hover{
			color: var(--tg-common-white);
		}
	}
	&-hover{
		&:hover{
			background: var(--tg-common-black);
		}
	}
	&-su{
		&-transparent{
			background: #e1daf3;
			color: var(--tg-theme-primary);
			font-family: var(--tg-ff-outfit);
			font-size: 16px;
			border-radius: 10px;
			padding: 13px 36px;
		}
	}
}