/* Shared top-nav pills so /marketplace, /my-vault, /auctions and every
   marketing page present the same controls at the same size.
   Colours are literal, not var()s: the marketing nav has its own palette. */

.navpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    box-sizing: border-box;
    padding: 0 13px 0 7px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.navvault {
    color: #e5b53a;
    background: rgba(229, 181, 58, .08);
    border: 1px solid #5c4a15;
}

.navvault:hover {
    background: rgba(229, 181, 58, .16);
    color: #e5b53a;
}

/* Unicode has no vault, so draw the round door: locking bars out to the rim,
   spoked handwheel in the middle. */
.vaulticon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23e5b53a' stroke-width='6'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%23e5b53a' stroke-width='2.5' opacity='.55'/%3E%3Cg stroke='%23e5b53a' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M59 41 75 25M41 41 25 25M41 59 25 75M59 59 75 75'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='13' fill='none' stroke='%23e5b53a' stroke-width='5'/%3E%3Cg stroke='%23e5b53a' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M37 50h26M43.5 38.7 56.5 61.3M56.5 38.7 43.5 61.3'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='4.5' fill='%23e5b53a'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The one buy button in the nav, so it gets the gold treatment. */
.ripnav {
    color: #1a1405;
    background: linear-gradient(180deg, #f5c518, #d99e0b);
    border: 1px solid #f7d660;
    box-shadow: 0 0 0 rgba(245, 197, 24, .55);
    animation: ripglow 2.6s ease-in-out infinite;
}

.ripnav:hover {
    background: linear-gradient(180deg, #ffd42e, #e8ab0d);
    color: #1a1405;
}

/* Zoomed past the flames so the pack itself fills the chip. */
.ripico {
    width: 19px;
    height: 27px;
    flex: 0 0 auto;
    border-radius: 4px;
    background-image: url('/static/img/monster-slab-pack.webp');
    background-size: 145% auto;
    background-position: 50% 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@keyframes ripglow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(245, 197, 24, 0);
    }

    50% {
        box-shadow: 0 0 14px rgba(245, 197, 24, .45);
    }
}

/* Neutral outline pills: back to the grading site, and over to the vault
   marketplace. Same treatment so the nav reads as one set. */
.mpenav,
.mktnav {
    color: #e8e8ee;
    background: transparent;
    border: 1px solid #2a2a33;
}

.mpenav:hover,
.mktnav:hover {
    border-color: #3a3a44;
    color: #fff;
}

.mpeico {
    height: 24px;
    width: auto;
    border-radius: 5px;
    display: block;
    flex: 0 0 auto;
}