// main: ../main.scss
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

/// Event wrapper
/// @author Harry Roberts
/// @param {Bool} $self [false] - Whether or not to include current selector
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
@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
/// @author Hugo Giraudel
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

// Media mixins
// Small devices
@mixin xs {
   @media (max-width: #{$screen-xs-max}) {
       @content;
   }
}
// Small devices
@mixin sm {
   @media (max-width: #{$screen-sm-max}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (max-width: #{$screen-md-max}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (max-width: #{$screen-lg-max}) {
       @content;
   }
}

// Extra large devices
// @mixin xl {
//    @media (max-width: #{$screen-xl-min}) {
//        @content;
//    }
// }

@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}