/* =========================================================
   ASPIRIN V181
   Correct bottom navigation animation
   + exact Back button positioning
   ========================================================= */


/*
 * ВАЖНО:
 *
 * НЕ используем transform.
 *
 * У штатной панели ASPIRIN уже может быть:
 *
 * transform: translateX(-50%)
 *
 * Поэтому вертикальное движение делаем
 * через отдельное CSS свойство translate.
 */

.a181-bottom-nav {

    transition:
        translate .26s ease,
        opacity .22s ease
        !important;

    will-change:
        translate,
        opacity;
}


/*
 * Скрытая панель.
 */

.a181-bottom-nav:not(.a181-visible) {

    translate:
        0
        calc(
            100%
            + 36px
        )
        !important;

    opacity:
        0
        !important;

    pointer-events:
        none
        !important;
}


/*
 * Видимая панель.
 */

.a181-bottom-nav.a181-visible {

    translate:
        0 0
        !important;

    opacity:
        1
        !important;

    pointer-events:
        auto
        !important;
}


/*
 * Кнопку Назад больше не ставим
 * относительно "примерной высоты меню".
 *
 * JS вычисляет реальное расстояние:
 *
 * bottom viewport
 *   -> нижний край панели
 *   -> высота панели
 *   -> зазор 12px
 */

/*
 * ASPIRIN V183
 *
 * Плавающая кнопка Back всегда хранит
 * одну и ту же координату.
 *
 * При исчезании она только затухает,
 * но НЕ едет вниз.
 */
.a166-fab-back {

    bottom:
        var(
            --a181-back-bottom,
            190px
        )
        !important;
}


/*
 * Когда меню скрыто,
 * кнопка Назад может опуститься вниз.
 */




/*
 * Плавное перемещение.
 */

.a166-fab-back {

    transition:
        opacity .20s ease,
        transform .20s ease
        !important;
}