/* ===== Tag Component ===== */
/* User-applied classification labels (interactive, optionally removable). */

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

/* --- Text --- */

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

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

.ui-tag-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-tag-remove:hover {
    background: var(--tag-remove-hover, color-mix(in srgb, var(--meb-text-default) 10%, transparent));
}

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

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

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

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

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

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

/* --- Hover --- */

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

/* --- Selected --- */

.ui-tag-wrapper.selected {
    border-color: var(--tag-selected-border, var(--meb-border-accent));
    box-shadow: 0 0 0 2px var(--tag-selected-shadow, var(--meb-button-primary-focus-shadow));
}