.bc-morphing-menu {
position: relative;
width: fit-content;
display: flex;
flex-direction: unset;
--transition-duration: 0.3s;
--transition-delay: 0s;
--transition-ease: ease;
}
.bc-morphing-menu > *{
height: fit-content;
position: relative;
z-index: 2;
}
.bc-morphing-menu__item--active{
transition: color var(--transition-duration);
}
.bc-morphing-menu__morphing-div {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-duration); 
}
.demo-morph-bg-target {
position: absolute;
top: 0;
left: 0;
--height: 100%;
height: var(--height); 
width: 100%; 
pointer-events: none;
border-radius: 100px; 
}
.morph-bg--visible {
opacity: 1;
}
.morph-bg--has-transition {
transition: var(--transition-duration); /**/
will-change: transform, border-radius, height, width;
}