.menu__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    
    cursor: pointer;
    background: transparent;
    z-index: 100;
    transition: 150ms;
}

.menu__item:hover .menu__icon {
    animation: icon .1s 4;
}

.menu__item:hover .menu__span {
    transform: translateY(-17px);
    transition: 300ms;
}

.menu__icon { 
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 5px;
}

.menu__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 100%;
    height: 21px;
    overflow: hidden;
    padding: 1px
}

/**/
.is-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background: #6b34d9;
    transition: 200ms;
    border-radius: 20px;
}

@keyframes icon {
    0% {
        transform: rotateZ(-10deg);
    }

    100% {
        transform: rotateZ(10deg);
    }
}