/*----------------------------------------------------------------------------*\
    MIXINS
    Default mixins

\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/

$browser-context: $base-font-size !default;
$legacy-support-for-ie8: false !default;

/*  Functions
\*----------------------------------------------------------------------------*/

// COLOR
@function color($key) {
    @if map-has-key($colors, $key) {
        @return map-get($colors, $key);
    }

    @error "Unknown `#{$key}` in $colors.";
    @return null;
}

@function gradient($color){
    @if $color == "grey" {
        @return linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 25%, rgba(245,245,245,1) 100%)
    }

    @error "Unknown `#{$color}` in $color.";
    @return null;
}

/*  Mixins
\*----------------------------------------------------------------------------*/

// TRUNCATE
@mixin truncate($truncation-boundary: 100%) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// MEDIA QUERIES
@mixin media-query($media-query) {
    $breakpoint-found: false;

    @each $breakpoint in $breakpoints {
        @if type-of($breakpoint) == 'list' {
            $name: nth($breakpoint, 1);
            $declaration: nth($breakpoint, 2);

            @if $media-query == $name and $declaration {
                $breakpoint-found: true;

                @media only screen and #{$declaration} {
                    @content;
                }
            }
        } @else {
            @error "Breakpoint doesnt match the 'key': '(value)' format";
        }
    }

    @if $breakpoint-found == false {
        @warn "Breakpoint #{$media-query} does not exist";
    }
}

// HIDE ELEMENTS
@mixin visuallyhidden() {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

// BOX SHADOW
@mixin box-shadow(){
    box-shadow: 0 10px 20px rgba(color(black),0.075);
}

// BOX HOVER
@mixin box-hover() {
    transition: all .3s ease;
    &:focus {
        text-decoration: none !important;
    }
    &:hover {
        transform: translateY(-10px);
    }
}

/*  FLEXBOX
\*----------------------------------------------------------------------------*/

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

// The 'flex' shorthand
@mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
}

// Flex Flow Direction
@mixin flex-direction($direction) {
    -webkit-flex-direction: $direction;
    -moz-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}

// Flex Line Wrapping
@mixin flex-wrap($wrap) {
    -webkit-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    flex-wrap: $wrap;
}

// Flex Direction and Wrap
@mixin flex-flow($flow) {
    -webkit-flex-flow: $flow;
    -moz-flex-flow: $flow;
    -ms-flex-flow: $flow;
    flex-flow: $flow;
}

// Display Order
@mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}

// Flex grow factor
@mixin flex-grow($grow) {
    -webkit-flex-grow: $grow;
    -moz-flex-grow: $grow;
    -ms-flex-grow: $grow;
    flex-grow: $grow;
}

// Flex shrink
@mixin flex-shrink($shrink) {
    -webkit-flex-shrink: $shrink;
    -moz-flex-shrink: $shrink;
    -ms-flex-shrink: $shrink;
    flex-shrink: $shrink;
}

// Flex basis
@mixin flex-basis($width) {
    -webkit-flex-basis: $width;
    -moz-flex-basis: $width;
    -ms-flex-basis: $width;
    flex-basis: $width;
}

// Axis Alignment
@mixin justify-content($justify) {
    -webkit-justify-content: $justify;
    -moz-justify-content: $justify;
    -ms-justify-content: $justify;
    justify-content: $justify;
    -ms-flex-pack: $justify;
}

// Packing Flex Lines
@mixin align-content($align) {
    -webkit-align-content: $align;
    -moz-align-content: $align;
    -ms-align-content: $align;
    align-content: $align;
}

// Cross-axis Alignment
@mixin align-items($align) {
    -webkit-align-items: $align;
    -moz-align-items: $align;
    -ms-align-items: $align;
    align-items: $align;
}

// Cross-axis Alignment
@mixin align-self($align) {
    -webkit-align-self: $align;
    -moz-align-self: $align;
    -ms-align-self: $align;
    align-self: $align;
}