@mixin social-button($color) {
	background: $color;
	color: color(white);

	&:hover {
		background: darken($color, 10%);
	}

	&.btn-link {
		background: none;
		color: $color;

		&:hover {
			color: darken($color, 10%);
		}
	}
}

@mixin btn-social-outline-variant($color) {
	background: transparent;
	border-color: $color;
	color: $color;

	&:hover {
		background: rgba($color, 0.2);
	}
}

@mixin button-inverse-variant($color, $color-hover: $white) {
	color: $color;
	background-color: rgba($color, 0.2);
	background-image: none;
	border-color: rgba($color, 0);

	@include hover {
		color: $color-hover;
		background-color: $color;
		border-color: $color;
	}

	&.focus,
	&:focus {
		box-shadow: 0 0 0 3px rgba($color, .5);
	}

	&.disabled,
	&:disabled {
		color: $color;
		background-color: transparent;
	}

	&.active,
	&:active,
	.show>&.dropdown-toggle {
		color: $color-hover;
		background-color: $color;
		border-color: $color;
	}
}

@mixin button-inverse-outline-variant($color, $color-hover: $white) {
	color: $color;
	background-image: none;
	background: transparent;
	border-color: rgba($color, 0.2);

	@include hover {
		color: $color;
		background-color: rgba($color, 0.2);
		border-color: rgba($color, 0.2);
	}

	&.focus,
	&:focus {
		box-shadow: 0 0 0 3px rgba($color, .5);
	}

	&.disabled,
	&:disabled {
		color: $color;
		background-color: transparent;
	}

	&.active,
	&:active,
	.show>&.dropdown-toggle {
		color: $color-hover;
		border-color: $color;
	}
}