%base-button {
	@include font-size (15);
	line-height: 1.3;
	padding: 15px 30px;
	font-weight: 600;
	@include bp(smx) {
		@include font-size(14);
		padding: 10px 20px;
	}
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: none;
	background-color: $primary-color;
	color: $light-color;
	cursor: pointer;
	padding: 15px 30px;
	font-weight: 600;
	@include transition(background-color 0.3s);
    &:hover,
    &:active,
    &:focus {
    	background-color: $hover-color;
    }
}


.button-primary,
.button-round {
	background-color: $primary-color;
}

.button-secondary {
	background-color: $secondary-color;
}

.button-primary,
.button-round,
.button-secondary {
	@extend %base-button;
	border: none;
	color: $light-color;
	display: inline-block;
	position: relative;
	@include transition(background-color 0.3s);
	&:hover,
	&:focus,
	&:active {
		background-color: $hover-color;
		color: $light-color;
	}
}

.outline-primary,
.outline-round {
	@extend %base-button;
	border: 2px solid #292929;
	color: #292929;
	display: inline-block;
	position: relative;
	@include transition(background-color 0.3s, border-color 0.3s);
	&:hover,
	&:focus,
	&:active {
		background-color: $hover-color;
		border-color: $hover-color;
		color: $light-color;
	}
}

.button-round,
.outline-round {
	@include border-radius(30px);
}

.button-text {
	color: $secondary-color;
	font-weight: 600;
	position: relative;
	line-height: 1.3;
	@include transition(all 0.4s);
	&:hover,
	&:focus,
	&:active {
		color: $primary-color;
	}
}