@import 'vars.css';

.tag {
    gap: var(--space-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 4ch;
}

    /* SIZES */

    .tag.tag-small {
        padding: var(--space-1) var(--space-2);
        border-radius: var(--border-radius-24);
        font-size: var(--font-size-mini);
        font-weight: var(--font-weight-semi-bold);
        line-height: 10px;
    }

    .tag .tag-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* COLORS PRIMARY */
    .tag.tag-primary-success {
        background: var(--green-1);
        color: var(--green-7);
    }

    .tag.tag-primary-warning {
        background: var(--orange-1);
        color: var(--orange-7);
    }

    .tag.tag-primary-info {
        background: var(--marine-2);
        color: var(--marine-7);
    }

    .tag.tag-primary-danger {
        background: var(--red-1);
        color: var(--red-7);
    }

    .tag.tag-primary-default {
        background: var(--grey-2);
        color: var(--grey-8);
    }