@import "theme.scss";

#server-list-container {
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    box-sizing: border-box;
    flex: none; /* >:| NOT GONNA SHINK BOI */
    width: 72px; /* TODO: auto-calculated from content */
    height: calc(100vh - 22px);
    padding-top: 8px;
    overflow-y: scroll;
}

#server-list {
    display: flex;
    flex-flow: column;
}

#server-list::-webkit-scrollbar {
    display: none;
}

#add-server,
#server-list .server {
    cursor: pointer;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#add-server .pill,
#server-list .server .pill {
    background-color: $header-primary;
    width: 8px;
    height: 0;
    border-radius: 4px 4px;
    margin-left: -4px;
    margin-right: 8px;
    transition: height .1s ease-in-out;
}

#server-list .server.active .pill {
    height: 40px;
}

#server-list .server.unread:not(.active) .pill {
    height: 8px;
}

#add-server:hover .pill,
#server-list .server:not(.active):hover .pill {
    height: 20px;
}

#add-server img,
#server-list .server img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    transition: border-radius .1s ease-in-out;
}

#add-server:hover img,
#server-list .server:hover img,
#server-list .server.active img {
    border-radius: 16px;
}