@import '../utils.less';

/**
 * @name Badge
 * @selector [tuiBadge]
 *
 * @description
 * A basic badge that can be used on it's own or on buttons/links
 *
 * @attributes
 * data-size — size (default: 'l') ('s' | 'm' | 'l' | 'xl')
 *
 * @example
 * <div[tuiBadge]>99+</div>
 *
 * @see-also
 * Icons, Appearance, Chip, Block
 */
[tuiBadge]:where(*&) {
    --t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);
    --t-icon-size: 1rem;
    --t-padding: calc(0.5rem * var(--t-scale));
    --t-size: var(--tui-height-xs);
    --t-margin: -0.25rem;

    .button-base();

    border-radius: 6rem;
    justify-content: center;
    background: #959595;
    color: var(--tui-background-base);
    padding: 0.0625rem var(--t-padding);
    block-size: var(--t-size);
    min-block-size: calc(var(--tui-lh) + 0.125rem);
    min-inline-size: ~'max(calc(var(--tui-lh) + 0.125rem), var(--t-size))';
    inline-size: fit-content;
    font: var(--tui-typography-ui-s);
    zoom: 1;

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

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

    &[data-appearance='negative'] {
        --t-status: var(--tui-status-negative);
    }

    &[data-appearance='positive'] {
        --t-status: var(--tui-status-positive);
    }

    &[data-appearance='warning'] {
        --t-status: var(--tui-status-warning);
    }

    &[data-appearance='info'] {
        --t-status: var(--tui-status-info);
    }

    &[data-appearance='neutral'] {
        --t-status: var(--tui-status-neutral);
    }

    &[data-size='s'] {
        --t-padding: calc(0.25rem * var(--tui-font-scale) * var(--t-scale));
        --t-size: 1rem;
        --t-icon-size: 0.625rem;
        --t-margin: -0.0625rem;

        font: var(--tui-typography-ui-2xs);
        gap: 0.1875rem;

        &[tuiStatus]::before {
            inline-size: 0.25rem;
            block-size: 0.25rem;
            margin-inline: 0.0625rem -0.125rem;
        }
    }

    &[data-size='m'] {
        --t-padding: calc(0.375rem * var(--tui-font-scale));
        --t-size: 1.25rem;
        --t-icon-size: 0.75rem;
        --t-margin: -0.125rem;
    }

    &[data-size='xl'] {
        --t-margin: -0.25rem;
        --t-padding: 0.75rem;
        --t-size: var(--tui-height-s);

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

        &[tuiStatus]::before {
            inline-size: 0.5rem;
            block-size: 0.5rem;
        }
    }

    &[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);
    }

    &[tuiStatus]::before {
        inline-size: 0.375rem;
        block-size: 0.375rem;
        margin: 0;
    }
}

img[tuiBadge]:where(*&),
tui-icon[tuiBadge]:where(*&) {
    padding: 0;
    inline-size: var(--t-size);

    &::before {
        .fullsize();

        --t-margin: 0;
    }
}