welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
2 lines (1 loc) • 32.9 kB
CSS
@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@layer components{._root_4kt6z_7{position:relative;display:inline-flex;align-items:center;justify-content:var(--justifyContent, flex-start);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);line-height:initial;font-size:var(--font-size-sm);border-radius:var(--tag-border-radius);border-color:var(--tag-color-border-default);border-width:var(--tag-border-width-default);border-style:solid;background:var(--backgroundColor);box-shadow:var(--boxShadow, var(--elevation-10));color:var(--color);height:var(--height);padding:var(--paddingVertical) var(--paddingHorizontal);gap:var(--gap)}._root_4kt6z_7>span,._root_4kt6z_7>p{overflow:hidden;text-overflow:ellipsis}._root_4kt6z_7>svg{flex-shrink:0;width:var(--tag-size-icon);height:var(--tag-size-icon)}button._root_4kt6z_7,a._root_4kt6z_7{cursor:pointer;text-decoration:none}@media (hover: hover) and (pointer: fine){button._root_4kt6z_7:hover:not(._disabled_4kt6z_51),a._root_4kt6z_7:hover:not(._disabled_4kt6z_51){--backgroundColor: var(--backgroundColorHover);--boxShadow: var(--elevation-20)}button._root_4kt6z_7._variant-dash_4kt6z_56:hover:not(._disabled_4kt6z_51),a._root_4kt6z_7._variant-dash_4kt6z_56:hover:not(._disabled_4kt6z_51){border-color:var(--tag-color-border-dash-hover)}}._disabled_4kt6z_51{background:var(--backgroundColorDisabled);border:none;cursor:inherit;--boxShadow: none;--color: var(--colorDisabled) }._disabled_4kt6z_51._ai_4kt6z_68{border:inherit}._disabled_4kt6z_51 ._removeButton_4kt6z_71{cursor:inherit}._variant-brand_4kt6z_74{--backgroundColor: var(--tag-color-background-brand-default);--backgroundColorHover: var(--tag-color-background-brand-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-brand-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-brand_4kt6z_74._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-brand-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-brand-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-brand-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-brand_4kt6z_89{--backgroundColor: var(--tag-color-background-brand-light-default);--backgroundColorHover: var(--tag-color-background-brand-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-brand-light-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-dark-brand_4kt6z_96{--backgroundColor: var(--tag-color-background-brand-dark-default);--backgroundColorHover: var(--tag-color-background-brand-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-brand-dark-disabled);--color: var(--tag-color-text-brand-default);--colorDisabled: var(--tag-color-text-brand-disabled)}._variant-warm_4kt6z_103{--backgroundColor: var(--tag-color-background-warm-default);--backgroundColorHover: var(--tag-color-background-warm-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-warm-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-warm_4kt6z_103._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-warm-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-warm-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-warm-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-warm_4kt6z_118{--backgroundColor: var(--tag-color-background-warm-light-default);--backgroundColorHover: var(--tag-color-background-warm-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-warm-light-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-dark-warm_4kt6z_125{--backgroundColor: var(--tag-color-background-warm-dark-default);--backgroundColorHover: var(--tag-color-background-warm-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-warm-dark-disabled);--color: var(--tag-color-text-warm-default);--colorDisabled: var(--tag-color-text-warm-disabled)}._variant-red_4kt6z_132{--backgroundColor: var(--tag-color-background-red-default);--backgroundColorHover: var(--tag-color-background-red-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-red_4kt6z_132._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-red-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-red-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-red-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-red_4kt6z_147{--backgroundColor: var(--tag-color-background-red-light-default);--backgroundColorHover: var(--tag-color-background-red-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-dark-red_4kt6z_154{--backgroundColor: var(--tag-color-background-red-dark-default);--backgroundColorHover: var(--tag-color-background-red-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-red-disabled);--color: var(--tag-color-text-red-default);--colorDisabled: var(--tag-color-text-red-disabled)}._variant-blue_4kt6z_161{--backgroundColor: var(--tag-color-background-blue-default);--backgroundColorHover: var(--tag-color-background-blue-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-blue-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-blue_4kt6z_161._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-blue-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-blue-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-blue-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-blue_4kt6z_176{--backgroundColor: var(--tag-color-background-blue-light-default);--backgroundColorHover: var(--tag-color-background-blue-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-blue-light-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-dark-blue_4kt6z_183{--backgroundColor: var(--tag-color-background-blue-dark-default);--backgroundColorHover: var(--tag-color-background-blue-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-blue-dark-disabled);--color: var(--tag-color-text-blue-default);--colorDisabled: var(--tag-color-text-blue-disabled)}._variant-green_4kt6z_190{--backgroundColor: var(--tag-color-background-green-default);--backgroundColorHover: var(--tag-color-background-green-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-green-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-green_4kt6z_190._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-green-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-green-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-green-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-green_4kt6z_205{--backgroundColor: var(--tag-color-background-green-light-default);--backgroundColorHover: var(--tag-color-background-green-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-green-light-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-dark-green_4kt6z_212{--backgroundColor: var(--tag-color-background-green-dark-default);--backgroundColorHover: var(--tag-color-background-green-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-green-dark-disabled);--color: var(--tag-color-text-green-default);--colorDisabled: var(--tag-color-text-green-disabled)}._variant-orange_4kt6z_219{--backgroundColor: var(--tag-color-background-orange-default);--backgroundColorHover: var(--tag-color-background-orange-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-orange-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-orange_4kt6z_219._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-orange-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-orange-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-orange-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-orange_4kt6z_234{--backgroundColor: var(--tag-color-background-orange-light-default);--backgroundColorHover: var(--tag-color-background-orange-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-orange-light-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-dark-orange_4kt6z_241{--backgroundColor: var(--tag-color-background-orange-dark-default);--backgroundColorHover: var(--tag-color-background-orange-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-orange-dark-disabled);--color: var(--tag-color-text-orange-default);--colorDisabled: var(--tag-color-text-orange-disabled)}._variant-pink_4kt6z_248{--backgroundColor: var(--tag-color-background-pink-default);--backgroundColorHover: var(--tag-color-background-pink-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-pink-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-pink_4kt6z_248._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-pink-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-pink-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-pink-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-pink_4kt6z_263{--backgroundColor: var(--tag-color-background-pink-light-default);--backgroundColorHover: var(--tag-color-background-pink-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-pink-light-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-dark-pink_4kt6z_270{--backgroundColor: var(--tag-color-background-pink-dark-default);--backgroundColorHover: var(--tag-color-background-pink-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-pink-dark-disabled);--color: var(--tag-color-text-pink-default);--colorDisabled: var(--tag-color-text-pink-disabled)}._variant-teal_4kt6z_277{--backgroundColor: var(--tag-color-background-teal-default);--backgroundColorHover: var(--tag-color-background-teal-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-teal-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-teal_4kt6z_277._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-teal-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-teal-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-teal-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-teal_4kt6z_292{--backgroundColor: var(--tag-color-background-teal-light-default);--backgroundColorHover: var(--tag-color-background-teal-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-teal-light-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-dark-teal_4kt6z_299{--backgroundColor: var(--tag-color-background-teal-dark-default);--backgroundColorHover: var(--tag-color-background-teal-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-teal-dark-disabled);--color: var(--tag-color-text-teal-default);--colorDisabled: var(--tag-color-text-teal-disabled)}._variant-violet_4kt6z_306{--backgroundColor: var(--tag-color-background-violet-default);--backgroundColorHover: var(--tag-color-background-violet-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-violet-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-violet_4kt6z_306._ai_4kt6z_68{border-width:1px;border-color:transparent;box-shadow:inset 0 0 0 2px #fff;--backgroundColor: linear-gradient(var(--tag-color-background-violet-ai-default) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorHover: linear-gradient(var(--tag-color-background-violet-ai-hover) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), linear-gradient(var(--tag-color-background-violet-ai-disabled) 0 0) padding-box, linear-gradient(white 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box}._variant-light-violet_4kt6z_321{--backgroundColor: var(--tag-color-background-violet-light-default);--backgroundColorHover: var(--tag-color-background-violet-light-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-violet-light-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dark-violet_4kt6z_328{--backgroundColor: var(--tag-color-background-violet-dark-default);--backgroundColorHover: var(--tag-color-background-violet-dark-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-violet-dark-disabled);--color: var(--tag-color-text-violet-default);--colorDisabled: var(--tag-color-text-violet-disabled)}._variant-dash_4kt6z_56{--backgroundColor: var(--tag-color-background-dash-default);--backgroundColorHover: var(--tag-color-background-dash-hover);--backgroundColorDisabled: repeating-linear-gradient(-45deg, transparent, transparent 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 2.4px, color-mix(in srgb, var(--color-neutral-50) 12%, transparent) 4.3px), var(--tag-color-background-dash-disabled);--color: var(--tag-color-text-dash-default);--colorDisabled: var(--tag-color-text-dash-disabled);border:var(--tag-border-width-default) dashed var(--tag-color-border-dash-default);position:relative}._variant-dash_4kt6z_56:hover{box-shadow:none}._variant-dash_4kt6z_56._disabled_4kt6z_51{border-color:var(--tag-color-border-dash-disabled)}._size-md_4kt6z_350{--height: var(--tag-size-max-height-md);--maxHeight: var(--tag-size-max-height-md);--paddingVertical: var(--tag-padding-block-md);--paddingHorizontal: var(--tag-padding-inline-md);--gap: var(--tag-gap-content)}._size-lg_4kt6z_357{--height: var(--tag-size-max-height-lg);--maxHeight: var(--tag-size-max-height-lg);--paddingVertical: var(--tag-padding-block-lg);--paddingHorizontal: var(--tag-padding-inline-lg);--gap: var(--tag-gap-content)}._hasRemoveAction_4kt6z_364{align-items:center;display:inline-flex;flex-direction:row;gap:var(--tag-padding-block-md)}._isSquare_4kt6z_370{flex-basis:var(--height);justify-content:center;padding:0}._removeButton_4kt6z_71{cursor:pointer;flex-shrink:0;--paddingInlineHasIcon: 0}}