// Bouton plein
.wpeo-button {
	/* par défaut */
	background: $color__primary;
	border-color: $color__primary;
	color: $color__primary-text;

	&.button-main {
		background: $color__primary;
		border-color: $color__primary;
		color: $color__primary-text;
	}
	&.button-light {
		background: #fff;
		border-color: #fff;
		color: $color__text-main;
		&:hover {
			box-shadow: inset 0 -2.6em rgba(0,0,0,0.1);
			color: $color__text-main;
		}
	}
	&.button-dark {
		background: $color__dark;
		border-color: $color__dark;
	}
	&.button-grey {
		background: $color__grey;
		border-color: $color__grey;
		color: $color__text-main;
		&:hover {
			box-shadow: inset 0 -2.6em rgba(0,0,0,0.1);
			color: $color__text-main;
		}
	}
	&.button-red {
		background: $color__red;
		border-color: $color__red;
	}
	&.button-yellow {
		background: $color__yellow;
		border-color: $color__yellow;
	}
	&.button-blue {
		background: $color__blue;
		border-color: $color__blue;
	}
	&.button-green {
		background: $color__green;
		border-color: $color__green;
	}
	&.button-transparent {
		background: transparent;
		border-color: transparent;
		color: rgba($color__text-main, 0.4);
		&:hover {
			color: $color__text-main;
			box-shadow: inset 0 -2.6em rgba(255,255,255,0);
		}
	}
}

// Bordered
.wpeo-button.button-bordered {
	background: none;
	/* Par defaut */
	border-color: $color__primary;
	color: $color__primary;

	&.button-main {
		border-color: $color__primary;
		color: $color__primary;
		&:hover {
			box-shadow: inset 0 -2.6em $color__primary;
			color: $color__primary-text;
		}
	}
	&.button-light {
		border-color: #fff;
		color: #fff;
		&:hover {
			box-shadow: inset 0 -2.6em #fff;
			color: $color__text-main;
		}
	}
	&.button-dark {
		border-color: $color__dark;
		color: $color__dark;
		&:hover {
			box-shadow: inset 0 -2.6em $color__dark;
		}
	}
	&.button-grey {
		border-color: $color__grey;
		color: darken($color__grey, 30%);
		&:hover {
			box-shadow: inset 0 -2.6em $color__grey;
			color: $color__text-main;
		}
	}
	&.button-red {
		border-color: $color__red;
		color: $color__red;
		&:hover {
			box-shadow: inset 0 -2.6em $color__red;
		}
	}
	&.button-yellow {
		border-color: $color__yellow;
		color: $color__yellow;
		&:hover {
			box-shadow: inset 0 -2.6em $color__yellow;
		}
	}
	&.button-blue {
		border-color: $color__blue;
		color: $color__blue;
		&:hover {
			box-shadow: inset 0 -2.6em $color__blue;
		}
	}
	&.button-green {
		border-color: $color__green;
		color: $color__green;
		&:hover {
			box-shadow: inset 0 -2.6em $color__green;
		}
	}

	&:hover {
		box-shadow: inset 0 -2.6em $color__primary;
		color: #fff;
	}
}
