@use "sass:selector";

    @mixin root($child) {
        @at-root #{selector.unify(&, $child)} {
            @content;
        }
    }   

    // placeholder input
    @mixin tp-placeholder {
        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            @content;
        }
        &::-moz-placeholder { /* Firefox 19+ */
            @content;
        }
        &:-moz-placeholder { /* Firefox 4-18 */
            @content;
        }
        &:-ms-input-placeholder { /* IE 10+  Edge*/
            @content;
        }
        &::placeholder{ /* MODERN BROWSER */
            @content;
        }
    }

    // gradient 
    @mixin tp-gradient($value, $type : "linear") {

        @if $type == linear {
            background-image: -webkit-linear-gradient($value);
            background-image: -moz-linear-gradient($value);
            background-image: -ms-linear-gradient($value);
            background-image: -o-linear-gradient($value);
            background-image:   linear-gradient($value);
          } @else {
            background-image: -webkit-radial-gradient($value);
            background-image: -moz-radial-gradient($value);
            background-image: -ms-radial-gradient($value);
            background-image: -o-radial-gradient($value);
            background-image:   radial-gradient($value);
        }
    }

    // animate 
    @mixin animation($property) {
        -webkit-animation: $property;
           -moz-animation: $property;
            -ms-animation: $property;
             -o-animation: $property;
                animation: $property;
    }

    //backgroud 
    @mixin tp-background {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
      
    // transition specific
    @mixin tp-transition($property: all, $time: .3s,  $func : ease-in-out) {
        -webkit-transition: $property $time $func;
        -moz-transition: $property $time $func;
        -ms-transition: $property $time $func;
        -o-transition: $property $time $func;
        transition: $property $time $func;
    }
      
    // transition multiple
    @mixin tp-transition-mul($property) {
        -webkit-transition: $property;
        -moz-transition: $property;
        -ms-transition: $property;
        -o-transition: $property;
        transition: $property ;
    }
    
    
    // transform
    @mixin tp-transform($transforms) {
        -webkit-transform: $transforms;
        -moz-transform: $transforms;
        -ms-transform: $transforms;
        -o-transform: $transforms;
        transform: $transforms;
    }

    // transition multiple
    @mixin transition-mul($property) {
        -webkit-transition: $property;
        -moz-transition: $property;
        -ms-transition: $property;
        -o-transition: $property;
        transition: $property ;
    }

    // Flexbox display
    @mixin tp-flexbox() {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
        
    // keyframes 
    @mixin keyframes($name) {
        @-webkit-keyframes #{$name} {
            @content; 
        }
        @-moz-keyframes #{$name} {
            @content;
        }
        @-ms-keyframes #{$name} {
            @content;
        }
        @keyframes #{$name} {
            @content;
        } 
    }

    
    @keyframes bannerAnimationTwo {
        0% {
        transform: translate(0px, 0px);
        }
        20% {
            transform: translate(20px, -5px);
        }
        40% {
            transform: translate(50px, 20px);
        }
        60% {
            transform: translate(20px, 50px);
        }
        80% {
            transform: translate(-20px, 30px);
        }
        100% {
            transform: translate(0px, 0px);
        }
    }