/*
|--------------------------------------------------------------------------
| Matec Component: Badge / Chip
|--------------------------------------------------------------------------
| Badges de estado, contexto y etiquetas.
|--------------------------------------------------------------------------
*/

.mtc-badge,
.mtc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtc-space-2xs);

    width: fit-content;
    max-width: 100%;

    min-height: 26px;
    padding-inline: var(--mtc-space-sm);

    border: 1px solid transparent;
    border-radius: var(--mtc-radius-pill);

    background: var(--mtc-color-badge-bg);
    color: var(--mtc-color-badge-text);

    font-size: var(--mtc-font-size-xs);
    font-weight: var(--mtc-font-weight-bold);
    line-height: var(--mtc-line-height-none);
    letter-spacing: var(--mtc-letter-spacing-sm);
    text-decoration: none;

    white-space: nowrap;
}

.mtc-badge svg,
.mtc-chip svg {
    width: var(--mtc-size-icon-xs);
    height: var(--mtc-size-icon-xs);
}

/*
|--------------------------------------------------------------------------
| Badge variants
|--------------------------------------------------------------------------
*/

.mtc-badge--primary {
    background: var(--mtc-color-primary-soft);
    color: var(--mtc-color-primary);
}

.mtc-badge--secondary {
    background: var(--mtc-color-secondary-soft);
    color: var(--mtc-color-secondary);
}

.mtc-badge--accent {
    background: var(--mtc-color-accent-soft);
    color: var(--mtc-color-accent);
}

.mtc-badge--buy,
.mtc-badge--cta {
    background: var(--mtc-color-buy-soft);
    color: var(--mtc-color-buy);
}

.mtc-badge--success {
    background: var(--mtc-color-success-soft);
    color: var(--mtc-color-success);
}

.mtc-badge--info {
    background: var(--mtc-color-info-soft);
    color: var(--mtc-color-info);
}

.mtc-badge--warning {
    background: var(--mtc-color-warning-soft);
    color: var(--mtc-color-warning);
}

.mtc-badge--danger {
    background: var(--mtc-color-danger-soft);
    color: var(--mtc-color-danger);
}

.mtc-badge--dark {
    background: var(--mtc-color-button-dark-bg);
    color: var(--mtc-color-button-dark-text);
}

.mtc-badge--light {
    border-color: var(--mtc-color-border-subtle);
    background: var(--mtc-color-surface-muted);
    color: var(--mtc-color-text);
}

/*
|--------------------------------------------------------------------------
| Chip
|--------------------------------------------------------------------------
*/

.mtc-chip {
    background: var(--mtc-color-chip-bg);
    color: var(--mtc-color-chip-text);
    font-weight: var(--mtc-font-weight-semibold);
}

.mtc-chip--interactive {
    cursor: pointer;

    transition:
        background-color var(--mtc-transition-fast),
        border-color var(--mtc-transition-fast),
        color var(--mtc-transition-fast),
        transform var(--mtc-transition-fast);
}

.mtc-chip--interactive:hover {
    background: var(--mtc-color-primary-soft);
    color: var(--mtc-color-primary);
    transform: translateY(-1px);
}