@mixin button($color) {
	background-color: $color;
	@if $color == white
	{
		color: $button-color-white;
	}
	@else
	{
		color: $white;
	}
	&:hover {
		@include hoverStyle($color);
	}
}

@mixin invertedButton($color) {
	background-color: $white;
	@if $color == white
	{
		border: 1px solid $button-color-white;
		color: $button-color-white;
	}
	@else
	{
		border: 1px solid $color;
		color: $color;
	}
	&:hover {
		@include hoverStyle($color);
		@include hoverStyleInverted($color);
	}
}

@mixin hoverStyle($color) {
	&:not(:disabled) {
		transform: translate3d( 0, -3px, 0);
		transition: all 0.7s $transition-slow-in;
		@if $color == white
		{
			box-shadow: 0px 0px 30px -10px $button-color-white;
		}
		@else
		{
			box-shadow: 0px 0px 30px -10px $color;
		}
	}
}

@mixin hoverStyleInverted($color) {
	&:not(:disabled) {
		background-color: $color;
		@if $color == white
		{
			color: $button-color-white;
		}
		@else
		{
			color: $white;
		}	
	}
}

button, .rwx-button {
	cursor:pointer;

	@include onAccessible(false) {
		@include focus-ring;
	}

	&:disabled {
		opacity:0.7;
	}

	&:not(.no-decoration):not(.rwx-link) {
		@include flex-center;
		display:inline-flex;
		min-height:$button-size;
		padding-left: $button-padding;
		padding-right: $button-padding;
		transition: all 0.7s $transition-smooth;
		font-size: rem($button-font-size);
		line-height: rem($button-font-size + 4);
		font-weight: bold;
		border:none;
		outline: none;

		&.\--bullet
		{
			border-radius:$button-padding*2;
		}

		@include button($button-color-base);

		&.\--inverted
		{
			@include invertedButton($button-color-base);
		}

		@each $modifier, $color in $colors
		{
			&.\--#{$modifier}
			{
				@include button($color);
				&.\--inverted
				{
					@include invertedButton($color);
				}
			}
		}
	}
}

a.rwx-button
{
	text-decoration: none;
}

button.no-decoration, button.rwx-link
{
	appearance:none;
	background:none;
	outline:none;
	border:none;
	font-size:inherit;
	font:inherit;
	padding:0;
	color:inherit;
}