/**
 * @name Status
 * @selector [tuiStatus]
 *
 * @description
 * An indicator of a status with a color dot
 *
 * @vars
 * --t-status — color of the dot
 *
 * @example
 * <span tuiStatus style="--t-status: green">Success</span>
 *
 * @see-also
 * Badge, Chip
 */
[tuiStatus] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    &::before {
        content: '';
        display: var(--t-status, none);
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 100%;
        background: var(--t-status);
    }

    &[data-size='s'],
    &[data-size='m'],
    &[data-size='l'] {
        gap: 0.25rem;
    }

    &[data-size='xl'] {
        gap: 0.375rem;
    }
}