/** Mobile Button 
*************************************************** **/

#topNav button.btn-mobile {
  display: none;
  color: #333;
  display: none;
  padding: 6px 10px;
  float: right;
  margin-top: 13px;
  margin-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  i {
    padding: 0;
    margin: 0;
    font-size: 21px;
  }
}

@media only screen and (max-width: 992px) {
  #topNav button.btn-mobile {
    display: inline-block;
  }
}
	
/* Button Styles
------------------------------------*/
/* General Button Styles */
.btn {
  position: relative;
  transition: .2s ease;
  cursor: pointer;

  &:focus,
  &:active:focus,
  &.active:focus {
    outline: 0 none;
    box-shadow: none;
  }
}

/* Button Content
------------------------------------*/
.u-btn-content {
  white-space: normal;
}

/* Buttons Only Icon (O)
------------------------------------*/
.u-btn-only-icon {
  position: relative;
  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

/* Button Sizes
------------------------------------*/
//
// e.g. @include g-button-size ($padding-y, $padding-x, $font-size);
//

/* Extra Small */
.btn-xs {
  @include u-button-size (2px, 7px, 11px);
}

/* Medium */
.btn-md {
  @include u-button-size (8px, 20px, 15px);
}

/* Extra Large */
.btn-xl {
  @include u-button-size (13px, 26px, 18px);
}

/* Extramly Large */
.btn-xxl {
  @include u-button-size (15px, 30px, 21px);
}


/* Button Hovers
------------------------------------*/
[class*="u-btn-hover"] {
  z-index: 1;

  &:hover {
    text-decoration: none;
  }
  &:focus {
    text-decoration: none;
  }

  &::after {
    position: absolute;
    content: "";
    z-index: -1;
    transition: all .3s;
  }
}