@bee-design/bee-design-ui/lib/Tag/style/index.css

Bee Design React UI Library.

.bee-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:0 8px;border:1px solid transparent;border-radius:var(--border-radius-small);font-size:12px;font-weight:500;line-height:22px;color:var(--color-text-1)}.bee-tag .bee-icon-hover.bee-tag-icon-hover::before{width:16px;height:16px}.bee-tag .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:var(--color-fill-3)}.bee-tag-content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bee-tag-checkable{cursor:pointer;transition:all .1s cubic-bezier(0,0,1,1)}.bee-tag-checkable:hover{background-color:var(--color-fill-2)}.bee-tag-checked{border-color:transparent;background-color:var(--color-fill-2)}.bee-tag-checkable.bee-tag-checked:hover{background-color:var(--color-fill-3);border-color:transparent}.bee-tag-bordered,.bee-tag-checkable.bee-tag-checked.bee-tag-bordered:hover{border-color:var(--color-border-2)}.bee-tag-size-small{height:20px;line-height:18px;font-size:12px}.bee-tag-size-medium{height:28px;line-height:26px;font-size:14px}.bee-tag-size-large{height:32px;line-height:30px;font-size:14px}.bee-tag-hide{display:none}.bee-tag-loading{opacity:.8;cursor:default}.bee-tag-icon{margin-right:4px;color:var(--color-text-2)}.bee-tag-checked.bee-tag-red{color:rgb(var(--red-6));background-color:rgb(var(--red-1));border:1px solid transparent}.bee-tag-checked.bee-tag-red .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--red-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-red:hover{background-color:rgb(var(--red-2));border-color:transparent}.bee-tag-checked.bee-tag-red.bee-tag-bordered,.bee-tag-checked.bee-tag-red.bee-tag-bordered:hover{border-color:rgb(var(--red-6))}.bee-tag-checked.bee-tag-red .bee-tag-close-icon,.bee-tag-checked.bee-tag-red .bee-tag-icon,.bee-tag-checked.bee-tag-red .bee-tag-loading-icon{color:rgb(var(--red-6))}.bee-tag-checked.bee-tag-orangered{color:rgb(var(--orangered-6));background-color:rgb(var(--orangered-1));border:1px solid transparent}.bee-tag-checked.bee-tag-orangered .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--orangered-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-orangered:hover{background-color:rgb(var(--orangered-2));border-color:transparent}.bee-tag-checked.bee-tag-orangered.bee-tag-bordered,.bee-tag-checked.bee-tag-orangered.bee-tag-bordered:hover{border-color:rgb(var(--orangered-6))}.bee-tag-checked.bee-tag-orangered .bee-tag-close-icon,.bee-tag-checked.bee-tag-orangered .bee-tag-icon,.bee-tag-checked.bee-tag-orangered .bee-tag-loading-icon{color:rgb(var(--orangered-6))}.bee-tag-checked.bee-tag-orange{color:rgb(var(--orange-6));background-color:rgb(var(--orange-1));border:1px solid transparent}.bee-tag-checked.bee-tag-orange .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--orange-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-orange:hover{background-color:rgb(var(--orange-2));border-color:transparent}.bee-tag-checked.bee-tag-orange.bee-tag-bordered,.bee-tag-checked.bee-tag-orange.bee-tag-bordered:hover{border-color:rgb(var(--orange-6))}.bee-tag-checked.bee-tag-orange .bee-tag-close-icon,.bee-tag-checked.bee-tag-orange .bee-tag-icon,.bee-tag-checked.bee-tag-orange .bee-tag-loading-icon{color:rgb(var(--orange-6))}.bee-tag-checked.bee-tag-gold{color:rgb(var(--gold-6));background-color:rgb(var(--gold-1));border:1px solid transparent}.bee-tag-checked.bee-tag-gold .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--gold-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-gold:hover{background-color:rgb(var(--gold-3));border-color:transparent}.bee-tag-checked.bee-tag-gold.bee-tag-bordered,.bee-tag-checked.bee-tag-gold.bee-tag-bordered:hover{border-color:rgb(var(--gold-6))}.bee-tag-checked.bee-tag-gold .bee-tag-close-icon,.bee-tag-checked.bee-tag-gold .bee-tag-icon,.bee-tag-checked.bee-tag-gold .bee-tag-loading-icon{color:rgb(var(--gold-6))}.bee-tag-checked.bee-tag-lime{color:rgb(var(--lime-6));background-color:rgb(var(--lime-1));border:1px solid transparent}.bee-tag-checked.bee-tag-lime .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--lime-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-lime:hover{background-color:rgb(var(--lime-2));border-color:transparent}.bee-tag-checked.bee-tag-lime.bee-tag-bordered,.bee-tag-checked.bee-tag-lime.bee-tag-bordered:hover{border-color:rgb(var(--lime-6))}.bee-tag-checked.bee-tag-lime .bee-tag-close-icon,.bee-tag-checked.bee-tag-lime .bee-tag-icon,.bee-tag-checked.bee-tag-lime .bee-tag-loading-icon{color:rgb(var(--lime-6))}.bee-tag-checked.bee-tag-green{color:rgb(var(--green-6));background-color:rgb(var(--green-1));border:1px solid transparent}.bee-tag-checked.bee-tag-green .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--green-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-green:hover{background-color:rgb(var(--green-2));border-color:transparent}.bee-tag-checked.bee-tag-green.bee-tag-bordered,.bee-tag-checked.bee-tag-green.bee-tag-bordered:hover{border-color:rgb(var(--green-6))}.bee-tag-checked.bee-tag-green .bee-tag-close-icon,.bee-tag-checked.bee-tag-green .bee-tag-icon,.bee-tag-checked.bee-tag-green .bee-tag-loading-icon{color:rgb(var(--green-6))}.bee-tag-checked.bee-tag-cyan{color:rgb(var(--cyan-6));background-color:rgb(var(--cyan-1));border:1px solid transparent}.bee-tag-checked.bee-tag-cyan .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--cyan-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-cyan:hover{background-color:rgb(var(--cyan-2));border-color:transparent}.bee-tag-checked.bee-tag-cyan.bee-tag-bordered,.bee-tag-checked.bee-tag-cyan.bee-tag-bordered:hover{border-color:rgb(var(--cyan-6))}.bee-tag-checked.bee-tag-cyan .bee-tag-close-icon,.bee-tag-checked.bee-tag-cyan .bee-tag-icon,.bee-tag-checked.bee-tag-cyan .bee-tag-loading-icon{color:rgb(var(--cyan-6))}.bee-tag-checked.bee-tag-blue{color:rgb(var(--blue-6));background-color:rgb(var(--blue-1));border:1px solid transparent}.bee-tag-checked.bee-tag-blue .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--blue-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-blue:hover{background-color:rgb(var(--blue-2));border-color:transparent}.bee-tag-checked.bee-tag-blue.bee-tag-bordered,.bee-tag-checked.bee-tag-blue.bee-tag-bordered:hover{border-color:rgb(var(--blue-6))}.bee-tag-checked.bee-tag-blue .bee-tag-close-icon,.bee-tag-checked.bee-tag-blue .bee-tag-icon,.bee-tag-checked.bee-tag-blue .bee-tag-loading-icon{color:rgb(var(--blue-6))}.bee-tag-checked.bee-tag-arcoblue{color:rgb(var(--arcoblue-6));background-color:rgb(var(--arcoblue-1));border:1px solid transparent}.bee-tag-checked.bee-tag-arcoblue .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--arcoblue-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-arcoblue:hover{background-color:rgb(var(--arcoblue-2));border-color:transparent}.bee-tag-checked.bee-tag-arcoblue.bee-tag-bordered,.bee-tag-checked.bee-tag-arcoblue.bee-tag-bordered:hover{border-color:rgb(var(--arcoblue-6))}.bee-tag-checked.bee-tag-arcoblue .bee-tag-close-icon,.bee-tag-checked.bee-tag-arcoblue .bee-tag-icon,.bee-tag-checked.bee-tag-arcoblue .bee-tag-loading-icon{color:rgb(var(--arcoblue-6))}.bee-tag-checked.bee-tag-purple{color:rgb(var(--purple-6));background-color:rgb(var(--purple-1));border:1px solid transparent}.bee-tag-checked.bee-tag-purple .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--purple-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-purple:hover{background-color:rgb(var(--purple-2));border-color:transparent}.bee-tag-checked.bee-tag-purple.bee-tag-bordered,.bee-tag-checked.bee-tag-purple.bee-tag-bordered:hover{border-color:rgb(var(--purple-6))}.bee-tag-checked.bee-tag-purple .bee-tag-close-icon,.bee-tag-checked.bee-tag-purple .bee-tag-icon,.bee-tag-checked.bee-tag-purple .bee-tag-loading-icon{color:rgb(var(--purple-6))}.bee-tag-checked.bee-tag-pinkpurple{color:rgb(var(--pinkpurple-6));background-color:rgb(var(--pinkpurple-1));border:1px solid transparent}.bee-tag-checked.bee-tag-pinkpurple .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--pinkpurple-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-pinkpurple:hover{background-color:rgb(var(--pinkpurple-2));border-color:transparent}.bee-tag-checked.bee-tag-pinkpurple.bee-tag-bordered,.bee-tag-checked.bee-tag-pinkpurple.bee-tag-bordered:hover{border-color:rgb(var(--pinkpurple-6))}.bee-tag-checked.bee-tag-pinkpurple .bee-tag-close-icon,.bee-tag-checked.bee-tag-pinkpurple .bee-tag-icon,.bee-tag-checked.bee-tag-pinkpurple .bee-tag-loading-icon{color:rgb(var(--pinkpurple-6))}.bee-tag-checked.bee-tag-magenta{color:rgb(var(--magenta-6));background-color:rgb(var(--magenta-1));border:1px solid transparent}.bee-tag-checked.bee-tag-magenta .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--magenta-2))}.bee-tag-checkable.bee-tag-checked.bee-tag-magenta:hover{background-color:rgb(var(--magenta-2));border-color:transparent}.bee-tag-checked.bee-tag-magenta.bee-tag-bordered,.bee-tag-checked.bee-tag-magenta.bee-tag-bordered:hover{border-color:rgb(var(--magenta-6))}.bee-tag-checked.bee-tag-magenta .bee-tag-close-icon,.bee-tag-checked.bee-tag-magenta .bee-tag-icon,.bee-tag-checked.bee-tag-magenta .bee-tag-loading-icon{color:rgb(var(--magenta-6))}.bee-tag-checked.bee-tag-gray{color:rgb(var(--gray-6));background-color:rgb(var(--gray-2));border:1px solid transparent}.bee-tag-checked.bee-tag-gray .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgb(var(--gray-3))}.bee-tag-checkable.bee-tag-checked.bee-tag-gray:hover{background-color:rgb(var(--gray-3));border-color:transparent}.bee-tag-checked.bee-tag-gray.bee-tag-bordered,.bee-tag-checked.bee-tag-gray.bee-tag-bordered:hover{border-color:rgb(var(--gray-6))}.bee-tag-checked.bee-tag-gray .bee-tag-close-icon,.bee-tag-checked.bee-tag-gray .bee-tag-icon,.bee-tag-checked.bee-tag-gray .bee-tag-loading-icon{color:rgb(var(--gray-6))}.bee-tag-custom-color{color:var(--color-white)}.bee-tag-custom-color .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(255,255,255,.2)}.bee-tag .bee-tag-close-btn{font-size:12px;margin-left:4px}.bee-tag .bee-tag-close-btn:focus-visible::before{box-shadow:inset 0 0 0 2px var(--color-primary-light-3)}.bee-tag .bee-tag-close-btn>svg{position:relative}.bee-tag-loading-icon{font-size:12px;margin-left:4px}body[bee-theme=dark] .bee-tag-checked{color:rgba(255,255,255,.9)}body[bee-theme=dark] .bee-tag-checked.bee-tag-red{background-color:rgba(var(--red-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-red .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--red-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-red:hover{background-color:rgba(var(--red-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-orangered{background-color:rgba(var(--orangered-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-orangered .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--orangered-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-orangered:hover{background-color:rgba(var(--orangered-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-orange{background-color:rgba(var(--orange-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-orange .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--orange-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-orange:hover{background-color:rgba(var(--orange-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-gold{background-color:rgba(var(--gold-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-gold .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--gold-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-gold:hover{background-color:rgba(var(--gold-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-lime{background-color:rgba(var(--lime-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-lime .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--lime-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-lime:hover{background-color:rgba(var(--lime-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-green{background-color:rgba(var(--green-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-green .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--green-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-green:hover{background-color:rgba(var(--green-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-cyan{background-color:rgba(var(--cyan-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-cyan .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--cyan-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-cyan:hover{background-color:rgba(var(--cyan-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-blue{background-color:rgba(var(--blue-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-blue .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--blue-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-blue:hover{background-color:rgba(var(--blue-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-arcoblue{background-color:rgba(var(--arcoblue-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-arcoblue .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--arcoblue-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-arcoblue:hover{background-color:rgba(var(--arcoblue-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-purple{background-color:rgba(var(--purple-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-purple .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--purple-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-purple:hover{background-color:rgba(var(--purple-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-pinkpurple{background-color:rgba(var(--pinkpurple-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-pinkpurple .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--pinkpurple-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-pinkpurple:hover{background-color:rgba(var(--pinkpurple-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-magenta{background-color:rgba(var(--magenta-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-magenta .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--magenta-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-magenta:hover{background-color:rgba(var(--magenta-6),.35)}body[bee-theme=dark] .bee-tag-checked.bee-tag-gray{background-color:rgba(var(--gray-6),.2)}body[bee-theme=dark] .bee-tag-checked.bee-tag-gray .bee-icon-hover.bee-tag-icon-hover:hover::before{background-color:rgba(var(--gray-6),.35)}body[bee-theme=dark] .bee-tag-checkable.bee-tag-checked.bee-tag-gray:hover{background-color:rgba(var(--gray-6),.35)}.bee-tag-rtl{direction:rtl}.bee-tag-rtl .bee-tag-icon{margin-left:4px;margin-right:0}.bee-tag-rtl .bee-tag-close-btn,.bee-tag-rtl .bee-tag-loading-icon{margin-left:0;margin-right:4px}