$header_active_border_height: 2px;
$color-nav-hover: color('secondary');

@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 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;
}

@mixin transition_extra_fast($properties...) {
  transition-property: $properties;
  transition-duration: 0.08s;
  transition-timing-function: ease-in-out;
}

@mixin transition_fast($properties...) {
  transition-property: $properties;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}

@mixin transition_normal($properties...) {
  transition-property: $properties;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

@mixin transition_slow($properties...) {
  transition-property: $properties;
  transition-duration: 0.45s;
  transition-timing-function: ease-in-out;
}