/* -----------------------------------------------------------------------------
 *                       __  ____            ____
 *                      /  |/  (_)  __      /  _/___  _____
 *                     / /|_/ / / |/_/_____ / // __ \/ ___/
 *                    / /  / / />  </_____// // / / (__  )
 *                   /_/  /_/_/_/|_|     /___/_/ /_/____/
 *
 * ---------------------------------------------------------------------------*/
 @mixin clearfix {
    &:after, &:before {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
@mixin breakpoint( $break ) {
    @if map-has-key( $breakpoints, $break ) {
        @media ( min-width: #{ map-get( $breakpoints, $break ) } ) {
            @content;
        }
    }
    @else {
        @media ( $break ) {
            @content;
        }
    }
}

@mixin flexbox( $direction:'' ) {
    display: flex;
    @if( $direction == 'row' ) {
        flex-direction: row;
    }
    @if( $direction == 'column' ) {
        flex-direction: column;
    }
}
@mixin invisible() {
    clip: rect(0px, 0px, 0px, 0px);
    -webkit-clip-path: rect( 0px 0px, 0px 0px, 0px 0px, 0px 0px);
    clip-path: rect( 0px 0px, 0px 0px, 0px 0px, 0px 0px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    font-size: 0;
}

@mixin keyframes($animation-name) {
  @keyframes #{$animation-name} {
    @content;
  }
}