/* ==========================================================
   ÉLAN Navigation
   Version: 0.2.0
========================================================== */

/* ==========================================================
   BOTTOM NAVIGATION
========================================================== */

.bottom-nav {

    position: fixed;

    left: 50%;

    bottom: calc(1.25rem + env(safe-area-inset-bottom));

    transform: translateX(-50%) translateY(120%);

    width: min(92%, 520px);

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: .5rem;

    padding: .5rem;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: var(--radius-full);

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow: var(--shadow-lg);

    z-index: var(--z-navigation);

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal);

    opacity: 0;

}

/* ==========================================================
   VISIBLE STATE
========================================================== */

.bottom-nav.is-visible {

    transform: translateX(-50%) translateY(0);

    opacity: 1;

}

/* ==========================================================
   BUTTONS
========================================================== */

.bottom-nav button {

    display: grid;

    place-items: center;

    min-height: 48px;

    padding: .75rem;

    border-radius: var(--radius-full);

    color: var(--color-text-light);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

}

/* Hover */

.bottom-nav button:hover {

    background: rgba(255,255,255,.6);

    color: var(--color-text);

}

/* Active */

.bottom-nav button.is-active {

    background: var(--color-primary);

    color: var(--color-white);

}

/* Press */

.bottom-nav button:active {

    transform: scale(.96);

}

/* Focus */

.bottom-nav button:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 2px;

}

/* ==========================================================
   NAVIGATION ICONS
========================================================== */

.nav-icon {

    width: 22px;

    height: 22px;

    display: block;

    flex-shrink: 0;

    stroke: currentColor;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);

}

.bottom-nav button:hover .nav-icon {

    transform: translateY(-1px);

}

.bottom-nav button.is-active .nav-icon {

    transform: scale(1.08);

}