
.btn {
    width: fit-content;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    @extend .pxl-white;
    @include transition(all .25s linear 0ms);
    position: relative;
    cursor: pointer;
    border: none;
    z-index: 1;
    background: var(--bg-color);
    @extend .pxl-dflex-center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    i, svg, svg path, svg rect {
        transition: inherit;
    }
    &:hover, &:focus {
        outline: none;
        text-decoration: none;
    }

}

// Config
.btn {
    svg, i{
        position: relative;
        transition: inherit;
    }
    .pxl-btn--text, svg, i {
        position: relative;
        z-index: 9;
    }
}

@keyframes zoom-in-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.8);
    }
}
.pxl-zoom-in-out {
    animation: zoom-in-out 2s ease-in-out infinite;
}

@keyframes twirl {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.pxl-twirl {
    animation: twirl 15s ease-in-out infinite;
}

@keyframes grow-line {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes grow-height {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

.pxl-grow-line {
    animation: grow-line .75s ease both;
    -webkit-animation: grow-line .75s ease both;
    -khtml-animation: grow-line .75s ease both;
    -moz-animation: grow-line .75s ease both;
    -ms-animation: grow-line .75s ease both;
    -o-animation: grow-line .75s ease both;
}

.pxl-grow-height {
    animation: grow-height .75s ease both;
    -webkit-animation: grow-height .75s ease both;
    -khtml-animation: grow-height .75s ease both;
    -moz-animation: grow-height .75s ease both;
    -ms-animation: grow-height .75s ease both;
    -o-animation: grow-height .75s ease both;
}

// Button Post
.btn {
    &.pxl-btn-link {
        background-color: transparent;
        overflow: visible;
        &.pxl-btn-link1 {
            padding-block: 15px;
            @extend .h6;
            color: var(--dark-2);
            gap: 5px;
            svg {
                position: relative;
                .pxl-icon--main, .pxl-icon--copy {
                    transition: all .25s linear;
                }
                .pxl-icon--copy {
                    @extend .pxl-pabsolute-full;
                    transform: translateX(-100%);
                }
            }
            &:hover {
                color: var(--primary-color);
                svg {
                    .pxl-icon--main {
                        transform: translateX(100%);
                    }
                    .pxl-icon--copy {
                        transform: translateX(0);
                    }
                }
            }
        }
        &.pxl-btn-link2 {
            --current-color: currentcolor;
            --size: 10px;
            color: var(--dark-2);
            font-family: 'Montserrat';
            font-size: 16px;
            font-weight: 500;
            padding-block: var(--size);
            &::after, &::before {
                content: '';
                position: absolute;
                bottom: var(--size);
                left: auto;
                right: 0;
                width: 100%;
                max-width: 50%;
                height: 1px;
                background-color: var(--current-color);
            }
            &::before {
                left: 0;
                right: auto;
            }
            &:hover {
                color: var(--primary-color);
                &::after, &::before {
                    @extend .pxl-grow-line;
                }
            }
        }
        &.pxl-btn-link3 {
            --size: 15px;
            --color: currentcolor;
            color: var(--secondary-color);
            font-family: "DM Sans";
            font-size: 15px;
            font-weight: 600;
            gap: 12px;
            line-height: 2;
            &::before {
                content: '';
                position: absolute;
                bottom:0 ;
                left: 0;
                width: 0;
                height: 1px;
                background-color: var(--color);
            }
            .pxl-btn--icon {
                position: relative;
                .pxl-path--copy {
                    position: absolute;
                    transform: translate(-100%, 100%);
                    opacity: 0;
                }
            }
            &:hover {
                color: var(--primary-color);
                &::before {
                    width: 100%;
                }
                .pxl-btn--icon {
                    .pxl-path--main {
                        transform: translate(100%, -100%) ;
                    }
                    .pxl-path--copy {
                        transform: translate(0, 0);
                        opacity: 1;
                    }
                }
            }
        }
        &.pxl-btn-link4 {
            --current-color: currentcolor;
            color:#FFF;
            font-family: "DM Sans";
            font-size: 14px;
            font-weight: 700;
            line-height: 1.85714;
            letter-spacing: 1.28px;
            text-transform: uppercase;
            gap: 7px;
            .pxl-btn--icon {
                transition: inherit;
            }
            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: auto;
                right: 0;
                width: 0;
                height: 1px;
                background-color: var(--current-color);
            }
            &:hover {
                &::before {
                    width: 100%;
                    left: 0;
                    right: auto;
                }
                .pxl-btn--icon {
                    transform: translateX(5px);
                }
            }
        }
    }
    &.pxl-btn-play {
        overflow: visible;
        &.pxl-btn-play1 {
            --size: 68px;
            width: var(--size);
            height: var(--size);
            border-radius: var(--size);
            @extend .pxl-hover-twirl;
            .pxl-btn--text {
                display: none;
            }
            .pxl-btn--icon {
                transition: inherit;
            }
            &::after{
                content: '';
                @extend .pxl-pabsolute-center;
                border: 1px solid #FFF;
                width: 84px;
                height: 84px;
                border-radius: inherit;
            }
            &::before {
                content: '';
                width: 84px;
                height: 84px;
                border: 1px solid #FFF;
                border-radius: inherit;
                @extend .pxl-pabsolute-center;
                @extend .pxl-zoom-in-out;
            }
            &:hover {
                background-color: var(--hover-bg-color);
            }
        }
        &.pxl-btn-play2 {
            --bg-color: transparent;
            gap: 12px;
            line-height: 1;
            color: #FFF;
            font-weight: 700;
            .pxl-btn--icon {
                --size: 60px;
                min-width: var(--size);
                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                @extend .pxl-dflex-center;
                background-color: #FFF;
                position: relative;
                @extend .pxl-transition-linear;
                svg {
                    width: 11px;
                    height: 14px;
                    transition: inherit;
                    path {
                        fill: var(--primary-color);
                    }
                }
                &:before {
                    content: "";
                    position: absolute;
                    z-index: 0;
                    left: 0;
                    top: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-color: rgba($color: #FFF, $alpha: .63);
                    border-radius: 50%;
                    animation: pxl_pulse_border 1500ms ease-out infinite;
                    -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                    z-index: 0;
                    border-radius: inherit;
                }
                &::after {
                    position: absolute;
                    content: "";
                    inset: 0;
                    backdrop-filter: blur(5px);
                    border-radius: 50%;
                    z-index: -1;
                }
            }

            .pxl-btn--text {
                position: relative;
                z-index: 9;
            }

            &:hover {
                .pxl-btn--icon {
                    svg {
                        scale: 1.25;
                    }
                }
            }
        }
        &.pxl-btn-play3 {
            gap: 7px;
            color:#FFF;
            font-family: 'Montserrat';
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 60px;
            background-color: transparent;
            .pxl-btn--icon {
                position: relative;
                @extend .pxl-dflex-center;
                --size: 60px;
                min-width: var(--size);
                height: var(--size);
                border-radius: 50%;
                width: var(--size);
                border: 2px solid #FFF;
                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    animation: pxl_pulse_border 1500ms ease-out infinite;
                    -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                    border: 1px solid #FFF;
                    border-radius: inherit;
                }
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    animation: pxl_pulse_border 1500ms ease-out infinite;
                    -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
                    animation-delay: 750ms;
                    -webkit-animation-delay: 750ms;
                    border: 1px solid #FFF;
                    border-radius: inherit;
                }
                i, svg { 
                    @extend .pxl-transition-linear;
                }
            }
            &:hover {
                .pxl-btn--icon {
                    i, svg {
                        scale: 1.15;
                    }
                }
            }
        }
    }
    &.pxl-btn-basic {
        --x: 42px;
        --y: 60px;
        border-radius: 100px;
        padding-inline: var(--x);
        line-height: var(--y);
        &.pxl-btn-basic1 {
            --x: 55px;
            font-family: 'Inter';
            font-size: 18px;
            padding-inline: var(--x);
            line-height: var(--y);
        }
        &.pxl-btn-basic2 {
            color: #FFF;
            font-size: 16px;
            font-weight: 700;
            padding-inline: var(--x);
            line-height: var(--y);
        }
        &.pxl-btn-basic3 {
            --y: 58px;
            --bg-color: #FFF;
            color: var(--secondary-color);
            font-size: 16px;
            font-weight: 700;
            border: 1px solid var(--secondary-color);
            padding-inline: var(--x);
            line-height: var(--y);
        }
        &.pxl-btn-basic4 {
            --x: 33px;
            --y: 58px;
            --bg-color: #FFF;
            --hover-bg-color: var(--primary-color);
            color: var(--dark-blue-2);
            @extend .h6;
            border-radius: 6px;
            padding-inline: var(--x);
            line-height: var(--y);
        }

    }
    &.pxl-btn-icon {
        --bg-color: transparent;
        font-size: 18px;
        padding: 10px;
    }

    &.pxl-btn-close {
        @extend .pxl-close ;
        padding: 0;
        // &::before, &::after {
        //     background-color: var(--);
        // }
    }
    &.pxl-btn-gradient {
        color: #FFF;
        font-family: 'Inter';
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.08px;
        @include box-shadow(0px 4px 30px 0px rgba(89, 100, 255, 0.10));
        padding-inline: 52px;
        line-height: 57px;
        height: 57px;
        border-radius: 100px;
        @include background-gradient-rotate(90deg, var(--gradient-color-from) 0%, var(--gradient-color-to) 100%);
        &::before {
            content: '';
            @extend .pxl-pabsolute-full;
            transition: inherit;
            @include background-gradient-rotate(-90deg, var(--gradient-color-from) 0%, var(--gradient-color-to) 100%);
            opacity: 0;
        }
        &:hover {
            color: #FFF;
            &::before {
                opacity: 1;
            }
        }
    }
}

// Hover
.btn {
    &.pxl-hover-split-bg {
        background-color:  var(--bg-color);
        overflow: clip !important;
        &::before {
            position: absolute;
            content: '';
            top: 50%;
            left: 0;
            height: 105%;
            width: 100%;
            transform: translateY(-50%) scaleY(0);
            @extend .pxl-transition-ease;
            background-color: var(--hover-bg-color);
        }
        &:hover {
            color: #FFF;
            &::before{ 
                transform: translateY(-50%) scaleY(1);
            }
        }
    }
    &.pxl-hover-fade {
        &:hover {
            background-color: var(--hover-bg-color);
        }
    }
    &.pxl-hover-reveal {
        background-color: var(--bg-color);
        &::after {
            position: absolute;
            content: attr(data-text);
            @extend.pxl-pabsolute-full;
            @extend .pxl-dflex-center;
            opacity: 0;
            transform: translateY(100%);
            transition: inherit;
        }
        &:hover {
            background-color: var(--hover-bg-color);
            .pxl-btn--text {
                transform: scaleY(0);
            }
            &::after { 
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
    &.pxl-hover-scale-bg {
        overflow: hidden;
        @extend .pxl-transition-linear;
        &::after {
            content: '';
            @extend .pxl-pabsolute-center;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: inherit;
            border-radius: inherit;
            background-color: var(--hover-bg-color);
        }
        &:hover {
            --color: #FFF;
            &::after {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }
    }
    &.pxl-hover-twirl {
        &:hover {
            &::after {
                @extend .pxl-twirl;
                border-style: dashed;
            }
        }
    }
    &.pxl-hover-zoom-in {
        &:hover {
            scale: 1.2;
            color: var(--primary-color);
        }
    }
    &.pxl-hover-fade {
        &:hover {
            color: var(--color);
            background-color: var(--bg-hover-color);
        }
    }
}
