/* Builder chip — the coloured pill showing which builder a project belongs to.

   The chip existed long before logos did, as a bare <button> picking up the global
   button rule in MainLayout.css. These rules restate that rule's geometry rather than
   relying on inheritance, so the chip cannot drift if the global button style changes,
   and so a chip with a logo and one without are guaranteed to be the same height. */

.builderChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

/* Geometry applies to the button form only. The inline badge used in the mobile
   description panels keeps whatever the existing .mobileDescPanel-badge rule gives it,
   so adding a logo does not quietly restyle those panels. */
button.builderChip {
    /* Matches the global button rule: 8px block, 15px inline, 9px radius, 12px text. */
    padding: 8px 15px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

/* A logo needs breathing room on the left, but taking it from the existing padding
   would make a logo chip wider than a plain one and stagger a column of them. The left
   padding shrinks by roughly the coin's width instead, so both read as the same pill. */
button.builderChip--withLogo {
    padding-left: 6px;
}

.builderChip--withLogo {
    gap: 6px;
}

/* The coin. Logos arrive dark, white-knockout and multicolour; a neutral white disc
   gives every one of them the background it was drawn for, so none disappears into the
   chip's tint or fights it. It is also what fixes the size: whatever shape the mark is,
   the circle it sits in is always identical. */
.builderChip__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    border-radius: 50%;
    background-color: #ffffff;

    /* A faint ring, not a shadow: on a pale chip a white circle on a near-white tint
       would otherwise have no edge at all. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);

    overflow: hidden;
}

.builderChip__logo img {
    /* Smaller than the coin so the mark sits inside the disc rather than touching it —
       the logos are already padded, and this is the visual margin on top. */
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* Long builder names truncate rather than wrapping: a wrapped chip changes row height
   and breaks the alignment of a table column. */
.builderChip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The mobile badge is a span, not a button, and is tighter — the coin scales down with
   it rather than forcing the badge taller. */
.mobileDescPanel-badge .builderChip__logo {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.mobileDescPanel-badge .builderChip__logo img {
    width: 13px;
    height: 13px;
}