// darken a color or return an almost transparent black
@function safedarken($color, $amount) {
    @if type-of($color) == 'color' and $color != transparent {
        @return darken($color, $amount);
    } @else {
        @return rgba(0, 0, 0, .08);
    }
}

// lighten a color or return an almost transparent white
@function safelighten($color, $amount) {
    @if type-of($color) == 'color' and $color != transparent {
        @return lighten($color, $amount);
    }
    @else {
        @return rgba(255, 255, 255, 0.08);
    }
}

// create a background with an optional gradient
@mixin backgradient($color, $gradient, $transparentColor: null, $replacementColor: null) {
    // if color is null, render nothing (e.g. background($wj-cell-frz, true))
    @if $color {
        // is color is the same as the background, darken slightly
        @if $transparentColor == transparent {
            $color: $replacementColor;
        }
        // output the background
        background: $color;
        // output the optional gradient
        @if $gradient {
            @if type-of($color) == 'color' and lightness($color) > 50% {
                $otherColor: safedarken($color, 12%);
                background-image: linear-gradient($color, $otherColor);
                //background-image: -ms-linear-gradient(bottom, $otherColor 0%, $color 100%);
                //background-image: -moz-linear-gradient(bottom, $otherColor 0%, $color 100%);
                //background-image: -o-linear-gradient(bottom, $otherColor 0%, $color 100%);
                //background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $otherColor), color-stop(1, $color));
                //background-image: -webkit-linear-gradient(bottom, $otherColor 0%, $color 100%);
                //background-image: linear-gradient(to top, $otherColor 0%, $color 100%);
            }
            @else {
                $otherColor: safelighten($color, 12%);
                background-image: linear-gradient($color, $otherColor);
                //background-image: -ms-linear-gradient(bottom, $color 0%, $otherColor 100%);
                //background-image: -moz-linear-gradient(bottom, $color 0%, $otherColor 100%);
                //background-image: -o-linear-gradient(bottom, $color 0%, $otherColor 100%);
                //background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $color), color-stop(1, $otherColor));
                //background-image: -webkit-linear-gradient(bottom, $color 0%, $otherColor 100%);
                //background-image: linear-gradient(to top, $color 0%, $otherColor 100%);
            }
        }
    }
}

// add prefixes to a property
// https://css-tricks.com/snippets/sass/mixin-prefix-properties/
@mixin prefix($property, $value, $prefixes: ()) {
    #{$property}: $value;

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

