opengovernment/askthem

@import load

.cta-pill
  padding: 13px 10px 12px
  display: inline-block
  position: relative
  border: 1px solid #d77164
  font:
    size: 0.875em
    weight: 600
  color: $white
  cursor: pointer
  line-height: 1.286em
  +text-shadow(0 1px 0 #e66c5c)
  vertical-align: top
  +box-shadow(0 1px 0 #e66c5c)
  background-color: #fa7564
  +background(linear-gradient(top center, #fa7564, #f07160))
  +rounded_corners
  +drop_shadow
  +inset_double_drop_shadow
  &:hover
    top: -1px
    color: $white
    +background(linear-gradient(top center, #ff7866, #f47362))
  &:active
    top: 1px
    +drop_shadow(0, 1px, 0, 0, rgba($white, 0.1))
    +background(linear-gradient(top center, #ed6f5f, #ed6f5f))

.cta-pill-facebook
  +background(linear-gradient(top center, lighten($facebook-blue, 5%), $facebook-blue))
  border: 1px solid darken($facebook-blue, 10%)
  text-shadow: 0 1px 0 darken($facebook-blue, 8%)
  +box-shadow(0 1px 0 darken($facebook-blue, 8%))
  +drop_shadow
  +inset_double_drop_shadow
  &:hover
    +background(linear-gradient(top center, lighten($facebook-blue, 8%), lighten($facebook-blue, 3%)))
  &:active
    +background(linear-gradient(top center, $facebook-blue, $facebook-blue))

.cta-pill-twitter
  +background(linear-gradient(top center, lighten($twitter-blue, 5%), $twitter-blue))
  border: 1px solid darken($twitter-blue, 3%)
  text-shadow: 0 1px 0 darken($twitter-blue, 8%)
  +box-shadow(0 1px 0 darken($twitter-blue, 8%))
  +drop_shadow
  +inset_double_drop_shadow
  &:hover
    +background(linear-gradient(top center, lighten($twitter-blue, 8%), lighten($twitter-blue, 3%)))
  &:active
    +background(linear-gradient(top center, $twitter-blue, $twitter-blue))

.cta-pill-google
  +background(linear-gradient(top center, lighten($google-plus-red, 5%), $google-plus-red))
  border: 1px solid darken($google-plus-red, 3%)
  text-shadow: 0 1px 0 darken($google-plus-red, 8%)
  +box-shadow(0 1px 0 darken($google-plus-red, 8%))
  +drop_shadow
  +inset_double_drop_shadow
  &:hover
    +background(linear-gradient(top center, lighten($google-plus-red, 8%), lighten($google-plus-red, 3%)))
  &:active
    +background(linear-gradient(top center, $google-plus-red, $google-plus-red))

.sign-arrow
  &:after
    margin-left: 8px
    font-family: 'FontAwesome'
    content: "\f105"