styles.less

.channel-list {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 10px;

  .search {
    position: relative;
    i {
      position: absolute;
      top: 14px;
      left: 10px;
      color: #999;
    }
    input {
      width: 258px;
      color: gray;
      padding: 9px 9px 9px 26px;
      &:focus {
        outline: 0;
      }
    }
  }
  .channel-list-heading {
    margin: 15px 0 5px 10px;
    font-weight: bold;
    color: gray;
    font-size: 12px;
    text-transform: uppercase;
  }
  .channel-list-item {
    cursor: pointer;
    color: #555;
    margin: 8px 10px;

    &:hover {
      background: #f5f5f5;
    }
    &.unread {
      color: #E8A541;
    }
    &.selected {
      color: #4597F1;
    }

    .ctrls {
      .pin {
        display: block;
        width: 20px;
        text-align: center;
        color: gray;
        transition: color 0.2s;
        &:hover {
          color: #555;
        }
        &.pinned {
          color: #006EFF;
          &:hover {
            color: darken(#006EFF, 10%);
          }
        }
      }
    }
  }
}