welcome-ui/dist/Tag.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_1xtnl_2{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--duration-medium) var(--timing-primary);font-weight:var(--font-weight-medium);border:var(--border-width-md) solid var(--color-neutral-10);line-height:initial;background-color:var(--backgroundColor, var(--color-beige-20));color:var(--color, var(--color-beige-90));border-color:var(--borderColor, transparent);height:var(--height);padding:var(--paddingVertical) var(--paddingHorizontal);gap:var(--gap);font-size:var(--fontSize);border-radius:var(--borderRadius, var(--radius-md))}._root_1xtnl_2>span,._root_1xtnl_2>p{overflow:hidden;text-overflow:ellipsis}._root_1xtnl_2>svg{flex-shrink:0;width:var(--iconWidth);height:var(--iconHeight)}button._root_1xtnl_2,a._root_1xtnl_2{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_1xtnl_2:hover,a._root_1xtnl_2:hover{--backgroundColor: var(--backgroundColorHover, var(--color-beige-30))}}button._root_1xtnl_2[data-focus-visible],button._root_1xtnl_2:focus-visible,a._root_1xtnl_2[data-focus-visible],a._root_1xtnl_2:focus-visible{outline-color:var(--outlineColorFocus);--backgroundColor: var(--backgroundColorFocus, var(--color-beige-30))}button._root_1xtnl_2:active,a._root_1xtnl_2:active{--backgroundColor: var(--backgroundColorActive, var(--color-beige-30))}._variant-primary_1xtnl_59{--backgroundColor: var(--color-brand-40);--backgroundColorHover: var(--color-brand-50);--backgroundColorActive: var(--color-brand-50);--backgroundColorFocus: var(--color-brand-50);--outlineColorFocus: var(--color-brand-60);--color: var(--color-neutral-90)}._variant-info_1xtnl_67{--backgroundColor: var(--color-blue-10);--backgroundColorHover: var(--color-blue-20);--backgroundColorActive: var(--color-blue-20);--backgroundColorFocus: var(--color-blue-20);--outlineColorFocus: var(--color-blue-30);--color: var(--color-blue-90)}._variant-success_1xtnl_75{--backgroundColor: var(--color-green-10);--backgroundColorHover: var(--color-green-20);--backgroundColorActive: var(--color-green-20);--backgroundColorFocus: var(--color-green-20);--outlineColorFocus: var(--color-green-30);--color: var(--color-green-90)}._variant-danger_1xtnl_83{--backgroundColor: var(--color-red-10);--backgroundColorHover: var(--color-red-20);--backgroundColorActive: var(--color-red-20);--backgroundColorFocus: var(--color-red-20);--outlineColorFocus: var(--color-red-30);--color: var(--color-red-90)}._variant-warning_1xtnl_91{--backgroundColor: var(--color-orange-10);--backgroundColorHover: var(--color-orange-20);--backgroundColorActive: var(--color-orange-20);--backgroundColorFocus: var(--color-orange-20);--outlineColorFocus: var(--color-orange-30);--color: var(--color-orange-90)}._variant-ai_1xtnl_99{--backgroundColor: var(--color-violet-20);--backgroundColorHover: var(--color-violet-30);--backgroundColorActive: var(--color-violet-30);--backgroundColorFocus: var(--color-violet-30);--outlineColorFocus: var(--color-violet-40);--color: var(--color-violet-90)}._variant-blue_1xtnl_107{--backgroundColor: var(--color-blue-40);--backgroundColorHover: var(--color-blue-50);--backgroundColorActive: var(--color-blue-50);--backgroundColorFocus: var(--color-blue-50);--outlineColorFocus: var(--color-blue-60);--color: var(--color-neutral-90)}._variant-green_1xtnl_115{--backgroundColor: var(--color-green-30);--backgroundColorHover: var(--color-green-40);--backgroundColorActive: var(--color-green-40);--backgroundColorFocus: var(--color-green-40);--outlineColorFocus: var(--color-green-50);--color: var(--color-neutral-90)}._variant-orange_1xtnl_123{--backgroundColor: var(--color-orange-40);--backgroundColorHover: var(--color-orange-50);--backgroundColorActive: var(--color-orange-50);--backgroundColorFocus: var(--color-orange-50);--outlineColorFocus: var(--color-orange-60);--color: var(--color-neutral-90)}._variant-pink_1xtnl_131{--backgroundColor: var(--color-pink-40);--backgroundColorHover: var(--color-pink-50);--backgroundColorActive: var(--color-pink-50);--backgroundColorFocus: var(--color-pink-50);--outlineColorFocus: var(--color-pink-60);--color: var(--color-neutral-90)}._variant-teal_1xtnl_139{--backgroundColor: var(--color-teal-40);--backgroundColorHover: var(--color-teal-50);--backgroundColorActive: var(--color-teal-50);--backgroundColorFocus: var(--color-teal-50);--outlineColorFocus: var(--color-teal-60);--color: var(--color-neutral-90)}._variant-violet_1xtnl_147{--backgroundColor: var(--color-violet-40);--backgroundColorHover: var(--color-violet-50);--backgroundColorActive: var(--color-violet-50);--backgroundColorFocus: var(--color-violet-50);--outlineColorFocus: var(--color-violet-60);--color: var(--color-neutral-90)}._size-xs_1xtnl_155{--height: var(--height-20);--paddingVertical: var(--spacing-xxs);--paddingHorizontal: var(--spacing-xs);--gap: var(--spacing-xs);--fontSize: var(--font-size-xs);--borderRadius: var(--radius-sm);--iconWidth: .75rem;--iconHeight: var(--height-12);--removeWidth: .5rem}._size-sm_1xtnl_166{--height: var(--height-24);--paddingVertical: var(--spacing-xs);--paddingHorizontal: var(--spacing-sm);--gap: var(--spacing-xs);--fontSize: var(--font-size-xs);--iconWidth: .75rem;--iconHeight: var(--height-12);--borderRadius: var(--radius-md);--removeWidth: .75rem}._size-md_1xtnl_177{--height: var(--height-32);--paddingVertical: var(--spacing-xs);--paddingHorizontal: var(--spacing-sm);--gap: var(--spacing-sm);--fontSize: var(--font-size-sm);--iconWidth: 1rem;--iconHeight: var(--height-16);--borderRadius: var(--radius-md);--removeWidth: 1rem}._hasRemoveAction_1xtnl_188{display:inline-flex;gap:var(--spacing-xs);align-items:center;flex-direction:row}._isSquare_1xtnl_194{padding:0;justify-content:center;flex-basis:var(--height)}._removeButton_1xtnl_199{--paddingInlineHasIcon: 0;flex-shrink:0}}