.profileDropdown{padding:var(--spacing-sm)}.profileDropdown .userInfo{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);padding-left:var(--spacing-md);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--container)70%,transparent);cursor:pointer;transition:background .3s;display:flex;position:relative}.profileDropdown .userInfo .userAvatar{text-transform:uppercase;width:2.2em;height:2.2em;line-height:100%;font-size:var(--font-lg);border-radius:var(--radius-pill);background:var(--surface);color:var(--primary);border:1px solid color-mix(in srgb,var(--border)30%,transparent);flex-shrink:0;justify-content:center;align-items:center;font-weight:500;display:flex}.profileDropdown .userInfo .userDetails{flex-direction:column;gap:.15em;width:100%;min-width:0;display:flex}.profileDropdown .userInfo .userDetails .userName{font-size:var(--font-lg);text-transform:capitalize;color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-weight:300;line-height:100%;overflow:hidden}.profileDropdown .userInfo .userDetails .userPhone{font-size:var(--font-sm);color:color-mix(in srgb,var(--text)50%,transparent);width:fit-content;font-weight:200;line-height:100%}.profileDropdown .userInfo .icon{transition:all .3s ease,transform .3s var(--bounceEase)}.profileDropdown .userInfo .arrow{opacity:0;transform:translate(50%,25%)scale(.5)}.profileDropdown .userInfo:hover{background:var(--surface)}.profileDropdown .userInfo:hover .arrow{opacity:1;transform:translate(0%)scale(1)}.profileDropdown .navItems{padding-block:var(--spacing-sm);flex-direction:column;gap:.15em;display:flex}.profileDropdown .navItems .navItem{padding:.6em var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-md);color:var(--text);opacity:.85;cursor:pointer;align-items:center;gap:.6em;font-weight:300;transition:all .2s;display:flex;position:relative}.profileDropdown .navItems .navItem .icon{opacity:.6;flex-shrink:0;transition:all .2s}.profileDropdown .navItems .navItem:hover{background:var(--container);opacity:1}.profileDropdown .navItems .navItem:hover .icon{opacity:1;color:var(--primary)}.profileDropdown .navItems span{text-align:right}.profileDropdown .logoutBtn{width:100%;padding:.6em var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-md);color:var(--text);opacity:.6;cursor:pointer;background:0 0;border:none;align-items:center;gap:.6em;font-family:inherit;font-weight:300;transition:all .2s;display:flex;position:relative}.profileDropdown .logoutBtn:after{content:"";opacity:.1;background:var(--text);width:90%;height:1px;transition:all .1s;position:absolute;top:0%;left:50%;transform:translate(-50%)}.profileDropdown .logoutBtn .icon{opacity:.4;flex-shrink:0;transition:all .2s}.profileDropdown .logoutBtn:hover{background:color-mix(in srgb,var(--error)10%,transparent);color:var(--error);opacity:1}.profileDropdown .logoutBtn:hover:after{opacity:0}.profileDropdown .logoutBtn:hover .icon{opacity:1;color:var(--error)}
