@import '../utils.less';

/**
 * @name Chip
 * @selector [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
 * <span tuiChip>Sale</span>
 *
 * @see-also
 * Icons, Appearance, Badge, Block
 */
[tuiChip]:where(*&) {
    --t-gap: 0.125rem;
    --t-margin: -0.125rem;
    --t-icon-size: 1rem;
    --t-padding: 0.625rem;
    --t-size: var(--tui-height-s);

    .button-base();

    font: var(--tui-typography-ui-s);
    border-radius: var(--tui-radius-m);
    padding: 0.125rem var(--t-padding);
    block-size: var(--t-size);
    min-block-size: calc(var(--tui-lh) + 0.25rem);
    inline-size: fit-content;
    max-inline-size: 100%;
    isolation: isolate;

    .interactive({
        cursor: pointer;
    });

    @supports not (font-size: 1lh) {
        --tui-lh: 1.2em;
    }

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

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

    > [tuiBadge] {
        margin-inline-end: 0;
    }

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

        font: var(--tui-typography-ui-2xs);
        border-radius: var(--tui-radius-xs);

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

    &[data-size='xs'] {
        --t-padding: 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: 1rem;
        --t-size: var(--tui-height-m);

        font: var(--tui-typography-ui-m);

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

        & > [tuiBadge] {
            margin-inline-start: -0.375rem;
        }
    }

    & > img,
    [tuiAvatar] {
        inline-size: 1.5rem;
        margin-inline-start: -0.375rem;
    }

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

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

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

        margin: 0;

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

input[tuiChip]:where(*&) {
    .interactive({
        cursor: text;
    });
}