app-module-btns-nav {
    position: absolute; 
    left: 0; bottom: -9rem;
    width: 100%; height: 9rem;
    font-size: 0;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    --anim-transition-delay: 0.1s;
    opacity: 1;
    /* backdrop-filter: blur(10px); */
    /* background-color: rgba(255,255,255,0.5); */
    background-color: rgb(237, 237, 237);
    transition: height var(--anim-duration);
    overflow: hidden;
    z-index: 100;
}

app-module-btns-nav button {
    appearance: none;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 50%;
    border: 0;
    border-right: 1px solid #d2d2d2;
    border-left: 1px solid #d2d2d2;
    transform: scale(1);
    opacity: 1;
    transition: background-color var(--anim-duration), transform var(--anim-duration), opacity var(--anim-duration), width var(--anim-duration), padding var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
    pointer-events: all;
    cursor: pointer;
    touch-action: none;

} 

body app-module-btns-nav button.catalog,
body app-module-btns-nav button.item {
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    padding: 0;
    width: 0;
    border-left-width: 0;
    border-right-width: 0;
    transition-delay: 0s;
}

app-module-btns-nav button.icon-loading {
    opacity: 0;
    transition: opacity 0s;
    transition-delay: 0s;
}


app-module-btns-nav button.active,
app-module-btns-nav button:active {
    background-color: #007AFF;
    /* transform: scale(0.95); */
    transition: background-color 0s, transform calc(var(--anim-duration) / 3);
    transition-delay: 0s;
}

app-module-btns-nav button .icon {
    position: absolute;
    left: 50%; top: 50%; width: 100%; height: 100%;
    font-size: 0; overflow: hidden;
    transform: translate(-50%,-50%);
    text-align: center;
    pointer-events: none;
}


app-module-btns-nav button .icon svg {
    position: absolute;
    left: 50%; top: 0; width: auto; height: 100%;
    transform: translateX(-50%);
    z-index: 0;
}

app-module-btns-nav button .icon svg path {
    transition: fill var(--anim-duration) , stroke var(--anim-duration) ;
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-nav button.active .icon svg path,
app-module-btns-nav button:active .icon svg path {
    fill: #ffffff; 
    /* stroke: #ffffff; */
    /* transition: fill calc(var(--anim-duration) / 3), stroke calc(var(--anim-duration) / 3); */
    transition: fill 0s;
    transition-delay: 0s;
}

app-module-btns-nav button .icon-text {
    position: absolute;
    left: 50%; top: 38%; transform: translate(-50%,-50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 4.4rem;
    font-weight: bold;
    line-height: 4.4rem;
    pointer-events: none;
    color: var(--ui-master-color);
    transition: color var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-nav button.active .icon-text,
app-module-btns-nav button:active .icon-text {
    color: #ffffff; 
    transition: color 0s;
    transition-delay: 0s;
}





app-module-btns-nav button .caption {
    position: absolute;
    left: 50%; bottom: 0.8rem; transform: translateX(-50%) scaleX(0.85);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    color: #555555;
    /* font-weight: bold; */
    pointer-events: none;
    white-space: nowrap;
    transition: color var(--anim-duration);
    transition-delay: var(--anim-transition-delay);
}

app-module-btns-nav button.active .caption,
app-module-btns-nav button:active .caption {
    color: #ffffff;
    /* transition: color calc(var(--anim-duration) / 3); */
    transition: 0s;
    transition-delay: 0s;
}