.channel-list {
  height: 100%;
  background-color: #172133;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .channel {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #202c42;
    }

    &.selected {
      background-color: #202c42;
    }

    .channel-name {
      color: white;
      font-weight: bold;
    }

    .notification {
      position: absolute;
      right: 15px;
      color: #3b82f6;
    }
  }

  .channel.indented {
    padding-left: 40px;
  }

  .channel-group-title {
    padding: 10px 20px;
    color: #888;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }

  .scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  }
}
