// Zocial base button architecture
=zocial-base
  .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
    
    // Tweak to styles for -moz
    button::-moz-focus-inner
      border: 0
      padding: 0

    // Add a class of "icon" to display as standalone icons instead
    &.icon
      width: 1.85em
      overflow: hidden

    & > span
      position: relative
      display: inline-block
      font-size: 80%
      font-weight: $zocial-font-weight
      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)))

    // Default button styles
    & > span:before
      content: $zocial-icon-default

// Include zocial-base
+zocial-base
