.bell{align-items:center;background-color:var(--el-background-secondary);border-radius:var(--el-border-radius);color:var(--secondary-color);display:flex;height:40px;padding:0 var(--el-margin-sm);width:100%}.bell:focus{outline:1px solid transparent}@media(hover:hover){.bell:focus,.bell:hover{text-decoration:none}.bell:focus .bell__counter,.bell:hover .bell__counter{color:var(--brand-color)}.bell:focus .icon,.bell:hover .icon{color:var(--brand-color);transform:scale(1.05)}}.bell--has-new .icon{color:var(--attention-color)}@media(hover:hover){.bell--has-new:hover .icon{color:var(--attention-color)}}.bell--animate .icon{animation:ring 1.5s ease}@keyframes ring{0%{transform:rotate(35deg)}12.5%{transform:rotate(-30deg)}25%{transform:rotate(25deg)}37.5%{transform:rotate(-20deg)}50%{transform:rotate(15deg)}62.5%{transform:rotate(-10deg)}75%{transform:rotate(5deg)}to{transform:rotate(0)}}.bell--disable{pointer-events:none}.bell .icon{font-size:24px;margin-right:var(--el-margin-sm);transition:transform .25s,color .25s}.bell .bell__counter{flex:1;font-size:14px;font-weight:700;line-height:1;text-align:center;transition:color .25s}.bell .bell__counter--white{color:var(--primary-color)}