html{--bgColorMenu:#1d1d27;--duration:0.7s}.menu{display:flex;align-items:center;justify-content:center;background-color:var(--bgColorMenu);padding:.5rem 1rem;border-radius:50px;position:relative}.menu__item{all:unset;position:relative;z-index:1;cursor:pointer;flex-grow:1;text-align:center;padding:.5rem 1rem;transition:transform var(--duration),color var(--duration)}.menu__item:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:calc(100% + 1rem);height:2em;border-radius:50px;background-color:var(--bgColorItem);transition:transform var(--duration);z-index:-1}.menu__item.active:before{transform:translate(-50%,-50%) scale(1)}.menu__item.active{color:#fff;font-weight:700}