.SideBarAccountSection{border-top:1px solid var(--border-section);padding:.75rem 1rem;.SideBarAccountLink {display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; .SideBarAccountButton {padding: .5rem .75rem; border-radius: 6.25rem; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 90%; .SideBarAccountButtonLeft {display: flex; flex-direction: row; align-items: center; width: calc(100% - 1.5rem); .SideBarAccountInfo {display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; .SideBar-closed & {width: 100%;} .SideBarAccountBubble {height: 2rem; width: 2rem; padding: 0; margin: 0; position: relative; > img {height: 2rem; width: 2rem; border-radius: 100%;} .AccountBubbleInitial {position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size: 1rem; line-height: 2rem; text-align: center; font-family: var(--gb-font-family); font-weight: 500; text-transform: capitalize; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}} .SideBarAccountButtonText {padding-left: .5rem; width: 75%; transition: width .3s,padding-left .3s; .SideBar-closed & {padding-left: 0; width: 0;} .Text {overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis;}}}} .SideBarAccountButtonRight {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; overflow: hidden; width: 1.5rem; transition: width .3s; flex-shrink: 0; .SideBar-closed & {width: 0;} .SideBarAccountButtonIcon {width: 1.5rem; height: 1.5rem; color: var(--text-primary);}}} .SideBarAccountButton:hover {cursor: pointer; background-color: var(--border-ui);}}}