/* ===== Chip Component ===== */
/* Interactive state element for filtering, selection, and actions. */

.ui-chip-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: 999px;
    background: var(--chip-background, var(--meb-surface-input-filled));
    color: var(--chip-text, var(--meb-text-default));
    border: 1px solid var(--chip-border, transparent);
    cursor: pointer;
    user-select: none;
    transition: all 120ms ease;
}

/* --- Icon --- */

.ui-chip-icon {
    display: flex;
    align-items: center;
}

.ui-chip-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --- Text --- */

.ui-chip-text {
    line-height: var(--font-lineheight-display);
}

/* --- Remove button --- */

.ui-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--font-lineheight-display);
    border-radius: 50%;
    cursor: pointer;
    transition: background 120ms ease;
}

.ui-chip-remove:hover {
    background: var(--chip-remove-hover, color-mix(in srgb, var(--meb-text-default) 10%, transparent));
}

/* --- Variant: Subtle (default) --- */

.ui-chip-wrapper.variant-subtle {
    background: var(--chip-background-subtle, var(--meb-surface-input-filled));
}

/* --- Variant: Outlined --- */

.ui-chip-wrapper.variant-outlined {
    background: transparent;
    border: 1px solid var(--chip-border, var(--meb-border-subtle));
}

/* --- Variant: Filled --- */

.ui-chip-wrapper.variant-filled {
    background: var(--chip-background, var(--meb-surface-card));
}

/* --- Hover --- */

.ui-chip-wrapper:hover {
    box-shadow: 0 0 0 2px var(--chip-hover-shadow, var(--meb-button-primary-focus-shadow));
}

/* --- Selected --- */

.ui-chip-wrapper.selected {
    background: var(--chip-selected-background, var(--meb-accent-primary));
    color: var(--chip-selected-text, var(--meb-text-inverse));
    border-color: var(--chip-selected-border, var(--meb-border-accent));
}

.ui-chip-wrapper.selected .ui-chip-remove:hover {
    background: var(--chip-selected-remove-hover, color-mix(in srgb, var(--meb-text-inverse) 20%, transparent));
}