/* Tag Component - BEM Methodology */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.tag:hover {
    background-color: var(--color-primary-100);
}

/* Clickable tags */
.tag--clickable {
    cursor: pointer;
}

.tag--clickable:hover {
    background-color: var(--color-primary-200);
    transform: translateY(-1px);
}

/* Tag Variants */
.tag--neutral {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.tag--neutral:hover {
    background-color: var(--color-neutral-200);
}

.tag--success {
    background-color: #d1fae5;
    color: #065f46;
}

.tag--warning {
    background-color: #fef3c7;
    color: #92400e;
}

.tag--error {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Tag with Remove Button */
.tag--removable {
    padding-right: var(--space-xs);
}

.tag__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: var(--space-xs);
    padding: 0;
    background-color: transparent;
    color: var(--color-primary-600);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tag__remove:hover {
    background-color: var(--color-primary-200);
    color: var(--color-primary-800);
}

/* Tag Sizes */
.tag--small {
    padding: 2px var(--space-sm);
    font-size: var(--font-size-xs);
}

.tag--large {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
}