// *************************
// ***** MEDIA QUERIES *****
// *************************

// MOBILE
@mixin mobile {
    @media (max-width: #{$breakpoint - 1px}) {
        @content;
    }
}
@mixin mobile--small{
    @media (max-width: #{$breakpoint--mobile - 1px}) {
        @content;
    }
}
@mixin mobile--large{
    @media (min-width: #{$breakpoint--mobile}) and (max-width: #{$breakpoint - 1px}) {
        @content;
    }
}

// DESKTOP
@mixin desktop {
    @media (min-width: #{$breakpoint}) {
        @content;
    }
}
@mixin desktop--small{
    @media (min-width: #{$breakpoint}) and (max-width: #{$breakpoint--desktop - 1px}) {
        @content;
    }
}
@mixin desktop--large{
    @media (min-width: #{$breakpoint--desktop}) {
        @content;
    }
}



// *************************
// ***** FROM SNIPPETS *****
// *************************

// CLEARFIX
@mixin clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1; /* IE6/7 support */
}

// VISUALLY HIDDEN
@mixin visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

// DISABLED
@mixin disabled {
    pointer-events: none;
    opacity: 0.5;
}

// BLOCK SELECTION
@mixin block-selection{
    user-select: none;
}

// CENTERING - requires parent position relative
@mixin vertical-center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
@mixin horizontal-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@mixin both-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



// **********************
// ***** NEW MIXINS *****
// **********************

// BORDER RADIUS
@mixin border-radius($radius: $border-radius) {
    border-radius: $radius;
}

// BOX SHADOW
@mixin box-shadow($color: $grey--dark, $alpha: 0.05) {
    box-shadow: 0 0 0.75rem rgba($color, $alpha);
}
@mixin box-shadow--more($color: $grey--dark, $alpha: 0.15) {
    box-shadow: 0 0 0.75rem rgba($color, $alpha);
}
@mixin box-shadow--extra($color: $grey--dark, $alpha: 0.3) {
    box-shadow: 0 1.5rem 3rem -0.25rem rgba($color, $alpha);
}
@mixin box-shadow--none($color: $grey--dark, $alpha: 0) {
    box-shadow: 0 0 0 rgba($color, $alpha);
}

// TRANSITION
@mixin transition($prop: all, $time: 0.3s, $ease: $easing) {
    transition: $prop $time $ease;
}
@mixin transition-delay($time: 0.3s){
    transition-delay: $time;
}

// ANIMATION
@mixin animation-delay($time: 0.3s){
    animation-delay: $time;
}

// SELECTION
@mixin selection($current-selector: false) {
    @if $current-selector {
        &::-moz-selection {
            @content;
        }

        &::selection {
            @content;
        }
    } @else {
        ::-moz-selection {
            @content;
        }

        ::selection {
            @content;
        }
    }
}

// PLACEHOLDER
@mixin placeholder {
    $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
    @each $placeholder in $placeholders {
        &:#{$placeholder}-placeholder {
            @content;
        }
    }
}