#bottom-bar {
    left: 50%;
    bottom: 23px;
    height: 85px;
    position: fixed;
    background: #fff;
    border-radius: 32px;
    transform: translateX(-50%);
    width: calc(100vw * 292/484);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

#bottom-bar div {
    width: 60px;
    color: #000;
    height: 60px;
    z-index: 8;
    display: flex;
    font-size: 30px;
    background: #fff;
    border-radius: 50%;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: .3s color var(--default-easing);
}

#bottom-bar div p {
    z-index: 10;
}

#bottom-bar .chosen {
    color: #fff;
}

#bottom-bar div::after {
    width: 0;
    height: 0;
    z-index: 9;
    content: "";
    position: absolute;
    border-radius: 10%;
    background: var(--conic-gradient);
    transition: .2s var(--default-easing);
}

#bottom-bar .chosen::after {
    width: 100%;
    height: 100%;
    border-radius: 49%;
    box-shadow: inset 0 .5px 4px #FFFFFF;
}