/*
* @subsection   Buttons
*/

$btn-xs-height: 49px;
$btn-xs-size: 11px;

$btn-sm-height: $btn-xs-height * 1.25;
$btn-sm-size: $btn-xs-size * 1.13;

$btn-md-height: $btn-sm-height * 1.21;
$btn-md-size: $btn-sm-size * 1.12;

$btn-lg-height: $btn-md-height ;
$btn-lg-size: $btn-md-size ;

$btn-xl-height: $btn-lg-height * 1.125;
$btn-xl-size: $btn-lg-size * 1.26;

$btn-group-offset: 30px;

// Button General Styles
.btn {
  display: inline-block;
  text-align: center;
  //line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  border-style: solid;
  //font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  //text-transform: uppercase;
  border-radius: $border-radius-large;
  cursor: pointer;
  transition: .3s all ease;

  &:before{
    float: left;
    vertical-align: middle;
  }
}

// Button Layout Styles
.btn-xs {
  border-width: 2px;
  padding: ceil(($btn-xs-height - ($btn-xs-size * 1.2) - 4) / 2);
  font-size: ceil($btn-xs-size);

  &:before{
    font-size: $btn-md-size * 1.33;
    padding-right: 10px;
    //line-height: (1em / 1.33);
  }
}

.btn-sm {
  border-width: 2px;
  padding: ceil(($btn-sm-height - ($btn-sm-size * 1.2) - 4) / 2);
  font-size: ceil($btn-sm-size);

  &:before{
    font-size: $btn-md-size * 1.29;
    padding-right: 10px;
    //line-height: (1em / 1.29);
  }
}

.btn-md {
  border-width: 2px;
  padding: ceil(($btn-md-height - ($btn-md-size * 1.2) - 10) / 2) 55px;
  font-size: ceil($btn-md-size);

  &:before{
    font-size: $btn-md-size * 1.42;
    padding-right: 10px;
    //line-height: (1em / 1.42);
  }
}

.btn-lg {
  border-width: 2px;
  padding: ceil(($btn-lg-height - ($btn-lg-size * 1.2) - 4) / 2) 75px;
  font-size: ceil($btn-lg-size);

  &:before{
    font-size: $btn-lg-size * 2.47;
    padding-right: 20px;
    //line-height: (1em / 2.47);
  }
}

.btn-xl {
  border-width: 2px;
  padding: ceil(($btn-xl-height - ($btn-xl-size * 1.2)) / 2);
  font-size: ceil($btn-xl-size);

  &:before{
    font-size: $btn-xl-size * 1.875;
    padding-right: 20px;
    //line-height: (1em / 1.875);
  }
}

// Button Appearance Styles
.btn-default {
  color: $grayscale-darken;
  background: transparent;
  border-color: $grayscale-lighten;

  &:hover {
    background: $grayscale-lighten;
  }

  &:active {
    background: darken($grayscale-lighten, 5%);
    border-color: darken($grayscale-lighten, 5%);
  }
}

.btn-primary {
  color:$primary;
  background: transparent;
  border-color: $primary;
  //box-shadow: $box-shadow-key-small;

  &:hover, &:active{
    background: $primary;
    color: $white;
  }

  &:active {
    //box-shadow: $box-shadow-ambient;
  }
}

.btn.fa-facebook{
  color: $white;
  background: #4569ae;
  border-color: #4569ae;
  box-shadow: $box-shadow-key-small;

  &:hover, &:active{
    background: darken(#4569ae, 5%);
    border-color: darken(#4569ae, 5%);
  }

  &:hover {
    box-shadow: $box-shadow-ambient;
  }

  &:active {
    box-shadow: $box-shadow-ambient;
  }
}

.btn.fa-twitter{
  color: $white;
  background: #5ea9dd;
  border-color: #5ea9dd;
  box-shadow: $box-shadow-key-small;

  &:hover, &:active{
    background: darken(#5ea9dd, 5%);
    border-color: darken(#5ea9dd, 5%);
  }

  &:hover {
    box-shadow: $box-shadow-ambient;
  }

  &:active {
    box-shadow: $box-shadow-ambient;
  }
}


.btn.fa-pinterest{
  color: $white;
  background: #cb2027;
  border-color: #cb2027;
  box-shadow: $box-shadow-key-small;

  &:hover, &:active{
    background: darken(#cb2027, 5%);
    border-color: darken(#cb2027, 5%);
  }

  &:hover {
    box-shadow: $box-shadow-ambient;
  }

  &:active {
    box-shadow: $box-shadow-ambient;
  }
}


// Button Group Styles
.btn-group {
  @include transform(translateY(-$btn-group-offset));
  margin-bottom: -$btn-group-offset;
  margin-left: -$btn-group-offset;

  .btn {
    margin-top: $btn-group-offset;
    margin-left: $btn-group-offset;
  }
}