.logout-button__profile-button{cursor:pointer;color:#505050;background:0 0;border:none;border-radius:10px;align-items:center;gap:8px;padding:8px;transition:background .2s;display:flex}.logout-button__profile-button .logout-button__profile-name{color:#505050}.logout-button__profile-button .logout-button__profile-username{color:#646462}.logout-button__profile-button .logout-button__profile-pic-placeholder{background:#e8ddcb}.logout-button__profile-button:hover{background:#5050500d}.logout-button__profile-pic{object-fit:cover;border-radius:50%;width:34px;height:34px}.logout-button__profile-pic-placeholder{background:#faeeda4d;border-radius:50%;width:34px;height:34px;display:block}.logout-button__profile-info{flex-direction:column;align-items:flex-start;line-height:1.2;display:flex}.logout-button__profile-name{font-size:14px;font-weight:600;font-family:var(--font-poppins),"Poppins",sans-serif}.logout-button__profile-username{font-size:12px;font-family:var(--font-poppins),"Poppins",sans-serif}.logout-button__positioner{z-index:102}.logout-button__dropdown{background-color:#faf4e6;border:2px solid #e8ddcb;border-radius:25px;outline:none;flex-direction:column;gap:8px;min-width:160px;padding:8px;display:flex;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000d}.logout-button__dropdown-item{color:#505050;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;outline:none;justify-content:flex-start;align-items:center;gap:8px;width:100%;padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.logout-button__dropdown-item:hover,.logout-button__dropdown-item[data-highlighted]{background-color:#e8ddcb}
.notification-button{position:relative}.notification-button__icon{transition:transform .3s;display:flex;position:relative}.notification-button:hover .notification-button__icon{transform:scale(1.1)}.notification-button--alert .notification-button__icon{animation:.7s ease-in-out 2s wobble}.notification-button--alert .notification-button__icon:after{content:"";background:#ff3434;border:2px solid #faeeda;border-radius:50%;width:8px;height:8px;position:absolute;top:0;right:0}@keyframes wobble{0%{transform:scale(1)}15%{transform:translate(-3%)rotate(4deg)scale(1.05)}30%{transform:translate(3%)rotate(-4deg)}45%{transform:translate(-3%)rotate(3deg)}50%{scale:1.08}60%{transform:translate(3%)rotate(-3deg)}75%{transform:translate(-3%)rotate(1deg)scale(1.05)}to{transform:scale(1)}}