@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

//
// Insert Font Awesome Icons
// Default is Angle Right [http://fortawesome.github.io/Font-Awesome/icon/angle-right/]
@mixin icon($icon: "\f105") {
  content: $icon;
  display: inline-block;
  font-family: $iconFont;
  font-style: normal;
}


//
// Reset button properties
@mixin btn-reset() {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@mixin btn-icon($fs: 14px, $color: $gray-400, $hover-color: $gray-600, $w: 20px, $h: 20px, $pd: 10px) {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: $color;
  display: inline-block;
  font-size: $fs;
  height: $h + $pd*2;
  padding: $pd;
  position: relative;
  text-align: center;
  width: $w + $pd*2;

  &:hover, &:focus, &:active {
    background-color: transparent;
    cursor: pointer;

    &:before {
      opacity: 1;
    }
  }

  .fa, .fal {
    line-height: $h;
    margin: 0;
  }

  &:before {
    background-color: rgba(0,0,0,0.075);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.25s ease-out;
    width: 100%;
  }

  &[data-tooltip]:after {
    background-color: $gray-800;
    border-radius: 4px;
    display: none;
    color: #fff;
    content: attr(data-tooltip);
    font-size: $font-size-xs;
    font-weight: 400;
    min-height: $base-height;
    opacity: 0;
    line-height: 1;
    padding: $base-padding $base-padding;
    position: absolute;
    top: $h + $pd*2;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, 0);
    z-index: 3000;
  }

  &[data-tooltip]:hover:after {
    display: inline-block;
    opacity: 1;
    top: $h + $pd*2.5;
  }
}