@mixin button {
	@include user-select(none);
	display: inline-block;
	border-radius: 0;
	font-family: $font-family-base;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: normal;
	line-height: $line-height-input;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.1s linear;
}

@mixin button-hover-effect {
	transform: translate3d(0, 0, 0);

	&:hover,
	&:focus {
		transform: translate3d(0, -2px, 0);
		box-shadow: 0px 5px 11px rgba(0, 0, 0, 0.15);
	}
}

@mixin button-primary {
	color: #fff;
	background-color: $color-1;
	border: 1px solid $color-1;

	&:hover,
	&:focus {
		color: #fff;
		background-color: lighten($color-1, 10%);
		border-color: lighten($color-1, 10%);
	}
}

@mixin button-secondary {
	color: $text-color;
	background-color: #fff;
	border: 1px solid #c4c4c4;

	&:hover,
	&:focus {
		color: $text-color;
		background-color: #fff;
		border-color: $text-color;
	}
}

@mixin button-transparent {
	color: $text-color;
	background-color: transparent;
	border: 1px solid #c4c4c4;

	&:hover,
	&:focus {
		color: $text-color;
		background-color: transparent;
		border-color: $text-color;
	}
}

@mixin button-disabled {
	color: #bbb;
	background-color: #e5e5e5;
	border: none;
	cursor: not-allowed;

	&:hover,
	&:focus {
		color: #bbb;
		background-color: #e5e5e5;
		border: none;
		transform: none;
		box-shadow: none;
	}
}

@mixin button-small {
	padding: 0.375rem 1.375rem;
}

@mixin button-medium {
	padding: 0.625rem 1.5rem;
}

@mixin button-large {
	padding: 1.0625rem 2rem;
	text-transform: uppercase;
}

@mixin button-rounded {
	border-radius: 0.375rem;
}

.btn {
	@include button;
	@include button-medium;
}
.btn:not(.btn-no-hover) {
	@include button-hover-effect;
}
/* Button styles */
.btn-primary {
	@include button-primary;
}
.btn-secondary {
	@include button-secondary;
}
.btn-transparent {
	@include button-transparent;
}
/* Button sizes */
.btn-small {
	@include button-small;
}
.btn-large {
	@include button-large;
}
/* Rounded button */
.btn-rounded {
	@include button-rounded;
}
/* Remove button border */
.btn-no-border,
.btn-no-border:hover,
.btn-no-border:focus {
	border: none;
}
/* Disabled button state */
.btn-disabled,
.btn:disabled,
.btn:disabled[disabled] {
	@include button-disabled;
}
