@use "../utilities" as *;

/**
  Buttons CSS
*/
.tj-primary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	background-color: var(--tj-color-theme-primary);
	font-size: 16px;
	font-weight: var(--tj-fw-sbold);
	padding: 5px 5px 5px 25px;
	text-align: center;
	border-radius: 50px;
	line-height: 1;
	z-index: 2;
	overflow: hidden;
	white-space: nowrap;
	.btn-text {
		color: var(--tj-color-common-white);
		overflow: hidden;
		span {
			display: flex;
			line-height: 1;
			text-shadow: 0 30px 0;
			backface-visibility: hidden;
			transform: translateY(0);
			transition: 0.4s ease-in-out;
		}
	}
	.btn-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		line-height: 1;
		width: 42px;
		height: 42px;
		overflow: hidden;
		background-color: var(--tj-color-theme-dark);
		border-radius: 50%;
		i {
			color: var(--tj-color-common-white);
			transform: rotate(-45deg);
			transition: all 0.3s ease-in-out;
		}
	}
	&.btn-dark {
		background-color: var(--tj-color-theme-dark);
		.btn-icon {
			background-color: var(--tj-color-common-white);
			i {
				color: var(--tj-color-theme-dark);
			}
		}
	}
	&.transparent-btn {
		background-color: transparent;
		border: 1px solid var(--tj-color-border-1);
		.btn-text {
			color: var(--tj-color-heading-primary);
		}
		&:hover {
			border-color: var(--tj-color-theme-dark);
		}
	}
	&:hover {
		.btn-text {
			span {
				transform: translateY(-30px);
			}
		}
		.btn-icon {
			i {
				transform: rotate(0);
			}
		}
	}
	&-lg {
		font-size: 20px;
		padding: 7px 7px 7px 44px;
		gap: 14px;
		.btn-icon {
			font-size: 27px;
			width: 59px;
			height: 59px;
		}
	}
}

.text-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	font-size: 16px;
	font-weight: var(--tj-fw-sbold);
	text-align: center;
	line-height: 1;
	z-index: 2;
	.btn-text {
		color: var(--tj-color-heading-primary);
		overflow: hidden;
		span {
			display: flex;
			line-height: 1;
			text-shadow: 0 30px 0;
			backface-visibility: hidden;
			transform: translateY(0);
			transition: 0.4s ease-in-out;
		}
	}
	.btn-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		line-height: 1;
		width: 30px;
		height: 30px;
		overflow: hidden;
		background-color: var(--tj-color-theme-dark);
		border-radius: 50%;
		i {
			color: var(--tj-color-common-white);
			transform: rotate(-45deg);
			transition: all 0.3s ease-in-out;
		}
	}
	&:hover {
		.btn-text {
			span {
				transform: translateY(-30px);
			}
		}
		.btn-icon {
			background-color: var(--tj-color-theme-primary);
			i {
				transform: rotate(0);
			}
		}
	}
}

.tji-icon-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--tj-color-theme-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	i {
		color: var(--tj-color-theme-primary);
		font-weight: var(--tj-fw-normal);
		transform: rotate(-45deg);
		transition: all 0.3s ease-in-out;
	}
	&:hover {
		background-color: var(--tj-color-theme-primary);
		i {
			color: var(--tj-color-common-white);
			transform: rotate(0);
		}
	}

	@media #{$lg, $md} {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}
	@media #{$sm, $xs} {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}
}