/*
 * Prenship Marketplace
 * Buyer Launch Navigation 0.1.0
 */

.prenship-buyer-launch-nav {
    display: none;
}

.prenship-buyer-launch-nav a {
    text-decoration: none;
}

.prenship-buyer-launch-nav svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prenship-buyer-launch-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.prenship-buyer-launch-nav__label {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
}

@media (max-width: 900px) {
    body.prenship-buyer-launch-nav-active {
        padding-bottom:
            calc(
                80px
                + env(safe-area-inset-bottom, 0px)
            ) !important;
    }

    .prenship-buyer-launch-nav {
        position: fixed;

        left: 10px;
        right: 10px;

        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom, 0px)
            );

        z-index: 2147483000;

        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        min-height: 62px;

        padding: 5px;

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

        border-radius: 20px;

        background:
            rgba(10, 14, 18, .95);

        box-shadow:
            0 14px 40px
            rgba(0, 0, 0, .36);

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

    .prenship-buyer-launch-nav a {
        position: relative;

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

        min-width: 0;
        min-height: 52px;

        padding: 5px 2px;

        border-radius: 15px;

        color:
            rgba(255, 255, 255, .68);

        -webkit-tap-highlight-color:
            transparent;
    }

    .prenship-buyer-launch-nav a:hover,
    .prenship-buyer-launch-nav a:focus-visible {
        color: #fff;

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

        outline: none;
    }

    .prenship-buyer-launch-nav
    a[aria-current="page"] {
        color: #fff;

        background:
            rgba(255, 255, 255, .11);
    }

    .prenship-buyer-launch-nav
    a[aria-current="page"]::before {
        content: "";

        position: absolute;

        top: 2px;
        left: 50%;

        width: 20px;
        height: 2px;

        border-radius: 999px;

        background: currentColor;

        transform:
            translateX(-50%);
    }

    /*
     * Retire earlier bottom/mobile navigation layers.
     * Does not hide commerce sheets/buttons.
     */
    body.prenship-buyer-launch-nav-active
    .buyer-plus-nav,

    body.prenship-buyer-launch-nav-active
    .buyer-plus-modes,

    body.prenship-buyer-launch-nav-active
    [class*="bottom-nav"]:not(.prenship-buyer-launch-nav),

    body.prenship-buyer-launch-nav-active
    [id*="bottom-nav"]:not(#prenship-buyer-launch-nav),

    body.prenship-buyer-launch-nav-active
    [class*="mobile-nav"]:not(.prenship-buyer-launch-nav),

    body.prenship-buyer-launch-nav-active
    [id*="mobile-nav"]:not(#prenship-buyer-launch-nav) {
        display: none !important;
    }
}