/**
 * Shared product badge look.
 *
 * Both the Gift Rules badge (.bug-gift-badge) and the editable Product Badges
 * (.bug-badge) render as the same pill, so the base lives in one file and is
 * enqueued by whichever addon is active. Per-badge colours are layered on top
 * as inline CSS generated from the badge settings.
 */

.bug-badge,
.bug-gift-badge {
    /*
     * inline-flex, not inline-block: the theme's badge slot is a flex row with
     * align-items stretch, so a taller sibling (the black discount flash) makes
     * the pill taller than its text. With inline-block the label then sticks to
     * the top of the pill; centring the flex content keeps it in the middle
     * whatever height the pill ends up with.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d1b488;
    color: #1c1202;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/*
 * Set by bug-badges.js once a badge has been relocated into the theme's own
 * badge slot, which brings its own spacing.
 */
.bug-badge--placed,
.bug-gift-badge--placed {
    margin: 15px 10px 0 auto;
}