@import "theme.scss";

#channel-list {
    box-sizing: border-box;
    padding-top: 8px;
    overflow-y: scroll;
    height: calc(100vh - 71px - 51px); /* May be nice to figure out a way to do this without fixed heights */

    .channel.active {
        color: $interactive-active;
        background-color: $background-modifier-selected;
    }

    .channel:not(.active):hover {
        color: $interactive-hover;
        background-color: $background-modifier-hover;
    }

    .channel {
        color: $channels-default;
        margin: 0 0 2px 8px;
        padding: 0 8px;
        height: 32px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;

        .icon {
            margin-right: 6px
        }
    
        .icon svg {
            width: 20px;
            height: 20px;
        }
    
        .name {
            font-weight: 500;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    
        .modify {
            display: none;
            margin-left: 6px;
        }
    }
}

#server.privilege-modify_channels .channel:hover .modify,
#server.privilege-modify_channels .channel.active .modify {
    display: unset;
}