@import "theme.scss";

#guild-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;
}

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

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

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

#add-guild .pill,
#guild-list .guild .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;
}

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

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

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

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

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