@mixin pivotal_button_primary

+pivotal_button
background-color: $pivotal_blue
+box-shadow(0 2px 0 0 darken($pivotal_blue, 10%))
&:visited
  color: white
&:hover
  background-color: darken($pivotal_blue,10%)
  +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%))
&:active
  background-color: darken($pivotal_blue,15%)
  +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%), 0 1px 2px rgba(0,0,0,.45) inset)

@mixin pivotal_button_danger

+pivotal_button
background-color: $pivotal_red
+box-shadow(0 2px 0 0 darken($pivotal_red, 10%))
&:visited
  color: white
&:hover
  background-color: darken($pivotal_red,10%)
  +box-shadow(0 2px 0 0 darken($pivotal_red, 20%))
&:active
  background-color: darken($pivotal_red,15%)
  +box-shadow(0 2px 0 0 darken($pivotal_red, 20%), 0 1px 2px rgba(0,0,0,.45) inset)

@mixin pivotal_button

background-color: lighten($pivotal_dark_grey, 25%)
color: white
border: none
font-family: $pivotal_font_family
font-size: 12px
padding: .5em .75em
text-align: center
text-decoration: none
-webkit-font-smoothing: antialiased
+single-transition(all, 400ms, cubic-bezier(0.19, 1, 0.22, 1))
+box-shadow(0 2px 0 0 $pivotal_dark_grey)
&:visited
  color: white
&:hover
  background-color: lighten($pivotal_dark_grey, 10%)
  +box-shadow(0 2px 0 0 darken($pivotal_dark_grey, 10%))
  color: white
  text-decoration: none
&:active
  background-color: $pivotal_dark_grey
  color: white
  text-decoration: none
  +box-shadow(0 2px 0 0 darken($pivotal_dark_grey, 10%), 0 1px 2px rgba(0,0,0,.45) inset)

@mixin pivotal_button_primary–large

// this should be depricated. Mix in the primary button and the large button if you want this style.
background-color: $pivotal_blue
color: white
border: none
font-family: $pivotal_font_family
+pivotal_button--large
text-align: center
-webkit-font-smoothing: antialiased
+single-transition(all, 400ms, cubic-bezier(0.19, 1, 0.22, 1))
+box-shadow(0 2px 0 0 darken($pivotal_blue, 10%))
&:visited
  color: white
&:hover
  background-color: darken($pivotal_blue,10%)
  +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%))
&:active
  background-color: darken($pivotal_blue,15%)
  +box-shadow(0 2px 0 0 darken($pivotal_blue, 20%), 0 1px 2px rgba(0,0,0,.45) inset)

@mixin pivotal_button–large

font-size: 16px
padding: 1em 1.5em