@taiga-ui/kit/styles/components/chip.less

Taiga UI Angular main components kit

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Chip
 * @selector tui-chip, [tuiChip]
 *
 * @description
 * A chip component that can be used on it's own or on buttons/links/inputs
 *
 * @attributes
 * data-size — size (default: 's') ('xxs' | 'xs' | 's' | 'm')
 *
 * @example
 * <tui-chip>Sale</tui-badge>
 *
 * @see-also
 * Icons, Appearance, Badge, Block
 */
tui-chip,
[tuiChip] {
    --t-gap: 0.125rem;
    --t-margin: -0.125rem;
    --t-icon-size: 1rem;
    --t-padding: 0 0.625rem;
    --t-size: var(--tui-height-s);

    .button-base();

    font: var(--tui-font-text-s);
    border-radius: var(--tui-radius-m);
    padding: var(--t-padding);
    block-size: var(--t-size);
    inline-size: fit-content;
    isolation: isolate;

    .interactive({
        cursor: pointer;
    });

    > tui-icon,
    &[tuiIcons]::before,
    &[tuiIcons]::after {
        font-size: var(--t-icon-size) !important;
    }

    & > [tuiIconButton] {
        margin: -0.375rem;
    }

    &[data-size='xxs'] {
        // StackBlitz changes "0rem" to "0" breaking calc
        --t-gap: ~'0rem';
        --t-padding: 0 0.25rem;
        --t-size: 1rem;
        --t-icon-size: 0.75rem;

        font: var(--tui-font-text-xs);
        border-radius: var(--tui-radius-xs);

        & > [tuiIconButton] {
            margin: -0.5rem;
            transform: scale(0.75);
        }
    }

    &[data-size='xs'] {
        --t-padding: 0 0.375rem;
        --t-size: var(--tui-height-xs);

        border-radius: var(--tui-radius-xs);

        & > [tuiIconButton] {
            margin: -0.375rem;
        }
    }

    &[data-size='m'] {
        --t-margin: -0.375rem;
        --t-icon-size: 1.5rem;
        --t-padding: 0 1rem;
        --t-size: var(--tui-height-m);

        font: var(--tui-font-text-m);

        & > [tuiIconButton] {
            margin: -0.75rem;
        }
    }

    & > img,
    tui-avatar {
        inline-size: 1.5rem;
        margin-inline-start: -0.375rem;
    }

    & > [tuiFade] {
        &:first-of-type {
            flex: 1 0 30%;
            max-inline-size: fit-content;
        }

        &:last-of-type {
            flex: 0 1 auto;
        }
    }

    & > input[tuiChip] {
        .fullsize();

        margin: 0;

        &[type='checkbox'],
        &[type='radio'] {
            z-index: -1;
        }
    }

    &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
    &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
    &[tuiAppearance][data-appearance='negative'],
    &[tuiAppearance][data-appearance='positive'],
    &[tuiAppearance][data-appearance='warning'],
    &[tuiAppearance][data-appearance='info'],
    &[tuiAppearance][data-appearance='neutral'] {
        color: var(--tui-text-primary);
    }
}