/// Contains all application level Sass mixins

/// Event wrapper
/// @param {Bool} $self [false] - Whether or not to include current selector
/// @link https://twitter.com/csswizardry/status/478938530342006784
@mixin on-event($self: false) {
  @if $self {
    &,
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  } @else {
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  }
}

/// Make a context based selector a little more friendly
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

/// Sets equal width and height properties, and 50% border radius
/// @param {Size} $size width and height for the image
@mixin round-image($size) {
  width: $size;
  height: $size;
  max-width: 100%;
  border-radius: 50%;
}

/// Breakpoint manager
/// @param {String} $breakpoint - a string that maps to a breakpoint key in $breakpoints
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
  $breakpoint-query: map-get($breakpoints, $breakpoint);

  @if $breakpoint-query {
    $query: if(
                    type-of($breakpoint-query) == 'string',
                    unquote($breakpoint-query),
                    inspect($breakpoint-query)
    );

    @media #{$query} {
      @content;
    }
  } @else {
    @error 'Could not find `#{$breakpoint}` in `$breakpoints`';
  }
}

/// Applies flex styles that center an elements contents  on the main and cross axes
///   i.e. vertically and horizontally
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/// Applies flex box centering using the flex-center mixin,
///   but sets the main axis to column
@mixin flex-column-center {
  @include flex-center;
  flex-direction: column;
}

/// Applies full -screen dimensions to the specified element
@mixin full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow-y: auto;
}

/// Temp implementation before Auto Prefixer is installed
/// @link https://github.com/postcss/autoprefixer

/// Vendor prefix helper
/// @param {String} $property - CSS property to be prefixed
/// @param {*} $value to be prefixed
/// @param {List} $prefixes prepend prefixes
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }

  #{$property}: $value;
}


/// Maintains the aspect ratio for a wrapped element
/// @param {Number} $width number value for the container's width ratio
/// @param {Number} $height number value for the container's with ratio
@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }

  > * {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
}