.bom-cost-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 500 10px/1.2 system-ui, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #f2f4f8;
    color: #4a5568;
    white-space: nowrap;
    vertical-align: middle;
}

.bom-cost-label--consumable {
    background: #fdeee0;
    border-color: #f7c9a1;
    color: #b6661d;
}

.bom-cost-label--reusable {
    background: #e1f5ef;
    border-color: #9fd9c6;
    color: #2a7c66;
}

.bom-cost-label--custom {
    background: #e7e9fb;
    border-color: #b9c0f0;
    color: #4c57a8;
}