@mixin button-style($bgColor, $borderColor, $color) {
  color: $color;
	background-color: $bgColor;
	border-color: $borderColor;

  // Give desktop users something to play with
	&:hover {
    color: $color;
    text-decoration: none;

    // TODO: Verify if we should keep this or not. Feels weird on Safari
    // Since the button shows the hover state after clicking, but we only
    // want it on desktop
		//background-color: lighten($bgColor, 10%);
  }
	&:active {
		background-color: darken($bgColor, 10%);
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
	}
}

// Single side border-radius
@mixin border-top-radius($radius) {
  border-top-right-radius: $radius;
   border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
}