@mixin animation ($params) {
    -webkit-animation: $params;
    -o-animation: $params;
    animation: $params;
}

@mixin appearance ($param) {
    -webkit-appearance: $param;
    -moz-appearance: $param;
    appearance: $param;
}

@mixin display-grid () {
    display: -moz-grid;
    display: -ms-grid;
    display: grid;
}

@mixin grid-template-columns ($list-of-fractions) {
    -ms-grid-columns: $list-of-fractions;
    grid-template-columns: $list-of-fractions;
}

@mixin grid-template-rows ($list-of-fractions) {
    -ms-grid-rows: $list-of-fractions;
    grid-template-rows: $list-of-fractions;
}

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

@mixin flex-grow ($amount) {
    -webkit-flex-grow: $amount;
    -ms-flex-grow: $amount;
    flex-grow: $amount;
}

@mixin transition ($prop, $time: null) {
    -webkit-transition: $prop $time;
    -moz-transition: $prop $time;
    -ms-transition: $prop $time;
    -o-transition: $prop $time;
    transition: $prop $time;
}

@mixin transform ($parameters) {
    -webkit-transform: #{$parameters};
    -moz-transform: #{$parameters};
    -ms-transform: #{$parameters};
    -o-transform: #{$parameters};
    transform: #{$parameters};
}

@mixin user-select ($option) {
    -webkit-touch-callout: $option; /* iOS Safari */
    -webkit-user-select: $option; /* Safari */
    -khtml-user-select: $option; /* Konqueror HTML */
    -moz-user-select: $option; /* Firefox */
    -ms-user-select: $option; /* Internet Explorer/Edge */
    user-select: $option; /* Non-prefixed version, currently supported by Chrome and Opera */
}

@mixin -webkit-margin ($before, $after, $start, $end) {
    -webkit-margin-before: $before;
    -webkit-margin-after: $after;
    -webkit-margin-start: $start;
    -webkit-margin-end: $end;
}

@mixin box-shadow ($params) {
    -webkit-box-shadow: $params;
    -moz-box-shadow: $params;
    box-shadow: $params;
}

@mixin border-radius ($params) {
    -webkit-border-radius: $params;
    -moz-border-radius: $params;
    border-radius: $params;
}

@mixin opacity ($value) {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
    opacity: $value;
}

@mixin gradient-background ($fallback-color, $color1, $color2) {
    background-color: $fallback-color; /* uses a solid color at worst */
    background-image: url('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png');
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
    background-image: -webkit-linear-gradient(top, $color1, $color2);
    background-image: -moz-linear-gradient(top, $color1, $color2);
    background-image: -ms-linear-gradient(top, $color1, $color2);
    background-image: -o-linear-gradient(top, $color1, $color2);
}

@mixin box-shadow ($params) {
    -webkit-box-shadow: $params;
    -moz-box-shadow:  $params;
    box-shadow:  $params;
}

@mixin justify-content ($param) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: $param;
    justify-content: $param;
}

@mixin flex-wrap ($param) {
    -webkit-flex-wrap: $param;
    -ms-flex-wrap: $param;
    flex-wrap: $param;
}

@mixin flex-flow () {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

@mixin placeholder-color ($color) {
    ::-webkit-input-placeholder {
        color: $color;
    }

    :-moz-placeholder { /* Firefox 18- */
        color: $color;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
        color: $color;
    }

    :-ms-input-placeholder {
        color: $color;
    }
}

@mixin filter ($filter) {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha($filter);
    -webkit-filter: $filter;
    filter: progid:DXImageTransform.Microsoft.Alpha($filter);
    filter: $filter;
}