/*==============================================================
    WANDER NAVIGATION
==============================================================*/


nav {

    --nav-icon-size:1.5rem;
    --nav-label-size:.7rem;

    position:fixed;

    right:0;
    bottom:0;
    left:0;

    z-index:2000;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    padding:
        8px
        4px
        calc(8px + env(safe-area-inset-bottom));

    background:#000;
    color:#fff;

}


/*==============================================================
    NAVIGATION LINKS
==============================================================*/


nav a {

    flex:1 1 0;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;

    color:inherit;
    text-align:center;
    text-decoration:none;

}


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


.nav-icon {

    display:flex;
    align-items:center;
    justify-content:center;

    width:var(--nav-icon-size);
    height:var(--nav-icon-size);

    font-size:var(--nav-icon-size);
    line-height:1;

    overflow:hidden;

}

.nav-icon img.openai-logo {

    width:165%;
    height:165%;

    max-width:none;

}


.nav-icon img {

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

}


/*==============================================================
    LABELS
==============================================================*/


.nav-label {

    display:block;

    width:100%;

    overflow:hidden;

    font-size:var(--nav-label-size);
    line-height:1;

    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;

}


/*==============================================================
    TABLET
==============================================================*/


@media (min-width:768px) {

    nav {

        --nav-icon-size:1.8rem;
        --nav-label-size:.8rem;

        padding-top:10px;

    }

}


/*==============================================================
    DESKTOP
==============================================================*/


@media (min-width:1200px) {

    nav {

        --nav-icon-size:2rem;
        --nav-label-size:.9rem;

    }

}