:root {
    /* Scale setup */
    --button-height: 27; /* in px */
    --height-to-scale: 33; /* in px */
    --scale-ratio: calc(var(--height-to-scale) / var(--button-height));
    /* Slide setup */
    --button-height-px: 27px;
    --button-vertical-padding-px: 6px;
    --button-content-spacing-px: calc( var(--button-height-px) + var(--button-vertical-padding-px) * 2 );
    --slide-step-1: calc(var(--button-height-px) * -1);
    --slide-step-2: calc(var(--button-height-px) * -2);
}

.wapper_copy_link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.copy_content svg {
    /* color: #4f4f4f !important; */
    color: #ececec !important;
}


/* Button styles (use your own) */
.button_copy {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: nowrap;
    height: var(--button-height-px);
    padding: var(--button-vertical-padding-px) 9px;
    border-style: none;
    border-radius: 6px;
    background-color: #ececec;
    /* color: #006afe; */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.605px;
    line-height: 15px;
    cursor: pointer;
    transition: all 200ms;
}

    .button_copy:hover {
        background-color: #727780;
        color: #f3f6f9;
    }
        .button_copy:hover .copy_content svg {
            color: #f3f6f9 !important;
        }

    .button_copy:focus {
        background-color: #727780;
        box-shadow: 0 0 0 2px rgba(179, 174, 174, 0.6);
        outline: none;
    }

    .button_copy:active {
        background-color: #727780;
        color: #f3f6f9;
    }

    .copy_content {
        display: flex;
        align-items: center;
        justify-content: start;
    }



.copy_icon {
    margin-right: 6px;
}

/* Align content to animate */

.button_copy {
    overflow: hidden;
    float: right;
    width: 95px;
    margin-bottom: 10px;
    color: #ececec;
}

.copy_copied {
    visibility: hidden;
    margin-top: var(--button-content-spacing-px);
}

/* Animazione */
.button_copy.animate {
    background-color: #727780;
    color: #f3f6f9;
    box-shadow: none;
    animation: scale 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}

.animate .wapper_copy_link {
    animation: slide 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}

.animate .copy_copied {
    visibility: visible;
}

@keyframes scale {
    0% {
        transform: none;
    }

    12.5% {
        transform: none;
    }

    25% {
        transform: scale(var(--scale-ratio));
    }

    37.5% {
        transform: scale(var(--scale-ratio));
    }

    50% {
        transform: none;
    }

    100% {
        transform: none;
    }
}

@keyframes slide {
    0% {
        transform: none;
    }

    12.5% {
        transform: translateY(var(--slide-step-1));
    }

    25% {
        transform: translateY(var(--slide-step-1));
    }

    37.5% {
        transform: translateY(var(--slide-step-2));
    }

    87.5% {
        transform: translateY(var(--slide-step-2));
    }

    100% {
        transform: none;
    }
}