// button background color
@mixin button($btn-bg) {
	@include border-radius($radius);
	border: 0;

 	background: $btn-bg;
 	color: $btn-color;
	padding: $btn-padding;

	&:hover {
  	background:lighten($btn-bg,8%);
  	transition: all 0.15s ease;
	}
	&:active {
  	background:lighten($btn-bg,12%);
	}
}

// small button
@mixin button-sm() {
	.#{$btn-class-sm} {
		font-size: 0.5rem;
	}
}

// medium button
@mixin button-md() {
	.#{$btn-class-md} {
  		font-size: 0.75rem;
	}
}

// regular button

// large button
@mixin button-lg() {
	.#{$btn-class-lg} {
  		font-size: 1.25rem;
	}
}

// extra large button
@mixin button-xl() {
	.#{$btn-class-xl} {
  		font-size: 1.5rem;
	}
}

// button size classes
@mixin buttons() {
	@include button-sm();
	@include button-md();
	@include button-lg();
	@include button-xl();
}
