.menu__item {
    line-height: 1;
    position: relative;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    outline: none;
}

.menu__item-label {
    position: relative;
    display: inline-block;
}


.menu__item-label {
    margin: 0 0 0 0;
}


.menu__item .menu__item-label {
    font-size: 1em;
    letter-spacing: 0.05em;
    transform: translate3d(-0.5em, 0, 0);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.menu__item .menu__item-label::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 22px;
    left: 0.05em;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.menu__item .menu__item-label::before {
    background: #fff;
}

/* Hover */

.menu__item.header:hover,
.menu__item.header:focus {
    color: #7f67d6;
}

.menu__item.footer:hover,
.menu__item.footer:focus {
    color: #be9ee2;
}

.menu__item:hover .menu__item-label::before,
.menu__item:focus .menu__item-label::before {
    transform: scale3d(1, 1, 1);
}

.menu__item:hover .menu__item-label::before,
.menu__item:focus .menu__item-label::before {
    transform-origin: 0% 50%;
    transition-timing-function: ease;
}

.menu__item.header:hover .menu__item-label::before,
.menu__item.header:focus .menu__item-label::before {
    background: #7f67d6;
}

.menu__item.footer:hover .menu__item-label::before,
.menu__item.footer:focus .menu__item-label::before {
    background: #be9ee2;
}