/* Навбар (таб-бар) + размытие под ним и над страницей. Нужен colors/palette.css */

/* под баром страница размывается (сильнее книзу) и гаснет */
.tab-fade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 69;
    height: calc(var(--safe-bottom) + 7.5rem);
    pointer-events: none;
}

.tab-fade i {
    position: absolute;
    inset: 0;
}

.tab-fade i:nth-child(1) {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent 80%);
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 55%, transparent 80%);
}

.tab-fade i:nth-child(2) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 80%);
    mask-image: linear-gradient(to bottom, transparent 45%, #000 80%);
}

.tab-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(var(--page-rgb) / 0), rgb(var(--page-rgb) / .5) 40%, rgb(var(--page-rgb) / .88) 75%, rgb(var(--page-rgb)));
}

/* у верхнего края то же в зеркале; появляется, только когда страница прокручена */
.top-fade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 69;
    height: calc(var(--safe-top) + 3.5rem);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s .2s;
}

.top-fade.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}

.top-fade i {
    position: absolute;
    inset: 0;
}

.top-fade i:nth-child(1) {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 25%, #000 55%, transparent 80%);
    mask-image: linear-gradient(to top, transparent, #000 25%, #000 55%, transparent 80%);
}

.top-fade i:nth-child(2) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to top, transparent 45%, #000 80%);
    mask-image: linear-gradient(to top, transparent 45%, #000 80%);
}

.top-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(var(--page-rgb) / 0), rgb(var(--page-rgb) / .5) 40%, rgb(var(--page-rgb) / .88) 75%, rgb(var(--page-rgb)));
}

/* таб-бар: сплошная капсула по центру, высота 62px, 20px от нижнего края.
   Ширина вкладки 5.625rem (90px), на узких экранах сжимается, чтобы капсула влезла с отступами по 1.25rem.
   Плашку можно тащить пальцем, как в iOS: пока держишь — она чуть увеличивается */
.tabbar {
    --tab-w: min(5.625rem, calc((100vw - 2.5rem - .5rem - 2px) / var(--n)));
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 1.25rem);
    translate: -50% 0;
    z-index: 70;
    display: flex;
    height: 3.875rem;
    padding: .25rem;
    border: 1px solid var(--sep);
    border-radius: 9999px;
    background-color: var(--sheet-bg);
    touch-action: none;
}

.tabbar-pill {
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: .25rem;
    width: var(--tab-w);
    border-radius: 9999px;
    background: rgb(var(--ink) / .1);
    transform: translateX(calc(var(--tab-w) * var(--i)));
    transition: transform .3s ease-out, scale .25s var(--ease), background-color .25s;
}

.tabbar.is-dragging .tabbar-pill {
    transition: scale .25s var(--ease), background-color .25s;
    scale: 1.06;
    background: rgb(var(--ink) / .14);
}

.tabbar-item {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--tab-w);
    height: 100%;
    border-radius: 9999px;
    color: var(--hint);
    transition: color .2s;
}

.tabbar-item[aria-pressed="true"] {
    color: var(--text);
}

.tabbar-item:focus-visible {
    outline: 2px solid rgb(var(--ink) / .35);
    outline-offset: -4px;
}

.tabbar-item svg {
    grid-area: 1 / 1;
    width: 1.875rem;
    height: 1.875rem;
    transition: transform .25s var(--ease), opacity .2s;
}

/* у неактивной вкладки контурный значок, у активной залитый — как в iOS */
.tabbar-item .ico--fill,
.tabbar-item[aria-pressed="true"] .ico--line {
    opacity: 0;
}

.tabbar-item[aria-pressed="true"] .ico--fill {
    opacity: 1;
}

.tabbar-item:active svg {
    transform: scale(.9);
}

.tabbar.is-dragging .tabbar-item svg {
    transform: none;
}