/* Classe para adicionar o efeito shine aos botões */
.btn-shine {
	position: relative;
	overflow: hidden;
	transform: translateZ(0); /* Força GPU para melhor performance */
}

.btn-shine::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -150%;
	width: 100%;
	height: 200%;
	background: linear-gradient(
			105deg,
			transparent 20%,
			rgba(255, 255, 255, 0.3) 35%,
			rgba(255, 255, 255, 0.5) 50%,
			rgba(255, 255, 255, 0.3) 65%,
			transparent 80%
	);
	transform: skewX(-20deg);
	animation: btnShine 3s infinite;
	pointer-events: none;
	z-index: 1;
}

/* Garante que o conteúdo do botão fique acima do efeito */
.btn-shine > * {
	position: relative;
	z-index: 2;
}

@keyframes btnShine {
	0% {
		left: -150%;
	}
	100% {
		left: 150%;
	}
}

/* Variações para diferentes cores de botão */
.btn-shine.btn-primary::before {
	background: linear-gradient(
			105deg,
			transparent 20%,
			rgba(255, 255, 255, 0.3) 35%,
			rgba(255, 255, 255, 0.5) 50%,
			rgba(255, 255, 255, 0.3) 65%,
			transparent 80%
	);
}

.btn-shine.btn-dark::before,
.btn-shine.btn-secondary::before {
	background: linear-gradient(
			105deg,
			transparent 20%,
			rgba(255, 255, 255, 0.2) 35%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0.2) 65%,
			transparent 80%
	);
}

.btn-shine.btn-light::before,
.btn-shine.btn-warning::before {
	background: linear-gradient(
			105deg,
			transparent 20%,
			rgba(0, 0, 0, 0.05) 35%,
			rgba(0, 0, 0, 0.1) 50%,
			rgba(0, 0, 0, 0.05) 65%,
			transparent 80%
	);
}

/* Classe para controlar quando a animação acontece */
.btn-shine-hover::before {
	left: -150%;
	animation: none;
}

.btn-shine-hover:hover::before {
	animation: btnShineOnce 0.6s ease-out;
}

@keyframes btnShineOnce {
	0% {
		left: -150%;
	}
	100% {
		left: 150%;
	}
}