$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";

@mixin text-overflow($inherit:false){
    @if $inherit == false {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    } @else {
        text-overflow: inherit;
        white-space: inherit;
        overflow: inherit;
    }
}
@mixin flicker-fix(){
    -webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
    -webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
}
@mixin grayscale($gray: 0.7, $opacity: 1){
    opacity: $opacity;
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=$gray)";
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate);
    filter: gray($gray);
    -webkit-filter: grayscale($gray * 100%);
    @if $gray == 0 {
        filter: none;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";
        -webkit-filter: grayscale(0);
    }
}
@mixin vertical-middle(){
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}
@mixin horizontal-center(){
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}
@mixin align-middle(){
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
@mixin clean-icon(){
    -webkit-backface-visibility: hidden; // Some weird safari bug involving hovering on li or a
    -webkit-transform: translate3d(0, 0, 0); // Some weird safari bug involving hovering on li or a
    -webkit-font-smoothing: antialiased;
}

@mixin media($query) {
    @media only screen and (#{$query}){
        @content;
    }
}

@mixin apply-media-sizes($base-name){
    #{$base-name}{
        @content
    }
    @each $name, $size in ('sm', $sm) ('md', $md) ('lg', $lg) ('xl', $xl) {
        @include media($size){
            #{$base-name}-#{$name}{
                @content
            }
        }
    }
}

@mixin position-fill() {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}