// Default
button,
.button {
	font-family: $font-family;
	font-size: $ui-font-size;
	font-weight: $button-font-weight;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	line-height: 1.125rem;
	min-height: $ui-height;
	padding: $button-padding;
	border: $button-outline-border-size solid transparent;
	vertical-align: middle;
	-webkit-appearance: none;
	color: #000;
	background-color: $button-background-color;
	border-radius: 4px;
}
input.button {
	height: auto;
}
button:hover,
.button:hover {
    outline: none;
	color: rgba(0, 0, 0, .6);
	text-decoration: none;
	box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .125);
}

.button:disabled,
.button.disabled {
	cursor: default;
	font-style: normal;
	opacity: .5;
	&:hover {
		color: #000;
		box-shadow: none;
	}
}

// Outline
.button.outline {
	background: none;
	font-weight: $button-outline-font-weight;
}
.button.outline:hover {
	color: rgba(0,0,0,.6);
	border-color: rgba(0,0,0,.2);
	box-shadow: none;
}
.button.outline,
.button.outline:disabled:hover,
.button.outline.disabled:hover {
	color: rgba(0,0,0,.8);
	border-color: rgba(0,0,0,.4);
}

// Sizes
.button.small {
	font-size: $ui-font-size-small;
	min-height: $ui-height-small;
	padding: $button-padding-small;
	&.upper {
		font-size: $ui-font-size-small - 2px;
	}
}
.button.big {
	font-size: $ui-font-size-big;
	min-height: $ui-height-big;
	padding: $button-padding-big;
	&.upper {
		font-size: $ui-font-size-big - 5px;
	}
}

// Upper
.button.upper {
	font-size: $ui-font-size - 3px;
}

// Primary
.button.primary {
	@include button(#fff, $color-primary);
}

// Inverted
.button.inverted {
	@include button(#000, #fff);
}

// Grouped
.buttons.group {

	display: inline-block;
	vertical-align: bottom;

	& .button {
		float: left;
		margin-left: -1px;
		border-radius: 0;

		&:first-child {
			border-radius: 4px 0 0 4px;
		}
		&:last-child {
			border-radius: 0 4px 4px 0;
		}
	}
}