.sadia-web-notification-button{
    position:relative;
    width:52px;
    height:52px;
    display:none;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    border-radius:50%;
    text-decoration:none;
    background:#fff8f8;
    border:1px solid #ddcfcf;
    color:#111;
    box-shadow:0 3px 9px rgba(0,0,0,.14);
    transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.sadia-web-notification-button.is-visible{display:inline-flex}
.sadia-web-notification-button:hover{transform:translateY(-1px)}
.sadia-web-notification-button:active{transform:scale(.96)}
.sadia-web-notification-button>i{font-size:22px}
.sadia-web-notification-button.has-unread>i{animation:sadiaBellRing 1.4s ease-in-out 1}
.sadia-web-notification-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:21px;
    height:21px;
    padding:0 5px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:99px;
    background:#e11d48;
    color:#fff;
    font-size:11px;
    font-weight:900;
    border:2px solid #fff;
    line-height:1;
    box-shadow:0 2px 5px rgba(0,0,0,.22);
}
.sadia-web-notification-count.is-visible{display:flex}
.sadia-profile-notification-count{min-width:25px;height:25px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;background:#e11d48;color:#fff;font-size:12px;font-weight:900;margin-left:auto}
html.sadia-dark .sadia-web-notification-button{background:#151d27;border-color:#3a4657;color:#f8fafc}
html.sadia-dark .sadia-web-notification-count{border-color:#151d27}
@keyframes sadiaBellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
@media(max-width:600px){
    .sadia-web-notification-button{width:48px;height:48px;flex-basis:48px}
    .sadia-web-notification-count{top:-4px;right:-4px}
}