@use "sass:map";
@use "sass:string";
@use "variables";



//----------------------------
//Prefix
//----------------------------//
$default-prefixes: webkit moz ms o;

// @include prefix($property, $value, webkit moz ms o);
@mixin prefix($property, $value, $prefixes: ()) {

    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
}

//----------------------------
//Clearfix
//----------------------------//
@mixin clearfix() {

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}


//-------------------------------------
// Hide/Show with Opacity & Visibility
//-------------------------------------//

@mixin fade($type) {

    @if $type =='hide' {
        visibility: hidden;
        opacity: 0;
    }

    @else if $type =='show' {
        opacity: 1;
        visibility: visible;
    }

}


//----------------------------
//Triangle
//----------------------------//
@mixin triangle($direction: up, $color: #000, $size: 100px) {
    @if ($direction ==up) {
        border-color: transparent transparent $color;
        border-style: solid;
        border-width: 0 $size $size;
        height: 0;
        width: 0;
    }

    @if ($direction ==down) {
        border-color: $color transparent transparent transparent;
        border-style: solid;
        border-width: $size;
        height: 0;
        width: 0;
    }

    @if ($direction ==left) {
        border-color: transparent $color transparent transparent;
        border-style: solid;
        border-width: $size $size $size 0;
        height: 0;
        width: 0;
    }

    @if ($direction ==right) {
        border-color: transparent transparent transparent $color;
        border-style: solid;
        border-width: $size 0 $size $size;
        height: 0;
        width: 0;
    }

    @if ($direction ==bottomright) {
        border-color: transparent transparent $color transparent;
        border-style: solid;
        border-width: 0 0 $size $size;
        height: 0;
        width: 0;
    }

    @if ($direction ==bottomleft) {
        border-color: transparent transparent transparent $color;
        border-style: solid;
        border-width: $size 0 0 $size;
        height: 0;
        width: 0;
    }

    @if ($direction ==topleft) {
        border-color: $color transparent transparent transparent;
        border-style: solid;
        border-width: $size $size 0 0;
        height: 0;
        width: 0;
    }

    @if ($direction ==topright) {
        border-color: transparent $color transparent transparent;
        border-style: solid;
        border-width: 0 $size $size 0;
        height: 0;
        width: 0;
    }
}


//–––––––––––––––––––––––––––––––––––
//  MEDIA QUERIES
//–––––––––––––––––––––––––––––––––––

// A map of breakpoints.
$breakpoints: (
    xs: 576px,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1500px
);


//
//  RESPOND ABOVE
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-above(sm) {}
@mixin respond-above($breakpoint) {

    // If the breakpoint exists in the map.
    @if map.has-key($breakpoints, $breakpoint) {

        // Get the breakpoint value.
        $breakpoint-value: map.get($breakpoints, $breakpoint);

        // Write the media query.
        @media (min-width: $breakpoint-value) {
            @content;
        }

        // If the breakpoint doesn't exist in the map.
    }

    @else {

        // Log a warning.
        @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
}


//
//  RESPOND BELOW
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-below(sm) {}
@mixin respond-below($breakpoint) {

    // If the breakpoint exists in the map.
    @if map.has-key($breakpoints, $breakpoint) {

        // Get the breakpoint value.
        $breakpoint-value: map.get($breakpoints, $breakpoint);

        // Write the media query.
        @media (max-width: ($breakpoint-value - 1)) {
            @content;
        }

        // If the breakpoint doesn't exist in the map.
    }

    @else {

        // Log a warning.
        @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
}


//
//  RESPOND BETWEEN
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-between(sm, md) {}
@mixin respond-between($lower, $upper) {

    // If both the lower and upper breakpoints exist in the map.
    @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {

        // Get the lower and upper breakpoints.
        $lower-breakpoint: map.get($breakpoints, $lower);
        $upper-breakpoint: map.get($breakpoints, $upper);

        // Write the media query.
        @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
            @content;
        }

        // If one or both of the breakpoints don't exist.
    }

    @else {

        // If lower breakpoint is invalid.
        @if (map.has-key($breakpoints, $lower)==false) {

            // Log a warning.
            @warn 'Your lower breakpoint was invalid: #{$lower}.';
        }

        // If upper breakpoint is invalid.
        @if (map.has-key($breakpoints, $upper)==false) {

            // Log a warning.
            @warn 'Your upper breakpoint was invalid: #{$upper}.';
        }
    }
}

//–––––––––––––––––––––––––––––––––––
//  Keyframe Animation
//–––––––––––––––––––––––––––––––––––
@mixin keyframe ($animationname) {
    @-webkit-keyframes #{$animationname} {
        @content;
    }

    @-moz-keyframes #{$animationname} {
        @content;
    }

    @-o-keyframes #{$animationname} {
        @content;
    }

    @keyframes #{$animationname} {
        @content;
    }
}

@mixin animation ($delay, $duration, $animation, $direction: forward, $fillmode: fowards) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
}