/* ==========================================================================
   バッジ
   ========================================================================== */

.c-badge {
    --_bg: var(--color-primary);

    display: inline-flex;
    align-items: center;
    min-height: var(--badge-h);
    padding-inline: var(--badge-px);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    white-space: nowrap;
    background-color: var(--_bg);
    border-radius: var(--radius-sm);
}

.c-badge--accent {
    --_bg: var(--color-accent);
}

.c-badge--category {
    /* 親要素で --color-category が渡されていないときは紺にする（未定義だと背景が透明になり白文字が読めないため） */
    --_bg: var(--color-category, var(--color-primary));
}