@mixin button_base() {
	position: relative;
	display: inline-block;
	font-size: 11px;
	line-height: 18px;
	font-weight: 900;
	text-decoration: none;
	padding: 4px 22px;
	color: $dark_color;
	text-transform: uppercase;
	border-radius: $border_radius_small;
	border-width: 1px;
	border-style: solid;
	outline: none;
	cursor: pointer;
	transition: all 200ms linear;

	&:before {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: $border_radius_small;
		background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
		content: '';
	}

	&:hover {
		&:before {
			background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
		}
	}

	&:active {
		&:before {
			opacity: 0;
		}
	}
}

@mixin secondary_button() {
	color: $light_color;
	border-color: $secondary_outset_1 $secondary_outset_2 $secondary_outset_2 $secondary_outset_1;
	background-color: $secondary_gradint_2;
	&:active {
		background-color: $secondary_bg_color;
		border-color: darken( $secondary_outset_2, 10%) $secondary_outset_1 $secondary_outset_1 darken( $secondary_outset_2, 10%);
	}
}