/**
 * Tag Styles
 * 태그/칩 컴포넌트 전용 스타일 - 테마 전반에서 사용 가능
 */

/* ===========================================
   태그 색상 변수
   =========================================== */

/* 변수는 style.css에서 관리됩니다 */

/* ===========================================
   기본 태그 스타일
   =========================================== */

.category-item {
    background: #e8f4f8;
    color: #408090;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #d0e8f0;
    transition: all 0.3s ease;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: var(--tag-gap);
    padding: var(--tag-padding);
    background-color: var(--theme-info-bg);
    color: var(--theme-main-color);
    border: 1px solid var(--theme-main-color);
    border-radius: var(--tag-radius);
    font-size: var(--theme-font-size-small);
    font-family: var(--theme-font-normal);
    line-height: 1.4;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 100%;
}

.tag-item:hover {
    background-color: var(--theme-main-color);
    color: white;
}

/* ===========================================
   태그 텍스트
   =========================================== */

.tag-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--theme-font-normal);
}

/* ===========================================
   태그 제거 버튼
   =========================================== */

.tag-item-remove {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tag-item-remove:hover {
    transform: scale(1.2);
}

/* ===========================================
   태그 컬러 변형
   =========================================== */

/* Primary 태그 */
.tag-item-primary {
    background-color: var(--theme-main-color);
    color: white;
    border-color: var(--theme-main-color);
}

.tag-item-primary:hover {
    background-color: var(--theme-button-hover-bg);
}

/* Secondary 태그 */
.tag-item-secondary {
    background-color: var(--theme-secondary-button-bg);
    color: white;
    border-color: var(--theme-secondary-button-bg);
}

.tag-item-secondary:hover {
    background-color: var(--theme-secondary-button-hover-bg);
}

/* Success 태그 */
.tag-item-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745;
}

.tag-item-success:hover {
    background-color: #28a745;
    color: white;
}

/* Warning 태그 */
.tag-item-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}

.tag-item-warning:hover {
    background-color: #ffc107;
    color: #212529;
}

/* Danger 태그 */
.tag-item-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: var(--theme-danger-button-bg);
}

.tag-item-danger:hover {
    background-color: var(--theme-danger-button-bg);
    color: white;
}

/* Info 태그 */
.tag-item-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8;
}

.tag-item-info:hover {
    background-color: #17a2b8;
    color: white;
}

/* Light 태그 */
.tag-item-light {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #dee2e6;
}

.tag-item-light:hover {
    background-color: #e2e6ea;
}

/* Dark 태그 */
.tag-item-dark {
    background-color: #343a40;
    color: white;
    border-color: #343a40;
}

.tag-item-dark:hover {
    background-color: #23272b;
}

/* ===========================================
   태그 크기 변형
   =========================================== */

/* 작은 태그 */
.tag-item-sm {
    padding: 2px 6px;
    font-size: 11px;
}

.tag-item-sm .tag-item-remove {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* 큰 태그 */
.tag-item-lg {
    padding: 6px 12px;
    font-size: var(--theme-font-size-body);
}

.tag-item-lg .tag-item-remove {
    width: 18px;
    height: 18px;
    font-size: 20px;
}

/* ===========================================
   태그 상태
   =========================================== */

/* 비활성 태그 */
.tag-item.disabled,
.tag-item:disabled {
    background-color: var(--theme-item-bg);
    color: var(--theme-hint-text-color);
    border-color: var(--theme-card-border);
    cursor: not-allowed;
    opacity: 0.6;
}

.tag-item.disabled:hover,
.tag-item:disabled:hover {
    background-color: var(--theme-item-bg);
    color: var(--theme-hint-text-color);
    transform: none;
}

/* 제거 불가능한 태그 */
.tag-item.no-remove .tag-item-remove {
    display: none;
}

/* ===========================================
   태그 그룹/컨테이너
   =========================================== */

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tag-gap);
    align-items: center;
}

/* 인라인 태그 그룹 */
.tag-group-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--tag-gap);
    align-items: center;
}

/* ===========================================
   태그 + 아이콘
   =========================================== */

.tag-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tag-item-icon svg {
    width: 100%;
    height: 100%;
}

/* ===========================================
   접근성
   =========================================== */

.tag-item:focus-visible,
.tag-item-remove:focus-visible {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

/* 키보드 네비게이션 */
.tag-item[tabindex]:focus {
    box-shadow: 0 0 0 2px var(--tag-hover-bg);
}

/* ===========================================
   애니메이션
   =========================================== */

@keyframes tagSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tag-item.animate-in {
    animation: tagSlideIn 0.2s ease-out;
}

/* ===========================================
   유틸리티 클래스
   =========================================== */

/* 제거 버튼 없는 태그 */
.tag-item-readonly {
    cursor: default;
}

.tag-item-readonly:hover {
    background-color: var(--theme-info-bg);
    color: var(--theme-main-color);
}

.tag-item-readonly .tag-item-remove {
    display: none;
}

/* 링크 태그 */
a.tag-item {
    text-decoration: none;
    cursor: pointer;
}

a.tag-item:hover {
    text-decoration: none;
}

/* 선택된 태그 */
.tag-item.selected {
    background-color: var(--theme-main-color);
    color: white;
    border-color: var(--theme-main-color);
}