/* =========================================
   [1] 기본 태그 공통 스타일
========================================= */
.design-system-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--px-18); /* 높이 고정 */
    gap: var(--Base-8size-Spacing-50); /* 아이콘과 텍스트 사이 간격 */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden; /* 텍스트가 넘칠 경우 방어 */
}

/* 텍스트 세로 정렬 보정 */
.design-system-tag .tag-text {
    display: block;
    line-height: 1;
}

/* =========================================
   [2] 아이콘 (Icon) 스타일
========================================= */
.design-system-tag .tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   [3] Radius (테두리 곡률)
========================================= */
.design-system-tag.radius-2   { border-radius: 2px; }
.design-system-tag.radius-4   { border-radius: 4px; }
.design-system-tag.radius-100 { border-radius: 100px; }

/* =========================================
   [4] Type 분기: Fix (고정폭) vs Variable (가변폭)
========================================= */

/* Type: Fix (가로폭 고정) */
.design-system-tag.type-fix.size-s { width: var(--px-40); }
.design-system-tag.type-fix.size-m { width: var(--px-64); }
.design-system-tag.type-fix.size-l { width: var(--px-80); }

/* Type: Variable (가로폭 텍스트에 맞춤 + 패딩) */
/* 기본 패딩: 좌우 8px */
.design-system-tag.type-variable {
    padding: 0 var(--Base-8size-Spacing-200);
    width: fit-content;
}

/* 예외 조건: Variable 타입이면서 radius가 8일 때 좌우 패딩 6px */
.design-system-tag.type-variable.radius-2 {
    padding: 0 var(--Base-4size-detail-Spacing-150);
}
/* 예외 조건: Variable 타입이면서 radius가 4일 때 좌우 패딩 4px */
.design-system-tag.type-variable.radius-4 {
    padding: 0 var(--Base-8size-Spacing-100);
}

/* =========================================
   [5] Variant (디자인 타입: Fill / Stroke)
========================================= */

/* Variant: Fill */
.design-system-tag.variant-fill {
    background-color: var(--Base-Basic-gray-basic-gray-900);
    color: var(--Base-Common-white);
    border: 1px solid var(--Base-Basic-gray-basic-gray-900);
}

/* Variant: Stroke */
.design-system-tag.variant-stroke {
    background-color: var(--Base-Common-white);
    color: var(--Base-Basic-gray-basic-gray-900);
    border: 1px solid var(--Components-basic-gray-color-border-color-border-tertiary);
}

/* 아이콘 색상 상속 처리 */
.design-system-tag .tag-icon i,
.design-system-tag .tag-icon svg {
    fill: currentColor; 
    color: inherit;
}