/* ==========================================================================
   ESTILOS BASE E VARIÁVEIS LOCALIZADAS
   ========================================================================== */

/* Seletor unificado para todos os tipos de botões */
:is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
	color: #666;
	background-color: #DDD;
	border-radius: var(--botao-radius);
	transition: 0.2s ease;

	/* Aninhamento para elementos internos */
	&>div {
		justify-items: center;
	}

	/* Modificador de tamanho flexível */
	&.pequeno {
		font-size: 0.67rem;
		padding: 3px 5px;
	}

	&.grande {
		font-size: 1rem;
		padding: 15px 20px;
	}

	&.extragrande {
		font-size: 1.2rem;
		padding: 18px 20px;
	}

	/* Layout do Botão */
	&.total {
		width: 100%;
		float: none;
		/* margin-inline: 0; */
		/* padding-inline: 0; */
	}

	&.nowrap,
	&.nowrap span,
	&.nowrap div {
		white-space: nowrap;
	}

	/* Estados de Interação */
	&:hover {
		background-color: #E9E9E9;
	}

	&:active {
		background-color: #EEE;
	}

	&:disabled,
	&[disabled="disabled"] {
		background-color: #EEE;
		color: #AAA;
		outline: none;

		& * {
			color: #AAA !important;
		}

		&:hover {
			background-color: #EEE;
			color: #AAA;
			outline: none;
		}
	}

	&.sombra {
		box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
	}

	/* ==========================================================================
     BOTÕES COM ÍCONE
     ========================================================================== */
	&.btn-icone {
		gap: 5px;
		justify-content: flex-start;

		&.grande {
			gap: 10px;
		}

		&.extragrande {
			gap: 15px;
		}

		&>div {
			display: grid;
			justify-items: start;
			align-items: center;

			&>div:nth-child(2) {
				font-size: 0.75rem;
			}
		}
	}

	/* ==========================================================================
     BOTÕES DE CORES SÓLIDAS E VARIAÇÕES
     ========================================================================== */
	&.txt-vermelho {
		background-color: rgba(from var(--color-vermelho) r g b / 0.1);
		color: var(--color-vermelho);

		&:hover {
			background-color: rgba(from var(--color-vermelho) r g b / 0.1);
		}

		&:active {
			background-color: rgba(from var(--color-vermelho) r g b / 0.2);
		}
	}

	&.vermelho {
		color: #FFF;
		background-color: var(--color-vermelho);

		&:hover {
			background-color: rgba(from var(--color-vermelho) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-vermelho) r g b / 0.6);
		}
	}

	&.laranja {
		color: #FFF;
		background-color: var(--color-laranja);

		&:hover {
			background-color: rgba(from var(--color-laranja) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-laranja) r g b / 0.6);
		}
	}

	&.verde {
		color: #FFF;
		background-color: var(--color-verde);

		&:hover {
			background-color: rgba(from var(--color-verde) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-verde) r g b / 0.6);
		}
	}

	&.social-facebook {
		color: #FFF;
		background-color: var(--color-social-facebook);

		&:hover {
			background-color: rgba(from var(--color-social-facebook) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-facebook) r g b / 0.6);
		}
	}

	&.social-instagram {
		color: #FFF;
		background-color: var(--color-social-instagram);

		&:hover {
			background-color: rgba(from var(--color-social-instagram) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-instagram) r g b / 0.6);
		}
	}

	&.social-x {
		color: #FFF;
		background-color: var(--color-social-x);

		&:hover {
			background-color: rgba(from var(--color-social-x) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-x) r g b / 0.6);
		}
	}

	&.social-pinterest {
		color: #FFF;
		background-color: var(--color-social-pinterest);

		&:hover {
			background-color: rgba(from var(--color-social-pinterest) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-pinterest) r g b / 0.6);
		}
	}

	&.social-google {
		color: #FFF;
		background-color: var(--color-social-google);

		&:hover {
			background-color: rgba(from var(--color-social-google) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-google) r g b / 0.6);
		}
	}

	&.social-youtube {
		color: #FFF;
		background-color: var(--color-social-youtube);

		&:hover {
			background-color: rgba(from var(--color-social-youtube) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-youtube) r g b / 0.6);
		}
	}

	&.social-linkedin {
		color: #FFF;
		background-color: var(--color-social-linkedin);

		&:hover {
			background-color: rgba(from var(--color-social-linkedin) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-linkedin) r g b / 0.6);
		}
	}

	&.social-tiktok {
		color: #FFF;
		background-color: var(--color-social-tiktok);

		&:hover {
			background-color: rgba(from var(--color-social-tiktok) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-tiktok) r g b / 0.6);
		}
	}

	&.social-kwai {
		color: #FFF;
		background-color: var(--color-social-kwai);

		&:hover {
			background-color: rgba(from var(--color-social-kwai) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-kwai) r g b / 0.6);
		}
	}

	&.social-whatsapp {
		color: #FFF;
		background-color: var(--color-social-whatsapp);

		&:hover {
			background-color: rgba(from var(--color-social-whatsapp) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-social-whatsapp) r g b / 0.6);
		}
	}

	&.amarelo {
		color: #000;
		background-color: var(--color-amarelo);

		&:hover {
			background-color: rgba(from var(--color-amarelo) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-amarelo) r g b / 0.6);
		}
	}

	&.prata {
		color: #FFF;
		background-color: var(--color-prata);

		&:hover {
			background-color: rgba(from var(--color-prata) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-prata) r g b / 0.6);
		}
	}

	&.preto {
		color: #FFF;
		background-color: var(--color-preto);

		&:hover {
			background-color: rgba(from var(--color-preto) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-preto) r g b / 0.6);
		}
	}

	&.branco {
		color: #333;
		background-color: var(--color-branco);

		&:hover {
			background-color: rgba(from var(--color-branco) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-branco) r g b / 0.6);
		}
	}

	&.cinza_escuro {
		color: #FFF;
		background-color: var(--color-cinza-escuro);

		&:hover {
			background-color: rgba(from var(--color-cinza-escuro) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-cinza-escuro) r g b / 0.6);
		}
	}

	&.azul {
		color: #FFF;
		background-color: var(--color-azul);

		&:hover {
			background-color: rgba(from var(--color-azul) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-azul) r g b / 0.6);
		}
	}

	&.verde-agua {
		color: #080;
		background-color: var(--color-verde-agua);

		&:hover {
			background-color: rgba(from var(--color-verde-agua) r g b / 0.8);
		}

		&:active {
			background-color: rgba(from var(--color-verde-agua) r g b / 0.6);
		}
	}

	&.transparent {
		color: #000;
		background-color: transparent;
	}

	&.contorno-azul {
		border: 2px solid var(--color-azul);
	}

	&.contorno-verde {
		border: 2px solid var(--color-verde);
	}

	&.botaocor {
		color: var(--botao-color);
		background-color: var(--botao-background-color);

		&:hover,
		&:active {
			background-color: var(--botao-background-color-hover);
		}
	}
	
	/* Tamanhos de botões dentro de formulários específicos */
	form.pequeno :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
		font-size: 0.67rem;
		padding: 3px 5px;
	}

	form.grande :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
		font-size: 1rem;
		padding: 15px 20px;
	}

	form.extragrande :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
		font-size: 1.2rem;
		padding: 18px 20px;
	}



	/* ==========================================================================
   COMPONENTES ESPECÍFICOS
   ========================================================================== */

	/* Botão de Ícone Vertical */
	button.btn-ico-v {
		display: grid;
		color: #999;
		background-color: transparent;

		& i {
			font-size: 1.2rem;
		}

		&.azul {
			color: var(--color-azul);
		}

		&.verde {
			color: var(--color-verde);
		}

		&.vermelho {
			color: var(--color-vermelho);
		}

		&.laranja {
			color: var(--color-laranja);
		}
	}

	/* Botão de Carrossel */
	.carrocel-botao {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		z-index: 10;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFF;
		color: #000;
		transform: translateY(-50%);
		border-radius: 50%;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.45);
		opacity: 0.4;
		transition: opacity 0.2s ease;

		&:hover {
			opacity: 1;
		}

		&.next {
			right: 10px;
			left: auto;

			&::after {
				content: "\eaa0";
			}
		}

		&.prev {
			left: 10px;
			right: auto;

			&::after {
				content: "\ea9d";
			}
		}

		&::after {
			font-family: IcoFont !important;
			font-style: normal;
			font-weight: 400;
			font-variant: normal;
			text-transform: none;
			white-space: nowrap;
			direction: ltr;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			font-size: 1.5rem;
		}
	}
}

/* Animação Pulsar Genericamente Aplicável */
.pulsate {
	animation: pulsate 1.5s infinite;
	box-shadow: 0 0 0 0 rgba(9, 165, 19, 0.50);
	transition: background-color 500ms ease-in-out, padding 500ms ease-in-out;
}

@keyframes pulsate {
	0% {
		transform: scale(1);
	}

	70% {
		transform: scale(1.02);
		box-shadow: 0 0 0 10px rgba(69, 152, 27, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);
	}
}