// # Mixins

// ## Font Smoothing
// Better rendering of fonts on OS X. Does not affect IE.

@mixin font-smoothing($value: antialiased) {
  @if $value == antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

// ## Media Query Breakpoints
// Provides a simple way of adding custom breakpoints. Note that you cannot use `@extend` inside media queries.

// ### Usage
// Include the breakpoint mixin with a min and/or max value.

//[c]
//     @include breakpoint($min: 992px) {
//       color: red;
//     }
//     @include breakpoint($max: 1000px) {
//       color: red;
//     }
//     @include breakpoint($min: 992px, $max: 1000px) {
//       color: red;
//     }
//[/c]

// outputs:

//[c]
//     @media (min-width: 992px) {
//       color: red;
//     }
//     @media (max-width: 1000px) {
//       color: red;
//     }
//     @media (min-width: 992px) and (max-width: 1000px) {
//       color: red;
//     }
//[/c]


@mixin breakpoint($min: 0, $max: 0) {
  $query: '';
  @if $min != 0 and $max != 0 {
    $query: '(min-width: #{$min}) and (max-width: #{$max})';
  } @else if $min != 0 and $max == 0 {
    $query: '(min-width: #{$min})';
  } @else if $min == 0 and $max != 0 {
    $query: '(max-width: #{$max})';
  } @media #{$query} {
    @content;
  }
}

// ## Dead Center
// Centers an element using relative or absolute positioning.

//[c]
//      @include flex-center;
//[/c]

@mixin flex-center {
  @include display(flex);
  @include justify-content(center);
  @include align-items(center);
}

// ## CSS Arrows

// This mixin creates a CSS arrow on a given element. We can have the arrow
// appear in one of 12 locations, 3 positions for each side.
//
// You pass this position in along with a desired arrow color and optional
// border color, for example:
//
//[c]
//      @include arrow(top, left, red)
//[/c]
//
// for just a single, red arrow, or:
//
//[c]
//      @include arrow(bottom, center, red, black)
//[/c]
//
// which will create a red triangle with a black border which sits at the bottom
// center of the element. Call the mixin this way:
//
//     .foo {
//         @include arrow(top, left, #BADA55, #ACE);
//         background-color: #BADA55;
//         border: 1px solid #ACE;
//     }

@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color) {
  @if $arrow-edge == top {
    @extend %arrow--top;

    &::before {
      border-bottom-color: $border-color;
    }

    &::after {
      border-bottom-color: $arrow-color;
    }

    @if $arrow-location == left {
      @extend %arrow--left;
    }

    @if $arrow-location == center {
      @extend %arrow--center;
    }

    @if $arrow-location == right {
      @extend %arrow--right;
    }
  }

  @if $arrow-edge == right {
    @extend %arrow--far;

    &::before {
      border-left-color: $border-color;
    }

    &::after {
      border-left-color: $arrow-color;
    }

    @if $arrow-location == top {
      @extend %arrow--upper;
    }

    @if $arrow-location == center {
      @extend %arrow--middle;
    }

    @if $arrow-location == bottom {
      @extend %arrow--lower;
    }
  }

  @if $arrow-edge == bottom {
    @extend %arrow--bottom;

    &::before {
      border-top-color: $border-color;
    }

    &::after {
      border-top-color: $arrow-color;
    }

    @if $arrow-location == left {
      @extend %arrow--left;
    }

    @if $arrow-location == center {
      @extend %arrow--center;
    }

    @if $arrow-location == right {
      @extend %arrow--right;
    }
  }

  @if $arrow-edge == left {
    @extend %arrow--near;

    &::before {
      border-right-color: $border-color;
    }

    &::after {
      border-right-color: $arrow-color;
    }

    @if $arrow-location == top {
      @extend %arrow--upper;
    }

    @if $arrow-location == center {
      @extend %arrow--middle;
    }

    @if $arrow-location == bottom {
      @extend %arrow--lower;
    }
  }
}


// ## Keyframes mixin
// $name = Name of animation to be referenced later in "animation:" property.
//
//    [c]
//     @include keyframes(fadeIn) {
//         0% { opacity: 0; }
//         100% { opacity: 1; }
//     }
//    [/c]

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}