// Defaults
$zocial-font-size: 1.8em !default
$zocial-icon-font: zocial-lite !default
$zocial-icon-default: "-" !default
$zocial-text-font: helvetica !default

@import "fonts"

=zocial
  .zocial, .zocial > span
    +border-radius(0.2em)
    position: relative

  // Button Structure
  .zocial
    +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
    +font-family($zocial-text-font)
    +text-shadow(0 1px 0 rgba(#000,.5))
    position: relative
    border: 1px solid rgba(#000,.2)
    border-bottom-color: rgba(#000,.4)
    color: #fff !important
    cursor: pointer
    display: inline-block
    font-size: $zocial-font-size
    outline: none
    padding: 0
    text-decoration: none !important
    
    // Misc
    button::-moz-focus-inner
      border: 0
      padding: 0

    // These buttons can be displayed as standalone icons if you also add a class of "icon"
    &.icon
      width: 1.85em
      overflow: hidden

    & > span
      position: relative
      display: inline-block
      font-size: 80%
      font-weight: bold
      line-height: 2em
      padding-right: 0.825em
      white-space: nowrap
      &:before
        +box-shadow(0.075em 0 0 rgba(#fff,.25))
        +font-family($zocial-icon-font)
        border-right: 0.075em solid rgba(#000,.1)
        display: block
        float: left
        font-size: 125%
        font-style: normal
        font-weight: normal
        margin: 0.0675em 0.5em 0 0
        text-align: center
        width: 1.75em

    // Gradient default
    & > span
      +background(linear-gradient(top, rgba(#fff,.1), rgba(#fff,.05) 49%, rgba(#000,.05) 51%, rgba(#000,.1)))

    // Gradient hover and focus
    &:hover > span, &:focus > span
      +background(linear-gradient(top, rgba(#fff,.15), rgba(#fff,.15) 49%, rgba(#000,.1) 51%, rgba(#000,.15)))

    // Gradient active/clicked
    &:active > span
      +background(linear-gradient(bottom, rgba(#fff,.1), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))

    // Adjustments for light background buttons
    &.white, &.twitter, &.github
      +text-shadow(0 1px 0 rgba(#fff,.8))
      +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))

    &.github:hover > span, &.twitter:focus > span, &.github:focus > span
      +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))

    &.twitter:active > span, &.github:active > span
      +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))

    // Assumes full set if the icon-font is zocial
    @if $zocial-icon-font == "zocial"
      // Adjustments for light background buttons
      &.plancast, &.posterous, &.dropbox, &.openid, &.instapaper, &.wikipedia, &.cloudapp, &.gmail
        +text-shadow(0 1px 0 rgba(#fff,.8))
        +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))

      &.plancast:hover > span, &.posterous:hover > span, &.dropbox:hover > span, &.openid:hover > span, &.instapaper:hover > span, &.github:hover > span, &.wikipedia:hover > span, &.gmail:hover > span,
      &.plancast:focus > span, &.posterous:focus > span, &.dropbox:focus > span, &.openid:focus > span, &.instapaper:focus > span, &.github:focus > span, &.wikipedia:focus > span, &.gmail:focus > span
        +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))

      &.plancast:active > span, &.posterous:active > span, &.dropbox:active > span, &.openid:active > span, &.instapaper:active > span, &.wikipedia:active > span, &.gmail:active > span
        +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))


    // Default
    & > span:before
      content: $zocial-icon-default
    
    // Basic colors + content
    &.white
      background: #fff
      color: #000 !important
      &  > span:before
        content: $zocial-icon-default
        color: #000
    &.black
      background: #000
      color: #fff !important
      &  > span:before
        content: $zocial-icon-default
        color: #fff
    &.red
      background: red
      color: #fff !important
      &  > span:before
        content: $zocial-icon-default
        color: #fff
    &.green
      background: green
      color: #fff !important
      &  > span:before
        content: $zocial-icon-default
        color: #fff
    &.blue
      background: blue
      color: #fff !important
      &  > span:before
        content: $zocial-icon-default
        color: #fff

    // Icons
    &.facebook > span:before
      content: "f"
    &.github > span:before
      content: "g"
    &.googleplus > span:before
      content: "+"
    &.rss > span:before
      content: "R"
    &.smashingmag > span:before
      content: "*"
    &.twitter > span:before
      content: "T"
    
    // Assumes full set if the icon-font is zocial
    @if $zocial-icon-font == "zocial"
      &.google > span:before
        content: "G"

      &.linkedin > span:before
        content: "L"

      &.meetup > span:before
        content: "M"

      &.plancast > span:before
        content: "P"

      &.soundcloud > span:before
        content: "s"

      &.tumblr > span:before
        content: "t"

      &.dribbble > span:before
        content: "D"

      &.forrst > span:before
        content: ":"
        color: #50894F

      &.dropbox > span:before
        content: "d"
        color: #4EA4E3

      &.posterous > span:before
        content: "~"

      &.flattr > span:before
        content: "%"

      &.spotify > span:before
        content: "="

      &.foursquare > span:before
        content: "4"

      &.intensedebate > span:before
        content: "{"

      &.wordpress > span:before
        content: "w"

      &.yahoo > span:before
        content: "Y"

      &.openid > span:before
        content: "o"
        color: #FF921D

      &.guest > span:before
        content: "?"

      &.instapaper > span:before
        content: "I"

      &.android > span:before
        content: "&"

      &.itunes > span:before
        content: "A"

      &.paypal > span:before
        content: "$"

      &.appstore > span:before
        content: "^"

      &.creativecommons > span:before
        content: "C"

      &.disqus > span:before
        content: "Q"

      &.eventasaurus > span:before
        content: "v"

      &.eventbrite > span:before
        content: "|"

      &.chrome > span:before
        content: "["

      &.html5 > span:before
        content: "5"

      &.songkick > span:before
        content: "k"

      &.vimeo > span:before
        content: "V"

      &.youtube > span:before
        content: "U"

      &.gowalla > span:before
        content: "@"

      &.skype > span:before
        content: "S"

      &.aol > span:before
        content: "\""

      &.wikipedia > span:before
        content: ","

      &.yelp > span:before
        content: "y"

      &.evernote > span:before
        content: "E"

      &.ie > span:before
        content: "6"

      &.cloudapp > span:before
        content: "c"

      &.gmail > span:before
        content: "m"
        color: #ff0000

      &.amazon > span:before
        content: "a"

      &.lastfm > span:before
        content: "l"

    // Colors
    &.github
      color: #050505 !important
      background: #FBFBFB
    &.googleplus
      background: #282626
    &.googleplus:before
      content: ""
      display: block
      height: 0.2em
      margin-bottom: -0.1em
      width: 100%
      position: relative
      left: 0em
      top: 0
      +background(linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b))
      +border-radius(0.2em 0.2em 0 0)
      border-bottom: 1px solid rgba(#000,.8)
      +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
      z-index: 0
    &.facebook
      background: #4863AE
    &.rss
      background: #FF7F25
    &.smashingmag
      background: #FF4F27
    &.twitter
      background: #E9F9FF
      color: #3C6B9C !important

    // Assumes full set if the icon-font is zocial
    @if $zocial-icon-font == "zocial"
      &.openid
        background: #f5f5f5
        color: #333 !important

      &.guest
        background: #1B4D6D

      &.instapaper
        color: #222 !important
        background: #eee

      &.android
        background: #A4C639

      &.itunes
        background: #222

      &.paypal
        background: #FF921D
        color: #032751 !important
        +text-shadow(0 1px 0 rgba(#fff,.5))

      &.appstore
        background: #007DCB !important

      &.creativecommons
        background: #000

      &.disqus
        background: #216892

      &.gowalla
        background: #FF720A

      &.skype
        background: #00A2ED

      &.aol
        background: #FF0000

      &.wikipedia
        background: #fff
        color: #000 !important

      &.yelp
        background: #E60010

      &.scribd > span:before
        content: "}"
        color: #00D5EA !important

      &.scribd
        background: #231C1A

      &.eventasaurus
        background: #8CCC33

      &.eventbrite
        background: #FF5616

      &.chrome
        background: #006CD4

      &.html5
        background: #FF3617

      &.songkick
        background: #FF0050

      &.vimeo
        background: #00A2CD

      &.youtube
        background: #FF0000

      &.yahoo
        background: #A200C2

      &.intensedebate
        background: #0099E1

      &.wordpress
        background: #464646

      &.linkedin
        background: #0083A8

      &.google
        background: #4E6CF7

      &.meetup
        background: #FF0026

      &.plancast
        background: #E7EBED
        color: #333 !important

      &.soundcloud
        background: #FF4500

      &.tumblr
        background: #374a61

      &.foursquare
        background: #44A8E0

      &.dribbble
        background: #ea4c89

      &.forrst
        background: #1E360D

      &.dropbox
        background: #f5f5f5
        color: #312c2a !important

      &.posterous
        background: #FFD959
        color: #BC7134 !important

      &.flattr
        background: #8ABA42

      &.spotify
        background: #60AF00

      &.evernote
        background: #6BB130
        color: #fff !important

      &.ie
        background: #00A1D9

      &.cloudapp
        background: #fff
        color: #312c2a !important

      &.gmail
        background: #efefef
        color: #222 !important

      &.amazon
        background: #FFAD1D
        color: #030037 !important
        text-shadow: 0 1px 0 rgba(#fff,.5)

      &.lastfm
        background: #dc1a23