/*
* @subsection   Icons
*/

$icon-xs-size: 70px;
$icon-xs-fz: 66px;

$icon-sm-size: 70px;
$icon-sm-fz: 72px;

$icon-md-size: 83px;
$icon-md-fz: 76px;

$icon-lg-size: 90px;
$icon-lg-fz: 80px;

$icon-xl-size: 108px;
$icon-xl-fz: 100px;

// Icon General Styles
.icon {
  display: inline-block;
  text-align: center;
  //border-radius: 50%;
  //border-style: solid;
  &-mod-1{
    @media(min-width: $screen-md-min){
      height: 104px;
    }
  }
}


// Icon Sizing Styles
.icon-xs{
  //width: $icon-xs-size;
  //height: $icon-xs-size;
  line-height: $icon-xs-size - 4;
  font-size: $icon-xs-fz;
  border-width: 2px;
}

.icon-sm {
  //width: $icon-sm-size;
  //height: $icon-sm-size;
  line-height: $icon-sm-size - 4;
  font-size: $icon-sm-fz;
  border-width: 2px;
}

.icon-md {
  //width: $icon-md-size;
  //height: $icon-md-size;
  line-height: $icon-md-size - 4;
  font-size: $icon-md-fz;
  border-width: 2px;
}

.icon-lg {
  //width: $icon-lg-size;
  //height: $icon-lg-size;
  line-height: $icon-lg-size - 4;
  font-size: $icon-xs-fz;
  border-width: 2px;
  @media(min-width: $screen-lg-min){
    font-size: $icon-lg-fz;
  }
}

.icon-xl{
  //width: $icon-xl-size;
  //height: $icon-xl-size;
  line-height: $icon-xl-size - 4;
  border-width: 2px;
  font-size: $icon-lg-fz;
  @media(min-width: $screen-lg-min){
    font-size: $icon-xl-fz;
  }

  &-variant-1{
    padding-left: 75px;
    position: relative;

    &:before{
      font-size: 52px;
      position: absolute;
      left: 15px;
      top: 9px;
      @media(min-width: $screen-lg-min){
        font-size: 72px;
        left: 0;
      }
    }
  }

}


// Icon Appearance Styles
.icon-default {
  color: $grayscale-darken;
  border-color: transparent;
}

.icon-primary {
  color: $primary;
  //background: $primary;
  border-color: $primary;
  //box-shadow: $box-shadow-key-small;
}


a {
  &.icon-default:hover {
  }

  &.icon-primary:hover {
    background: darken($primary, 5%);
  }
}

// Social Icons Styles
.icon-xs.fa-facebook,
.icon-sm.fa-facebook,
.icon-md.fa-facebook,
.icon-lg.fa-facebook,
.icon-xl.fa-facebook {
  color: #FFF;
  background: #3B579D;

  &:hover {
    background: darken(#3B579D, 5%);
  }
}

.icon-xs.fa-twitter,
.icon-sm.fa-twitter,
.icon-md.fa-twitter,
.icon-lg.fa-twitter,
.icon-xl.fa-twitter {
  color: #FFF;
  background: #5EA9DD;

  &:hover {
    background: darken(#5EA9DD, 5%);
  }
}

.icon-xs.fa-google-plus,
.icon-sm.fa-google-plus,
.icon-md.fa-google-plus,
.icon-lg.fa-google-plus,
.icon-xl.fa-google-plus {
  color: #FFF;
  background: #DF4A32;

  &:hover {
    background: darken(#DF4A32, 5%);
  }
}