/**
 * Tag Component - CSS
 * Source: src/components/Atoms/Tag/Tag.tsx
 * Last synced: 2026-04-09 (ui-core)
 *
 * DOM mirrors React: outer flex box + inner span (py-cs2). Typography: text-xs (12px),
 * font-medium (500), line-height matches npm Storybook for this atom (see port audit).
 */

@import url("../tokens.4b8ea74adec1.css");

.ui-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-spline, "Spline Sans", sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-4, 4px);
    /* default size md: py-cs6 px-cs12 */
    padding: var(--cs6, 6px) var(--cs12, 12px);
}

.ui-tag__inner {
    box-sizing: border-box;
    display: inline-block;
    padding: var(--cs2, 2px) 0;
    line-height: 1rem;
}

.ui-tag--sm {
    padding: var(--cs4, 4px) var(--cs8, 8px);
}

.ui-tag--lg {
    padding: var(--cs8, 8px) var(--cs16, 16px);
}

.ui-tag--rounded {
    border-radius: 9999px;
}

/* —— Solid —— */
.ui-tag--solid.ui-tag--default {
    background-color: var(--color-gray-900);
    color: #fff;
}

.ui-tag--solid.ui-tag--green {
    background-color: var(--color-green-500);
    color: #fff;
}

.ui-tag--solid.ui-tag--red {
    background-color: var(--color-red-500);
    color: #fff;
}

.ui-tag--solid.ui-tag--blue {
    background-color: var(--color-blue-500);
    color: #fff;
}

.ui-tag--solid.ui-tag--yellow {
    background-color: var(--color-orange-500);
    color: #fff;
}

/* —— Light —— */
.ui-tag--light.ui-tag--default {
    background-color: color-mix(in srgb, var(--color-gray-900) 30%, transparent);
    color: var(--color-gray-900);
}

.ui-tag--light.ui-tag--green {
    background-color: color-mix(in srgb, var(--color-green-500) 20%, transparent);
    color: var(--color-green-800);
}

.ui-tag--light.ui-tag--red {
    background-color: color-mix(in srgb, var(--color-red-500) 20%, transparent);
    color: var(--color-red-800);
}

.ui-tag--light.ui-tag--blue {
    background-color: color-mix(in srgb, var(--color-blue-500) 20%, transparent);
    color: var(--color-blue-800);
}

.ui-tag--light.ui-tag--yellow {
    background-color: color-mix(in srgb, var(--color-orange-500) 20%, transparent);
    color: var(--color-orange-500);
}

/* —— Outline —— */
.ui-tag--outline.ui-tag--default {
    background-color: transparent;
    border-color: var(--color-gray-900);
    color: var(--color-gray-900);
}

.ui-tag--outline.ui-tag--green {
    background-color: transparent;
    border-color: var(--color-green-500);
    color: var(--color-green-500);
}

.ui-tag--outline.ui-tag--red {
    background-color: transparent;
    border-color: var(--color-red-500);
    color: var(--color-red-500);
}

.ui-tag--outline.ui-tag--blue {
    background-color: transparent;
    border-color: var(--color-blue-500);
    color: var(--color-blue-500);
}

.ui-tag--outline.ui-tag--yellow {
    background-color: transparent;
    border-color: var(--color-orange-500);
    color: var(--color-orange-500);
}

/* —— Disabled (any color) —— */
.ui-tag.is-disabled.ui-tag--solid,
.ui-tag[aria-disabled="true"].ui-tag--solid {
    background-color: var(--color-gray-300);
    color: var(--color-gray-500);
    border-color: transparent;
}

.ui-tag.is-disabled.ui-tag--light,
.ui-tag[aria-disabled="true"].ui-tag--light {
    background-color: color-mix(in srgb, var(--color-gray-300) 30%, transparent);
    color: var(--color-gray-500);
    border-color: transparent;
}

.ui-tag.is-disabled.ui-tag--outline,
.ui-tag[aria-disabled="true"].ui-tag--outline {
    background-color: transparent;
    border-color: var(--color-gray-300);
    color: var(--color-gray-500);
}