@use "_vars";

.sidebar-1tnWFu {
    > .container-1NXEtd {
        #channels {
            .containerDefault-YUSmu3 {
                .unread-36eUEm {
                    border-radius: 0;
                    width: 2px;
                    height: 22px;
                    margin-top: 0;
                    transform: translateY(-50%);
                }

                .content-1gYQeQ {


                    > a > .name-28HaxV {
                        transition: transform 0.2s ease-in-out;
                    }
                }

                &:hover .content-1gYQeQ > a > .name-28HaxV,
                > modeSelected-3DmyhH > .content-1gYQeQ > a > .name-28HaxV {
                    transform: translateX(5px);
                }
            }
        }

        
    }

    > .panels-3wFtMD {
        // width: 48px;
        // height: 92px;

        > .container-YkUktl {
            .avatar-b5OQ1N {
                border-radius: vars.$avatar-roundness;
            }

            .nameTag-sc-gpq {
                width: min-content;
                flex-grow: 0;
            }

            .usernameContainer-3PPkWq {
                max-width: 17ch;
                transition: width ease-in-out 0.2s;
                display: inline-block;
            }

            &:hover .usernameContainer-3PPkWq {
                width: max-content;
            }

            > div:last-child {
                position: relative;
                margin-left: auto;

                &::before {
                    content: "";
                    width: 2.5px;
                    height: 2.5px;
                    position: absolute;
    
                    border-bottom: 2px solid var(--interactive-normal);
                    border-left: 2px solid var(--interactive-normal);
    
                    top: 50%;
    
                    transform: translateY(-50%) rotate(45deg);

                    transition: all 0.4s ease-in-out;
                }

                &::before:hover {
                    border-left: 2px solid var(--interactive-active);
                }

                > :not(:last-child) {
                    width: 0;
                    opacity: 0;
                    transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
                }

                &:hover::before {
                    opacity: 0;
                }

                &:hover > :not(:last-child) {
                    width: 32px;
                    opacity: 1;
                }
            }
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}