/* prueba */
body .bricks-button {

	cursor: pointer;

	/* Vamos a primario con relleno */
	&.bricks-background-primary {
		background: var(--button-primary-background);
	}

	/* Vamos a secundario con relleno */
	&.bricks-background-secondary {
		background: var(--button-secondary-background);
	}

	/* Vamos a parámetros estándar de outlined */
	&.outline {
		-webkit-background-clip: text;
		background-clip: text;
		color: #00000011;
		border: 0px;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-color: transparent;
			border-style: solid;
			-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
			border-radius: 8px;
		}
	}

	/* PRIMARIO OUTLINED  */
	&.bricks-color-primary.outline {
		background-image: var(--button-primary-background);

		&::before {
			background: var(--button-primary-background) border-box;
		}
	}

	/* SECUNDARIO OUTLINED  */
	&.bricks-color-secondary.outline {
		background-image: var(--button-secondary-background);

		&::before {
			/* background: var(--button-secondary-background) border-box; */
		}
	}

	/*ESTILO CLARO OUTLINED*/
	&.bricks-color-light {
		color: white !important;
		border-radius: 12px !important;
		border: solid 3px white;
		padding: 16px 24px;
	}


	/* ESTILO PARA EMPRESAS */
	&.button-prueba-gratis-empresas,
	&.button-empresas {
		/* Reset de parámetros anteriores */
		border: solid 3px var(--empresas-primary);
		background-image: unset !important;

		&::before {
			content: unset !important;
			/* Eliminamos bordes previos */
		}

		/* EMPRESAS FILLED */
		&.bricks-background-primary,
		&.bricks-background-secondary {
			background: var(--empresas-primary);
		}

		/* EMPRESAS OUTLINED */
		&.outline {
			color: var(--empresas-primary);
			border: solid 3px var(--empresas-primary);
		}
	}
}