.btn{
	display: inline-flex;
	gap: .5rem;
    align-items: center;
    justify-content: center;
}

.custom-btn{
    --bs-btn-padding-y: 14px;
    --bs-btn-padding-x: 15px;
    --bs-btn-font-size: 16px;
    --bs-btn-line-height: 15px;
}
.btn-outline-primary{
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}
.btn-1{
	position: relative;
	overflow: hidden;
	z-index: 1;
	&::after{
		content: "";
		position: absolute;
		width: 0;
		height: 100%;
		top: 50%;
		right: 0;
		left: auto;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, 0.2);
		z-index: -1;
		@include transSlow;
	}	
	&:hover{
		border-color: rgba(255, 255, 255, 0.2);
		&::after{
			width: 100%;
			right: auto;
			left: 0;
			transform: translateY(-50%);
		}
	}
}

.btn-primary{
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}

.btn-icon-hover-right{
	i{
		@include transFast;
	}
	&:hover i{
		transform: translateX(5px);
	}
}

.custom-group{
	gap: 10px;
	&.btn-group {
		@include border-radius($btn-border-radius);		 

		> .btn:not(:last-child):not(.dropdown-toggle),
		> .btn.dropdown-toggle-split:first-child,
		> .btn-group:not(:last-child) > .btn {
			@include border-end-radius($btn-border-radius);
		}

		> .btn:nth-child(n + 3),
		> :not(.btn-check) + .btn,
		> .btn-group:not(:first-child) > .btn {
			@include border-start-radius($btn-border-radius);
		}
	}
}