.max-elements-button {
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    background-color: #212529;
    color: #fff;
    transition: all 0.3s ease;

    &.transition-none {
        transition: none;
        .max-elements-button-icon {
            transition: none;
        }
    }

    &:before {
        content: "";
    }

    &.max-elements-infinite-scale {
        &:before {
            animation: scale 2s ease-in-out infinite;
        }
    }

    &.max-elements-progress {
        &:before {
            animation: progress 2s linear infinite;
        }
    }

    &.max-elements-hvr-txt-trans {
        position: relative;
        overflow: hidden;

        .hvr-txt {
            position: relative;
            display: inline-block;
            transition: all 0.3s ease;

            &::after {
                content: attr(data-text);
                display: inline-block;
                position: absolute;
                top: 50%;
                left: 50%;
                opacity: 0;
                transform: translate(-50%, 100%);
                transition: opacity .2s, transform .2s;
                transition-timing-function: cubic-bezier(.455, .03, .515, .955);
                white-space: nowrap;
            }

            span {
                transition: all 0.3s ease;
            }
        }
    }

    &:hover {
        .hvr-txt {
            span {
                transform: translateY(-150%);
                opacity: 0;
            }

            &::after {
                transform: translate(-50%, -50%);
                opacity: 1;
            }
        }
    }

    .max-elements-button-content-wrapper {
        position: relative;
        z-index: 5;
    }

    .max-elements-button-text {
        position: relative;
        z-index: 2;
    }

    .max-elements-button-icon {
        display: inline-block;
        transition: all 0.3s ease;
    }

    &.add_to_cart_button {
        .button__loader {
            display: none;
            position: absolute;
            left: 0;
        }

        .button__added {
            display: none;
            position: absolute;
            left: 0;
        }

        &.loading {
            opacity: 1;

            .button__loader {
                display: inline-block;
                animation: none;
                width: 100%;

                .loading_popup {
                    width: 100%;
                    height: auto;
                    padding: 10px 0;
                    background-color: #ffb500;
                    color: #fff;
                    position: absolute;
                    bottom: -100%;
                    left: -50%;
                    transform: translateX(50%) translateY(-50%);
                    text-align: center;
                    border-radius: 4px;

                    i {
                        margin-left: 5px;
                        animation: rotate-center 1.5s linear infinite both;
                    }
                }
            }
        }

        &.added {
            opacity: 1;

            .button__added {
                display: inline-block;
                width: 100%;

                .added_popup {
                    width: 100%;
                    height: auto;
                    padding: 10px 0;
                    background-color: #157dfb;
                    color: #fff;
                    position: absolute;
                    bottom: -100%;
                    left: -50%;
                    transform: translateX(50%) translateY(-50%);
                    text-align: center;
                    border-radius: 4px;
                    animation: hide_added 0s ease-in 3s forwards;

                    i {
                        margin-left: 5px;
                    }
                }
            }
        }

        @keyframes hide_added {
            to {
                width: 0;
                height: 0;
                overflow: hidden;
            }
        }

        @-webkit-keyframes hide_added {
            to {
                width: 0;
                height: 0;
                visibility: hidden;
            }
        }
    }

    @keyframes progress {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes scale {
        0% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0;
            transform: scale(1.5);
        }

        100% {
            opacity: 0;
            transform: scale(1);
        }
    }

}

@media screen and (max-width: 991px) {
    .max-elements-button {
        &.max-elements-responsive-break-line br {
            display: none;
        }
    }
}

.elementor-widget-max-elements-button .added_to_cart {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -70%;

    &:hover {
        color: var(--color-main);
    }
}