// animation rule circle 
@mixin animateY($duration) {
    $name: animate-#{unique-id()};

    @keyframes #{$name} {
        @content;
    }

    animation : $duration $name linear infinite;
}

@mixin animateX($duration) {
    $name: animate-#{unique-id()};

    @keyframes #{$name} {
        @content;
    }

    animation : $duration $name linear -1s infinite;
}

@mixin rule-animation($selector, $bgRgba: rgba(43, 26, 8, 0), $bgHex: #d98026, $color: white, $background: black) {
    #{$selector} {
        // padding           : 20px 40px;
        margin         : 0px;
        display        : inline-block;
        transform      : translate(0%, 0%);
        overflow       : hidden;
        color          : $color;
        font-size      : 20px;
        letter-spacing : 2.5px;
        text-align     : center;
        text-transform : uppercase;
        text-decoration: none;
        box-shadow     : 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    #{$selector}::before {
        content           : '';
        position          : absolute;
        top               : 0px;
        border-radius     : 50%;
        left              : 0px;
        width             : 100%;
        height            : 100%;
        background-color  : $background;
        opacity           : 0;
        -webkit-transition: .2s opacity ease-in-out;
        transition        : .2s opacity ease-in-out;
    }

    #{$selector} span {
        position: absolute;
    }

    #{$selector} span:nth-child(1) {
        top       : 0px;
        left      : 0px;
        width     : 100%;
        height    : 5px;
        background: linear-gradient(to left, $bgRgba, $bgHex);
        z-index   : 99;

        @include animateY(2s) {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }
    }


    #{$selector} span:nth-child(2) {
        top       : 0px;
        right     : 0px;
        height    : 100%;
        width     : 2px;
        background: linear-gradient(to top, $bgRgba, $bgHex);
        z-index   : 99;

        @include animateX(2s) {
            0% {
                transform: translateY(100%);
            }

            100% {
                transform: translateY(-100%);
            }
        }
    }


    #{$selector} span:nth-child(3) {
        bottom    : 0px;
        left      : 0px;
        width     : 100%;
        height    : 5px;
        background: linear-gradient(to right, $bgRgba, $bgHex);
        z-index   : 99;

        @include animateY(2s) {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }
    }

    #{$selector} span:nth-child(4) {
        top       : 0px;
        left      : 0px;
        height    : 100%;
        width     : 2px;
        background: linear-gradient(to bottom, $bgRgba, $bgHex);
        z-index   : 99;

        @include animateX(2s) {
            0% {
                transform: translateY(-100%);
            }

            100% {
                transform: translateY(100%);
            }
        }
    }
}

// End animation rule circle

@mixin animatedBy($selector, $duration: 3s) {
    $name: phkay-#{unique-id()};

    #{$selector} {
        animation: $name $duration linear infinite;
    }

    @keyframes #{$name} {
        @content;
    }
}

// Border Gradient 

@mixin pkm-border-gradient($selector: 'phkay',$color-gradient: linear-gradient(to left, #743ad5, #d53a9d)) {
    
    .border-gradient-#{$selector} {
        border: 1px solid;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: $color-gradient;
    }
}