@mixin clearfix {
  zoom: 1;
  &:before,
  &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

@mixin transition($transition-property: all, $transition-time: 0.3s, $method: ease) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

@mixin circle($diameter, $color) {
  width: $diameter;
  height: $diameter;
  border-radius: 50%;
  background-color: $color;
}

@mixin link_visited_hover_active {
  &:link, &:visited, &:hover, &:active {
    @content;
  }
}

@mixin hero-gradient($opacity, $distance_as_percent) {
  &:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    @include background-image(linear-gradient(rgba(0, 0, 0, $opacity), transparent $distance_as_percent));
  }
}

@mixin center_with_flexbox ($flex-align, $justify-content) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: $flex-align;
  -ms-flex-align: $flex-align;
  -webkit-align-items: $flex-align;
  align-items: $flex-align;
  -webkit-justify-content: $justify-content;
  justify-content: $justify-content;
}

@mixin border_highlight($direction, $color: $color-nav-hover) {
  border: 0;
  border-#{$direction}: $header_active_border_height solid $color;
}