/* ========================================================================
 * BUTTON
 * ======================================================================== */
.btn{
  @include transition(all 0.3s);
  position: relative;
  z-index: 1;
  background-color: transparent;
  font-weight: 300;
  @include border-radius(0px);
  &:after{
    content: ' ';
    position: absolute;
    z-index: -1;
    @include transition(all 0.3s);
    @include border-radius(0px);
  }
  &:before{
    speak: none;
    text-transform: none;
    position: relative;
    -webkit-font-smoothing: antialiased;
  }
}

.btn-default{
  color: #999 !important;
  border-color: #CCC !important;
}
@include button-color(default,$color-default);
@include button-color(primary,$color-primary);
@include button-color(success,$color-success);
@include button-color(info,$color-info);
@include button-color(warning,$color-warning);
@include button-color(danger,$color-danger);
@include button-color(lilac,$color-lilac);
@include button-color(inverse,$color-inverse);
.btn-teal{
  color: #FFF;
  background-color: $color-teal;
  border-color: darken($color-teal,5%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  &:hover,&:focus,&:active{
    color: #FFF !important;
    background-color: darken($color-teal,5%);
  }

  // BUTTON STROKE SOCIAL
  &.btn-stroke{
    border: 1px double $color-teal;
    background-color: transparent;
    color: $color-teal;
    &:hover{
      color: #FFF !important;
      background-color: darken($color-teal,5%);
    }
  }

  // BUTTON SOLID SOCIAL ---------------------------------------------------
  &.btn-solid{
    border: 1px solid $color-teal;
  }

  // BUTTON DASHED SOCIAL ---------------------------------------------------
  &.btn-dashed{
    border: 1px dashed $color-teal;
  }

  // BUTTON DOTTED SOCIAL ---------------------------------------------------
  &.btn-dotted{
    border: 1px dotted $color-teal;
  }

  // BUTTON DOUBLE SOCIAL ---------------------------------------------------
  &.btn-double{
    border: 4px double $color-teal;
  }

  // BUTTON INSET SOCIAL ---------------------------------------------------
  &.btn-inset{
    border: 4px inset $color-teal;
  }

  // BUTTON CIRCLE SOCIAL ---------------------------------------------------
  &.btn-circle{
    padding-left: 0;
    padding-right: 0;
    width: 34px;
    @include border-radius(50% 50% 50% 50%);
  }
}

@include social-button-color(bitbucket,$social-bitbucket);
@include social-button-color(behance,$social-behance);
@include social-button-color(delicious,$social-delicious);
@include social-button-color(dribbble,$social-dribbble);
@include social-button-color(facebook,$social-facebook);
@include social-button-color(flickr,$social-flickr);
@include social-button-color(foursquare,$social-foursquare);
@include social-button-color(googleplus,$social-googleplus);
@include social-button-color(instagram,$social-instagram);
@include social-button-color(linkedin,$social-linkedin);
@include social-button-color(path,$social-path);
@include social-button-color(pinterest,$social-pinterest);
@include social-button-color(rss,$social-rss);
@include social-button-color(skype,$social-skype);
@include social-button-color(soundcloud,$social-soundcloud);
@include social-button-color(tumblr,$social-tumblr);
@include social-button-color(twitter,$social-twitter);
@include social-button-color(vimeo,$social-vimeo);
@include social-button-color(wordpress,$social-wordpress);
@include social-button-color(yahoo,$social-yahoo);
@include social-button-color(youtube,$social-youtube);

.btn-icon-stacked{
  text-align: left;
  padding: 10px 10px 10px 45px;
  position: relative;
  &:focus,&:active{
    color: white;
  }
  i{
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
  }
  span{
    display: block;
    font-size: 13px;
    line-height: normal;
  }
}

.btn-compose-email{
  padding: 10px 0px;
  margin-bottom: 20px;
}

.btn-group-vertical {
  > .btn{
    &.rounded{
      &:first-child{
        &:not(:last-child){
          @include border-radius(3px 3px 0px 0px);
        }
      }
      &:last-child{
        &:not(:first-child){
          @include border-radius(0px 0px 3px 3px);
        }
      }
    }
    &:first-child{
      &:not(:last-child){
        @include border-radius(0px);
      }
    }
    &:last-child{
      &:not(:first-child){
        @include border-radius(0px);
      }
    }
  }
}