// ############################################################################
// Buttons
// ############################################################################
//
// Interactive buttons.
//


button-color($bg-color, $active-color = darken($bg-color, 5), $font-color = white, $border-color = darken($bg-color, 5)) {
    // Creates a standardized button color scheme.
    //
    // Args
    // -----
    //
    //     $bg-color: color
    //         Background color of the button.
    //     $active-color: color
    //         Background color of the button when active.
    //     $font-color: color
    //         Color of the text displayed on the button.
    //     $border-color: color
    //         Color of the button's border.
    //
    // Example
    // --------
    //
    //     .my-cool-button {
    //         @extends $button;
    //
    //         button-color(blue)
    //     }
    //
    //     .my-color-changing-button {
    //         @extends $button;
    //
    //         button-color(blue, green)
    //     }
    //
    color: $font-color;
    background-color: $bg-color;
    border-color: $border-color;

    &:hover {
        background-color: $bg-color;
    }

    &:active {
        background-color: $active-color;
    }
}


$button {
	  background: transparent none repeat scroll 0px 0px;
	  border: medium none;
	  border-radius: 2px;
	  color: #000;
	  position: relative;
	  height: 36px;
	  min-width: 64px;
	  padding: 0px 16px;
	  display: inline-block;
    font-family: $font.primary.family;
	  font-size: 14px;
	  font-weight: 500;
	  // text-transform: uppercase;
	  letter-spacing: 0px;
	  overflow: hidden;
	  will-change: box-shadow, transform;
	  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1) 0s, background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	  outline: medium none;
	  cursor: pointer;
	  text-decoration: none;
	  text-align: center;
	  line-height: 36px;
	  vertical-align: middle;

    &:hover {
  	    background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;
    }
    &:active {
        background: rgba(158, 158, 158, 0.4) none repeat scroll 0% 0%;
    }
}



$button--raised {
    @extends $button;

  	background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;
	  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

    &:hover {
  	    background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;
    }

    &:active {
        background: rgba(158, 158, 158, 0.4) none repeat scroll 0% 0%;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
}


$button--flat {
    @extends $button;

  	background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;

    &:hover {
  	    background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;
    }

    &:active {
        background: rgba(158, 158, 158, 0.4) none repeat scroll 0% 0%;
    }
}


$button--circle {
	border-radius: 50%;
	font-size: 24px;
	height: 56px;
	margin: auto;
	min-width: 56px;
	width: 56px;
	padding: 0px;
	overflow: hidden;
	background: rgba(158, 158, 158, 0.2) none repeat scroll 0% 0%;
	box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.24);
	position: relative;
	line-height: 56px;
}