:root{--bottom-bar-translate-base:70px}[dir=rtl]{--bottom-bar-translate-base:-70px}.navigation{position:relative;width:100%;height:70px;display:flex;justify-content:center;align-items:center}.navigation ul{display:flex;width:350px}.navigation ul li{position:relative;width:270px;height:70px;list-style:none;z-index:1}.navigation ul li a{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;text-align:center;font-weight:500}.navigation ul li a .icon{position:relative;display:block;line-height:75px;font-size:1.7em;text-align:center;transition:.5s}.navigation ul li.active a .icon{transform:translateY(-10px)}.navigation ul li a .text{position:absolute;font-size:1em;letter-spacing:.05em;opacity:0;transform:translateY(20px);transition:.5s}.navigation ul li.active a .text{opacity:1;transform:translateY(40px)}.navigation ul li a .circle{position:absolute;display:block;width:50px;height:50px;background:transparent;border-radius:50%;border:1.8px solid #fff;transform:translateY(-37px) scale(0)}.navigation ul li.active a .circle{transition:.5s;transition-delay:.5s;transform:translateY(-10px) scale(1)}.indicator-dark{position:absolute;top:-50%;width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:.5s}.indicator-dark:after,.indicator-dark:before{content:"";position:absolute;top:50%;width:20px;height:20px;background:transparent}.indicator-dark:before{border-top-right-radius:20px;left:-22px;box-shadow:1px -10px 0 #010309}.indicator-dark:after{border-top-left-radius:20px;right:-22px;box-shadow:-1px -10px 0 #010309}.indicator-light{position:absolute;top:-50%;width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:.5s}.indicator-light:after,.indicator-light:before{content:"";position:absolute;top:50%;width:20px;height:20px;background:transparent}.indicator-light:before{border-top-right-radius:20px;left:-22px;box-shadow:1px -10px 0 #ffffff}.indicator-light:after{border-top-left-radius:20px;right:-22px;box-shadow:-1px -10px 0 #ffffff}.navigation ul li:first-child.active~.indicator-dark,.navigation ul li:first-child.active~.indicator-light{transform:translateX(calc(var(--bottom-bar-translate-base) * .12))}.navigation ul li:nth-child(2).active~.indicator-dark,.navigation ul li:nth-child(2).active~.indicator-light{transform:translateX(calc(var(--bottom-bar-translate-base) * 1.39))}.navigation ul li:nth-child(3).active~.indicator-dark,.navigation ul li:nth-child(3).active~.indicator-light{transform:translateX(calc(var(--bottom-bar-translate-base) * 2.63))}.navigation ul li:nth-child(4).active~.indicator-dark,.navigation ul li:nth-child(4).active~.indicator-light{transform:translateX(calc(var(--bottom-bar-translate-base) * 3.87))}